@extends('layouts.admin')

@section('title', '產生含目錄考古題')

@section('content')
<div class="max-w-3xl mx-auto px-4 py-8 space-y-5" x-data="pdfMerger()">

    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">產生含目錄考古題</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">上傳考古題 PDF，自動加上目錄、書籤與連續頁碼後下載。</p>
    </div>

    {{-- 錯誤訊息 --}}
    <div x-show="error" x-cloak class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl">
        <p class="text-sm text-red-700 dark:text-red-400" x-text="error"></p>
    </div>

    {{-- ── STEP 1：標題 ── --}}
    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden">
        <div class="flex items-center gap-3 px-6 py-4 bg-gray-50 dark:bg-slate-700/50 border-b border-gray-200 dark:border-slate-700">
            <span class="w-7 h-7 rounded-full bg-blue-600 text-white text-sm font-bold flex items-center justify-center flex-shrink-0">1</span>
            <div>
                <h2 class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">設定目錄標題</h2>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">顯示在合集第一頁目錄的大標題</p>
            </div>
        </div>
        <div class="px-6 py-5">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">主標題</label>
            <input type="text" x-model="tocLine1" maxlength="60" placeholder="例：公務人員高考三級考題"
                   class="w-full px-3 py-2.5 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm">
        </div>
    </div>

    {{-- ── STEP 2：上傳 PDF ── --}}
    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden">
        <div class="flex items-center gap-3 px-6 py-4 bg-gray-50 dark:bg-slate-700/50 border-b border-gray-200 dark:border-slate-700">
            <span class="w-7 h-7 rounded-full bg-blue-600 text-white text-sm font-bold flex items-center justify-center flex-shrink-0">2</span>
            <div>
                <h2 class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">上傳 PDF 檔案</h2>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">選擇上傳方式後拖拉或點擊選取檔案</p>
            </div>
        </div>
        <div class="px-6 py-5">

            {{-- 模式切換 --}}
            <div class="inline-flex rounded-lg border border-gray-200 dark:border-slate-600 overflow-hidden mb-6">
                <button @click="uploadMode='simple'"
                        :class="uploadMode==='simple' ? 'bg-blue-600 text-white' : 'bg-white dark:bg-slate-800 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700'"
                        class="px-5 py-2 text-sm font-medium transition-colors">
                    無科目區分
                </button>
                <button @click="uploadMode='sections'"
                        :class="uploadMode==='sections' ? 'bg-blue-600 text-white' : 'bg-white dark:bg-slate-800 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700'"
                        class="px-5 py-2 text-sm font-medium transition-colors border-l border-gray-200 dark:border-slate-600">
                    依科目分區
                </button>
            </div>

            {{-- ── 無科目模式 ── --}}
            <div x-show="uploadMode==='simple'" x-cloak>

                {{-- 試題 / 答案 --}}
                <div class="flex items-center gap-6 mb-4">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">類型</span>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" x-model="simpleType" value="試題" class="text-blue-600 focus:ring-blue-500">
                        <span class="text-sm text-gray-700 dark:text-gray-300">試題</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" x-model="simpleType" value="答案" class="text-blue-600 focus:ring-blue-500">
                        <span class="text-sm text-gray-700 dark:text-gray-300">答案</span>
                    </label>
                </div>

                {{-- 拖拉區 --}}
                <div @dragover.prevent="simpleDragging=true" @dragleave.prevent="simpleDragging=false"
                     @drop.prevent="handleSimpleDrop($event)">
                    <div class="border-2 border-dashed rounded-xl py-10 text-center cursor-pointer transition-colors"
                         :class="simpleDragging ? 'border-blue-400 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-300 dark:border-slate-600 hover:border-blue-400 hover:bg-gray-50 dark:hover:bg-slate-700/30'"
                         @click="$refs.simpleInput.click()">
                        <svg class="w-10 h-10 mx-auto mb-2 text-gray-300 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                        </svg>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            <span class="font-semibold text-blue-500">點擊選擇</span> 或拖拉 PDF 至此
                        </p>
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">可同時選取多個年份的 PDF</p>
                    </div>
                </div>
                <input type="file" x-ref="simpleInput" multiple accept=".pdf" class="hidden"
                       @change="handleSimpleInput($event)">

                {{-- 已上傳清單 --}}
                <div x-show="simpleFiles.length > 0" class="mt-4 rounded-xl overflow-hidden border border-gray-200 dark:border-slate-700">
                    <div class="grid grid-cols-12 gap-2 px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-slate-700/40">
                        <div class="col-span-2">年份（民國）</div>
                        <div class="col-span-2">類科</div>
                        <div class="col-span-7">檔案名稱</div>
                        <div class="col-span-1"></div>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-slate-700/50 max-h-64 overflow-y-auto">
                        <template x-for="item in simpleFiles" :key="item.id">
                            <div class="grid grid-cols-12 gap-2 px-4 py-2.5 items-center hover:bg-gray-50 dark:hover:bg-slate-700/20 transition-colors">
                                <div class="col-span-2">
                                    <input type="number" x-model.number="item.year" min="80" max="150" placeholder="113"
                                           @change="sortSimpleFiles()"
                                           class="w-full px-2 py-1 text-xs border border-gray-300 dark:border-slate-600 rounded bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500">
                                </div>
                                <div class="col-span-2">
                                    <input type="text" x-model="item.category" maxlength="40" placeholder="選填"
                                           class="w-full px-2 py-1 text-xs border border-gray-300 dark:border-slate-600 rounded bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500">
                                </div>
                                <div class="col-span-7 min-w-0">
                                    <div class="flex items-center gap-1.5">
                                        <svg class="w-3.5 h-3.5 text-red-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/>
                                            <path d="M14 2v6h6"/>
                                        </svg>
                                        <span class="text-xs text-gray-700 dark:text-gray-300 truncate" x-text="item.file.name" :title="item.file.name"></span>
                                    </div>
                                    <span class="text-xs text-gray-400 pl-5" x-text="formatSize(item.file.size)"></span>
                                </div>
                                <div class="col-span-1 flex justify-center">
                                    <button @click="simpleFiles = simpleFiles.filter(f => f.id !== item.id)"
                                            class="p-1 text-gray-300 hover:text-red-500 rounded 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="M6 18L18 6M6 6l12 12"/>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            {{-- ── 依科目模式 ── --}}
            <div x-show="uploadMode==='sections'" x-cloak>

                <div class="flex justify-end mb-3">
                    <button @click="addSection()"
                            class="flex items-center gap-1.5 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm">
                        <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        新增科目
                    </button>
                </div>

                {{-- 空狀態 --}}
                <div x-show="sections.length === 0"
                     class="border-2 border-dashed border-gray-200 dark:border-slate-600 rounded-xl py-12 text-center text-gray-400 dark:text-gray-500">
                    <svg class="w-10 h-10 mx-auto mb-2 text-gray-300 dark:text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 13h6m-3-3v6m5 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>
                    <p class="text-sm">點擊右上「新增科目」建立上傳區塊</p>
                </div>

                {{-- 科目區塊列表 --}}
                <div class="space-y-4">
                    <template x-for="section in sections" :key="section.id">
                        <div class="rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">

                            {{-- 科目標題列 --}}
                            <div class="flex items-center gap-3 px-4 py-3 bg-gray-50 dark:bg-slate-700/60 border-b border-gray-200 dark:border-slate-700">
                                <svg class="w-5 h-5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                                <input type="text" x-model="section.name" placeholder="科目名稱（選填）" maxlength="60"
                                       class="flex-1 px-3 py-1.5 text-sm font-semibold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                <select x-model="section.type"
                                        class="px-3 py-1.5 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500">
                                    <option value="試題">試題</option>
                                    <option value="答案">答案</option>
                                </select>
                                <button @click="removeSection(section.id)"
                                        class="p-1.5 text-gray-400 hover:text-red-500 dark:hover:text-red-400 rounded-lg 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>
                            </div>

                            {{-- 拖拉上傳區 --}}
                            <div class="px-4 py-3 border-b border-gray-100 dark:border-slate-700"
                                 @dragover.prevent="section.dragging = true"
                                 @dragleave.prevent="section.dragging = false"
                                 @drop.prevent="handleDrop($event, section.id); section.dragging = false">
                                <div class="border-2 border-dashed rounded-lg py-3 px-4 text-center cursor-pointer transition-colors"
                                     :class="section.dragging ? 'border-blue-400 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-slate-600 hover:border-blue-300 hover:bg-gray-50 dark:hover:bg-slate-700/30'"
                                     @click="triggerUpload(section.id)">
                                    <p class="text-xs text-gray-400 dark:text-gray-500">
                                        <span class="font-semibold text-blue-500">點擊選擇</span> 或拖拉 PDF 至此（可同時選多個年份）
                                    </p>
                                </div>
                            </div>

                            {{-- 欄位標題 --}}
                            <div x-show="section.files.length > 0"
                                 class="grid grid-cols-12 gap-2 px-4 py-2 bg-gray-50 dark:bg-slate-700/30 text-xs font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-slate-700">
                                <div class="col-span-2">年份（民國）</div>
                                <div class="col-span-2">類科</div>
                                <div class="col-span-7">檔案名稱</div>
                                <div class="col-span-1"></div>
                            </div>

                            {{-- 檔案列表 --}}
                            <div class="divide-y divide-gray-100 dark:divide-slate-700/50 max-h-52 overflow-y-auto">
                                <template x-for="item in section.files" :key="item.id">
                                    <div class="grid grid-cols-12 gap-2 px-4 py-2.5 items-center hover:bg-gray-50 dark:hover:bg-slate-700/20 transition-colors">
                                        <div class="col-span-2">
                                            <input type="number" x-model.number="item.year" min="80" max="150" placeholder="113"
                                                   class="w-full px-2 py-1 text-xs border border-gray-300 dark:border-slate-600 rounded bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500"
                                                   @change="sortSectionFiles(section)">
                                        </div>
                                        <div class="col-span-2">
                                            <input type="text" x-model="item.category" maxlength="40" placeholder="選填"
                                                   class="w-full px-2 py-1 text-xs border border-gray-300 dark:border-slate-600 rounded bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500">
                                        </div>
                                        <div class="col-span-7 min-w-0">
                                            <div class="flex items-center gap-1.5">
                                                <svg class="w-3.5 h-3.5 text-red-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                                                    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/>
                                                    <path d="M14 2v6h6"/>
                                                </svg>
                                                <span class="text-xs text-gray-700 dark:text-gray-300 truncate" x-text="item.file.name" :title="item.file.name"></span>
                                            </div>
                                            <span class="text-xs text-gray-400 dark:text-gray-500 pl-5" x-text="formatSize(item.file.size)"></span>
                                        </div>
                                        <div class="col-span-1 flex justify-center">
                                            <button @click="removeFileFromSection(section.id, item.id)"
                                                    class="p-1 text-gray-300 hover:text-red-500 dark:hover:text-red-400 rounded 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="M6 18L18 6M6 6l12 12"/>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </template>
                            </div>

                            {{-- 空提示 --}}
                            <div x-show="section.files.length === 0"
                                 class="px-4 py-4 text-center text-xs text-gray-400 dark:text-gray-500">
                                尚未上傳此科目的 PDF，請點擊或拖拉檔案至上方區域
                            </div>
                        </div>
                    </template>
                </div>
            </div>

        </div>
    </div>

    {{-- ── STEP 3：產生 ── --}}
    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-gray-200 dark:border-slate-700 shadow-sm overflow-hidden">
        <div class="flex items-center gap-3 px-6 py-4 bg-gray-50 dark:bg-slate-700/50 border-b border-gray-200 dark:border-slate-700">
            <span class="w-7 h-7 rounded-full bg-blue-600 text-white text-sm font-bold flex items-center justify-center flex-shrink-0">3</span>
            <div>
                <h2 class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">產生並下載</h2>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">依檔案大小約需 10～60 秒</p>
            </div>
        </div>
        <div class="px-6 py-5 space-y-4">

            {{-- 摘要 --}}
            <div x-show="totalFiles() > 0"
                 class="flex items-center gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 rounded-xl text-sm text-blue-700 dark:text-blue-300">
                <svg class="w-5 h-5 flex-shrink-0 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span>
                    已準備 <strong x-text="totalFiles()"></strong> 個 PDF
                    <template x-if="uploadMode==='sections'">
                        <span>，共 <strong x-text="sections.length"></strong> 個科目區塊</span>
                    </template>
                </span>
            </div>
            <div x-show="totalFiles() === 0"
                 class="flex items-center gap-3 p-4 bg-gray-50 dark:bg-slate-700/30 border border-gray-200 dark:border-slate-700 rounded-xl text-sm text-gray-500 dark:text-gray-400">
                <svg class="w-5 h-5 flex-shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span>請先在步驟 2 上傳至少一個 PDF</span>
            </div>

            {{-- 說明 --}}
            <div class="text-xs text-gray-400 dark:text-gray-500 space-y-1 pl-1">
                <p>✓ 自動依年份降冪排序（新 → 舊）</p>
                <p>✓ 含科目 / 年份書籤的目錄頁</p>
                <p>✓ 試題後附筆記頁；試題、答案分開合併</p>
                <p>✓ 全文連續頁碼（底部置中）</p>
            </div>

            {{-- 產生按鈕 --}}
            <button @click="submit()"
                    :disabled="totalFiles() === 0 || loading"
                    class="w-full py-3 px-4 rounded-xl font-semibold text-sm transition-all flex items-center justify-center gap-2"
                    :class="totalFiles() === 0 || loading
                        ? 'bg-gray-200 dark:bg-slate-700 text-gray-400 dark:text-gray-500 cursor-not-allowed'
                        : 'bg-blue-600 hover:bg-blue-700 text-white shadow-sm hover:shadow'">
                <template x-if="loading">
                    <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                    </svg>
                </template>
                <svg x-show="!loading" 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>
                <span x-text="loading ? '合併中，請稍候…' : '合併並下載（' + totalFiles() + ' 個 PDF）'"></span>
            </button>
        </div>
    </div>

    {{-- 隱藏 inputs --}}
    <input type="file" x-ref="simpleInput" multiple accept=".pdf" class="hidden" @change="handleSimpleInput($event)">
    <input type="file" x-ref="sectionInput" multiple accept=".pdf" class="hidden" @change="handleSectionInputChange($event)">
