@extends('admin.layouts.app')

@section('title', 'Media Library')
@section('page_title', 'Media Library')

@section('content')
@php
    $canCreate = auth()->user()?->can('create', \Apex\Modules\Media\Models\Media::class);
    $canUpdate = auth()->user()?->can('update', \Apex\Modules\Media\Models\Media::class);
    $canDelete = auth()->user()?->can('delete', \Apex\Modules\Media\Models\Media::class);
    $mediaItems = $media->getCollection()->map(fn ($item) => [
        'id' => $item->id,
        'name' => $item->name,
        'file_name' => $item->file_name,
        'url' => $item->url(),
        'mime_type' => $item->mime_type,
        'size' => $item->size,
        'human_size' => $item->humanSize(),
        'type_label' => $item->typeLabel(),
        'dimensions' => $item->dimensionsLabel(),
        'alt_text' => $item->alt_text,
        'title' => $item->title,
        'caption' => $item->caption,
        'description' => $item->description,
        'focus_keyword' => $item->focus_keyword,
        'folder_id' => $item->folder_id,
        'folder_name' => $item->folder?->name,
        'is_image' => $item->isImage(),
        'uploaded_by' => $item->uploader?->name,
        'created_at_human' => optional($item->created_at)?->format('M j, Y g:i a'),
        'uploaded_at' => optional($item->created_at)?->diffForHumans(),
        'usage_count' => $item->mediables->count(),
    ])->values();
@endphp

<div
    class="media-library"
    x-data="mediaLibrary({
        uploadUrl: @js(route('admin.media.upload')),
        bulkUrl: @js(route('admin.media.bulk')),
        csrf: @js(csrf_token()),
        currentFolder: @js($folderId),
        items: @js($mediaItems),
        folders: @js($folders->map(fn ($f) => ['id' => $f->id, 'name' => $f->name, 'parent_id' => $f->parent_id])),
        canCreate: @js((bool) $canCreate),
        canUpdate: @js((bool) $canUpdate),
        canDelete: @js((bool) $canDelete),
    })"
    @keydown.escape.window="closeDetail()"
