@extends('layouts.admin')
@section('title','Media')
@section('content')
@php
  $humanBytes = function (int $bytes): string {
      if ($bytes < 1024) {
          return $bytes.' B';
      }
      if ($bytes < 1048576) {
          return number_format($bytes / 1024, 1).' KB';
      }

      return number_format($bytes / 1048576, 1).' MB';
  };
@endphp

<x-admin.page
    title="Media library"
    subtitle="Central Insert Media command center — upload, import from URL, edit alt text, and reuse assets across the admin."
>
    <x-slot:actions>
        <button type="button" class="admin-btn" data-media-library-upload>
            <i data-lucide="upload" class="h-3.5 w-3.5"></i> Upload files
        </button>
        <button type="button" class="admin-btn" data-media-library-url>
            <i data-lucide="link" class="h-3.5 w-3.5"></i> From URL
        </button>
        <button type="button" class="admin-btn admin-btn-primary" data-media-library-open>
            <i data-lucide="images" class="h-3.5 w-3.5"></i> Open Insert Media
        </button>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat is-active">
            <span class="order-ops-stat-label">Assets</span>
            <span class="order-ops-stat-value">{{ number_format($stats['total']) }}</span>
            <span class="order-ops-stat-meta">In library</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Images</span>
            <span class="order-ops-stat-value">{{ number_format($stats['images']) }}</span>
            <span class="order-ops-stat-meta">JPEG / PNG / WebP / GIF</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Documents</span>
            <span class="order-ops-stat-value">{{ number_format($stats['pdfs']) }}</span>
            <span class="order-ops-stat-meta">PDF files</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Storage</span>
            <span class="order-ops-stat-value">{{ $humanBytes($stats['bytes']) }}</span>
            <span class="order-ops-stat-meta">Total size</span>
        </div>
    </div>

    <form method="get" class="mb-4 flex flex-wrap items-end gap-3">
        <div class="min-w-[12rem]">
            <label class="admin-label">Type</label>
            <select name="type" class="admin-input">
                <option value="">All media</option>
                <option value="image" @selected(request('type') === 'image')>Images</option>
                <option value="pdf" @selected(request('type') === 'pdf')>PDF</option>
            </select>
        </div>
        <div class="min-w-[16rem] flex-1">
            <label class="admin-label">Search</label>
            <div class="relative">
                <i data-lucide="search" class="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[#8c9196]"></i>
                <input type="search" name="q" value="{{ request('q') }}" placeholder="Title, filename, alt, caption…" class="admin-input w-full pl-8">
            </div>
        </div>
        <button class="admin-btn admin-btn-primary">Filter</button>
    </form>

    <div class="admin-media-library-grid">
        @forelse($assets as $asset)
            <button
                type="button"
                class="admin-media-library-card"
                data-media-library-item
                data-id="{{ $asset->id }}"
                data-name="{{ $asset->displayTitle() }}"
                data-thumb="{{ $asset->thumbUrl() }}"
                data-url="{{ $asset->url() }}"
                data-alt="{{ $asset->alt_text }}"
                data-title="{{ $asset->title }}"
                data-caption="{{ $asset->caption }}"
                data-description="{{ $asset->description }}"
            >
                <div class="admin-media-library-card-thumb" @if($asset->isImage() && $asset->thumbUrl()) style="background-image:url('{{ $asset->thumbUrl() }}')" @endif>
                    @unless($asset->isImage())
                        <div class="flex h-full items-center justify-center text-xs font-semibold text-[#6d7175]">PDF</div>
                    @endunless
                </div>
                <div class="admin-media-library-card-body">
                    <div class="admin-media-library-card-title">{{ $asset->displayTitle() }}</div>
                    <div class="admin-media-library-card-meta">
                        #{{ $asset->id }} · {{ number_format($asset->size / 1024, 1) }} KB
                        @if($asset->width && $asset->height)
                            · {{ $asset->width }}×{{ $asset->height }}
                        @endif
                    </div>
                    @if($asset->alt_text)
                        <div class="mt-1 truncate text-[11px] text-[#6d7175]">Alt: {{ $asset->alt_text }}</div>
                    @endif
                </div>
            </button>
        @empty
            <div class="col-span-full">
                <x-admin.empty title="No media yet" body="Open Insert Media to upload from your computer or import from a URL. Assets appear here for reuse across products, categories, posts, and albums." />
            </div>
        @endforelse
    </div>
    <div class="mt-4">{{ $assets->links() }}</div>
</x-admin.page>

<script>
(() => {
  const openLibrary = (opts = {}) => {
    if (!window.__traMediaGallery?.open) return;
    window.__traMediaGallery.open({
      mode: 'multiple',
      nav: opts.nav || 'insert',
      tab: opts.tab || 'library',
      title: opts.title || 'Media library',
      onConfirm: () => window.location.reload(),
    });
  };

  document.querySelector('[data-media-library-open]')?.addEventListener('click', () => openLibrary());
  document.querySelector('[data-media-library-upload]')?.addEventListener('click', () => openLibrary({ tab: 'upload' }));
  document.querySelector('[data-media-library-url]')?.addEventListener('click', () => openLibrary({ nav: 'url' }));

  document.querySelectorAll('[data-media-library-item]').forEach((card) => {
    card.addEventListener('click', () => {
      if (!window.__traMediaGallery?.open) return;
      const item = {
        id: Number(card.dataset.id),
        name: card.dataset.name,
        title: card.dataset.title,
        alt_text: card.dataset.alt,
        caption: card.dataset.caption,
        description: card.dataset.description,
        thumb: card.dataset.thumb,
        url: card.dataset.url,
      };
      window.__traMediaGallery.open({
        mode: 'single',
        nav: 'featured',
        tab: 'library',
        title: 'Edit media',
        selected: [item],
        onConfirm: () => window.location.reload(),
      });
    });
  });
})();
</script>
@endsection