@extends('layouts.admin')
@section('title', '技職考試匯入')
@section('content')
<div class="max-w-6xl">
    {{-- 統計卡片 --}}
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4">
            <div class="text-2xl font-bold text-gray-900 dark:text-white">{{ $syncedCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">已同步科目</div>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4">
            <div class="text-2xl font-bold text-amber-600">{{ $pendingCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">待匯入</div>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4">
            <div class="text-2xl font-bold text-cyan-600">{{ $pdfReadyCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">PDF已下載(待解析)</div>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4">
            <div class="text-2xl font-bold text-green-600">{{ $importedCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">已完成(有題目)</div>
        </div>
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4">
            <div class="text-2xl font-bold text-red-600">{{ $failedCount }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">失敗</div>
        </div>
    </div>

    {{-- 頁籤 --}}
    <div class="flex gap-2 mb-6 border-b border-gray-200 dark:border-slate-700 pb-2">
        <button onclick="switchTab('list')" id="tabList" class="tab-btn px-5 py-2.5 rounded-t-lg text-sm font-semibold border-b-2 border-blue-600 text-blue-700 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20">
            <svg class="w-4 h-4 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            考題清單
        </button>
        <button onclick="switchTab('import')" id="tabImport" class="tab-btn px-5 py-2.5 rounded-t-lg text-sm font-semibold border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700">
            <svg class="w-4 h-4 inline -mt-0.5 mr-1" 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-8l-4-4m0 0L8 8m4-4v12"/></svg>
            匯入清單
        </button>
    </div>

    {{-- ====================== TAB 1: 考題清單 ====================== --}}
    <div id="panelList">
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-6">
            <div class="p-5 space-y-4">
                {{-- 第一列：年份 + 考試分類下拉 + 狀態 --}}
                <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">起始年份</label>
                        <select id="localYearStart" onchange="loadLocalExams()" class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">不限</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">結束年份</label>
                        <select id="localYearEnd" onchange="loadLocalExams()" class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">不限</option>
                        </select>
                    </div>
                    <div class="md:col-span-6">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試分類</label>
                        <select id="localExam" class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">全部考試</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">狀態</label>
                        <select id="localStatus" class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="">全部</option>
                            <option value="pending">待匯入</option>
                            <option value="pdf_ready">PDF已下載(待解析)</option>
                            <option value="completed">已完成(有題目)</option>
                            <option value="failed">失敗</option>
                        </select>
                    </div>
                </div>
                {{-- 第二列：考試名稱 + 職類 + 科目 --}}
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試名稱</label>
                        <input type="text" id="localExamName" placeholder="例：全國技術士技能檢定..."
                               class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-blue-500 placeholder-gray-400">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">職類</label>
                        <input type="text" id="localCategory" placeholder="例：電腦軟體應用、中餐烹調..."
                               class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-blue-500 placeholder-gray-400">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">科目/級別</label>
                        <input type="text" id="localKeyword" placeholder="例：丙級、乙級..."
                               class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-blue-500 placeholder-gray-400">
                    </div>
                </div>
                <div class="flex gap-3 items-center">
                    <button onclick="doLocalSearch()" class="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg text-sm font-semibold hover:shadow-lg hover:scale-[1.02] transition-all whitespace-nowrap">搜尋</button>
                    <button onclick="resetLocalSearch()" class="px-4 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-semibold hover:bg-gray-300 transition-colors whitespace-nowrap">清除</button>
                    <div class="flex items-center gap-1.5 ml-auto">
                        <label class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">每頁</label>
                        <select id="localPerPage" onchange="doLocalSearch()" class="px-2 py-2.5 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-sm focus:ring-2 focus:ring-blue-500">
                            <option value="20">20</option>
                            <option value="50" selected>50</option>
                            <option value="150">150</option>
                            <option value="200">200</option>
                        </select>
                        <label class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">筆</label>
                    </div>
                </div>
            </div>
        </div>

        {{-- 操作列 --}}
        <div id="localActions" class="hidden flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <span id="localResultInfo" class="text-sm text-gray-600 dark:text-gray-400"></span>
                <span id="localSelectedInfo" class="text-sm font-semibold text-blue-600 dark:text-blue-400 hidden"></span>
            </div>
            <div class="flex items-center gap-2">
                <button onclick="toggleLocalSelectAll()" class="px-3 py-2 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg text-xs font-semibold hover:bg-gray-300 transition-colors">全選 / 取消</button>
                <button onclick="importLocalSelected()" id="btnImportLocal" class="px-4 py-2 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg text-xs font-semibold hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" 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>批次匯入題庫
                </button>
                <input type="text" id="tocLine1" placeholder="目錄標題第一行" value="" class="px-2 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-xs text-gray-700 dark:text-gray-300 w-40">
                <input type="text" id="tocLine2" placeholder="目錄標題第二行（選填）" value="" class="px-2 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-xs text-gray-700 dark:text-gray-300 w-44">
                <select id="downloadMode" class="px-2 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-xs font-semibold text-gray-700 dark:text-gray-300">
                    <optgroup label="合併下載（含目錄+筆記+頁碼）">
                        <option value="merge|both">合併：試題 + 答案</option>
                        <option value="merge|question">合併：僅試題</option>
                        <option value="merge|answer">合併：僅答案</option>
                    </optgroup>
                    <optgroup label="分科下載（每科各自合併）">
                        <option value="split|both">分科：試題 + 答案</option>
                        <option value="split|question">分科：僅試題</option>
                        <option value="split|answer">分科：僅答案</option>
                    </optgroup>
                    <optgroup label="原始檔案">
                        <option value="raw|both">原始 PDF：試題 + 答案</option>
                        <option value="raw|question">原始 PDF：僅試題</option>
                        <option value="raw|answer">原始 PDF：僅答案</option>
                    </optgroup>
                </select>
                <button onclick="downloadLocalSelected()" id="btnDownloadLocal" class="px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg text-xs font-semibold hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" 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>下載
                </button>
                <button onclick="deleteLocalSelected()" id="btnDeleteLocal" class="px-4 py-2 bg-gradient-to-r from-red-600 to-rose-600 text-white rounded-lg text-xs font-semibold hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" 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>

        {{-- 表格 --}}
        <div id="localResultsTable" class="hidden bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 dark:bg-slate-800">
                        <tr>
                            <th class="w-10 px-3 py-3 text-center"><input type="checkbox" id="localCheckAll" onchange="toggleLocalSelectAll(this.checked)" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"></th>
                            <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">年份</th>
                            <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">考試名稱</th>
                            <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">職類</th>
                            <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">科目/級別</th>
                            <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">狀態</th>
                            <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">試題</th>
                            <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">答案</th>
                            <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">題數</th>
                            <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">操作</th>
                        </tr>
                    </thead>
                    <tbody id="localResultsBody" class="divide-y divide-gray-100 dark:divide-slate-800"></tbody>
                </table>
            </div>
            <div id="localPagination" class="p-4 flex justify-center gap-2"></div>
        </div>

        {{-- 初始提示 --}}
        <div id="localHint" class="text-center py-16">
            <svg class="w-16 h-16 mx-auto text-blue-200 dark:text-blue-900 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <p class="text-gray-500 dark:text-gray-400 text-lg font-semibold">請設定篩選條件後點擊「搜尋」</p>
            <p class="text-gray-400 dark:text-gray-500 text-sm mt-1">或直接點搜尋查看全部已匯入的科目</p>
        </div>

        {{-- 空結果 --}}
        <div id="localEmpty" class="hidden text-center py-16">
            <svg class="w-16 h-16 mx-auto text-gray-200 dark:text-gray-700 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-gray-400 dark:text-gray-500 text-lg font-semibold">未找到符合條件的科目</p>
            <p class="text-gray-400 dark:text-gray-500 text-sm mt-1">請調整條件或到「匯入清單」頁籤上傳 HTML 檔案</p>
        </div>
    </div>

    {{-- ====================== TAB 2: 匯入清單 ====================== --}}
    <div id="panelImport" class="hidden">
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden">
            <div class="bg-gradient-to-r from-teal-600 to-cyan-600 p-5">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center">
                        <svg class="w-7 h-7 text-white" 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>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-white">匯入技職考試 HTML 檔案</h3>
                        <p class="text-teal-100 text-sm">從技職考試網站下載的 HTML 頁面，系統會自動解析考題清單並匯入資料庫</p>
                    </div>
                </div>
            </div>
            <div class="p-6 space-y-5">
                <div class="bg-teal-50 dark:bg-teal-900/20 rounded-lg p-4 text-sm text-teal-800 dark:text-teal-300">
                    <p class="font-semibold mb-2">操作步驟：</p>
                    <ol class="list-decimal list-inside space-y-1 text-teal-700 dark:text-teal-400">
                        <li>前往 <a href="https://owinform.wdasec.gov.tw/ExamNet/owInform/PastQuestions.aspx" target="_blank" class="underline font-semibold">技職考試歷屆試題</a></li>
                        <li>選擇年份，點擊「查詢」看到考試清單</li>
                        <li>點擊某一場考試的「瀏覽」按鈕，展開科目與 PDF 連結</li>
                        <li>在瀏覽器按 <kbd class="px-1.5 py-0.5 bg-white dark:bg-slate-800 rounded text-xs font-mono border">Ctrl+S</kbd> 儲存整個頁面為 HTML 檔案</li>
                        <li>回到這裡上傳該 HTML 檔案</li>
                    </ol>
                    <p class="mt-2 text-xs text-teal-600 dark:text-teal-500">重複的科目會自動跳過，可多次匯入不同年份。需要在「瀏覽」展開後才儲存，否則無法取得 PDF 連結。</p>
                </div>

                <div class="flex items-center gap-4">
                    <label class="flex-1">
                        <input type="file" id="htmlFileInput" accept=".html,.htm" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-6 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100 dark:file:bg-teal-900/30 dark:file:text-teal-400 cursor-pointer">
                    </label>
                    <button onclick="uploadHtmlFile()" id="btnUploadHtml" class="px-6 py-2.5 bg-gradient-to-r from-teal-600 to-cyan-600 text-white rounded-lg text-sm font-semibold hover:shadow-lg hover:scale-[1.02] transition-all disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap" disabled>
                        解析並匯入
                    </button>
                    <div id="htmlUploadLoading" class="hidden flex items-center gap-2 text-sm text-gray-500 whitespace-nowrap">
                        <svg class="animate-spin h-5 w-5 text-teal-500" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                        解析中...
                    </div>
                </div>
                <div id="htmlUploadResult" class="hidden"></div>
            </div>
        </div>
    </div>

    {{-- 匯入進度 overlay --}}
    <div id="importOverlay" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
        <div class="bg-white dark:bg-slate-900 rounded-xl shadow-2xl p-8 max-w-md w-full mx-4">
            <div class="text-center mb-4">
                <svg class="animate-spin h-12 w-12 mx-auto text-green-500 mb-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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                <p class="text-lg font-bold text-gray-900 dark:text-white" id="importTitle">匯入中...</p>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1" id="importSubtitle">正在下載 PDF 並用 AI 解析題目</p>
            </div>
            <div class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-3 mb-2">
                <div id="importProgressBar" class="bg-gradient-to-r from-green-500 to-emerald-500 h-3 rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
            <p id="importProgressText" class="text-xs text-gray-500 text-center">0 / 0</p>
            <div id="importLog" class="mt-4 max-h-40 overflow-y-auto text-xs text-gray-600 dark:text-gray-400 space-y-1 font-mono"></div>
        </div>
    </div>
</div>

<script>
const CSRF_TOKEN = '{{ csrf_token() }}';

// ══════════════════ 頁籤 ══════════════════
function switchTab(tab) {
    document.getElementById('panelList').classList.toggle('hidden', tab !== 'list');
    document.getElementById('panelImport').classList.toggle('hidden', tab !== 'import');

    const active = 'tab-btn px-5 py-2.5 rounded-t-lg text-sm font-semibold border-b-2 border-blue-600 text-blue-700 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20';
    const inactive = 'tab-btn px-5 py-2.5 rounded-t-lg text-sm font-semibold border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700';

    document.getElementById('tabList').className = tab === 'list' ? active : inactive;
    document.getElementById('tabImport').className = tab === 'import' ? active : inactive;
}

// ══════════════════ HTML 上傳 ══════════════════
document.getElementById('htmlFileInput').addEventListener('change', function() {
    document.getElementById('btnUploadHtml').disabled = !this.files.length;
    document.getElementById('htmlUploadResult').classList.add('hidden');
});

async function uploadHtmlFile() {
    const fileInput = document.getElementById('htmlFileInput');
    if (!fileInput.files.length) return;

    const btn = document.getElementById('btnUploadHtml');
    const loading = document.getElementById('htmlUploadLoading');
    const resultDiv = document.getElementById('htmlUploadResult');

    btn.disabled = true;
    loading.classList.remove('hidden');
    resultDiv.classList.add('hidden');

    const formData = new FormData();
    formData.append('html_file', fileInput.files[0]);
    formData.append('_token', CSRF_TOKEN);

    try {
        const res = await fetch('{{ route("admin.vocational.import-html") }}', {
            method: 'POST',
            headers: { 'Accept': 'application/json' },
            body: formData,
        });
        const data = await res.json();
        resultDiv.classList.remove('hidden');

        if (data.success) {
            resultDiv.className = 'p-4 rounded-lg text-sm bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800';
            resultDiv.innerHTML = `
                <div class="font-semibold mb-1">${escapeHtml(data.message)}</div>
                <div class="text-xs text-green-600">新增 ${data.synced} 筆 | 跳過 ${data.skipped} 筆 | 共 ${data.total} 筆</div>
                ${data.synced > 0 ? '<div class="mt-2"><button onclick="switchTab(\'list\');doLocalSearch();" class="text-xs font-semibold underline">前往考題清單查看 &rarr;</button></div>' : ''}
            `;
            setTimeout(() => location.reload(), 2500);
        } else {
            resultDiv.className = 'p-4 rounded-lg text-sm bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 border border-red-200';
            resultDiv.textContent = data.message || '解析失敗';
        }
    } catch (e) {
        resultDiv.classList.remove('hidden');
        resultDiv.className = 'p-4 rounded-lg text-sm bg-red-50 text-red-700 border border-red-200';
        resultDiv.textContent = '上傳失敗：' + e.message;
    } finally { btn.disabled = false; loading.classList.add('hidden'); }
}

// ══════════════════ 本地清單 ══════════════════
const allYears = @json($years);

(async function initList() {
    let yearCounts = {};
    try {
        const res = await fetch('{{ route("admin.vocational.local-years") }}', { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        (data.years || []).forEach(y => { yearCounts[y.roc_year] = y.exam_count; });
    } catch (e) {}

    ['localYearStart', 'localYearEnd'].forEach(id => {
        const sel = document.getElementById(id);
        allYears.forEach(y => {
            const opt = document.createElement('option');
            opt.value = y.label;
            const count = yearCounts[y.label];
            opt.textContent = count ? `${y.label} 年（${count} 場）` : `${y.label} 年`;
            sel.appendChild(opt);
        });
    });

    await loadLocalExams();
})();

async function loadLocalExams() {
    const ys = document.getElementById('localYearStart').value;
    const ye = document.getElementById('localYearEnd').value;
    const sel = document.getElementById('localExam');
    sel.innerHTML = '<option value="">全部考試</option>';

    const params = new URLSearchParams();
    if (ys) params.set('roc_year_start', ys);
    if (ye) params.set('roc_year_end', ye);

    try {
        const res = await fetch(`{{ route("admin.vocational.local-exams") }}?${params}`, { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        (data.exams || []).forEach(e => {
            const opt = document.createElement('option');
            opt.value = e.id;
            opt.textContent = `[${e.roc_year}] ${e.exam_name}（${e.completed_count}/${e.subject_count}）`;
            sel.appendChild(opt);
        });
    } catch (e) {}
}

function resetLocalSearch() {
    document.getElementById('localYearStart').value = '';
    document.getElementById('localYearEnd').value = '';
    document.getElementById('localExam').innerHTML = '<option value="">全部考試</option>';
    document.getElementById('localExamName').value = '';
    document.getElementById('localCategory').value = '';
    document.getElementById('localStatus').value = '';
    document.getElementById('localKeyword').value = '';
    loadLocalExams();
    doLocalSearch();
}

async function doLocalSearch(page = 1) {
    const params = new URLSearchParams({ page, per_page: document.getElementById('localPerPage').value });
    const fields = {
        roc_year_start: 'localYearStart', roc_year_end: 'localYearEnd',
        vocational_exam_id: 'localExam', exam_name: 'localExamName',
        category: 'localCategory', status: 'localStatus', keyword: 'localKeyword',
    };
    Object.entries(fields).forEach(([k, id]) => {
        const v = document.getElementById(id).value;
        if (v) params.set(k, v);
    });

    try {
        const res = await fetch(`{{ route("admin.vocational.local-search") }}?${params}`, { headers: { 'Accept': 'application/json' } });
        renderLocalResults(await res.json());
    } catch (e) { alert('搜尋失敗：' + e.message); }
}

function renderLocalResults(data) {
    const items = data.data || [];
    const tbody = document.getElementById('localResultsBody');
    const table = document.getElementById('localResultsTable');
    const actions = document.getElementById('localActions');
    const empty = document.getElementById('localEmpty');
    const hint = document.getElementById('localHint');

    hint.classList.add('hidden');

    if (!items.length && (!data.total || data.total === 0)) {
        table.classList.add('hidden'); actions.classList.add('hidden');
        empty.classList.remove('hidden'); return;
    }

    empty.classList.add('hidden'); table.classList.remove('hidden'); actions.classList.remove('hidden');
    document.getElementById('localResultInfo').textContent = `共 ${data.total} 筆（第 ${data.current_page}/${data.last_page} 頁）`;

    tbody.innerHTML = '';
    items.forEach(item => {
        const hasQuestions = item.question_count != null && item.question_count > 0;
        const canImport = ['pending', 'failed'].includes(item.import_status);
        const isCompleted = item.import_status === 'completed';
        const tr = document.createElement('tr');
        tr.className = 'hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors';
        tr.innerHTML = `
            <td class="px-3 py-2.5 text-center"><input type="checkbox" data-id="${item.id}" onchange="updateLocalCount()" class="local-check rounded border-gray-300 text-blue-600 focus:ring-blue-500"></td>
            <td class="px-4 py-2.5 text-xs text-gray-500">${item.vocational_exam?.roc_year || ''}</td>
            <td class="px-4 py-2.5 text-xs text-gray-900 dark:text-white">${escapeHtml(item.vocational_exam?.exam_name || '')}</td>
            <td class="px-4 py-2.5 text-xs text-gray-600 dark:text-gray-400">${escapeHtml(item.category_name)}</td>
            <td class="px-4 py-2.5 text-xs font-medium text-gray-900 dark:text-white">${escapeHtml(item.subject_name)}</td>
            <td class="px-4 py-2.5 text-center">${hasQuestions ? statusBadge('completed') : (isCompleted ? statusBadge('pdf_ready') : statusBadge(item.import_status))}</td>
            <td class="px-4 py-2.5 text-center">${item.question_url ? '<span class="inline-block w-2 h-2 rounded-full bg-blue-500" title="有試題"></span>' : '<span class="text-gray-300">-</span>'}</td>
            <td class="px-4 py-2.5 text-center">${item.answer_url ? '<span class="inline-block w-2 h-2 rounded-full bg-green-500" title="有答案"></span>' : '<span class="text-gray-300">-</span>'}</td>
            <td class="px-4 py-2.5 text-center text-xs text-gray-600">${hasQuestions ? item.question_count : '-'}</td>
            <td class="px-4 py-2.5 text-center whitespace-nowrap">
                ${canImport ? `<button onclick="importSingle(${item.id},this)" class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-semibold hover:bg-green-200">匯入</button>` : ''}
                ${isCompleted ? `<button onclick="reimportSingle(${item.id},this)" class="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-semibold hover:bg-amber-200">重新匯入</button>` : ''}
                ${item.exam_id ? `<a href="/exams/${item.exam_id}/paper/download-pdf" class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs font-semibold hover:bg-purple-200 inline-block" title="下載含詳解 PDF">詳解PDF</a>` : ''}
                ${item.exam_id ? `<a href="/exams/${item.exam_id}/paper/pdf" target="_blank" class="px-2 py-1 bg-indigo-100 text-indigo-700 rounded text-xs font-semibold hover:bg-indigo-200 inline-block" title="預覽含詳解">預覽</a>` : ''}
                ${item.exam_id ? `<button onclick="generateToCache(${item.exam_id},this)" class="px-2 py-1 bg-teal-100 text-teal-700 rounded text-xs font-semibold hover:bg-teal-200" title="產生詳解 PDF 到快取資料夾">存快取</button>` : ''}
                <button onclick="deleteSingle(${item.id})" class="px-2 py-1 bg-red-100 text-red-600 rounded text-xs font-semibold hover:bg-red-200 ml-1">刪除</button>
                ${item.import_error ? `<span class="block text-xs text-red-400 mt-1 truncate max-w-[120px]" title="${escapeAttr(item.import_error||'')}">${escapeHtml((item.import_error||'').substring(0,25))}</span>` : ''}
            </td>
        `;
        tbody.appendChild(tr);
    });

    // 分頁
    const pag = document.getElementById('localPagination');
    pag.innerHTML = '';
    if (data.last_page > 1) {
        for (let p = 1; p <= data.last_page; p++) {
            const btn = document.createElement('button');
            btn.textContent = p;
            btn.className = `px-3 py-1 rounded text-xs font-semibold ${p === data.current_page ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'}`;
            btn.onclick = () => doLocalSearch(p);
            pag.appendChild(btn);
        }
    }
    updateLocalCount();
}

function statusBadge(s) {
    return {
        pending: '<span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full text-xs font-semibold">待匯入</span>',
        downloading: '<span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold">下載中</span>',
        parsing: '<span class="px-2 py-0.5 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold">解析中</span>',
        pdf_ready: '<span class="px-2 py-0.5 bg-cyan-100 text-cyan-700 rounded-full text-xs font-semibold">PDF已下載</span>',
        completed: '<span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs font-semibold">已完成</span>',
        failed: '<span class="px-2 py-0.5 bg-red-100 text-red-700 rounded-full text-xs font-semibold">失敗</span>',
    }[s] || s;
}

// ══════════════════ 勾選 ══════════════════
function toggleLocalSelectAll(checked) {
    if (typeof checked === 'undefined') {
        const c = document.getElementById('localCheckAll');
        checked = !c.checked; c.checked = checked;
    }
    document.querySelectorAll('.local-check').forEach(c => c.checked = checked);
    updateLocalCount();
}

function updateLocalCount() {
    const total = document.querySelectorAll('.local-check').length;
    const sel = document.querySelectorAll('.local-check:checked').length;
    const info = document.getElementById('localSelectedInfo');
    info.textContent = sel > 0 ? `已選 ${sel} / ${total}` : '';
    info.classList.toggle('hidden', sel === 0);
    document.getElementById('btnImportLocal').disabled = sel === 0;
    document.getElementById('btnDownloadLocal').disabled = sel === 0;
    document.getElementById('btnDeleteLocal').disabled = sel === 0;
    const ca = document.getElementById('localCheckAll');
    ca.checked = total > 0 && sel === total;
    ca.indeterminate = sel > 0 && sel < total;
}

// ══════════════════ 產生詳解到快取 ══════════════════
async function generateToCache(examId, btn) {
    btn.disabled = true; const origText = btn.textContent; btn.textContent = '產生中...';
    try {
        const res = await fetch(`/exams/${examId}/paper/generate-to-cache`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        });
        const data = await res.json();
        if (data.success) {
            btn.textContent = '已存';
            btn.classList.remove('bg-teal-100', 'text-teal-700');
            btn.classList.add('bg-gray-100', 'text-gray-500');
            alert('詳解 PDF 已儲存到快取：\n' + data.path);
        } else {
            btn.textContent = origText; btn.disabled = false;
            alert('失敗：' + (data.error || '未知錯誤'));
        }
    } catch (e) {
        btn.textContent = origText; btn.disabled = false;
        alert('產生失敗：' + e.message);
    }
}

// ══════════════════ 匯入（下載 PDF） ══════════════════
async function importSingle(id, btn) {
    btn.disabled = true; btn.textContent = '匯入中...';
    try {
        const res = await fetch('{{ route("admin.vocational.import-subject") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body: JSON.stringify({ vocational_subject_id: id }),
        });
        const data = await res.json();
        alert(data.message || (data.success ? '匯入成功' : '匯入失敗'));
        doLocalSearch();
    } catch (e) { alert('匯入失敗：' + e.message); btn.disabled = false; btn.textContent = '匯入'; }
}

async function reimportSingle(id, btn) {
    if (!confirm('確定要重新匯入？將重新下載 PDF 並覆蓋現有題目。')) return;
    btn.disabled = true; btn.textContent = '匯入中...';
    try {
        const res = await fetch('{{ route("admin.vocational.import-subject") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body: JSON.stringify({ vocational_subject_id: id, force: true }),
        });
        const data = await res.json();
        alert(data.message || (data.success ? '匯入成功' : '匯入失敗'));
        doLocalSearch();
    } catch (e) { alert('匯入失敗：' + e.message); btn.disabled = false; btn.textContent = '重新匯入'; }
}

async function importLocalSelected() {
    const ids = [...document.querySelectorAll('.local-check:checked')].map(c => parseInt(c.dataset.id));
    if (!ids.length) return;
    if (!confirm(`即將匯入 ${ids.length} 個科目（下載 PDF → AI 解析 → 寫入題庫），每個約 10~30 秒，確定嗎？`)) return;

    const overlay = document.getElementById('importOverlay');
    const bar = document.getElementById('importProgressBar');
    const text = document.getElementById('importProgressText');
    const log = document.getElementById('importLog');
    document.getElementById('importTitle').textContent = '批次匯入中...';
    document.getElementById('importSubtitle').textContent = '下載 PDF + AI 解析中，請稍候';
    overlay.classList.remove('hidden'); log.innerHTML = '';

    let success = 0, failed = 0, totalQ = 0;
    for (let i = 0; i < ids.length; i++) {
        bar.style.width = Math.round(((i+1)/ids.length)*100) + '%';
        text.textContent = `${i+1} / ${ids.length}`;
        addLog(`[${i+1}/${ids.length}] 匯入中...`);
        try {
            const res = await fetch('{{ route("admin.vocational.import-subject") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
                body: JSON.stringify({ vocational_subject_id: ids[i] }),
            });
            const data = await res.json();
            if (data.success) { success++; totalQ += data.question_count||0; addLog(`  -> ${data.message}`, 'ok'); }
            else { failed++; addLog(`  -> ${data.message}`, 'err'); }
        } catch (e) { failed++; addLog(`  -> ${e.message}`, 'err'); }
    }

    document.getElementById('importTitle').textContent = '匯入完成！';
    document.getElementById('importSubtitle').textContent = `成功 ${success} / 失敗 ${failed}，共 ${totalQ} 題`;
    bar.style.width = '100%';
    addLog(`完成：成功 ${success}，失敗 ${failed}，共 ${totalQ} 題`, 'ok');
    setTimeout(() => { overlay.classList.add('hidden'); location.reload(); }, 3000);
}

// ══════════════════ AI 解析 ══════════════════
async function parseSingle(id, btn) {
    btn.disabled = true; btn.textContent = '解析中...';
    try {
        const res = await fetch('{{ route("admin.vocational.parse-subject") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body: JSON.stringify({ vocational_subject_id: id }),
        });
        const data = await res.json();
        alert(data.message || (data.success ? '解析成功' : '解析失敗'));
        doLocalSearch();
    } catch (e) { alert('解析失敗：' + e.message); btn.disabled = false; btn.textContent = '解析'; }
}

async function parseLocalSelected() {
    const ids = [...document.querySelectorAll('.local-check:checked')].map(c => parseInt(c.dataset.id));
    if (!ids.length) return;
    if (!confirm(`即將 AI 解析 ${ids.length} 個科目，每個約 10~30 秒，確定嗎？`)) return;

    const overlay = document.getElementById('importOverlay');
    const bar = document.getElementById('importProgressBar');
    const text = document.getElementById('importProgressText');
    const log = document.getElementById('importLog');
    document.getElementById('importTitle').textContent = 'AI 解析中...';
    document.getElementById('importSubtitle').textContent = '正在解析 PDF 題目，請稍候';
    overlay.classList.remove('hidden'); log.innerHTML = '';

    let success = 0, failed = 0, totalQ = 0;
    for (let i = 0; i < ids.length; i++) {
        bar.style.width = Math.round(((i+1)/ids.length)*100) + '%';
        text.textContent = `${i+1} / ${ids.length}`;
        addLog(`[${i+1}/${ids.length}] 解析中...`);
        try {
            const res = await fetch('{{ route("admin.vocational.parse-subject") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
                body: JSON.stringify({ vocational_subject_id: ids[i] }),
            });
            const data = await res.json();
            if (data.success) { success++; totalQ += data.question_count||0; addLog(`  -> ${data.message}`, 'ok'); }
            else { failed++; addLog(`  -> ${data.message}`, 'err'); }
        } catch (e) { failed++; addLog(`  -> ${e.message}`, 'err'); }
    }

    document.getElementById('importTitle').textContent = '解析完成！';
    document.getElementById('importSubtitle').textContent = `成功 ${success} / 失敗 ${failed}，共 ${totalQ} 題`;
    bar.style.width = '100%';
    addLog(`完成：成功 ${success}，失敗 ${failed}，共 ${totalQ} 題`, 'ok');
    setTimeout(() => { overlay.classList.add('hidden'); location.reload(); }, 3000);
}

// ══════════════════ 合併下載 PDF ══════════════════
async function downloadLocalSelected() {
    const ids = [...document.querySelectorAll('.local-check:checked')].map(c => parseInt(c.dataset.id));
    if (!ids.length) return;
    const [dlMode, dlType] = document.getElementById('downloadMode').value.split('|');
    const modeLabel = { merge: '合併', split: '分科', raw: '原始檔案' }[dlMode];
    const typeLabel = { both: '試題＋答案', question: '僅試題', answer: '僅答案' }[dlType];
    if (!confirm(`即將下載 ${ids.length} 個科目\n模式：${modeLabel}（${typeLabel}）\n\n確定？`)) return;

    const btn = document.getElementById('btnDownloadLocal');
    btn.disabled = true;
    btn.innerHTML = '<svg class="w-3.5 h-3.5 inline animate-spin -mt-0.5 mr-1" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>下載中...';

    try {
        const res = await fetch('{{ route("admin.vocational.local-batch-download") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body: JSON.stringify({ subject_ids: ids, type: dlType, mode: dlMode, toc_line1: document.getElementById('tocLine1').value.trim(), toc_line2: document.getElementById('tocLine2').value.trim() }),
        });
        if (!res.ok) { const e = await res.json().catch(()=>({})); alert(e.error||'下載失敗'); return; }

        const blob = await res.blob();
        const ct = res.headers.get('Content-Type') || '';
        let fn = ct.includes('zip') ? '技職歷年考題.zip' : '技職歷年考題.pdf';
        const m = (res.headers.get('Content-Disposition')||'').match(/filename\*?=(?:UTF-8'')?["']?([^"';\s]+)/i);
        if (m) fn = decodeURIComponent(m[1]);

        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob); a.download = fn;
        document.body.appendChild(a); a.click(); a.remove();
        URL.revokeObjectURL(a.href);
    } catch (e) { alert('下載失敗：' + e.message); }
    finally {
        btn.disabled = false;
        btn.innerHTML = '<svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" 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>下載';
        updateLocalCount();
    }
}

// ══════════════════ 刪除 ══════════════════
async function deleteSingle(id) {
    if (!confirm('確定要刪除此科目？（如已匯入題庫，題庫中的題目不會被刪除）')) return;
    try {
        const res = await fetch('{{ route("admin.vocational.delete-subjects") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body: JSON.stringify({ subject_ids: [id] }),
        });
        const data = await res.json();
        if (data.success) doLocalSearch();
        else alert(data.message || '刪除失敗');
    } catch (e) { alert('刪除失敗：' + e.message); }
}

async function deleteLocalSelected() {
    const ids = [...document.querySelectorAll('.local-check:checked')].map(c => parseInt(c.dataset.id));
    if (!ids.length) return;
    if (!confirm(`確定要刪除 ${ids.length} 筆科目？（題庫中已匯入的題目不會被刪除）`)) return;

    try {
        const res = await fetch('{{ route("admin.vocational.delete-subjects") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF_TOKEN },
            body: JSON.stringify({ subject_ids: ids }),
        });
        const data = await res.json();
        if (data.success) { alert(`已刪除 ${data.deleted} 筆`); location.reload(); }
        else alert(data.message || '刪除失敗');
    } catch (e) { alert('刪除失敗：' + e.message); }
}

// ══════════════════ 通用 ══════════════════
function addLog(t, type='') {
    const log = document.getElementById('importLog');
    const p = document.createElement('p');
    p.textContent = t;
    if (type==='ok') p.className='text-green-600';
    else if (type==='err') p.className='text-red-600';
    log.appendChild(p); log.scrollTop = log.scrollHeight;
}
function escapeHtml(s) { if(!s) return ''; const d=document.createElement('div'); d.textContent=s; return d.innerHTML; }
function escapeAttr(s) { return (s||'').replace(/'/g,"\\'").replace(/"/g,'&quot;').replace(/</g,'&lt;'); }

// Enter 鍵搜尋
['localExamName','localCategory','localKeyword'].forEach(id => {
    document.getElementById(id).addEventListener('keydown', e => { if (e.key === 'Enter') doLocalSearch(); });
});
</script>
@endsection