@extends('layouts.app')
@section('page-title', $isMyDocuments ? 'My Documents' : 'Documents')

@section('content')

@php $typeLabels = \App\Models\Folder::TYPES; @endphp

<div x-data="documentsApp({
    dataUrl: '{{ route($isMyDocuments ? 'my-documents.data' : 'admin.documents.data') }}',
    exportBaseUrl: '{{ route($isMyDocuments ? 'my-documents.export' : 'admin.documents.export') }}',
    createBaseUrl: '{{ route('admin.documents.create') }}',
    typeFilter: '{{ $filters['document_type'] ?? 'controlled_documents' }}',
    folderId: '{{ $filters['folder_id'] ?? '' }}',
    search: @js($filters['search'] ?? '')
})">

<x-admin-hero-header
    title="Documents"
    subtitle="Manage all documents across folders"
    eyebrow="Document library"
>
    <x-slot:icon>
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M7 3h7l5 5v13H7a2 2 0 01-2-2V5a2 2 0 012-2zm7 0v5h5M9 13h6m-6 4h6"/>
        </svg>
    </x-slot:icon>
    <x-slot:actions>
        <a :href="exportUrl('csv')" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            Export CSV
        </a>
        <a :href="exportUrl('pdf')" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
            Export PDF
        </a>
        @can('create', App\Models\Document::class)
            <a href="{{ route('admin.documents.create', array_filter(['document_type' => $filters['document_type'] ?? 'controlled_documents', 'folder_id' => $filters['folder_id'] ?? null])) }}"
               :href="createUrl()" class="btn border-white/15 bg-white/15 text-white backdrop-blur hover:bg-white/20 focus:ring-white/30">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Upload Document
            </a>
        @endcan
    </x-slot:actions>
</x-admin-hero-header>

<div class="mb-4 flex flex-wrap items-center gap-2 rounded-2xl border border-surface-100 bg-surface-50 p-1.5">
    @foreach($typeLabels as $key => $label)
        @php
            $dot = match($key) {
                'controlled_documents' => 'bg-blue-500',
                'records' => 'bg-emerald-500',
                'bulletins' => 'bg-amber-500',
                default => 'bg-surface-400',
            };
            $badgeActive = match($key) {
                'controlled_documents' => 'bg-blue-100 text-blue-700',
                'records' => 'bg-emerald-100 text-emerald-700',
                'bulletins' => 'bg-amber-100 text-amber-700',
                default => 'bg-surface-200 text-surface-700',
            };
        @endphp
        <button type="button" @click="changeType('{{ $key }}')"
                :class="typeFilter === '{{ $key }}' ? 'bg-white text-surface-900 shadow-sm' : 'text-surface-500 hover:text-surface-700'"
                class="flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-all">
            <span class="h-2 w-2 shrink-0 rounded-full {{ $dot }}"></span>
            {{ $label }}
            <span class="rounded-md px-1.5 py-0.5 text-xs font-bold"
                  :class="typeFilter === '{{ $key }}' ? '{{ $badgeActive }}' : 'bg-surface-200 text-surface-500'"
                  x-text="countByType('{{ $key }}')"></span>
        </button>
    @endforeach
</div>

<div class="mb-5 flex flex-wrap items-center gap-3 rounded-2xl border border-surface-100 bg-white p-3 shadow-sm">
    <div class="w-full sm:w-72" @document-folder-selected="changeFolder($event.detail.id)">
        @include('admin.documents.partials.folder-picker', ['formData' => $folderPickerData, 'filterMode' => true])
    </div>

    <div class="relative flex-1 min-w-[200px]">
        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="h-4 w-4 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/>
            </svg>
        </div>
        <input type="search" x-model="search" aria-label="Search documents"
               placeholder="Search by title or document number..."
               class="form-input h-11 w-full py-2 pl-9 pr-9 text-sm" />
        <button x-show="search" @click="search = ''" type="button"
                aria-label="Clear search"
                class="absolute inset-y-0 right-0 flex items-center pr-2.5 text-surface-400 hover:text-surface-600">
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>

    <button type="button" :disabled="!folderId && !search"
            @click="clearFilters()"
            class="flex h-11 shrink-0 items-center gap-2 rounded-xl border border-surface-200 px-3.5 text-sm font-semibold text-surface-600 transition-colors hover:border-primary-200 hover:bg-primary-50 hover:text-primary-700 disabled:cursor-default disabled:border-transparent disabled:text-surface-300 disabled:hover:bg-transparent disabled:hover:text-surface-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 10a9 9 0 111.8 7.1M3 10V4m0 6h6"/></svg>
        Reset filters
    </button>
