@extends('layouts.admin')
@section('title', 'PDF 快取管理')

@section('content')
<div x-data="pdfCache()" class="space-y-6">

    {{-- 標題 + 統計 --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">PDF 快取檔案</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                已快取 <span class="font-semibold text-blue-600 dark:text-blue-400">{{ number_format($totalFiles) }}</span> 份 PDF，
                佔用 <span class="font-semibold text-blue-600 dark:text-blue-400">{{ $formatSize($totalSize) }}</span>
            </p>
        </div>
        @if(count($files) > 0 || count($folders) > 0)
        <div class="flex gap-2">
            <a href="{{ route('admin.pdf-cache.download-folder', ['path' => $relativePath]) }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                下載此資料夾 ZIP
            </a>
        </div>
        @endif
    </div>

    {{-- 提示訊息 --}}
    @if(session('success'))
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 px-4 py-3 rounded-lg text-sm">
        {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg text-sm">
        {{ session('error') }}
    </div>
    @endif

    {{-- 麵包屑 --}}
    <nav class="flex items-center gap-1 text-sm flex-wrap">
        @foreach($breadcrumbs as $i => $crumb)
            @if($i > 0)
                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            @endif
            @if($i === count($breadcrumbs) - 1)
                <span class="font-medium text-gray-800 dark:text-white">{{ $crumb['name'] }}</span>
            @else
                <a href="{{ route('admin.pdf-cache.index', ['path' => $crumb['path']]) }}"
                   class="text-blue-600 dark:text-blue-400 hover:underline">{{ $crumb['name'] }}</a>
            @endif
        @endforeach
    </nav>

    {{-- 搜尋 --}}
    <div class="relative">
        <input type="text" x-model="search" placeholder="搜尋資料夾或檔案..."
               class="w-full sm:w-96 px-4 py-2 pl-10 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-800 dark:text-gray-200 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        <svg class="absolute left-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
    </div>

    {{-- 內容區 --}}
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 overflow-hidden">

        {{-- 表頭 --}}
        <div class="grid grid-cols-12 gap-4 px-4 py-3 bg-gray-50 dark:bg-slate-700/50 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-slate-700">
            <div class="col-span-7 sm:col-span-8">名稱</div>
            <div class="col-span-2 sm:col-span-2 text-right">大小 / 數量</div>
            <div class="col-span-3 sm:col-span-2 text-right">操作</div>
        </div>

        {{-- 上一層 --}}
        @if($relativePath)
        @php
            $parentPath = dirname($relativePath);
            $parentPath = $parentPath === '.' ? '' : $parentPath;
        @endphp
        <a href="{{ route('admin.pdf-cache.index', ['path' => $parentPath]) }}"
           class="grid grid-cols-12 gap-4 px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700/30 border-b border-gray-100 dark:border-slate-700/50 transition-colors">
            <div class="col-span-12 flex items-center gap-3 text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"/></svg>
                <span class="text-sm">..</span>
            </div>
        </a>
        @endif

        {{-- 資料夾 --}}
        @forelse($folders as $folder)
        <div x-show="!search || '{{ strtolower($folder['name']) }}'.includes(search.toLowerCase())"
             class="grid grid-cols-12 gap-4 px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700/30 border-b border-gray-100 dark:border-slate-700/50 transition-colors group">
            <a href="{{ route('admin.pdf-cache.index', ['path' => $folder['path']]) }}"
               class="col-span-7 sm:col-span-8 flex items-center gap-3 min-w-0">
                <svg class="w-5 h-5 text-yellow-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>
                <span class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">{{ $folder['name'] }}</span>
            </a>
            <div class="col-span-2 sm:col-span-2 flex items-center justify-end text-xs text-gray-500 dark:text-gray-400">
                {{ $folder['count'] }} 份
            </div>
            <div class="col-span-3 sm:col-span-2 flex items-center justify-end gap-1">
                <a href="{{ route('admin.pdf-cache.download-folder', ['path' => $folder['path']]) }}"
                   class="p-1.5 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
                   title="下載 ZIP">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                <form method="POST" action="{{ route('admin.pdf-cache.delete') }}"
                      onsubmit="return confirm('確定要刪除整個資料夾「{{ $folder['name'] }}」嗎？此操作無法復原。')"
                      class="inline">
                    @csrf
                    <input type="hidden" name="path" value="{{ $folder['path'] }}">
                    <button type="submit" class="p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                            title="刪除">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                </form>
            </div>
        </div>
        @empty
            @if(count($files) === 0)
            <div class="px-4 py-12 text-center text-gray-500 dark:text-gray-400">
                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                <p class="text-sm">此資料夾是空的</p>
                <p class="text-xs mt-1">下載考題後，PDF 會自動快取到這裡</p>
            </div>
            @endif
        @endforelse

        {{-- 檔案 --}}
        @foreach($files as $file)
        <div x-show="!search || '{{ strtolower($file['name']) }}'.includes(search.toLowerCase())"
             class="grid grid-cols-12 gap-4 px-4 py-3 hover:bg-gray-50 dark:hover:bg-slate-700/30 border-b border-gray-100 dark:border-slate-700/50 transition-colors group">
            <div class="col-span-7 sm:col-span-8 flex items-center gap-3 min-w-0">
                <svg class="w-5 h-5 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>
                <span class="text-sm text-gray-700 dark:text-gray-300 truncate">{{ $file['name'] }}</span>
            </div>
            <div class="col-span-2 sm:col-span-2 flex items-center justify-end text-xs text-gray-500 dark:text-gray-400">
                {{ $formatSize($file['size']) }}
            </div>
            <div class="col-span-3 sm:col-span-2 flex items-center justify-end gap-1">
                <a href="{{ route('admin.pdf-cache.download', ['path' => $file['path']]) }}"
                   class="p-1.5 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
                   title="下載">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                <form method="POST" action="{{ route('admin.pdf-cache.delete') }}"
                      onsubmit="return confirm('確定要刪除「{{ $file['name'] }}」嗎？')"
                      class="inline">
                    @csrf
                    <input type="hidden" name="path" value="{{ $file['path'] }}">
                    <button type="submit" class="p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                            title="刪除">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                </form>
            </div>
        </div>
        @endforeach
    </div>
</div>

<script>
function pdfCache() {
    return { search: '' }
}
</script>
@endsection