>
    {{-- Toolbar --}}
    <div class="media-library__toolbar">
        <div class="flex flex-wrap items-center gap-2">
            @if($canCreate)
                <label class="media-library__btn media-library__btn--primary cursor-pointer">
                    Add New
                    <input type="file" multiple class="hidden" @change="handleFiles($event.target.files); $event.target.value = ''">
                </label>
                <form method="POST" action="{{ route('admin.media.import-public') }}" onsubmit="return confirm('Import images from public/images into the Media Library? Already-imported files will be skipped.')">
                    @csrf
                    <button type="submit" class="media-library__btn" title="Site pages use static files in public/images — this copies them into the library">
                        Import site images
                    </button>
                </form>
            @endif

            <form method="GET" action="{{ route('admin.media.index') }}" class="flex flex-wrap items-center gap-2">
                @if($folderId !== null)
                    <input type="hidden" name="folder" value="{{ $folderId === 0 ? 'root' : $folderId }}">
                @endif
                <input
                    type="search"
                    name="q"
                    value="{{ $filters['q'] ?? '' }}"
                    placeholder="Search media..."
                    class="media-library__input w-48 sm:w-64"
                >
                <select name="type" class="media-library__input">
                    <option value="">All media types</option>
                    <option value="image" @selected(($filters['type'] ?? '') === 'image')>Images</option>
                    <option value="video" @selected(($filters['type'] ?? '') === 'video')>Video</option>
                    <option value="audio" @selected(($filters['type'] ?? '') === 'audio')>Audio</option>
                    <option value="document" @selected(($filters['type'] ?? '') === 'document')>Documents</option>
                </select>
                <select name="month" class="media-library__input">
                    <option value="">All dates</option>
                    @foreach($months as $month)
                        <option value="{{ $month }}" @selected(($filters['month'] ?? '') === $month)>
                            {{ \Illuminate\Support\Carbon::createFromFormat('Y-m', $month)->format('F Y') }}
                        </option>
                    @endforeach
                </select>
                <button type="submit" class="media-library__btn">Filter</button>
            </form>
        </div>

        <div class="flex items-center gap-2">
            <div class="media-library__view-toggle" role="group" aria-label="View mode">
                <button type="button" class="media-library__view-btn" :class="view === 'grid' && 'is-active'" @click="view = 'grid'" title="Grid view">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1 1h6v6H1V1zm8 0h6v6H9V1zM1 9h6v6H1V9zm8 0h6v6H9V9z"/></svg>
                </button>
                <button type="button" class="media-library__view-btn" :class="view === 'list' && 'is-active'" @click="view = 'list'" title="List view">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1 2h14v2H1V2zm0 5h14v2H1V7zm0 5h14v2H1v-2z"/></svg>
                </button>
            </div>
            <span class="text-xs text-slate-500" x-text="items.length + ' items'"></span>
        </div>
    </div>

    {{-- Bulk bar --}}
    <div class="media-library__bulk" x-show="selectedIds.length" x-cloak>
        <span class="text-sm font-medium text-slate-700" x-text="selectedIds.length + ' selected'"></span>
        <div class="flex flex-wrap items-center gap-2">
            @if($canUpdate)
                <select x-model="bulkFolderId" class="media-library__input">
                    <option value="">Move to…</option>
                    <option value="0">Unsorted</option>
                    <template x-for="folder in folders" :key="folder.id">
                        <option :value="folder.id" x-text="folder.name"></option>
                    </template>
                </select>
                <button type="button" class="media-library__btn" @click="bulkAction('move')" :disabled="!bulkFolderId && bulkFolderId !== '0'">Move</button>
                <button type="button" class="media-library__btn" @click="bulkAction('optimize')">Optimize</button>
            @endif
            @if($canDelete)
                <button type="button" class="media-library__btn media-library__btn--danger" @click="bulkAction('delete')">Delete permanently</button>
            @endif
            <button type="button" class="media-library__btn" @click="clearSelection()">Cancel</button>
        </div>
    </div>

    <div class="media-library__layout" :class="detailOpen && 'has-detail'">
        {{-- Folders --}}
        <aside class="media-library__folders">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-slate-500">Folders</h2>
                @if($canCreate)
                    <button type="button" @click="showNewFolder = !showNewFolder" class="text-xs font-medium text-blue-700 hover:underline">+ New</button>
                @endif
            </div>

            <nav class="space-y-0.5 text-sm">
                <a href="{{ route('admin.media.index', array_filter(['q' => $filters['q'] ?? null, 'type' => $filters['type'] ?? null, 'month' => $filters['month'] ?? null])) }}"
                   class="media-library__folder {{ $folderId === null ? 'is-active' : '' }}">
                    All Files
                </a>
                <a href="{{ route('admin.media.index', array_filter(['folder' => 'root', 'q' => $filters['q'] ?? null, 'type' => $filters['type'] ?? null, 'month' => $filters['month'] ?? null])) }}"
                   class="media-library__folder {{ $folderId === 0 ? 'is-active' : '' }}">
                    Unsorted
                </a>
                @foreach ($folders as $folder)
                    <a href="{{ route('admin.media.index', array_filter(['folder' => $folder->id, 'q' => $filters['q'] ?? null, 'type' => $filters['type'] ?? null, 'month' => $filters['month'] ?? null])) }}"
                       class="media-library__folder {{ ($currentFolder?->id ?? null) === $folder->id ? 'is-active' : '' }}"
                       @dragover.prevent
                       @drop.prevent="dropOnFolder($event, {{ $folder->id }})">
                        {{ $folder->name }}
                    </a>
                @endforeach
            </nav>

            <div x-show="showNewFolder" x-cloak class="mt-4 border-t border-slate-200 pt-4">
                <form method="POST" action="{{ route('admin.media.folders.store') }}">
                    @csrf
                    @if ($currentFolder)
                        <input type="hidden" name="parent_id" value="{{ $currentFolder->id }}">
                    @endif
                    <input type="text" name="name" placeholder="Folder name" required class="media-library__input mb-2 w-full">
                    <button type="submit" class="media-library__btn media-library__btn--primary w-full justify-center">Create folder</button>
                </form>
            </div>
        </aside>

        {{-- Main --}}
        <div class="media-library__main"
             :class="dragging && 'is-dragging'"
             @dragover.prevent="dragging = true"
             @dragleave.prevent="dragging = false"
             @drop.prevent="handleDrop($event)">

            @if($canCreate)
                <div class="media-library__dropzone" x-show="dragging || (!items.length && !uploading)" x-cloak>
                    <p class="text-sm font-medium text-slate-700">Drop files to upload</p>
                    <p class="mt-1 text-xs text-slate-500">Images, documents, audio, and video up to 10MB each</p>
                </div>
            @endif

            <p x-show="uploading" class="mb-3 text-sm text-blue-700" x-cloak>
                Uploading… <span x-text="uploadProgress"></span>
            </p>

            {{-- Grid --}}
            <div x-show="view === 'grid'" class="media-library__grid">
                <template x-for="item in items" :key="item.id">
                    <div
                        class="media-library__tile"
                        :class="(selectedIds.includes(item.id) || activeId === item.id) && 'is-selected'"
                        draggable="true"
                        @dragstart="onDragStart($event, item.id)"
                        @click="openDetail(item)"
                    >
                        <label class="media-library__check" @click.stop>
                            <input type="checkbox" :checked="selectedIds.includes(item.id)" @change="toggleSelect(item.id)">
                        </label>
                        <template x-if="item.is_image">
                            <img :src="item.url" :alt="item.alt_text || item.name" class="media-library__thumb" loading="lazy">
                        </template>
                        <template x-if="!item.is_image">
                            <div class="media-library__file-icon">
                                <span x-text="(item.file_name.split('.').pop() || 'FILE').toUpperCase()"></span>
                            </div>
                        </template>
                        <div class="media-library__tile-meta">
                            <p class="truncate" x-text="item.name"></p>
                        </div>
                    </div>
                </template>
            </div>

            {{-- List --}}
            <div x-show="view === 'list'" class="media-library__list" x-cloak>
                <div class="media-library__list-head">
                    <span></span>
                    <span>File</span>
                    <span class="hidden sm:block">Type</span>
                    <span class="hidden md:block">Uploaded</span>
                    <span class="hidden lg:block">Size</span>
                </div>
                <template x-for="item in items" :key="'list-'+item.id">
                    <button
                        type="button"
                        class="media-library__list-row"
                        :class="(selectedIds.includes(item.id) || activeId === item.id) && 'is-selected'"
                        @click="openDetail(item)"
                    >
                        <label class="media-library__check" @click.stop>
                            <input type="checkbox" :checked="selectedIds.includes(item.id)" @change="toggleSelect(item.id)">
                        </label>
                        <span class="flex min-w-0 items-center gap-3">
                            <template x-if="item.is_image">
                                <img :src="item.url" :alt="item.alt_text || item.name" class="h-10 w-10 rounded object-cover">
                            </template>
                            <template x-if="!item.is_image">
                                <span class="flex h-10 w-10 items-center justify-center rounded bg-slate-100 text-[10px] font-semibold text-slate-500" x-text="(item.file_name.split('.').pop() || 'FILE').toUpperCase()"></span>
                            </template>
                            <span class="truncate text-sm font-medium text-slate-800" x-text="item.name"></span>
                        </span>
                        <span class="hidden text-xs text-slate-500 sm:block" x-text="item.type_label"></span>
                        <span class="hidden text-xs text-slate-500 md:block" x-text="item.uploaded_at"></span>
                        <span class="hidden text-xs text-slate-500 lg:block" x-text="item.human_size"></span>
                    </button>
                </template>
            </div>

            <div x-show="!items.length && !uploading" class="py-16 text-center text-sm text-slate-500">
                No media files found.
            </div>

            <div class="mt-4">{{ $media->links() }}</div>
        </div>

        {{-- Attachment details drawer (WordPress-style) --}}
        <aside class="media-library__detail" x-show="detailOpen" x-cloak>
            <div class="media-library__detail-head">
                <h3 class="text-sm font-semibold text-slate-800">Attachment details</h3>
                <button type="button" class="text-slate-400 hover:text-slate-700" @click="closeDetail()" aria-label="Close">&times;</button>
            </div>

            <template x-if="selected">
                <div class="media-library__detail-body">
                    <div class="mb-4 overflow-hidden rounded-lg border border-slate-200 bg-slate-50">
                        <template x-if="selected.is_image">
                            <img :src="selected.url" :alt="selected.alt_text || selected.name" class="max-h-48 w-full object-contain">
                        </template>
                        <template x-if="!selected.is_image">
                            <div class="flex h-32 items-center justify-center text-sm text-slate-500" x-text="selected.type_label"></div>
                        </template>
                    </div>

                    <dl class="media-library__meta">
                        <div><dt>Uploaded</dt><dd x-text="selected.created_at_human"></dd></div>
                        <div><dt>Uploaded by</dt><dd x-text="selected.uploaded_by || '—'"></dd></div>
                        <div><dt>File name</dt><dd class="break-all" x-text="selected.file_name"></dd></div>
                        <div><dt>File type</dt><dd x-text="selected.mime_type"></dd></div>
                        <div><dt>File size</dt><dd x-text="selected.human_size"></dd></div>
                        <div x-show="selected.dimensions"><dt>Dimensions</dt><dd x-text="selected.dimensions"></dd></div>
                        <div x-show="selected.folder_name"><dt>Folder</dt><dd x-text="selected.folder_name"></dd></div>
                        <div><dt>Used</dt><dd x-text="(selected.usage_count || 0) + ' time(s)'"></dd></div>
                    </dl>

                    <div class="mt-4 space-y-3">
                        <div>
                            <label class="media-library__label">URL</label>
                            <div class="flex gap-2">
                                <input type="text" readonly :value="selected.url" class="media-library__input flex-1 text-xs">
                                <button type="button" class="media-library__btn" @click="copyUrl()">Copy</button>
                            </div>
                            <p class="mt-1 text-xs text-green-700" x-show="copied" x-cloak>Copied!</p>
                        </div>

                        <div>
                            <label class="media-library__label">Title</label>
                            <input type="text" x-model="selected.title" class="media-library__input w-full" :disabled="!canUpdate">
                        </div>
                        <div>
                            <label class="media-library__label">Caption</label>
                            <textarea x-model="selected.caption" rows="2" class="media-library__input w-full" :disabled="!canUpdate"></textarea>
                        </div>
                        <div>
                            <label class="media-library__label">Alt Text</label>
                            <input type="text" x-model="selected.alt_text" class="media-library__input w-full" :disabled="!canUpdate">
                        </div>
                        <div>
                            <label class="media-library__label">Description</label>
                            <textarea x-model="selected.description" rows="3" class="media-library__input w-full" :disabled="!canUpdate"></textarea>
                        </div>
                        <div>
                            <label class="media-library__label">Focus keyword</label>
                            <input type="text" x-model="selected.focus_keyword" class="media-library__input w-full" :disabled="!canUpdate">
                        </div>
                        <div>
                            <label class="media-library__label">File name (display)</label>
                            <input type="text" x-model="selected.name" class="media-library__input w-full" :disabled="!canUpdate">
                        </div>
                        <div>
                            <label class="media-library__label">Folder</label>
                            <select x-model="selected.folder_id" class="media-library__input w-full" :disabled="!canUpdate">
                                <option :value="null">Unsorted</option>
                                <template x-for="folder in folders" :key="'move-'+folder.id">
                                    <option :value="folder.id" x-text="folder.name"></option>
                                </template>
                            </select>
                        </div>
                    </div>

                    <div class="mt-5 flex flex-wrap gap-2 border-t border-slate-200 pt-4">
                        <button type="button" class="media-library__btn media-library__btn--primary" @click="saveDetail()" x-show="canUpdate" x-cloak>Update</button>
                        <button type="button" class="media-library__btn media-library__btn--danger" @click="deleteSelected()" x-show="canDelete" x-cloak>Delete permanently</button>
                    </div>
                </div>
            </template>
        </aside>
    </div>
</div>
@endsection