@extends('layouts.app')
@section('page-title', 'Archive')

@section('content')

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

<div x-data="archiveApp({
    dataUrl: '{{ route('admin.archive.data') }}'
})">

<x-admin-hero-header
    title="Archive"
    subtitle="Replaced files and archived documents"
    eyebrow="Document archive"
>
    <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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
        </svg>
    </x-slot:icon>
    <x-slot:actions>
        <a href="{{ route('admin.archive.export', ['format' => '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="{{ route('admin.archive.export', ['format' => '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>
    </x-slot:actions>
</x-admin-hero-header>

{{-- Tabs --}}
<div class="mb-6 flex gap-1 rounded-2xl border border-surface-100 bg-surface-50 p-1.5">
    <button type="button" @click="switchTab('replaced')"
            :class="tab === 'replaced' ? '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">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" 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>
        Replaced Files
        <span class="rounded-md bg-surface-200 px-1.5 py-0.5 text-xs font-bold text-surface-700"
              x-text="replacedTotal"></span>
    </button>
    <button type="button" @click="switchTab('archived')"
            :class="tab === 'archived' ? '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">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
        </svg>
        Archived Documents
        <span class="rounded-md bg-surface-200 px-1.5 py-0.5 text-xs font-bold text-surface-700"
              x-text="archivedTotal"></span>
    </button>
</div>

{{-- Tab: Replaced Files --}}
<div x-show="tab === 'replaced'">

    <div class="mb-3 flex flex-wrap items-center gap-2 rounded-2xl border border-surface-100 bg-surface-50 p-1.5">
        <button type="button" @click="changeType('all')"
                :class="typeFilter === 'all' ? '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 bg-surface-400"></span>
            All
            <span class="rounded-md px-1.5 py-0.5 text-xs font-bold"
                  :class="typeFilter === 'all' ? 'bg-surface-200 text-surface-700' : 'bg-surface-200 text-surface-500'"
                  x-text="countAll()"></span>
        </button>
        @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>

    {{-- Search (Replaced Files) --}}
    <div class="mb-5 relative">
        <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="text" x-model="search"
               placeholder="Search by title or document number..."
               class="form-input w-full py-2 pl-9 pr-8 text-sm" />
        <button x-show="search" @click="search = ''" type="button"
                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>

    <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 && replacedTotal === 0 && typeFilter === 'all' && !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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
                </svg>
            </div>
            <p class="mb-1 text-base font-semibold text-surface-900">No replaced files yet</p>
            <p class="text-sm text-surface-400">Old files appear here when a document's file is replaced.</p>
        </div>

        <div x-show="!loading && archives.length === 0 && (typeFilter !== 'all' || 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 a different filter or search term.</p>
            <div class="mt-4 flex gap-2">
                <button x-show="typeFilter !== 'all'" type="button" @click="changeType('all')"
                        class="btn bg-surface-100 text-surface-700 hover:bg-surface-200">Clear filter</button>
                <button x-show="search" type="button" @click="search = ''"
                        class="btn bg-surface-100 text-surface-700 hover:bg-surface-200">Clear search</button>
            </div>
        </div>

        <div x-show="!loading && archives.length > 0" class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-surface-100">
                        <th class="table-th">Document</th>
                        <th class="table-th">Doc No.</th>
                        <th class="table-th">Type</th>
                        <th class="table-th text-center">Ver.</th>
                        <th class="table-th">Old File</th>
                        <th class="table-th">Replaced</th>
                        <th class="table-th">By</th>
                        <th class="table-th">Notes</th>
                        <th class="table-th text-right pr-6">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-surface-50">
                    <template x-for="archive in archives" :key="archive.id">
                        <tr class="table-row-hover">
                            <td class="table-td max-w-[200px]">
                                <a :href="archive.document_show_url" class="block truncate font-semibold text-surface-900 hover:text-primary-700" x-text="archive.document_title" :title="archive.document_title"></a>
                            </td>
                            <td class="table-td">
                                <span class="font-mono text-xs font-bold text-surface-600" x-text="archive.doc_number"></span>
                            </td>
                            <td class="table-td">
                                <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold"
                                      :class="{
                                          'bg-blue-50 text-blue-700': archive.document_type === 'controlled_documents',
                                          'bg-emerald-50 text-emerald-700': archive.document_type === 'records',
                                          'bg-amber-50 text-amber-700': archive.document_type === 'bulletins',
                                      }"
                                      x-text="archive.document_type === 'controlled_documents' ? 'Controlled Docs' : archive.document_type === 'records' ? 'Records' : 'Bulletins'"></span>
                            </td>
                            <td class="table-td text-center">
                                <span class="font-mono text-sm font-bold text-surface-500" x-text="'v' + archive.version"></span>
                            </td>
                            <td class="table-td">
                                <p class="max-w-[160px] truncate text-sm text-surface-700" x-text="archive.file_name" :title="archive.file_name"></p>
                                <p class="text-xs text-surface-400" x-text="archive.file_size"></p>
                            </td>
                            <td class="table-td whitespace-nowrap text-surface-600" x-text="archive.replaced_at"></td>
                            <td class="table-td text-surface-600" x-text="archive.replaced_by || '-'"></td>
                            <td class="table-td max-w-[140px]">
                                <span x-show="archive.replacement_notes" x-text="archive.replacement_notes" class="block truncate text-xs italic text-surface-500" :title="archive.replacement_notes"></span>
                                <span x-show="!archive.replacement_notes" class="text-xs text-surface-300">—</span>
                            </td>
                            <td class="table-td pr-6">
                                <div class="flex items-center justify-end gap-2">
                                    <a :href="archive.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>
                                    <div>
                                        <button type="button" x-show="confirmingId !== archive.id" @click="confirmingId = archive.id"
                                                class="inline-icon-button-danger" title="Permanently delete">
                                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                        </button>
                                        <div x-show="confirmingId === archive.id" class="flex items-center gap-1">
                                            <span class="whitespace-nowrap text-[11px] font-semibold text-red-600">Delete forever?</span>
                                            <button type="button" @click="deleteArchive(archive)" :disabled="deletingId === archive.id"
                                                    class="rounded-md bg-red-500 px-2 py-0.5 text-[11px] font-bold text-white hover:bg-red-600 disabled:opacity-60"
                                                    x-text="deletingId === archive.id ? '...' : 'Yes'">
                                            </button>
                                            <button type="button" @click="confirmingId = null"
                                                    class="rounded-md px-1.5 py-0.5 text-[11px] font-semibold text-surface-500 hover:text-surface-700">No</button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <p x-show="deleteError" x-text="deleteError" class="px-6 py-3 text-right text-xs font-semibold text-red-600"></p>

        <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="replacedTotal"></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>

{{-- Tab: Archived Documents --}}
<div x-show="tab === 'archived'">

    {{-- Search (Archived Documents) --}}
    <div class="mb-5 relative">
        <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="text" x-model="search"
               placeholder="Search by title or document number..."
               class="form-input w-full py-2 pl-9 pr-8 text-sm" />
        <button x-show="search" @click="search = ''" type="button"
                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>

    <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 && archivedTotal === 0 && !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="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
                </svg>
            </div>
            <p class="mb-1 text-base font-semibold text-surface-900">No archived documents</p>
            <p class="text-sm text-surface-400">Documents archived from the master list appear here.</p>
        </div>

        <div x-show="!loading && archivedDocs.length === 0 && 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 a different search term.</p>
            <div class="mt-4">
                <button type="button" @click="search = ''"
                        class="btn bg-surface-100 text-surface-700 hover:bg-surface-200">Clear search</button>
            </div>
        </div>

        <div x-show="!loading && archivedDocs.length > 0" class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-surface-100">
                        <th class="table-th">Document</th>
                        <th class="table-th">Doc No.</th>
                        <th class="table-th">Type</th>
                        <th class="table-th">Folder</th>
                        <th class="table-th text-center">Ver.</th>
                        <th class="table-th">Archived</th>
                        <th class="table-th">By</th>
                        <th class="table-th">Reason</th>
                        <th class="table-th text-right pr-6">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-surface-50">
                    <template x-for="doc in archivedDocs" :key="doc.id">
                        <tr class="table-row-hover">
                            <td class="table-td max-w-[200px]">
                                <p class="truncate font-semibold text-surface-900" x-text="doc.title" :title="doc.title"></p>
                            </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">
                                <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold"
                                      :class="{
                                          'bg-emerald-50 text-emerald-700': doc.document_type === 'records',
                                          'bg-amber-50 text-amber-700': doc.document_type === 'bulletins',
                                          'bg-blue-50 text-blue-700': doc.document_type === 'controlled_documents',
                                      }"
                                      x-text="doc.document_type === 'records' ? 'Records' : doc.document_type === 'bulletins' ? 'Technical Bulletins' : 'Controlled Docs'"></span>
                            </td>
                            <td class="table-td text-surface-600" x-text="doc.folder_name || '—'"></td>
                            <td class="table-td text-center">
                                <span class="font-mono text-sm font-bold text-surface-500" x-text="'v' + doc.version"></span>
                            </td>
                            <td class="table-td whitespace-nowrap text-surface-600" x-text="doc.archived_at"></td>
                            <td class="table-td text-surface-600" x-text="doc.archived_by || '-'"></td>
                            <td class="table-td max-w-[160px]">
                                <span x-show="doc.reason" x-text="doc.reason" class="block truncate text-xs italic text-surface-500" :title="doc.reason"></span>
                                <span x-show="!doc.reason" class="text-xs text-surface-300">—</span>
                            </td>
                            <td class="table-td pr-6">
                                <div class="flex items-center justify-end gap-2">
                                    <div>
                                        <button type="button" x-show="confirmingDocId !== doc.id" @click="confirmingDocId = doc.id"
                                                class="inline-icon-button-danger" title="Permanently delete">
                                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                        </button>
                                        <div x-show="confirmingDocId === doc.id" class="flex items-center gap-1">
                                            <span class="whitespace-nowrap text-[11px] font-semibold text-red-600">Delete forever?</span>
                                            <button type="button" @click="deleteArchivedDoc(doc)" :disabled="deletingDocId === doc.id"
                                                    class="rounded-md bg-red-500 px-2 py-0.5 text-[11px] font-bold text-white hover:bg-red-600 disabled:opacity-60"
                                                    x-text="deletingDocId === doc.id ? '...' : 'Yes'">
                                            </button>
                                            <button type="button" @click="confirmingDocId = null"
                                                    class="rounded-md px-1.5 py-0.5 text-[11px] font-semibold text-surface-500 hover:text-surface-700">No</button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        <p x-show="deleteDocError" x-text="deleteDocError" class="px-6 py-3 text-right text-xs font-semibold text-red-600"></p>

        <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="archivedTotal"></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>

</div>

@endsection