</div>

<script>
function pdfMerger() {
    let _uid = 0;

    return {
        uploadMode: 'simple',
        simpleType: '試題',
        simpleFiles: [],
        simpleDragging: false,
        sections: [],
        tocLine1: '考古題合集',
        activeSectionId: null,
        loading: false,
        error: null,

        totalFiles() {
            if (this.uploadMode === 'simple') return this.simpleFiles.length;
            return this.sections.reduce((sum, s) => sum + s.files.length, 0);
        },

        // ── 無科目模式 ──
        handleSimpleInput(event) {
            const files = Array.from(event.target.files).filter(f => f.type === 'application/pdf');
            this.addSimpleFiles(files);
            event.target.value = '';
        },
        handleSimpleDrop(event) {
            this.simpleDragging = false;
            const files = Array.from(event.dataTransfer.files).filter(f => f.type === 'application/pdf');
            this.addSimpleFiles(files);
        },
        addSimpleFiles(files) {
            files.forEach(file => {
                this.simpleFiles.push({ id: ++_uid, file, year: this.guessYear(file.name), category: '' });
            });
            this.sortSimpleFiles();
        },
        sortSimpleFiles() {
            this.simpleFiles.sort((a, b) => (b.year || 0) - (a.year || 0));
        },

        // ── 依科目模式 ──
        addSection() {
            this.sections.push({ id: ++_uid, name: '', type: '試題', files: [], dragging: false });
        },
        removeSection(id) {
            this.sections = this.sections.filter(s => s.id !== id);
        },
        triggerUpload(sectionId) {
            this.activeSectionId = sectionId;
            this.$refs.sectionInput.click();
        },
        handleSectionInputChange(event) {
            const files = Array.from(event.target.files).filter(f => f.type === 'application/pdf');
            if (this.activeSectionId) this.addFilesToSection(this.activeSectionId, files);
            event.target.value = '';
        },
        handleDrop(event, sectionId) {
            const files = Array.from(event.dataTransfer.files).filter(f => f.type === 'application/pdf');
            this.addFilesToSection(sectionId, files);
        },
        addFilesToSection(sectionId, files) {
            const section = this.sections.find(s => s.id === sectionId);
            if (!section) return;
            files.forEach(file => {
                section.files.push({ id: ++_uid, file, year: this.guessYear(file.name), category: '' });
            });
            this.sortSectionFiles(section);
        },
        removeFileFromSection(sectionId, fileId) {
            const section = this.sections.find(s => s.id === sectionId);
            if (section) section.files = section.files.filter(f => f.id !== fileId);
        },
        sortSectionFiles(section) {
            section.files.sort((a, b) => (b.year || 0) - (a.year || 0));
        },

        // ── 工具 ──
        guessYear(filename) {
            const base = filename.replace(/\.pdf$/i, '');
            let m = base.match(/\b(20[012]\d)\b/);
            if (m) return parseInt(m[1]) - 1911;
            for (const match of [...base.matchAll(/(?<![0-9])(\d{3})(?![0-9])/g)]) {
                const y = parseInt(match[1]);
                if (y >= 80 && y <= 130) return y;
            }
            for (const s of (base.match(/\d+/g) || [])) {
                const n = parseInt(s);
                if (n >= 80 && n <= 130) return n;
            }
            return new Date().getFullYear() - 1911;
        },
        formatSize(bytes) {
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
        },

        // ── 提交 ──
        async submit() {
            this.error = null;
            if (this.totalFiles() === 0) { this.error = '請先上傳至少一個 PDF 檔案'; return; }

            if (this.uploadMode === 'simple') {
                for (const item of this.simpleFiles) {
                    if (!item.year || item.year < 1 || item.year > 200) {
                        this.error = '有檔案的年份不正確，請修正'; return;
                    }
                }
            } else {
                for (const section of this.sections) {
                    if (section.files.length === 0) continue;
                    for (const item of section.files) {
                        if (!item.year || item.year < 1 || item.year > 200) {
                            this.error = `「${section.name.trim() || '未命名科目'}」有檔案的年份不正確，請修正`; return;
                        }
                    }
                }
            }

            this.loading = true;
            const formData = new FormData();
            const csrf = document.querySelector('meta[name="csrf-token"]');
            if (csrf) formData.append('_token', csrf.content);
            formData.append('toc_line1', this.tocLine1);
            formData.append('toc_line2', '');

            if (this.uploadMode === 'simple') {
                this.simpleFiles.forEach(item => {
                    formData.append('files[]', item.file);
                    formData.append('names[]', this.tocLine1.trim());
                    formData.append('years[]', item.year);
                    formData.append('categories[]', item.category || '');
                    formData.append('types[]', this.simpleType);
                });
            } else {
                this.sections.forEach(section => {
                    const sorted = [...section.files].sort((a, b) => (b.year || 0) - (a.year || 0));
                    sorted.forEach(item => {
                        formData.append('files[]', item.file);
                        formData.append('names[]', section.name.trim());
                        formData.append('years[]', item.year);
                        formData.append('categories[]', item.category || '');
                        formData.append('types[]', section.type);
                    });
                });
            }

            try {
                const response = await fetch('{{ route("admin.pdf-merge.merge") }}', {
                    method: 'POST',
                    body: formData,
                });
                const contentType = response.headers.get('Content-Type') || '';
                if (!response.ok || contentType.includes('application/json')) {
                    const err = await response.json().catch(() => ({}));
                    this.error = err.error || '合併失敗，請確認伺服器已安裝 pdftk / wkhtmltopdf';
                    return;
                }
                const blob = await response.blob();
                const disposition = response.headers.get('Content-Disposition') || '';
                let filename = contentType.includes('zip') ? '考古題合集.zip' : '考古題合集.pdf';
                const rfc5987 = disposition.match(/filename\*=(?:UTF-8|utf-8)''([^;\s\r\n]+)/);
                if (rfc5987) {
                    try { filename = decodeURIComponent(rfc5987[1]); } catch(e) {}
                } else {
                    const basic = disposition.match(/filename="([^"]+)"/);
                    if (basic) filename = basic[1];
                }
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url; a.download = filename;
                document.body.appendChild(a); a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            } catch (e) {
                this.error = '網路錯誤：' + e.message;
            } finally {
                this.loading = false;
            }
        },
    };
}
</script>
@endsection