@extends('layouts.app')

@section('content')
<div class="flex flex-col gap-6">
    <div class="grid lg:grid-cols-3 gap-4">
        <div class="lg:col-span-2 p-5 rounded-2xl bg-slate-950/55 text-white border border-white/10 shadow-xl">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h2 class="text-lg font-semibold tracking-wide">UPLOAD</h2>
                </div>
            </div>

            <form id="uploadForm" method="POST" action="{{ route('images.store') }}" enctype="multipart/form-data" class="mt-4 space-y-4">
                @csrf
                <div id="dropzone" class="border-2 border-dashed border-cyan-300/60 rounded-2xl p-6 bg-white/5 hover:bg-white/10 transition cursor-pointer">
                    <input id="fileInput" type="file" name="images[]" multiple required class="hidden">
                    <div class="flex flex-col items-center justify-center gap-2 text-center">
                        <div class="font-semibold tracking-wide">UPLOAD FILE / DRAG CTRL + V</div>
                        <div id="fileHint" class="text-xs text-white/60">
                            Max {{ config('photohost.upload_max_files') }} file • {{ config('photohost.upload_max_mb') }}MB / file • jpg/png/webp/gif
                        </div>
                    </div>
                </div>

                <!-- Per-file custom name list (auto-generate + editable) -->
                <div id="fileListWrap" class="hidden rounded-2xl border border-white/10 bg-white/5">
                    <div class="px-4 py-3 border-b border-white/10 flex items-center justify-between">
                        <div>
                            <div class="text-sm font-semibold">Files terpilih</div>
                            <div class="text-xs text-white/60">Manage Slug &amp; Nama File</div>
                        </div>
                        <div class="flex items-center gap-2">
                            <button type="button" id="btnClear" class="text-xs px-3 py-1.5 rounded-xl bg-yellow-400 hover:bg-yellow-300 text-slate-950 font-extrabold border border-yellow-300/40">Clear</button>
                            <button type="button" id="btnRegenerate" class="text-xs px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10">Regenerate</button>
                        </div>
                    </div>
                    <div id="fileList" class="divide-y divide-white/10"></div>
                </div>

                <div class="flex flex-col sm:flex-row gap-3 sm:items-end">
                    <div class="flex-1">
                        <label class="text-sm text-white/80">Masukkan ke album (opsional)</label>
                        <select name="album_id" class="mt-1 w-full rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-white">
                            <option value="">— Tidak ada —</option>
                            @foreach($albums as $album)
                                <option value="{{ $album->id }}">{{ $album->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col gap-2 sm:items-end">
                        <label class="flex items-center gap-2 text-xs text-white/70 select-none">
                            <input id="toggleCompress" type="checkbox" class="accent-cyan-400" checked>
                            Auto compress & resize
                        </label>

                        <div class="flex items-center gap-2">
                            <button id="btnUpload" class="px-5 py-2.5 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 font-bold shadow-lg shadow-cyan-500/10">
                                Upload
                            </button>
                            <button type="button" id="btnCancelUpload" class="hidden px-4 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-white text-sm">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>

                <div id="uploadProgressWrap" class="hidden">
                    <div class="flex items-center justify-between text-xs text-white/70">
                        <span id="uploadProgressText">Uploading…</span>
                        <span id="uploadProgressPct">0%</span>
                    </div>
                    <div class="mt-2 h-2 rounded-full bg-white/10 overflow-hidden">
                        <div id="uploadProgressBar" class="h-2 rounded-full bg-cyan-400" style="width:0%"></div>
                    </div>
                </div>
            </form>
        </div>

        <div class="p-5 rounded-2xl bg-slate-950/55 text-white border border-white/10 shadow-xl">
            <h3 class="font-semibold">Albums</h3>
            <p class="text-sm text-white/70 mt-1">Kelola album untuk mengatur assets.</p>
            <a href="{{ route('albums.create') }}" class="mt-4 inline-flex items-center justify-center w-full px-4 py-2.5 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 font-extrabold shadow-lg shadow-cyan-500/10">
                ADD ALBUM
            </a>

            <button type="button" id="btnAlbumList" class="mt-3 inline-flex items-center justify-center w-full px-4 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 font-semibold">
                Lihat List Album
            </button>
        </div>
    </div>

    <div class="p-5 rounded-2xl bg-slate-950/55 text-white border border-white/10 shadow-xl">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
                <h2 class="text-lg font-extrabold tracking-wide">ASET</h2>
            </div>

            <div class="flex flex-col sm:flex-row gap-2 sm:items-center">
                <button type="button" id="btnCopyAll" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-xs">COPY ALL LINK</button>
                <button type="button" id="btnSelectAll" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-xs">SELECT ALL</button>
                <form method="GET" action="{{ route('dashboard') }}" class="flex gap-2" id="searchForm">
                    <input id="searchBox" name="q" value="{{ $q }}" placeholder="Search"
                           class="w-64 max-w-full rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-sm text-white placeholder:text-white/50">
                </form>
            </div>
        </div>

        <!-- Bulk actions (muncul saat ada yang di-select) -->
        <div id="bulkBar" class="hidden mt-4 p-3 rounded-2xl bg-white/5 border border-white/10">
            <div class="flex flex-col sm:flex-row sm:items-center gap-3">
                <div class="text-xs text-white/70">
                    <span class="font-semibold" id="bulkCount">0</span> file dipilih
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <button type="button" id="btnBulkCopy" class="px-3 py-2 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 font-extrabold text-xs">COPY LINKS</button>

                    <form id="bulkMoveForm" method="POST" action="{{ route('images.bulk_move') }}" class="flex items-center gap-2">
                        @csrf
                        <div id="bulkMoveIds" class="hidden"></div>
                        <select name="album_id" class="rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-xs text-white">
                            <option value="">— Pindah: Tidak ada —</option>
                            @foreach($albums as $album)
                                <option value="{{ $album->id }}">{{ $album->name }}</option>
                            @endforeach
                        </select>
                        <button class="px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-xs">Move</button>
                    </form>

                    <form id="bulkDeleteForm" method="POST" action="{{ route('images.bulk_delete') }}" onsubmit="return confirm('Hapus semua file terpilih?');">
                        @csrf
                        <div id="bulkDeleteIds" class="hidden"></div>
                        <button class="px-3 py-2 rounded-xl bg-rose-600 hover:bg-rose-500 text-xs font-semibold">Delete</button>
                    </form>

                    <button type="button" id="btnBulkClear" class="px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-xs">Clear</button>
                </div>
            </div>
        </div>

        <div id="assetGrid" class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5">
            @include('dashboard.partials.image-cards', ['images' => $images])
        </div>

        <div id="infiniteSentinel" class="h-6"></div>

        <div class="mt-6 hidden" id="paginationLinks">
            {{ $images->links() }}
        </div>
    </div>
</div>

<!-- Popup preview thumbnail (untuk upload) -->
<div id="previewModal" class="fixed inset-0 hidden items-center justify-center z-50" aria-hidden="true">
  <div class="absolute inset-0 bg-black/70 backdrop-blur" data-modal-close></div>
  <div class="relative w-[min(90vw,900px)] max-h-[85vh] rounded-2xl border border-white/10 bg-slate-950/80 shadow-2xl overflow-hidden">
    <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
      <div class="min-w-0">
        <div id="previewTitle" class="text-sm font-semibold truncate">Preview</div>
        <div id="previewMeta" class="text-xs text-white/60 truncate"></div>
      </div>
      <button type="button" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-xs" data-modal-close>
        Tutup
      </button>
    </div>
    <div class="p-4 grid place-items-center">
      <img id="previewImg" alt="preview" class="max-h-[70vh] w-auto rounded-xl border border-white/10 bg-black/40" />
    </div>
  </div>
</div>

<!-- Modal Edit (slug / nama dashboard) -->
<div id="editModal" class="fixed inset-0 hidden items-center justify-center z-50" aria-hidden="true">
  <div class="absolute inset-0 bg-black/70 backdrop-blur" data-edit-close></div>
  <div class="relative w-[min(92vw,720px)] rounded-2xl border border-white/10 bg-slate-950/85 shadow-2xl overflow-hidden">
    <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
      <div class="min-w-0">
        <div class="text-sm font-semibold">Edit</div>
        <div id="editSub" class="text-xs text-white/60 truncate"></div>
      </div>
      <button type="button" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-xs" data-edit-close>
        Tutup
      </button>
    </div>
    <div class="p-4">
      <div class="flex flex-wrap gap-2">
        <button type="button" id="tabSlug" class="px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-xs font-semibold">EDIT SLUG</button>
        <button type="button" id="tabName" class="px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-xs font-semibold">EDIT NAMA FILE</button>
      </div>

      <div id="paneSlug" class="mt-4">
        <div class="text-xs text-white/60 mb-2">Slug menentukan URL: <span class="font-semibold">/aset/&lt;slug&gt;</span> (spasi jadi -). Jika bentrok, sistem otomatis tambah suffix.</div>
        <form id="formSlug" method="POST" action="#" class="flex flex-col gap-3">
          @csrf
          @method('PATCH')
          <input id="inputSlug" name="public_name" placeholder="contoh: gambar-keren" class="w-full rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-sm text-white placeholder:text-white/50" />
          <div class="flex gap-2">
            <button class="px-4 py-2 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 text-sm font-bold">Save</button>
            <button type="button" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-sm" data-edit-close>Cancel</button>
          </div>
        </form>
      </div>

      <div id="paneName" class="mt-4 hidden">
        <div class="text-xs text-white/60 mb-2">Nama ini hanya untuk keterangan di dashboard (tidak mengubah URL).</div>
        <form id="formName" method="POST" action="#" class="flex flex-col gap-3">
          @csrf
          @method('PATCH')
          <input id="inputName" name="display_name" placeholder="contoh: Banner Promo Februari" class="w-full rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-sm text-white placeholder:text-white/50" />
          <div class="flex gap-2">
            <button class="px-4 py-2 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 text-sm font-bold">Save</button>
            <button type="button" class="px-4 py-2 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-sm" data-edit-close>Cancel</button>
          </div>
        </form>
      </div>

      {{-- SHARE / VISIBILITY removed (all assets are public) --}}
    </div>
  </div>
</div>

<!-- Modal List Album (klik di luar TIDAK menutup) -->
<div id="albumModal" class="fixed inset-0 hidden items-center justify-center z-50" aria-hidden="true">
  <div class="absolute inset-0 bg-black/70 backdrop-blur"></div>
  <div class="relative w-[min(92vw,720px)] rounded-2xl border border-white/10 bg-slate-950/90 shadow-2xl overflow-hidden">
    <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
      <div class="min-w-0">
        <div class="text-sm font-extrabold tracking-wide">LIST ALBUM</div>
        <div class="text-xs text-white/60 truncate">Album yang sudah dibuat</div>
      </div>
      <button type="button" id="btnAlbumClose" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-xs font-semibold">
        Tutup
      </button>
    </div>

    <div class="p-4">
      <div class="space-y-2 max-h-[60vh] overflow-auto pr-1">
        @forelse($albums as $album)
          <a href="{{ route('albums.show', $album) }}" class="flex items-center justify-between gap-3 px-3 py-2 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10">
            <div class="min-w-0">
              <div class="text-sm font-semibold truncate">{{ $album->name }}</div>
              <div class="text-xs text-white/60">{{ $album->images_count ?? 0 }} item</div>
            </div>
            <span class="text-xs text-cyan-300 font-semibold">Open →</span>
          </a>
        @empty
          <div class="text-sm text-white/70">Belum ada album.</div>
        @endforelse
      </div>
      <div class="mt-4">
        <a href="{{ route('albums.create') }}" class="inline-flex items-center justify-center w-full px-4 py-2.5 rounded-xl bg-cyan-400 hover:bg-cyan-300 text-slate-950 font-extrabold shadow-lg shadow-cyan-500/10">
          ADD ALBUM
        </a>
      </div>
    </div>
  </div>
</div>

<script>
(() => {
  const dropzone = document.getElementById('dropzone');
  const fileInput = document.getElementById('fileInput');
  const fileHint = document.getElementById('fileHint');
  const btnClear = document.getElementById('btnClear');
  const fileListWrap = document.getElementById('fileListWrap');
  const fileList = document.getElementById('fileList');
  const btnRegenerate = document.getElementById('btnRegenerate');
  const btnCopyAll = document.getElementById('btnCopyAll');
  const btnSelectAll = document.getElementById('btnSelectAll');
  const searchForm = document.getElementById('searchForm');
  const searchBox = document.getElementById('searchBox');
  const btnAlbumList = document.getElementById('btnAlbumList');
  const albumModal = document.getElementById('albumModal');
  const btnAlbumClose = document.getElementById('btnAlbumClose');

  const uploadForm = document.getElementById('uploadForm');
  const toggleCompress = document.getElementById('toggleCompress');
  const btnCancelUpload = document.getElementById('btnCancelUpload');
  const uploadProgressWrap = document.getElementById('uploadProgressWrap');
  const uploadProgressBar = document.getElementById('uploadProgressBar');
  const uploadProgressPct = document.getElementById('uploadProgressPct');
  const uploadProgressText = document.getElementById('uploadProgressText');

  const assetGrid = document.getElementById('assetGrid');
  const bulkBar = document.getElementById('bulkBar');
  const bulkCount = document.getElementById('bulkCount');
  const btnBulkCopy = document.getElementById('btnBulkCopy');
  const btnBulkClear = document.getElementById('btnBulkClear');
  const bulkMoveIds = document.getElementById('bulkMoveIds');
  const bulkDeleteIds = document.getElementById('bulkDeleteIds');

  const infiniteSentinel = document.getElementById('infiniteSentinel');

  // Auto search (tanpa tombol / tanpa enter)
  let searchTimer = null;
  const submitSearch = () => {
    if (!searchForm) return;
    searchForm.requestSubmit ? searchForm.requestSubmit() : searchForm.submit();
  };
  searchBox?.addEventListener('input', () => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(submitSearch, 250);
  });
  searchBox?.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') e.preventDefault();
  });

  const state = {
    manualSlug: {},    // idx -> true jika user edit custom slug per file
    manualDisplay: {}, // idx -> true jika user edit custom nama file per file
    urls: [],   // objectURL previews
    selected: new Set(),
    nextPageUrl: @json($images->nextPageUrl()),
    isLoadingMore: false,
    uploadXhr: null,
  };

  const randomName = (len = 12) => {
    const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
    let out = '';
    for (let i = 0; i < len; i++) out += chars[Math.floor(Math.random() * chars.length)];
    return out;
  };

  const baseHint = fileHint ? fileHint.textContent : '';
  const updateHint = () => {
    const n = fileInput.files?.length || 0;
    if (!fileHint) return;
    fileHint.textContent = n ? `${n} file dipilih.` : baseHint;
  };

  const slugify = (s) => {
    if (!s) return '';
    return String(s)
      .trim()
      .toLowerCase()
      .replace(/\s+/g, '-')
      .replace(/[^a-z0-9\-_.]/g, '')
      .replace(/^[-._]+|[-._]+$/g, '')
      .slice(0, 120);
  };

  const niceSize = (bytes) => {
    const kb = bytes / 1024;
    if (kb < 1024) return `${Math.round(kb)} KB`;
    return `${(kb/1024).toFixed(1)} MB`;
  };

  const extFromMime = (mime, fallbackExt) => {
    if (!mime) return fallbackExt || 'bin';
    if (mime.includes('jpeg')) return 'jpg';
    if (mime.includes('png')) return 'png';
    if (mime.includes('webp')) return 'webp';
    if (mime.includes('gif')) return 'gif';
    return fallbackExt || 'bin';
  };

  const compressAndResize = async (file) => {
    // Jangan sentuh GIF (biar animasi tidak rusak)
    if (!file || file.type === 'image/gif') return file;

    // Kalau kecil, biarkan
    if (file.size < 350 * 1024) return file;

    const maxW = 1920;
    const maxH = 1920;

    const img = await createImageBitmap(file);
    let { width, height } = img;
    const ratio = Math.min(1, maxW / width, maxH / height);
    const targetW = Math.max(1, Math.round(width * ratio));
    const targetH = Math.max(1, Math.round(height * ratio));

    // Kalau tidak perlu resize dan file sudah webp/jpg kecil, skip
    const shouldResize = ratio < 1;
    const shouldReencode = file.size > 800 * 1024;
    if (!shouldResize && !shouldReencode) return file;

    const canvas = document.createElement('canvas');
    canvas.width = targetW;
    canvas.height = targetH;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, targetW, targetH);

    const outType = file.type === 'image/png' ? 'image/webp' : 'image/jpeg';
    const quality = outType === 'image/webp' ? 0.82 : 0.85;

    const blob = await new Promise((resolve) => canvas.toBlob(resolve, outType, quality));
    if (!blob) return file;

    const base = (file.name || 'image').replace(/\.[^/.]+$/, '');
    const newName = `${base}.${extFromMime(outType, 'jpg')}`;
    return new File([blob], newName, { type: outType, lastModified: Date.now() });
  };

  const prepareUploadFiles = async (files) => {
    const out = [];
    for (const f of files) {
      if (toggleCompress?.checked) {
        try { out.push(await compressAndResize(f)); }
        catch (e) { out.push(f); }
      } else {
        out.push(f);
      }
    }
    return out;
  };

  // Modal preview (thumbnail popup)
  const modal = document.getElementById('previewModal');
  const modalImg = document.getElementById('previewImg');
  const modalTitle = document.getElementById('previewTitle');
  const modalMeta = document.getElementById('previewMeta');

  const closePreview = () => {
    if (!modal) return;
    modal.classList.add('hidden');
    modal.classList.remove('flex');
    modal.setAttribute('aria-hidden', 'true');
    if (modalImg) modalImg.src = '';
  };

  const openPreview = (src, file) => {
    if (!modal || !modalImg) return;
    modalImg.src = src;
    if (modalTitle) modalTitle.textContent = file?.name || 'Preview';
    if (modalMeta) modalMeta.textContent = `${niceSize(file?.size || 0)} • ${file?.type || 'file'}`;
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    modal.setAttribute('aria-hidden', 'false');
  };

  modal?.querySelectorAll('[data-modal-close]')?.forEach((el) => {
    el.addEventListener('click', closePreview);
  });
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closePreview();
      try { closeEdit?.(); } catch (err) {}
    }
  });

  const guessBaseFromFilename = (file) => {
    const n = (file?.name || '').replace(/\.[^/.]+$/, '');
    return slugify(n);
  };

  // Default custom slug mengikuti nama file (tanpa akhiran -1, -2, dst)
  const generateNameForIndex = (_idx, file) => {
    const fromFile = guessBaseFromFilename(file);
    if (fromFile) return fromFile;
    return randomName(10);
  };

  const rebuildFileList = (filesArr) => {
    const dt = new DataTransfer();
    filesArr.forEach(f => dt.items.add(f));
    fileInput.files = dt.files;
    updateHint();
    renderFileList();
  };

  const reorderFiles = (fromIndex, toIndex) => {
    const files = Array.from(fileInput.files || []);
    if (fromIndex < 0 || toIndex < 0 || fromIndex >= files.length || toIndex >= files.length) return;
    const [moved] = files.splice(fromIndex, 1);
    files.splice(toIndex, 0, moved);
    // keep manual edits aligned
    const newManualSlug = {};
    const newManualDisplay = {};
    files.forEach((_, i) => {
      // map old index -> new index by filename+size+type heuristic
    });
    // Simpler: reset manual flags agar tidak salah mapping
    state.manualSlug = {};
    state.manualDisplay = {};
    rebuildFileList(files);
  };

  const renderFileList = () => {
    const files = Array.from(fileInput.files || []);
    if (!fileList || !fileListWrap) return;

    // Cleanup objectURL previews sebelumnya
    if (state.urls?.length) {
      state.urls.forEach((u) => {
        try { URL.revokeObjectURL(u); } catch (e) {}
      });
    }
    state.urls = [];

    if (!files.length) {
      fileListWrap.classList.add('hidden');
      fileList.innerHTML = '';
      state.manualSlug = {};
      state.manualDisplay = {};
      return;
    }

    fileListWrap.classList.remove('hidden');
    fileList.innerHTML = '';

    files.forEach((f, idx) => {
      const row = document.createElement('div');
      row.className = 'px-4 py-3 flex flex-col gap-2';
      row.draggable = true;
      row.dataset.fileIndex = String(idx);

      const top = document.createElement('div');
      top.className = 'flex items-center justify-between gap-3';

      // Thumbnail (klik untuk popup preview yang lebih besar)
      const thumbUrl = URL.createObjectURL(f);
      state.urls.push(thumbUrl);

      const left = document.createElement('div');
      left.className = 'flex items-center gap-3 min-w-0';

      const thumb = document.createElement('img');
      thumb.src = thumbUrl;
      thumb.alt = f.name;
      thumb.loading = 'lazy';
      // shrink-fit (contain) agar thumbnail tidak kepotong
      thumb.className = 'h-24 w-24 rounded-2xl object-contain border border-white/10 bg-black/40 cursor-zoom-in shrink-0';

      const info = document.createElement('div');
      info.className = 'min-w-0';
      info.innerHTML = `
        <div class="text-sm font-semibold truncate">${f.name}</div>
        <div class="text-xs text-white/60">${niceSize(f.size)} • ${f.type || 'file'}</div>
      `;

      left.appendChild(thumb);
      left.appendChild(info);
      top.appendChild(left);

      const actions = document.createElement('div');
      actions.className = 'flex items-center gap-2 shrink-0';

      const dragHandle = document.createElement('div');
      dragHandle.title = 'Drag untuk reorder';
      dragHandle.className = 'cursor-move select-none text-white/50 text-sm px-2';
      dragHandle.textContent = '⋮⋮';

      const btnEdit = document.createElement('button');
      btnEdit.type = 'button';
      // teks edit warna hijau tua
      btnEdit.className = 'text-xs px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/10 text-emerald-300';
      btnEdit.textContent = 'Edit';

      actions.appendChild(dragHandle);
      actions.appendChild(btnEdit);
      top.appendChild(actions);

      // Label row
      const labels = document.createElement('div');
      labels.className = 'grid grid-cols-1 sm:grid-cols-2 gap-2 text-[11px] text-white/60';
      labels.innerHTML = `<div class="font-semibold">Custom Nama File</div><div class="font-semibold">Custom Slug</div>`;

      const inputWrap = document.createElement('div');
      inputWrap.className = 'grid grid-cols-1 sm:grid-cols-2 gap-2 items-center';

      // Custom nama file (dashboard)
      const inputDisplay = document.createElement('input');
      inputDisplay.name = 'display_names[]';
      inputDisplay.className = 'w-full rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-xs text-white placeholder:text-white/50';
      inputDisplay.placeholder = 'Nama file (dashboard)';
      inputDisplay.readOnly = true;
      if (!state.manualDisplay[idx]) {
        const base = (f?.name || 'Untitled').replace(/\.[^/.]+$/, '');
        inputDisplay.value = base;
      }
      inputDisplay.addEventListener('input', () => {
        state.manualDisplay[idx] = true;
      });

      // Custom slug (URL) -> tampil hanya sebagai /customslug (tanpa /aset)
      const slugWrap = document.createElement('div');
      slugWrap.className = 'flex items-center gap-2';

      const prefix = document.createElement('div');
      prefix.className = 'text-[11px] text-white/60 shrink-0';
      prefix.textContent = '/';

      const inputSlug = document.createElement('input');
      inputSlug.name = 'custom_names[]';
      inputSlug.className = 'w-full rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-xs text-white placeholder:text-white/50';
      inputSlug.placeholder = 'custom-slug';
      inputSlug.readOnly = true;
      if (!state.manualSlug[idx]) {
        inputSlug.value = slugify(generateNameForIndex(idx, f));
      }
      inputSlug.addEventListener('input', () => {
        state.manualSlug[idx] = true;
      });
      inputSlug.addEventListener('blur', () => {
        inputSlug.value = slugify(inputSlug.value);
      });

      slugWrap.appendChild(prefix);
      slugWrap.appendChild(inputSlug);

      btnEdit.addEventListener('click', () => {
        inputDisplay.readOnly = false;
        inputSlug.readOnly = false;
        inputSlug.focus();
        inputSlug.select();
      });

      inputWrap.appendChild(inputDisplay);
      inputWrap.appendChild(slugWrap);

      row.appendChild(top);
      row.appendChild(labels);
      row.appendChild(inputWrap);
      fileList.appendChild(row);

      // Drag & drop reorder
      row.addEventListener('dragstart', (e) => {
        e.dataTransfer?.setData('text/plain', String(idx));
        row.classList.add('opacity-60');
      });
      row.addEventListener('dragend', () => row.classList.remove('opacity-60'));
      row.addEventListener('dragover', (e) => {
        e.preventDefault();
        row.classList.add('ring-2','ring-cyan-300/60');
      });
      row.addEventListener('dragleave', () => row.classList.remove('ring-2','ring-cyan-300/60'));
      row.addEventListener('drop', (e) => {
        e.preventDefault();
        row.classList.remove('ring-2','ring-cyan-300/60');
        const from = parseInt(e.dataTransfer?.getData('text/plain') || '-1', 10);
        const to = idx;
        if (!Number.isNaN(from) && from >= 0 && from !== to) reorderFiles(from, to);
      });

      thumb.addEventListener('click', () => openPreview(thumbUrl, f));
    });
  };

  dropzone?.addEventListener('click', () => fileInput?.click());

  const setFiles = (files) => {
    const dt = new DataTransfer();
    // keep existing files (multi-drop / multi-paste)
    for (const f of (fileInput.files || [])) dt.items.add(f);
    for (const f of files) dt.items.add(f);
    fileInput.files = dt.files;
    updateHint();
    renderFileList();
  };

  ['dragenter','dragover'].forEach(evt => {
    dropzone?.addEventListener(evt, (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropzone.classList.add('ring-2','ring-cyan-300');
    });
  });
  ['dragleave','drop'].forEach(evt => {
    dropzone?.addEventListener(evt, (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropzone.classList.remove('ring-2','ring-cyan-300');
    });
  });
  dropzone?.addEventListener('drop', (e) => {
    const files = Array.from(e.dataTransfer?.files || []).filter(f => f && f.type);
    if (files.length) setFiles(files);
  });

  fileInput?.addEventListener('change', () => {
    // reset manual flags when file list changes (simpler & less error-prone)
    state.manualSlug = {};
    state.manualDisplay = {};
    updateHint();
    renderFileList();
  });

  // Paste image/gif from clipboard
  document.addEventListener('paste', (e) => {
    const items = e.clipboardData?.items || [];
    const files = [];
    for (const it of items) {
      if (it.kind === 'file') {
        const f = it.getAsFile();
        if (f) files.push(f);
      }
    }
    if (files.length) {
      setFiles(files);
    }
  });

  btnRegenerate?.addEventListener('click', () => {
    state.manualSlug = {};
    state.manualDisplay = {};
    renderFileList();
  });

  btnClear?.addEventListener('click', () => {
    try { fileInput.value = ''; } catch (e) {}
    state.manualSlug = {};
    state.manualDisplay = {};
    updateHint();
    renderFileList();
  });

  // Upload with progress + cancel
  const setProgressVisible = (on) => {
    if (!uploadProgressWrap) return;
    uploadProgressWrap.classList.toggle('hidden', !on);
    btnCancelUpload?.classList.toggle('hidden', !on);
  };

  const setProgress = (pct, text) => {
    if (uploadProgressBar) uploadProgressBar.style.width = `${pct}%`;
    if (uploadProgressPct) uploadProgressPct.textContent = `${pct}%`;
    if (uploadProgressText && text) uploadProgressText.textContent = text;
  };

  btnCancelUpload?.addEventListener('click', () => {
    try { state.uploadXhr?.abort(); } catch (e) {}
  });

  uploadForm?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const files = Array.from(fileInput.files || []);
    if (!files.length) return;

    // Prepare files (compress/resize)
    setProgressVisible(true);
    setProgress(0, 'Preparing…');

    const processedFiles = await prepareUploadFiles(files);

    // Build FormData
    const fd = new FormData(uploadForm);
    // Remove old files (browser already appended)
    fd.delete('images[]');
    fd.delete('images');
    processedFiles.forEach((f) => fd.append('images[]', f));

    // XHR for upload progress
    const xhr = new XMLHttpRequest();
    state.uploadXhr = xhr;
    xhr.open('POST', uploadForm.action, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Accept', 'application/json');

    // Pastikan CSRF terkirim (beberapa browser/case bisa gagal kalau hanya mengandalkan FormData)
    const csrfMeta = document.querySelector('meta[name="csrf-token"]');
    const csrfToken = csrfMeta?.getAttribute('content') || fd.get('_token');
    if (csrfToken) xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);

    xhr.upload.onprogress = (ev) => {
      if (!ev.lengthComputable) return;
      const pct = Math.min(99, Math.round((ev.loaded / ev.total) * 100));
      setProgress(pct, 'Uploading…');
    };

    xhr.onload = () => {
      state.uploadXhr = null;
      const ok = xhr.status >= 200 && xhr.status < 300;
      if (!ok) {
        setProgressVisible(false);
        let msg = 'Upload gagal';
        try {
          const j = JSON.parse(xhr.responseText || '{}');
          msg = j.message || j.error || msg;
        } catch (e) {
          // ignore
        }
        window.__toast?.(msg);
        return;
      }

      setProgress(100, 'Done');
      // Refresh page to show new assets
      window.location.reload();
    };
    xhr.onerror = () => {
      state.uploadXhr = null;
      setProgressVisible(false);
      window.__toast?.('Upload gagal');
    };
    xhr.onabort = () => {
      state.uploadXhr = null;
      setProgressVisible(false);
      window.__toast?.('Upload dibatalkan');
    };

    xhr.send(fd);
  });

  // Edit modal (slug / nama dashboard)
  const editModal = document.getElementById('editModal');
  const editSub = document.getElementById('editSub');
  const tabSlug = document.getElementById('tabSlug');
  const tabName = document.getElementById('tabName');
  const paneSlug = document.getElementById('paneSlug');
  const paneName = document.getElementById('paneName');
  const formSlug = document.getElementById('formSlug');
  const formName = document.getElementById('formName');
  const inputSlug = document.getElementById('inputSlug');
  const inputName = document.getElementById('inputName');

  const closeEdit = () => {
    if (!editModal) return;
    editModal.classList.add('hidden');
    editModal.classList.remove('flex');
    editModal.setAttribute('aria-hidden', 'true');
  };

  const openEdit = ({slug, display, actionSlug, actionDisplay, id}) => {
    if (!editModal) return;
    if (editSub) editSub.textContent = `ID: ${id}`;
    if (formSlug) formSlug.action = actionSlug;
    if (formName) formName.action = actionDisplay;
    if (inputSlug) inputSlug.value = slug || '';
    if (inputName) inputName.value = display || '';
    paneSlug?.classList.remove('hidden');
    paneName?.classList.add('hidden');
    editModal.classList.remove('hidden');
    editModal.classList.add('flex');
    editModal.setAttribute('aria-hidden', 'false');
  };

  editModal?.querySelectorAll('[data-edit-close]')?.forEach((el) => el.addEventListener('click', closeEdit));
  const showPane = (which) => {
    paneSlug?.classList.toggle('hidden', which !== 'slug');
    paneName?.classList.toggle('hidden', which !== 'name');
  };

  tabSlug?.addEventListener('click', () => showPane('slug'));
  tabName?.addEventListener('click', () => showPane('name'));

  document.addEventListener('click', (e) => {
    const btn = e.target?.closest?.('[data-open-edit]');
    if (!btn) return;
    openEdit({
      id: btn.getAttribute('data-img-id'),
      slug: btn.getAttribute('data-img-slug'),
      display: btn.getAttribute('data-img-display'),
      actionSlug: btn.getAttribute('data-action-slug'),
      actionDisplay: btn.getAttribute('data-action-display'),
    });
  });

  // Album list modal (klik di luar tidak menutup)
  const openAlbumModal = () => {
    if (!albumModal) return;
    albumModal.classList.remove('hidden');
    albumModal.classList.add('flex');
    albumModal.setAttribute('aria-hidden', 'false');
  };
  const closeAlbumModal = () => {
    if (!albumModal) return;
    albumModal.classList.add('hidden');
    albumModal.classList.remove('flex');
    albumModal.setAttribute('aria-hidden', 'true');
  };
  btnAlbumList?.addEventListener('click', openAlbumModal);
  btnAlbumClose?.addEventListener('click', closeAlbumModal);

  btnCopyAll?.addEventListener('click', async () => {
    const links = Array.from(document.querySelectorAll('[data-copy]'))
      .map((el) => el.getAttribute('data-copy'))
      .filter(Boolean);
    const uniq = Array.from(new Set(links));
    const text = uniq.join('\n');
    if (!text) return;
    try {
      await navigator.clipboard.writeText(text);
      window.__toast?.('Semua link tersalin');
    } catch (e) {
      window.__toast?.('Gagal copy');
    }
  });

  // Infinite scroll (lazy load)
  const loadMore = async () => {
    if (state.isLoadingMore) return;
    if (!state.nextPageUrl) return;
    state.isLoadingMore = true;
    try {
      const url = new URL(state.nextPageUrl, window.location.origin);
      // Pakai endpoint JSON
      const apiUrl = new URL(@json(route('dashboard.assets')), window.location.origin);
      apiUrl.searchParams.set('page', url.searchParams.get('page') || '1');
      const q = searchBox?.value || '';
      if (q) apiUrl.searchParams.set('q', q);

      const res = await fetch(apiUrl.toString(), { headers: { 'Accept': 'application/json' } });
      if (!res.ok) throw new Error('bad');
      const data = await res.json();
      if (data?.html && assetGrid) {
        const tmp = document.createElement('div');
        tmp.innerHTML = data.html;
        Array.from(tmp.children).forEach((ch) => assetGrid.appendChild(ch));
      }
      state.nextPageUrl = data?.next_page_url || null;
    } catch (e) {
      // stop trying if error
      state.nextPageUrl = null;
    } finally {
      state.isLoadingMore = false;
    }
  };

  if (infiniteSentinel) {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) loadMore();
      });
    }, { rootMargin: '600px' });
    io.observe(infiniteSentinel);
  }

  const syncBulkHiddenInputs = () => {
    const ids = Array.from(state.selected);
    if (bulkCount) bulkCount.textContent = String(ids.length);
    bulkBar?.classList.toggle('hidden', ids.length === 0);

    const fill = (wrapEl) => {
      if (!wrapEl) return;
      wrapEl.innerHTML = '';
      ids.forEach((id) => {
        const inp = document.createElement('input');
        inp.type = 'hidden';
        inp.name = 'ids[]';
        inp.value = String(id);
        wrapEl.appendChild(inp);
      });
    };
    fill(bulkMoveIds);
    fill(bulkDeleteIds);
  };

  const setAllSelected = (on) => {
    state.selected.clear();
    document.querySelectorAll('[data-select-asset]').forEach((cb) => {
      cb.checked = !!on;
      if (on) state.selected.add(parseInt(cb.value, 10));
    });
    syncBulkHiddenInputs();
  };

  btnSelectAll?.addEventListener('click', () => {
    const anyUnchecked = Array.from(document.querySelectorAll('[data-select-asset]')).some((cb) => !cb.checked);
    setAllSelected(anyUnchecked);
  });

  btnBulkClear?.addEventListener('click', () => setAllSelected(false));

  btnBulkCopy?.addEventListener('click', async () => {
    const ids = new Set(state.selected);
    const links = [];
    document.querySelectorAll('.asset-card').forEach((card) => {
      const id = parseInt(card.getAttribute('data-asset-id') || '0', 10);
      if (!ids.has(id)) return;
      const btn = card.querySelector('[data-copy]');
      const link = btn?.getAttribute('data-copy');
      if (link) links.push(link);
    });
    const uniq = Array.from(new Set(links));
    if (!uniq.length) return;
    try {
      await navigator.clipboard.writeText(uniq.join('\n'));
      window.__toast?.('Link terpilih tersalin');
    } catch (e) {
      window.__toast?.('Gagal copy');
    }
  });

  // Delegate checkbox click (untuk item yang ditambah via infinite scroll)
  document.addEventListener('change', (e) => {
    const t = e.target;
    if (!(t instanceof HTMLInputElement)) return;
    if (!t.matches('[data-select-asset]')) return;
    const id = parseInt(t.value, 10);
    if (t.checked) state.selected.add(id);
    else state.selected.delete(id);
    syncBulkHiddenInputs();
  });

  // Copy helper (delegation)
  document.addEventListener('click', async (e) => {
    const el = e.target?.closest?.('[data-copy]');
    if (!el) return;
    const text = el.getAttribute('data-copy');
    if (!text) return;
    try {
      await navigator.clipboard.writeText(text);
      window.__toast?.('Copied!');
    } catch (err) {
      const ta = document.createElement('textarea');
      ta.value = text;
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      ta.remove();
    }
  });
})();
</script>
@endsection