{{-- 访问计算属性触发懒加载 --}}
@php
    $questionsData = $this->questions;
    $metaData = $this->meta;
    $statisticsData = $this->statistics;
@endphp

<x-filament-panels::page>
    <div class="space-y-6">
        {{-- 操作按钮栏 --}}
        <div class="flex justify-end gap-3">
            <button
                type="button"
                class="filament-button filament-button-size-sm filament-button-color-primary filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                wire:click="$dispatch('open-prompt-modal')"
            >
                <span class="filament-button-icon mr-2">
                    @svg('heroicon-m-document-text', 'h-4 w-4')
                </span>
                管理提示词
            </button>
            <button
                type="button"
                class="filament-button filament-button-size-sm filament-button-color-success filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                wire:click="$dispatch('ai-generate')"
            >
                <span class="filament-button-icon mr-2">
                    @svg('heroicon-m-sparkles', 'h-4 w-4')
                </span>
                生成题目
            </button>
            <button
                type="button"
                class="filament-button filament-button-size-sm filament-button-color-warning filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                wire:click="$dispatch('refresh-data')"
                wire:loading.attr="disabled"
            >
                <span class="filament-button-icon mr-2" wire:loading.remove>
                    @svg('heroicon-m-arrow-path', 'h-4 w-4')
                </span>
                <span wire:loading>刷新中...</span>
                <span wire:loading.remove>刷新</span>
            </button>
            <button
                type="button"
                class="filament-button filament-button-size-sm filament-button-color-danger filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                onclick="window.location.reload()"
            >
                <span class="filament-button-icon mr-2">
                    @svg('heroicon-m-arrow-path', 'h-4 w-4')
                </span>
                强制刷新
            </button>
        </div>

        {{-- 统计信息卡片 --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-white p-4 rounded-lg border">
                <div class="text-sm text-gray-500">题目总数</div>
                <div class="text-2xl font-bold text-primary-600">
                    {{ $statisticsData['total'] ?? 0 }}
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg border">
                <div class="text-sm text-gray-500">基础难度</div>
                <div class="text-2xl font-bold text-green-600">
                    {{ $statisticsData['by_difficulty']['0.3'] ?? 0 }}
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg border">
                <div class="text-sm text-gray-500">中等难度</div>
                <div class="text-2xl font-bold text-yellow-600">
                    {{ $statisticsData['by_difficulty']['0.6'] ?? 0 }}
                </div>
            </div>
            <div class="bg-white p-4 rounded-lg border">
                <div class="text-sm text-gray-500">拔高难度</div>
                <div class="text-2xl font-bold text-red-600">
                    {{ $statisticsData['by_difficulty']['0.85'] ?? 0 }}
                </div>
            </div>
        </div>

        {{-- 任务进度显示 --}}
        @if($isGenerating && $currentTaskId)
        <div class="bg-white p-6 rounded-lg border border-primary-200 bg-primary-50">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-primary-600"></div>
                    <h3 class="text-lg font-semibold text-primary-900">AI正在生成题目</h3>
                </div>
                <button
                    type="button"
                    class="text-sm text-gray-500 hover:text-gray-700"
                    wire:click="$dispatch('cancel-generate')"
                >
                    取消
                </button>
            </div>
            <div class="space-y-3">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-600">{{ $currentTaskMessage }}</span>
                    <span class="font-medium text-gray-900">{{ $currentTaskProgress }}%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div
                        class="bg-primary-600 h-2 rounded-full transition-all duration-500"
                        style="width: {{ $currentTaskProgress }}%"
                    ></div>
                </div>
                <div class="text-xs text-gray-500">
                    任务ID: {{ $currentTaskId }}
                </div>
            </div>
        </div>
        @endif

        {{-- 搜索和筛选 --}}
        <div class="bg-white p-4 rounded-lg border">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        搜索题目
                    </label>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="输入题目内容、答案或编号"
                        class="filament-forms-input block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                    />
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        知识点筛选
                    </label>
                    <input
                        type="text"
                        wire:model.live="selectedKpCode"
                        placeholder="如：KP1001"
                        class="filament-forms-input block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                    />
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        难度筛选
                    </label>
                    <input
                        type="text"
                        wire:model.live="selectedDifficulty"
                        placeholder="0.3/0.6/0.85"
                        class="filament-forms-input block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                    />
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        每页显示
                    </label>
                    <input
                        type="number"
                        wire:model.live="perPage"
                        min="10"
                        max="100"
                        step="5"
                        class="filament-forms-input block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                    />
                </div>
            </div>
        </div>

        {{-- 题目列表 --}}
        <div class="bg-white rounded-lg border overflow-hidden">
            <div class="overflow-x-auto" wire:loading.class="opacity-50">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                题目编号
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                知识点
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                题干
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                关联技能
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                难度
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                来源
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @forelse($questionsData as $question)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        {{ $question['question_code'] ?? 'N/A' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                        {{ $question['kp_code'] ?? 'N/A' }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-gray-900 max-w-xs">
                                                                {{ \Illuminate\Support\Str::limit($question['stem'] ?? 'N/A', 80) }}
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    @php
                                        $skills = $question['skills'] ?? [];
                                        if (is_string($skills)) {
                                            $skills = json_decode($skills, true) ?? [];
                                        }
                                        $skillNames = [];
                                        foreach ($skills as $skill) {
                                            $skillNames[] = $skill['skill_name'] ?? ($skill['skill_code'] ?? 'N/A');
                                        }
                                        $skillText = implode(', ', array_slice($skillNames, 0, 2));
                                        if (count($skillNames) > 2) {
                                            $skillText .= ' ...';
                                        }
                                    @endphp
                                    <div class="text-xs text-gray-600 max-w-xs">
                                        @if(!empty($skillText))
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
                                                {{ $skillText }}
                                            </span>
                                        @else
                                            <span class="text-gray-400">无关联技能</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @php
                                        $difficulty = $question['difficulty'] ?? null;
                                        $difficultyLabel = match (true) {
                                            !$difficulty => 'N/A',
                                            (float)$difficulty <= 0.4 => '基础',
                                            (float)$difficulty <= 0.7 => '中等',
                                            default => '拔高',
                                        };
                                        $difficultyColor = match (true) {
                                            !$difficulty => 'gray',
                                            (float)$difficulty <= 0.4 => 'success',
                                            (float)$difficulty <= 0.7 => 'warning',
                                            default => 'danger',
                                        };
                                    @endphp
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $difficultyColor }}-100 text-{{ $difficultyColor }}-800">
                                        {{ $difficultyLabel }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @php
                                        $source = $question['source'] ?? '';
                                        $sourceLabel = str_contains($source, 'ai::') ? 'AI 生成' : '手工录入';
                                        $sourceColor = str_contains($source, 'ai::') ? 'blue' : 'gray';
                                    @endphp
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $sourceColor }}-100 text-{{ $sourceColor }}-800">
                                        {{ $sourceLabel }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <button type="button" class="text-indigo-600 hover:text-indigo-900 mr-3">
                                        查看
                                    </button>
                                    <button
                                        type="button"
                                        class="text-red-600 hover:text-red-900"
                                        wire:click="deleteQuestion('{{ $question['question_code'] }}')"
                                        wire:confirm="确定要删除题目 {{ $question['question_code'] }} 吗？此操作不可撤销！"
                                        wire:loading.attr="disabled"
                                        wire:loading.text="删除中..."
                                    >
                                        删除
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12 text-center text-sm text-gray-500">
                                    <div class="flex flex-col items-center">
                                        @svg('heroicon-m-document-magnifying-glass', 'w-12 h-12 text-gray-400')
                                        暂无题目数据
                                        <p class="mt-2 text-xs text-gray-400">
                                            请尝试调整搜索条件或生成新题目
                                        </p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- 分页信息 --}}
            @if(!empty($metaData) && ($metaData['total'] ?? 0) > 0)
                <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-700">
                            显示第 {{ (($metaData['page'] ?? 1) - 1) * ($metaData['per_page'] ?? 25) + 1 }} 到
                            {{ min(($metaData['page'] ?? 1) * ($metaData['per_page'] ?? 25), $metaData['total'] ?? 0) }} 条，
                            共 {{ $metaData['total'] ?? 0 }} 条记录
                        </div>
                        <div class="flex items-center gap-2">
                            <button
                                type="button"
                                class="px-3 py-1 text-sm border rounded {{ $currentPage <= 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50' }}"
                                wire:click="previousPage"
                                @disabled($currentPage <= 1)
                            >
                                上一页
                            </button>

                            @foreach($this->getPages() as $page)
                                <button
                                    type="button"
                                    class="px-3 py-1 text-sm border rounded {{ $page === $currentPage ? 'bg-primary-50 text-primary-700 border-primary-300' : 'hover:bg-gray-50' }}"
                                    wire:click="gotoPage({{ $page }})"
                                >
                                    {{ $page }}
                                </button>
                            @endforeach

                            <button
                                type="button"
                                class="px-3 py-1 text-sm border rounded {{ $currentPage >= ($metaData['total_pages'] ?? 1) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50' }}"
                                wire:click="nextPage"
                                @disabled($currentPage >= ($metaData['total_pages'] ?? 1))
                            >
                                下一页
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- 加载指示器 --}}
        <div wire:loading class="fixed top-4 right-4 bg-primary-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 z-50">
            <div class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
            <span>加载中...</span>
        </div>

        {{-- 生成题目模态框 --}}
        @if($showGenerateModal)
            <div class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4" x-data>
                <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
                    <div class="p-6 border-b">
                        <h3 class="text-lg font-semibold">生成题目</h3>
                    </div>

                    <div class="p-6 space-y-4">
                        {{-- 选择知识点 --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                选择知识点 <span class="text-red-500">*</span>
                            </label>
                            <select
                                wire:model.live="generateKpCode"
                                class="filament-forms-input block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                            >
                                <option value="">请选择知识点</option>
                                @foreach($this->knowledgePointOptions as $code => $name)
                                    <option value="{{ $code }}">{{ $code }} - {{ $name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- 选择技能 --}}
                        @if(!empty($this->skillsOptions))
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <label class="block text-sm font-medium text-gray-700">
                                        选择技能 <span class="text-red-500">*</span>
                                        <span class="text-xs text-gray-500 ml-2">(已选择 {{ count($selectedSkills) }} / {{ count($this->skillsOptions) }})</span>
                                    </label>
                                    <button
                                        type="button"
                                        class="text-sm text-primary-600 hover:text-primary-700"
                                        wire:click="toggleAllSkills"
                                    >
                                        {{ count($selectedSkills) === count($this->skillsOptions) ? '取消全选' : '全选' }}
                                    </button>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 max-h-48 overflow-y-auto border rounded-lg p-3">
                                    @foreach($this->skillsOptions as $skill)
                                        <label class="flex items-center space-x-2 cursor-pointer">
                                            <input
                                                type="checkbox"
                                                value="{{ $skill['code'] }}"
                                                wire:model="selectedSkills"
                                                class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                            />
                                            <span class="text-sm">
                                                <span class="font-medium">{{ $skill['code'] }}</span>
                                                <span class="text-gray-600"> - {{ $skill['name'] }}</span>
                                                <span class="text-xs text-gray-400">(权重: {{ $skill['weight'] }})</span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <div class="text-sm text-gray-500 italic">
                                请先选择知识点以加载技能列表
                            </div>
                        @endif

                        {{-- 题目数量 --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                题目数量
                            </label>
                            <input
                                type="number"
                                wire:model="questionCount"
                                min="1"
                                max="500"
                                class="filament-forms-input block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
                            />
                            <p class="mt-1 text-xs text-gray-500">建议单次生成不超过200道题</p>
                        </div>
                    </div>

                    <div class="p-6 border-t bg-gray-50 flex justify-end gap-3">
                        <button
                            type="button"
                            class="filament-button filament-button-size-sm filament-button-color-gray filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                            wire:click="closeGenerateModal"
                        >
                            取消
                        </button>
                        <button
                            type="button"
                            class="filament-button filament-button-size-sm filament-button-color-success filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                            wire:click="executeGenerate"
                            wire:loading.attr="disabled"
                        >
                            <span wire:loading.remove>开始生成</span>
                            <span wire:loading>生成中...</span>
                        </button>
                    </div>
                </div>
            </div>
        @endif

        {{-- 提示词编辑模态框 --}}
        @if($showPromptModal)
            <div class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4" x-data>
                <div class="bg-white rounded-lg shadow-xl max-w-5xl w-full max-h-[90vh] overflow-hidden flex flex-col">
                    <div class="p-6 border-b">
                        <h3 class="text-lg font-semibold">管理提示词模板</h3>
                        <p class="mt-1 text-sm text-gray-500">
                            自定义AI题目生成的提示词模板，支持变量替换
                        </p>
                    </div>

                    <div class="flex-1 overflow-y-auto p-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    提示词模板内容
                                </label>
                                <textarea
                                    wire:model="promptTemplate"
                                    rows="20"
                                    class="filament-forms-input block w-full rounded-lg border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm font-mono"
                                    placeholder="输入提示词模板..."
                                ></textarea>
                                <p class="mt-2 text-xs text-gray-500">
                                    可用变量：{knowledge_point}, {grade_level}, {basic_ratio}, {intermediate_ratio}, {advanced_ratio}, {choice}, {fill}, {solution}, {count}, {skill_coverage}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="p-6 border-t bg-gray-50 flex justify-between items-center">
                        <div class="text-sm text-gray-500">
                            <span class="font-medium">{{ strlen($promptTemplate ?? '') }}</span> 个字符
                        </div>
                        <div class="flex gap-3">
                            <button
                                type="button"
                                class="filament-button filament-button-size-sm filament-button-color-gray filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                                wire:click="closePromptModal"
                            >
                                取消
                            </button>
                            <button
                                type="button"
                                class="filament-button filament-button-size-sm filament-button-color-primary filament-button-icon-start inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border border-transparent rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                                wire:click="savePrompt"
                                wire:loading.attr="disabled"
                            >
                                <span wire:loading.remove>保存</span>
                                <span wire:loading>保存中...</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    {{-- 任务状态轮询 --}}
    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('poll-task', () => {
                setTimeout(() => {
                    @this.call('pollTaskStatus');
                }, 2000); // 每2秒轮询一次
            });

            // 监听页面刷新事件
            Livewire.on('refresh-page', () => {
                setTimeout(() => {
                    window.location.reload();
                }, 500); // 延迟500ms刷新，给用户时间看到成功消息
            });
        });
    </script>
</x-filament-panels::page>