@extends('layouts.admin')
@section('title', 'AI 設定')
@section('content')

<div class="max-w-4xl space-y-6">

    {{-- ===== 狀態總覽 ===== --}}
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
            AI 詳解狀態
        </h3>

        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 text-center">
                <p class="text-2xl font-bold text-blue-700 dark:text-blue-300">CLI</p>
                <p class="text-xs text-blue-500 dark:text-blue-400 mt-1">產生方式</p>
            </div>
            <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4 text-center">
                <p class="text-2xl font-bold text-green-700 dark:text-green-300">
                    @if($cliAvailable['claude'] && $cliAvailable['gemini'])
                        Claude + Gemini
                    @elseif($cliAvailable['claude'])
                        Claude
                    @elseif($cliAvailable['gemini'])
                        Gemini
                    @else
                        <span class="text-red-500">未安裝</span>
                    @endif
                </p>
                <p class="text-xs text-green-500 dark:text-green-400 mt-1">可用 CLI 工具</p>
            </div>
            <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 text-center">
                <p class="text-2xl font-bold text-purple-700 dark:text-purple-300">{{ number_format($totalCount) }}</p>
                <p class="text-xs text-purple-500 dark:text-purple-400 mt-1">總題數</p>
            </div>
            <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-4 text-center">
                <p class="text-2xl font-bold text-yellow-700 dark:text-yellow-300">{{ number_format($pendingCount) }}</p>
                <p class="text-xs text-yellow-500 dark:text-yellow-400 mt-1">待產生詳解</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 p-6" x-data="cliExplain()">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
            <svg class="w-5 h-5 text-green-500" 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>
            CLI 批量產生詳解
            <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400">{{ $pendingCount }} 題待產生</span>
        </h3>

        {{-- 任務狀態 --}}
        <div x-show="task.running || task.status === 'completed'" x-cloak
             class="mb-5 p-4 rounded-lg border-2 transition-colors"
             :class="task.running ? 'border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/10' : 'border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/10'">
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center gap-2">
                    <span x-show="task.running" class="w-2.5 h-2.5 rounded-full bg-blue-500 animate-pulse"></span>
                    <span x-show="!task.running" x-cloak class="w-2.5 h-2.5 rounded-full bg-green-500"></span>
                    <span class="text-sm font-bold" :class="task.running ? 'text-blue-700 dark:text-blue-300' : 'text-green-700 dark:text-green-300'"
                          x-text="task.running ? '執行中...' : '已完成'"></span>
                    <span class="text-xs text-gray-500" x-text="task.label + '（' + task.cli + '）'"></span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-sm font-mono font-bold" :class="task.running ? 'text-blue-600' : 'text-green-600'"
                          x-text="(task.done || 0) + ' / ' + task.total"></span>
                    <button x-show="task.running" @click="stopTask()"
                            class="px-2 py-1 text-xs font-medium text-red-600 border border-red-300 rounded-lg hover:bg-red-50 transition-colors">
                        停止
                    </button>
                    <button x-show="!task.running" @click="task = {running: false, status: ''}"
                            class="px-2 py-1 text-xs text-gray-400 hover:text-gray-600">
                        關閉
                    </button>
                </div>
            </div>
            <div x-show="task.total > 0" class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-2 mb-2">
                <div class="h-2 rounded-full transition-all duration-500"
                     :class="task.running ? 'bg-blue-500' : 'bg-green-500'"
                     :style="'width:' + Math.min(100, Math.round((task.done || 0) / task.total * 100)) + '%'"></div>
            </div>
            <pre x-show="task.log_tail" x-text="task.log_tail"
                 class="mt-2 text-[11px] text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-slate-800 rounded p-2 overflow-x-auto max-h-24 whitespace-pre-wrap"></pre>
        </div>

        {{-- 設定表單 --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">CLI 工具</label>
                <div class="flex gap-2">
                    @foreach(['claude' => 'Claude Code', 'gemini' => 'Gemini CLI'] as $val => $label)
                    <label class="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border-2 cursor-pointer transition-all"
                           :class="cli === '{{ $val }}' ? 'border-green-500 bg-green-50 dark:bg-green-900/20' : 'border-gray-200 dark:border-slate-700 hover:border-gray-300'"
                           @click="cli = '{{ $val }}'">
                        <input type="radio" :checked="cli === '{{ $val }}'" class="sr-only">
                        <span class="text-sm font-medium" :class="cli === '{{ $val }}' ? 'text-green-700 dark:text-green-300' : 'text-gray-500'">{{ $label }}</span>
                        @if(!$cliAvailable[$val])
                        <span class="px-1.5 py-0.5 text-[10px] rounded bg-red-100 text-red-600">未安裝</span>
                        @endif
                    </label>
                    @endforeach
                </div>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">產生範圍</label>
                <select x-model="scope" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-green-500">
                    <option value="all">所有未產生詳解的題目 ({{ $pendingCount }})</option>
                    <option value="exam">指定考試</option>
                    <option value="subject">指定科目</option>
                </select>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div x-show="scope === 'exam'" x-cloak>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">選擇考試</label>
                <select x-model="examId" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-green-500">
                    <option value="">-- 請選擇 --</option>
                    @foreach($exams as $exam)
                    <option value="{{ $exam->id }}">{{ Str::limit($exam->title, 60) }}</option>
                    @endforeach
                </select>
            </div>

            <div x-show="scope === 'subject'" x-cloak>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">選擇科目</label>
                <select x-model="subjectId" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-green-500">
                    <option value="">-- 請選擇 --</option>
                    @foreach($subjects as $sub)
                    <option value="{{ $sub->id }}">{{ $sub->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">數量限制</label>
                <input type="number" x-model.number="limit" min="0" max="5000" placeholder="0 = 不限"
                       class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:border-green-500">
            </div>
        </div>

        <div class="flex items-center gap-6 mb-5">
            <label class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
                <input type="checkbox" x-model="force" class="w-4 h-4 rounded text-green-600">
                強制重新產生（覆蓋已有詳解）
            </label>
        </div>

        <button @click="startTask()" :disabled="task.running || !canStart()"
                class="px-6 py-2.5 bg-green-600 text-white text-sm font-semibold rounded-lg hover:bg-green-700 shadow-lg shadow-green-600/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2">
            <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <span x-text="task.running ? '執行中...' : '啟動產生'"></span>
        </button>
    </div>

    {{-- ===== 說明 ===== --}}
    <div class="bg-gray-50 dark:bg-slate-800/50 rounded-xl border border-gray-200 dark:border-slate-700 p-5">
        <h4 class="text-sm font-bold text-gray-600 dark:text-gray-400 mb-3">使用說明</h4>
        <div class="space-y-2 text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
            <p><strong class="text-gray-700 dark:text-gray-300">CLI 模式：</strong>AI 詳解透過伺服器上已安裝的 Claude Code 或 Gemini CLI 工具產生，不需要設定 API Key。</p>
            <p><strong class="text-gray-700 dark:text-gray-300">批量產生：</strong>選擇範圍後點「啟動產生」，系統會在背景逐題呼叫 CLI 工具。可隨時查看進度或停止。</p>
            <p><strong class="text-gray-700 dark:text-gray-300">命令列：</strong>也可以在終端機直接執行：</p>
            <div class="bg-gray-100 dark:bg-slate-800 rounded-lg p-3 font-mono text-[11px] space-y-1">
                <p>php artisan ai:explain --exam=5 --cli=claude &nbsp;&nbsp;&nbsp;# 指定考試</p>
                <p>php artisan ai:explain --subject=3 --cli=gemini &nbsp;# 指定科目</p>
                <p>php artisan ai:explain --all --limit=100 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# 全部（限 100 題）</p>
                <p>php artisan ai:explain --question=42 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# 單題</p>
            </div>
            <p><strong class="text-gray-700 dark:text-gray-300">單題產生：</strong>在題目詳情頁點「重新產生 AI 詳解」按鈕，或學生練習時點「AI 詳解」都會即時呼叫 CLI 產生。</p>
        </div>
    </div>

</div>

<script>
function cliExplain() {
    return {
        cli: '{{ $cliAvailable["claude"] ? "claude" : "gemini" }}',
        scope: 'all',
        examId: '',
        subjectId: '',
        force: false,
        limit: 0,
        task: @php
            $taskInit = $runningTask
                ? ['running' => $runningTask['status'] === 'running', 'status' => $runningTask['status'], 'cli' => $runningTask['cli'] ?? '', 'label' => $runningTask['label'] ?? '', 'total' => $runningTask['total'] ?? 0, 'done' => 0, 'log_tail' => '']
                : ['running' => false, 'status' => ''];
            echo json_encode($taskInit);
        @endphp,
        pollTimer: null,

        init() {
            if (this.task.running) {
                this.startPolling();
            }
        },

        canStart() {
            if (this.scope === 'exam' && !this.examId) return false;
            if (this.scope === 'subject' && !this.subjectId) return false;
            return true;
        },

        async startTask() {
            if (!confirm('確定要啟動背景產生 AI 詳解？')) return;

            try {
                const res = await fetch('{{ route("admin.ai-settings.run-cli") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        cli: this.cli,
                        scope: this.scope,
                        exam_id: this.examId || null,
                        subject_id: this.subjectId || null,
                        force: this.force,
                        limit: this.limit || null,
                    }),
                });
                const data = await res.json();

                if (data.success) {
                    this.task = { running: true, status: 'running', cli: this.cli, label: '', total: 0, done: 0, log_tail: '' };
                    this.startPolling();
                } else {
                    alert(data.message);
                }
            } catch (e) {
                alert('啟動失敗：' + e.message);
            }
        },

        startPolling() {
            this.pollTimer = setInterval(() => this.pollStatus(), 3000);
        },

        async pollStatus() {
            try {
                const res = await fetch('{{ route("admin.ai-settings.task-status") }}');
                const data = await res.json();

                this.task = {
                    running: data.running,
                    status: data.status,
                    cli: data.cli,
                    label: data.label,
                    total: data.total,
                    done: data.done,
                    log_tail: data.log_tail,
                };

                if (!data.running) {
                    clearInterval(this.pollTimer);
                    this.pollTimer = null;
                }
            } catch (e) {}
        },

        async stopTask() {
            if (!confirm('確定要停止任務？')) return;
            try {
                await fetch('{{ route("admin.ai-settings.stop-task") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                });
                this.task.running = false;
                this.task.status = 'stopped';
                if (this.pollTimer) {
                    clearInterval(this.pollTimer);
                    this.pollTimer = null;
                }
            } catch (e) {
                alert('停止失敗：' + e.message);
            }
        },

        destroy() {
            if (this.pollTimer) clearInterval(this.pollTimer);
        }
    };
}
</script>
@endsection