@php
    $accept = $mediaAccept ?? [];
    $imgAccept = $accept['image']['accept'] ?? 'image/*';
    $vidAccept = $accept['video']['accept'] ?? 'video/*';
    $audAccept = $accept['audio']['accept'] ?? 'audio/*';
    $docAccept = $accept['document']['accept'] ?? '*/*';
@endphp

{{-- WhatsApp-style attachment bottom sheet --}}
<div id="attachment-sheet" class="attachment-sheet" hidden aria-hidden="true">
    <div class="attachment-sheet-backdrop" data-attach-close></div>
    <div class="attachment-sheet-panel" role="dialog" aria-label="Attach">
        <div class="attachment-sheet-handle" aria-hidden="true"></div>
        <div class="attachment-sheet-header">
            <span>Share</span>
            <button type="button" class="attachment-sheet-close-btn" data-attach-close title="Close" aria-label="Close">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        <div class="attachment-grid">
            <button type="button" class="attachment-item" data-attach-action="camera">
                <span class="attachment-icon camera"><i class="fa-solid fa-camera"></i></span>
                <span>Camera</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="gallery">
                <span class="attachment-icon gallery"><i class="fa-solid fa-image"></i></span>
                <span>Gallery</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="video">
                <span class="attachment-icon video"><i class="fa-solid fa-video"></i></span>
                <span>Video</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="audio">
                <span class="attachment-icon audio"><i class="fa-solid fa-headphones"></i></span>
                <span>Audio</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="document">
                <span class="attachment-icon document"><i class="fa-solid fa-file-lines"></i></span>
                <span>Document</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="files">
                <span class="attachment-icon files"><i class="fa-solid fa-folder-open"></i></span>
                <span>Files</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="category">
                <span class="attachment-icon category"><i class="fa-solid fa-tags"></i></span>
                <span>Category</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="contact">
                <span class="attachment-icon contact"><i class="fa-solid fa-user"></i></span>
                <span>Contact</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="location">
                <span class="attachment-icon location"><i class="fa-solid fa-location-dot"></i></span>
                <span>Location</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="poll">
                <span class="attachment-icon poll"><i class="fa-solid fa-chart-column"></i></span>
                <span>Poll</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="gif">
                <span class="attachment-icon gif"><i class="fa-solid fa-film"></i></span>
                <span>GIF</span>
            </button>
            <button type="button" class="attachment-item" data-attach-action="sticker">
                <span class="attachment-icon sticker"><i class="fa-regular fa-face-smile"></i></span>
                <span>Sticker</span>
            </button>
        </div>
    </div>
</div>

<input type="file" id="attach-input-document" hidden accept="{{ $docAccept }}">
<input type="file" id="attach-input-files" hidden accept="{{ $docAccept }}" multiple>
<input type="file" id="attach-input-camera-fallback" hidden accept="{{ $imgAccept }},{{ $vidAccept }}" capture="environment">
<input type="file" id="attach-input-gallery" hidden accept="{{ $imgAccept }},{{ $vidAccept }}" multiple>
<input type="file" id="attach-input-audio" hidden accept="{{ $audAccept }}">
<input type="file" id="attach-input-video" hidden accept="{{ $vidAccept }}" multiple>

<div id="camera-capture-modal" class="camera-capture-modal" hidden aria-hidden="true">
    <div class="camera-capture-inner">
        <div class="camera-toolbar">
            <button type="button" id="camera-btn-close" class="camera-tool-btn" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
            <div class="camera-mode-tabs">
                <button type="button" id="camera-mode-photo" class="camera-mode active">Photo</button>
                <button type="button" id="camera-mode-video" class="camera-mode">Video</button>
            </div>
            <div class="camera-toolbar-actions">
                <button type="button" id="camera-btn-flash" class="camera-tool-btn" aria-label="Flash off" title="Flash">
                    <i class="fa-solid fa-bolt-slash"></i>
                </button>
                <button type="button" id="camera-btn-flip" class="camera-tool-btn" aria-label="Flip camera" title="Flip camera">
                    <i class="fa-solid fa-camera-rotate"></i>
                </button>
            </div>
        </div>
        <div id="camera-preview-wrap" class="camera-preview-wrap">
            <video id="camera-preview-video" playsinline muted autoplay></video>
            <canvas id="camera-preview-canvas" hidden></canvas>
            <div id="camera-grid-overlay" class="camera-grid-overlay hidden" aria-hidden="true"></div>
            <div id="camera-flash-overlay" class="camera-flash-overlay" aria-hidden="true"></div>
            <span id="camera-recording-indicator" class="camera-recording-indicator hidden"><i class="fa-solid fa-circle"></i> REC</span>
            <span id="camera-timer-countdown" class="camera-timer-countdown hidden" aria-live="polite"></span>
            <div class="camera-side-tools">
                <button type="button" id="camera-btn-timer" class="camera-side-btn" aria-label="Timer off" title="Timer">
                    <i class="fa-regular fa-clock"></i>
                    <span id="camera-timer-label" class="camera-side-label hidden"></span>
                </button>
                <button type="button" id="camera-btn-grid" class="camera-side-btn" aria-label="Grid off" title="Grid">
                    <i class="fa-solid fa-grip"></i>
                </button>
            </div>
            <div id="camera-zoom-bar" class="camera-zoom-bar hidden">
                <button type="button" id="camera-zoom-out" class="camera-zoom-btn" aria-label="Zoom out"><i class="fa-solid fa-minus"></i></button>
                <span id="camera-zoom-label" class="camera-zoom-label">1×</span>
                <button type="button" id="camera-zoom-in" class="camera-zoom-btn" aria-label="Zoom in"><i class="fa-solid fa-plus"></i></button>
            </div>
        </div>
        <div id="camera-review-wrap" class="camera-review-wrap hidden">
            <div id="camera-review-media" class="camera-review-media"></div>
        </div>
        <div class="camera-controls">
            <button type="button" id="camera-btn-gallery" class="camera-gallery-btn" aria-label="Open gallery" title="Gallery">
                <i class="fa-solid fa-image"></i>
            </button>
            <button type="button" id="camera-btn-retake" class="camera-secondary hidden">Retake</button>
            <button type="button" id="camera-btn-capture" class="camera-shutter" aria-label="Capture"></button>
            <button type="button" id="camera-btn-send" class="camera-send hidden" aria-label="Send"><i class="fa-solid fa-paper-plane"></i></button>
            <span class="camera-controls-spacer" aria-hidden="true"></span>
        </div>
    </div>
</div>

@include('components.attachment-menu-modals')