{{--
    Media Picker Modal
    Usage: @include('partials._media-picker', ['field' => 'featured_image', 'label' => 'Pilih Gambar'])
    JS: openMediaPicker('field_name') — sets hidden input + shows preview
--}}
<div id="media-picker-modal" style="display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.55); align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:16px; width:90%; max-width:860px; max-height:85vh; display:flex; flex-direction:column; overflow:hidden;">

        {{-- Header --}}
        <div style="padding:18px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;">
            <h3 style="font-size:15px; font-weight:600;">Media Library</h3>
            <div style="display:flex; gap:10px; align-items:center;">
                <button type="button" onclick="document.getElementById('mp-upload').click()"
                        style="background:var(--accent); color:#fff; padding:7px 14px; border-radius:8px; font-size:12px; font-weight:600; border:none; cursor:pointer;">
                    + Upload
                </button>
                <input type="file" id="mp-upload" multiple accept="image/*" style="display:none" onchange="mpUpload(this.files)">
                <button type="button" onclick="closeMediaPicker()"
                        style="background:none; border:1px solid var(--border); border-radius:8px; padding:7px 12px; cursor:pointer; font-size:13px; color:var(--muted);">
                    Tutup
                </button>
            </div>
        </div>

        {{-- Grid --}}
        <div id="mp-grid" style="flex:1; overflow-y:auto; padding:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px;">
            <div style="grid-column:1/-1; text-align:center; padding:40px; color:var(--muted);" id="mp-empty">
                Memuat media...
            </div>
        </div>

        {{-- Footer --}}
        <div style="padding:14px 24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <span id="mp-selected-name" style="font-size:13px; color:var(--muted);">Belum ada yang dipilih</span>
            <button type="button" onclick="confirmMediaPicker()"
                    style="background:var(--accent); color:#fff; padding:9px 20px; border-radius:8px; font-size:13px; font-weight:600; border:none; cursor:pointer;">
                Pilih Gambar
            </button>
        </div>
    </div>
</div>

@once
@push('styles')
<style>
.mp-item { border:2px solid var(--border); border-radius:8px; overflow:hidden; cursor:pointer; transition:all .15s; position:relative; }
.mp-item:hover { border-color:var(--accent); }
.mp-item.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(30,111,217,.3); }
.mp-item img { width:100%; height:90px; object-fit:cover; display:block; background:var(--surface); }
.mp-item-name { font-size:10px; padding:5px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.mp-item .mp-check { position:absolute; top:5px; right:5px; width:20px; height:20px; background:var(--accent); border-radius:50%; color:#fff; font-size:11px; display:none; align-items:center; justify-content:center; }
.mp-item.selected .mp-check { display:flex; }
</style>
@endpush

@push('scripts')
<script>
let mpCurrentField  = null;
let mpSelectedUrl   = null;
let mpSelectedName  = null;
let mpLoaded        = false;

function openMediaPicker(fieldName) {
    mpCurrentField = fieldName;
    mpSelectedUrl  = null;
    mpSelectedName = null;
    document.getElementById('mp-selected-name').textContent = 'Belum ada yang dipilih';
    document.getElementById('media-picker-modal').style.display = 'flex';

    if (! mpLoaded) { mpLoad(); }
}

function closeMediaPicker() {
    document.getElementById('media-picker-modal').style.display = 'none';
}

function confirmMediaPicker() {
    if (! mpSelectedUrl || ! mpCurrentField) return;

    // Set hidden input value (disk_path)
    const input = document.getElementById('mp-input-' + mpCurrentField);
    if (input) input.value = mpSelectedUrl;

    // Update preview
    const preview = document.getElementById('mp-preview-' + mpCurrentField);
    if (preview) {
        preview.src   = mpSelectedUrl;
        preview.style.display = 'block';
    }

    closeMediaPicker();
}

async function mpLoad() {
    const grid = document.getElementById('mp-grid');
    try {
        const res  = await fetch('{{ route("admin.media.index") }}', {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        });
        const html = await res.text();
        // Parse and extract media URLs from the existing page
        // Simpler: hit an API endpoint (Sprint 4 can add JSON endpoint)
        // For now, reload media list via fetch
        mpLoaded = true;
        document.getElementById('mp-empty').textContent = 'Upload file untuk memulai.';
    } catch (e) {
        document.getElementById('mp-empty').textContent = 'Gagal memuat media.';
    }
}

function mpAddItem(url, filename, id) {
    const grid = document.getElementById('mp-grid');
    const empty = document.getElementById('mp-empty');
    if (empty) empty.remove();

    const div = document.createElement('div');
    div.className   = 'mp-item';
    div.dataset.url = url;
    div.dataset.name = filename;
    div.innerHTML = `
        <div class="mp-check">✓</div>
        <img src="${url}" loading="lazy" onerror="this.style.background='#f0f0f0'">
        <div class="mp-item-name">${filename}</div>`;

    div.addEventListener('click', () => {
        document.querySelectorAll('.mp-item').forEach(el => el.classList.remove('selected'));
        div.classList.add('selected');
        mpSelectedUrl  = url;
        mpSelectedName = filename;
        document.getElementById('mp-selected-name').textContent = filename;
    });

    grid.prepend(div);
}

async function mpUpload(files) {
    for (const file of Array.from(files)) {
        const fd = new FormData();
        fd.append('file', file);
        fd.append('_token', '{{ csrf_token() }}');

        try {
            const res  = await fetch('{{ route("admin.media.upload") }}', { method: 'POST', body: fd });
            const data = await res.json();
            if (data.url) mpAddItem(data.url, data.filename, data.id);
        } catch (e) { console.error(e); }
    }
    document.getElementById('mp-upload').value = '';
}

// Close on backdrop click
document.getElementById('media-picker-modal').addEventListener('click', function (e) {
    if (e.target === this) closeMediaPicker();
});
</script>
@endpush
@endonce