@extends('layouts.admin')
@section('page-title', 'Media Library')

@section('header-actions')
    <button onclick="document.getElementById('upload-input').click()" class="btn-admin-primary">
        + Upload File
    </button>
    <input type="file" id="upload-input" multiple accept="image/*,application/pdf"
           style="display:none" onchange="uploadFiles(this.files)">
@endsection

@section('content')
<style>
.media-toolbar { display:flex; gap:12px; margin-bottom:20px; align-items:center; flex-wrap:wrap; }
.upload-zone { border:2px dashed var(--border); border-radius:12px; padding:40px; text-align:center; margin-bottom:24px; background:var(--card); transition:all .2s; cursor:pointer; }
.upload-zone.dragover { border-color:var(--accent); background:rgba(30,111,217,.04); }
.upload-zone-icon { font-size:32px; margin-bottom:12px; }
.upload-zone p { color:var(--muted); font-size:13px; }
.upload-zone strong { color:var(--accent); }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.media-item { background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; position:relative; cursor:pointer; transition:all .2s; }
.media-item:hover { border-color:var(--accent); box-shadow:0 4px 20px rgba(0,0,0,.08); }
.media-item.selected { border-color:var(--accent); outline:2px solid var(--accent); }
.media-thumb { width:100%; height:120px; object-fit:cover; background:var(--surface); }
.media-thumb-placeholder { width:100%; height:120px; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:28px; }
.media-info { padding:8px 10px; }
.media-name { font-size:11px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.media-size { font-size:10px; color:var(--muted); margin-top:2px; }
.media-delete { position:absolute; top:6px; right:6px; width:24px; height:24px; background:rgba(229,57,53,.85); border:none; border-radius:50%; color:#fff; font-size:12px; cursor:pointer; display:none; align-items:center; justify-content:center; }
.media-item:hover .media-delete { display:flex; }
.upload-progress { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:16px; display:none; }
.progress-bar-wrap { background:var(--border); border-radius:100px; height:6px; margin-top:8px; }
.progress-bar { background:var(--accent); height:6px; border-radius:100px; transition:width .3s; }
.copy-url-toast { position:fixed; bottom:24px; right:24px; background:var(--primary); color:#fff; padding:10px 18px; border-radius:8px; font-size:13px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:999; }
.copy-url-toast.show { opacity:1; }
</style>

{{-- Upload zone --}}
<div class="upload-zone" id="drop-zone"
     ondragover="event.preventDefault(); this.classList.add('dragover')"
     ondragleave="this.classList.remove('dragover')"
     ondrop="handleDrop(event)"
     onclick="document.getElementById('upload-input').click()">
    <div class="upload-zone-icon">🖼</div>
    <p><strong>Klik untuk upload</strong> atau drag & drop file ke sini</p>
    <p style="margin-top:4px;">JPG, PNG, WebP, SVG, PDF · Maks 10MB per file</p>
</div>

{{-- Progress --}}
<div class="upload-progress" id="upload-progress">
    <span style="font-size:13px; font-weight:500;">Mengupload...</span>
    <div class="progress-bar-wrap"><div class="progress-bar" id="progress-bar" style="width:0%"></div></div>
</div>

{{-- Toolbar --}}
<div class="media-toolbar">
    <select class="form-select select-brand" onchange="window.location.href='?brand_id='+this.value">
        <option value="">Semua Brand</option>
        @foreach ($brands as $brand)
            <option value="{{ $brand->id }}" {{ $brandId == $brand->id ? 'selected' : '' }}>{{ $brand->name }}</option>
        @endforeach
    </select>
    <span style="font-size:13px; color:var(--muted);">{{ $files->total() }} file</span>
</div>

{{-- Grid --}}
<div class="media-grid" id="media-grid">
    @forelse ($files as $file)
        <div class="media-item" data-url="{{ $file->url }}" onclick="copyUrl('{{ $file->url }}', event)">
            @if ($file->is_image)
                <img class="media-thumb" src="{{ $file->url }}" alt="{{ $file->alt_text ?? $file->filename }}"
                     loading="lazy">
            @else
                <div class="media-thumb-placeholder">📄</div>
            @endif
            <div class="media-info">
                <div class="media-name">{{ $file->filename }}</div>
                <div class="media-size">{{ $file->human_size }}</div>
            </div>
            <button class="media-delete" onclick="deleteMedia({{ $file->id }}, event)" title="Hapus">✕</button>
        </div>
    @empty
        <div style="grid-column:1/-1; text-align:center; padding:60px; color:var(--muted);">
            <p style="font-size:32px; margin-bottom:8px;">🖼</p>
            <p>Belum ada file. Upload sekarang.</p>
        </div>
    @endforelse
</div>

<div class="pagination">{{ $files->links() }}</div>

<div class="copy-url-toast" id="toast">URL disalin ✓</div>

@endsection

@push('scripts')
<script>
const uploadUrl  = '{{ route('admin.media.upload') }}';
const deleteBase = '{{ url('admin/media') }}';
const csrfToken  = '{{ csrf_token() }}';
const brandId    = '{{ $brandId ?? '' }}';

async function uploadFiles(fileList) {
    const progress = document.getElementById('upload-progress');
    const bar      = document.getElementById('progress-bar');
    progress.style.display = 'block';

    const files = Array.from(fileList);
    let done = 0;

    for (const file of files) {
        const fd = new FormData();
        fd.append('file', file);
        fd.append('_token', csrfToken);
        if (brandId) fd.append('brand_id', brandId);

        try {
            const res  = await fetch(uploadUrl, { method: 'POST', body: fd });
            const data = await res.json();
            if (data.url) prependMedia(data);
        } catch (e) {
            console.error(e);
        }

        done++;
        bar.style.width = (done / files.length * 100) + '%';
    }

    setTimeout(() => { progress.style.display = 'none'; bar.style.width = '0%'; }, 800);
    document.getElementById('upload-input').value = '';
}

function prependMedia(data) {
    const grid = document.getElementById('media-grid');
    const div  = document.createElement('div');
    div.className = 'media-item';
    div.dataset.url = data.url;
    div.onclick = (e) => copyUrl(data.url, e);
    div.innerHTML = `
        <img class="media-thumb" src="${data.url}" loading="lazy">
        <div class="media-info">
            <div class="media-name">${data.filename}</div>
            <div class="media-size">${data.size}</div>
        </div>
        <button class="media-delete" onclick="deleteMedia(${data.id}, event)" title="Hapus">✕</button>`;
    grid.prepend(div);
}

async function deleteMedia(id, event) {
    event.stopPropagation();
    if (!confirm('Hapus file ini?')) return;

    const res = await fetch(`${deleteBase}/${id}`, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
    });

    if (res.ok) {
        event.target.closest('.media-item').remove();
    }
}

function copyUrl(url, event) {
    event.stopPropagation();
    navigator.clipboard.writeText(url).then(() => {
        const toast = document.getElementById('toast');
        toast.classList.add('show');
        setTimeout(() => toast.classList.remove('show'), 2000);
    });
}

function handleDrop(event) {
    event.preventDefault();
    document.getElementById('drop-zone').classList.remove('dragover');
    uploadFiles(event.dataTransfer.files);
}
</script>
@endpush