</div>

<div class="card overflow-hidden">
    <div x-show="loading" class="flex items-center justify-center py-16">
        <div class="h-8 w-8 animate-spin rounded-full border-2 border-surface-200 border-t-primary-600"></div>
    </div>

    <div x-show="!loading && total === 0 && typeFilter === 'controlled_documents' && !folderId && !search" x-cloak class="empty-state">
        <div class="empty-state-icon">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
        </div>
        <p class="mb-1 text-base font-semibold text-surface-900">No documents yet</p>
        <p class="text-sm text-surface-400">Upload your first document to get started.</p>
    </div>

    <div x-show="!loading && total === 0 && (typeFilter || folderId || search)" x-cloak class="empty-state">
        <p class="text-sm font-semibold text-surface-600">No results found</p>
        <p class="mt-1 text-xs text-surface-400">Try adjusting your filters or search term.</p>
        <div class="mt-4">
            <button type="button"
                    @click="clearFilters()"
                    class="btn bg-surface-100 text-surface-700 hover:bg-surface-200">Clear all filters</button>
        </div>
    </div>

    <div x-show="!loading && docs.length > 0" class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="border-b border-surface-100">
                    <th class="table-th">S.No</th>
                    <th class="table-th">Doc No.</th>
                    <th class="table-th">Title</th>
                    <th class="table-th">Folder</th>
                    <th x-show="showVersionColumn" x-cloak class="table-th text-center">Ver.</th>
                    <th class="table-th text-right pr-6">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-surface-50">
                <template x-for="(doc, index) in docs" :key="doc.id">
                    <tr class="table-row-hover">
                        <td class="table-td text-surface-500" x-text="rowNumber(index)"></td>
                        <td class="table-td">
                            <span class="font-mono text-xs font-bold text-surface-600" x-text="doc.doc_number || '—'"></span>
                        </td>
                        <td class="table-td max-w-[260px]">
                            <a :href="doc.show_url" class="block truncate font-semibold text-surface-900 hover:text-primary-700"
                               x-text="doc.title" :title="doc.title"></a>
                            <span x-show="doc.has_file && doc.file_size" x-text="doc.file_size"
                                  class="mt-0.5 block text-xs text-surface-400"></span>
                        </td>
                        <td class="table-td text-surface-600" x-text="doc.folder_name || '—'"></td>
                        <td x-show="showVersionColumn" x-cloak class="table-td text-center">
                            <span class="text-sm font-semibold text-surface-600" x-text="doc.document_type === 'controlled_documents' ? ('v' + doc.version) : '—'"></span>
                        </td>
                        <td class="table-td pr-6">
                            <div class="flex items-center justify-end gap-2">
                                <a :href="doc.show_url" class="inline-icon-button-neutral" title="View">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                </a>

                                <a x-show="doc.download_url" :href="doc.download_url" class="inline-icon-button-primary" title="Download">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                                    </svg>
                                </a>

                                <a x-show="doc.version_url" :href="doc.version_url" class="inline-icon-button-neutral" title="Upload New Version">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                                    </svg>
                                </a>

                                <a x-show="doc.replace_url" :href="doc.replace_url" class="inline-icon-button-neutral" title="Replace File">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                    </svg>
                                </a>

                                <a x-show="doc.edit_url" :href="doc.edit_url" class="inline-icon-button-neutral" title="Edit">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                    </svg>
                                </a>

                                <button x-show="doc.archive_url"
                                        type="button"
                                        @click="openArchiveModal(doc)"
                                        class="inline-icon-button-neutral" title="Archive">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
                                    </svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    <div x-show="!loading && lastPage > 1" class="flex items-center justify-between border-t border-surface-100 px-6 py-4">
        <p class="text-sm text-surface-400">
            Page <span class="font-semibold text-surface-700" x-text="page"></span>
            of <span class="font-semibold text-surface-700" x-text="lastPage"></span>
            &middot; <span class="font-semibold text-surface-700" x-text="total"></span> total
        </p>
        <div class="flex items-center gap-2">
            <button type="button" @click="goToPage(page - 1)" :disabled="page <= 1 || loading"
                    class="btn bg-surface-100 text-surface-700 hover:bg-surface-200 disabled:opacity-40 disabled:cursor-not-allowed">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                Prev
            </button>
            <button type="button" @click="goToPage(page + 1)" :disabled="page >= lastPage || loading"
                    class="btn bg-surface-100 text-surface-700 hover:bg-surface-200 disabled:opacity-40 disabled:cursor-not-allowed">
                Next
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </button>
        </div>
    </div>
</div>

</div>

@endsection