@extends('layouts.admin')
@section('title', '工具下載')
@section('content')
<div class="max-w-4xl">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        {{-- 考試題目解析工具 --}}
        <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-blue-600 to-indigo-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">考試題目解析工具</h3>
                        <p class="text-blue-100 text-sm">v1.0.0 | Windows 桌面應用</p>
                    </div>
                </div>
            </div>
            <div class="p-5 space-y-4">
                <div class="text-sm text-gray-600 dark:text-gray-400 space-y-2">
                    <p class="font-semibold text-gray-800 dark:text-gray-200">功能說明：</p>
                    <ul class="space-y-1 ml-4 list-disc">
                        <li>上傳考試 PDF 或圖片檔案</li>
                        <li>使用 Gemini AI 自動解析題目、選項、答案</li>
                        <li>自動產生詳解說明</li>
                        <li>一鍵匯入到考試系統</li>
                        <li>也可輸出為 Markdown 或 CSV 檔案</li>
                    </ul>
                </div>
                <div class="bg-gray-50 dark:bg-slate-800 rounded-lg p-3 text-xs text-gray-500 dark:text-gray-400">
                    <p class="font-semibold mb-1">系統需求：</p>
                    <p>Windows 10/11 | 需要網路連線 | 需要 Gemini API Key（免費）</p>
                </div>
                <div class="space-y-2">
                    <a href="{{ route('admin.tools.download', 'exam-parser') }}"
                       class="block w-full py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-center font-semibold rounded-lg hover:shadow-lg hover:scale-[1.02] transition-all">
                        下載工具 ZIP
                    </a>
                </div>
                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 text-xs text-blue-700 dark:text-blue-300 space-y-1">
                    <p class="font-semibold">ZIP 內含：</p>
                    <p>1. <code class="bg-blue-100 dark:bg-blue-900/50 px-1 rounded">啟動.bat</code> — 雙擊直接啟動（需 Python）</p>
                    <p>2. <code class="bg-blue-100 dark:bg-blue-900/50 px-1 rounded">打包EXE.bat</code> — 雙擊打包成 EXE（不需 Python 即可使用）</p>
                    <p>3. 原始碼 + 說明文件</p>
                </div>
            </div>
        </div>

        {{-- CLI 匯入說明 --}}
        <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-green-600 to-teal-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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-white">CLI 匯入指令</h3>
                        <p class="text-green-100 text-sm">透過命令列匯入題目 JSON 檔</p>
                    </div>
                </div>
            </div>
            <div class="p-5 space-y-4">
                <div class="text-sm text-gray-600 dark:text-gray-400 space-y-2">
                    <p>工具解析完畢後，輸出 JSON 檔案，再於伺服器上用 CLI 匯入。</p>
                </div>

                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 mb-1">匯入指令</label>
                        <div class="flex gap-2">
                            <input type="text" value="php artisan import:questions /path/to/questions.json" readonly id="cli-cmd"
                                   class="flex-1 px-3 py-2 rounded-lg border border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm font-mono">
                            <button onclick="copyToClipboard('cli-cmd')" class="px-3 py-2 bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300 rounded-lg text-sm hover:bg-gray-300 transition-colors">複製</button>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-50 dark:bg-slate-800 rounded-lg p-3 text-xs text-gray-600 dark:text-gray-400 font-mono space-y-1">
                    <p class="font-bold text-gray-800 dark:text-gray-200 mb-2">常用參數：</p>
                    <p>--exam=ID &nbsp;&nbsp;&nbsp; 指定匯入到的考試</p>
                    <p>--subject=ID &nbsp; 指定科目</p>
                    <p>--user=ID &nbsp;&nbsp;&nbsp; 指定建立者（預設 1）</p>
                    <p>--dry-run &nbsp;&nbsp;&nbsp;&nbsp; 只預覽不實際匯入</p>
                </div>

                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 text-xs text-blue-700 dark:text-blue-300">
                    <strong>JSON 格式：</strong>陣列 <code class="bg-blue-100 dark:bg-blue-900/50 px-1 rounded">[{"question_text":"...","question_type":"multiple_choice","options":{"A":"..."},"correct_answer":"A"}]</code>
                </div>
            </div>
        </div>
    </div>

    {{-- 使用說明 --}}
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 mt-6">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">使用說明</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            @foreach([
                ['1', '下載工具', '下載 Python 原始碼並安裝依賴，或請管理員提供打包好的 EXE', 'blue'],
                ['2', '設定 API Key', '到 aistudio.google.com/apikey 免費申請 Gemini API Key，填入工具設定', 'purple'],
                ['3', '上傳考卷', '選擇考試 PDF 或圖片，點擊「開始解析」等待 AI 分析', 'green'],
                ['4', '匯入或匯出', '確認結果無誤後，一鍵匯入系統或輸出 Markdown/CSV', 'orange'],
            ] as [$step, $title, $desc, $color])
            <div class="text-center">
                <div class="w-10 h-10 mx-auto rounded-full bg-{{ $color }}-100 dark:bg-{{ $color }}-900/30 text-{{ $color }}-600 dark:text-{{ $color }}-400 flex items-center justify-center text-lg font-bold mb-2">{{ $step }}</div>
                <h4 class="font-bold text-gray-900 dark:text-white text-sm mb-1">{{ $title }}</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</div>

<script>
function copyToClipboard(id) {
    const input = document.getElementById(id);
    navigator.clipboard.writeText(input.value).then(() => {
        const btn = input.nextElementSibling;
        const orig = btn.textContent;
        btn.textContent = '已複製!';
        btn.classList.add('bg-green-200', 'text-green-700');
        setTimeout(() => {
            btn.textContent = orig;
            btn.classList.remove('bg-green-200', 'text-green-700');
        }, 1500);
    });
}
</script>
@endsection