<div>

<!-- 数学公式渲染组件 -->
<x-math-render />

<div class="space-y-6">
    @php
        $questionsData = $this->questions;
        $metaData = $this->meta;
        $statisticsData = $this->statistics;
    @endphp

    <div class="flex justify-end">
        <a
            href="{{ url('/admin/question-generation') }}"
            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg transition-colors"
        >
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            生成题目
        </a>
    </div>

    @php
        // 显示统计数据的标签
        $statsLabel = $this->selectedKpCode ? "知识点 {$this->selectedKpCode}" : "全部题目";
        $displayStats = $statisticsData;
    @endphp

    <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">{{ $displayStats['total'] ?? 0 }}</div>
        </div>
        <div class="bg-white p-4 rounded-lg border">
            <div class="text-sm text-gray-500">简单题 (≤0.4)</div>
            <div class="text-2xl font-bold text-green-600">
                @php
                    $basicCount = 0;
                    foreach ($displayStats['by_difficulty'] ?? [] as $key => $value) {
                        if ((float)$key <= 0.4) {
                            $basicCount += $value;
                        }
                    }
                    echo $basicCount;
                @endphp
            </div>
        </div>
        <div class="bg-white p-4 rounded-lg border">
            <div class="text-sm text-gray-500">中等题 (0.4-0.7)</div>
            <div class="text-2xl font-bold text-yellow-600">
                @php
                    $mediumCount = 0;
                    foreach ($displayStats['by_difficulty'] ?? [] as $key => $value) {
                        if ((float)$key > 0.4 && (float)$key <= 0.7) {
                            $mediumCount += $value;
                        }
                    }
                    echo $mediumCount;
                @endphp
            </div>
        </div>
        <div class="bg-white p-4 rounded-lg border">
            <div class="text-sm text-gray-500">拔高题 (>0.7)</div>
            <div class="text-2xl font-bold text-red-600">
                @php
                    $advancedCount = 0;
                    foreach ($displayStats['by_difficulty'] ?? [] as $key => $value) {
                        if ((float)$key > 0.7) {
                            $advancedCount += $value;
                        }
                    }
                    echo $advancedCount;
                @endphp
            </div>
        </div>
    </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-blue-600">
                @php
                    $choiceCount = 0;
                    foreach ($displayStats['by_type'] ?? [] as $type => $count) {
                        if ($type === '选择题' || $type === '多选题') {
                            $choiceCount += $count;
                        }
                    }
                    echo $choiceCount;
                @endphp
            </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-purple-600">
                @php
                    $fillCount = 0;
                    foreach ($displayStats['by_type'] ?? [] as $type => $count) {
                        if ($type === '填空题') {
                            $fillCount += $count;
                        }
                    }
                    echo $fillCount;
                @endphp
            </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-orange-600">
                @php
                    $calcCount = 0;
                    foreach ($displayStats['by_type'] ?? [] as $type => $count) {
                        if (in_array($type, ['解答题', '证明题'])) {
                            $calcCount += $count;
                        }
                    }
                    echo $calcCount;
                @endphp
            </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-gray-600">
                @php
                    $otherCount = 0;
                    foreach ($displayStats['by_type'] ?? [] as $type => $count) {
                        if ($type === '其他') {
                            $otherCount += $count;
                        }
                    }
                    echo $otherCount;
                @endphp
            </div>
        </div>
    </div>

    <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="w-full border rounded p-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">知识点筛选</label>
                <select wire:model.live="selectedKpCode" class="w-full border rounded p-2">
                    <option value="">全部</option>
                    @foreach($this->knowledgePointOptions as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">难度筛选</label>
                <select wire:model.live="selectedDifficulty" class="w-full border rounded p-2">
                    <option value="">全部难度</option>
                    <option value="0.3">简单 (0.3)</option>
                    <option value="0.6">中等 (0.6)</option>
                    <option value="0.85">拔高 (0.85)</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">题型筛选</label>
                <select wire:model.live="selectedType" class="w-full border rounded p-2">
                    <option value="">全部类型</option>
                    @foreach($this->questionTypeOptions as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </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="w-full border rounded p-2">
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg border overflow-hidden">
        <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">题目编号</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">知识点</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">难度</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">技能点</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">题干</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</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">
                            <a href="{{ url('/admin/question-detail/' . $question['id']) }}"
                               class="text-blue-600 hover:underline">{{ $question['question_code'] ?? 'N/A' }}</a>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ $question['kp_name'] ?? $question['kp_code'] ?? 'N/A' }}</div>
                            @if(!empty($question['kp_code']))
                                <div class="text-xs text-gray-500">{{ $question['kp_code'] }}</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @php
                                $difficulty = $question['difficulty'] ?? null;
                                $label = match (true) {
                                    !$difficulty => 'N/A',
                                    (float)$difficulty <= 0.4 => '基础',
                                    (float)$difficulty <= 0.7 => '中等',
                                    default => '拔高',
                                };
                            @endphp
                            <span class="px-2 py-1 text-xs rounded-full
                                @if((float)$difficulty <= 0.4) bg-green-100 text-green-800
                                @elseif((float)$difficulty <= 0.7) bg-yellow-100 text-yellow-800
                                @else bg-red-100 text-red-800 @endif">
                                {{ $label }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            @php
                                $skills = is_array($question['skills'] ?? null) ? $question['skills'] : json_decode($question['skills'] ?? '[]', true);
                                $skillNames = [];

                                if (!empty($skills)) {
                                    foreach ($skills as $skill) {
                                        $skill = trim($skill);
                                        // 处理格式如 {直线斜率,直线平行条件} 的情况
                                        if (str_starts_with($skill, '{') && str_ends_with($skill, '}')) {
                                            $innerContent = substr($skill, 1, -1);
                                            $skillParts = explode(',', $innerContent);
                                            foreach ($skillParts as $part) {
                                                $part = trim($part);
                                                if (!empty($part)) {
                                                    // 尝试从映射中获取名称
                                                    $skillName = $this->skillNameMapping[$part] ?? $part;
                                                    if (!in_array($skillName, $skillNames)) {
                                                        $skillNames[] = $skillName;
                                                    }
                                                }
                                            }
                                        } else {
                                            // 处理单个技能点
                                            $skillCode = preg_replace('/[{}]/', '', $skill);
                                            $skillName = $this->skillNameMapping[$skillCode] ?? $skillCode;
                                            if (!in_array($skillName, $skillNames)) {
                                                $skillNames[] = $skillName;
                                            }
                                        }
                                    }

                                    foreach (array_slice($skillNames, 0, 2) as $skillName) {
                                        echo '<span class="inline-block px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded mr-1 mb-1">' . htmlspecialchars($skillName) . '</span>';
                                    }
                                    if (count($skillNames) > 2) {
                                        echo '<span class="text-xs text-gray-500">...</span>';
                                    }
                                } else {
                                    echo '-';
                                }
                            @endphp
                        </td>
                        <td class="px-6 py-4" style="word-wrap: break-word; white-space: normal; line-height: 1.8; max-width: 400px;">
                            <span class="text-sm text-gray-700 line-clamp-3">
                                @math($question['stem'] ?? 'N/A')
                            </span>
                            @if(strlen($question['stem'] ?? '') > 150)
                                <button class="text-xs text-blue-500 mt-1"
                                        onclick="this.parentElement.querySelector('span').classList.toggle('line-clamp-3')">展开</button>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm space-x-3">
                            <a href="{{ url('/admin/question-detail/' . $question['id']) }}"
                               class="text-indigo-600 hover:text-indigo-900 font-medium">查看</a>
                            <button
                                wire:click="deleteQuestion('{{ $question['question_code'] ?? '' }}')"
                                wire:confirm="确定要删除这道题目吗？此操作不可恢复。"
                                class="text-red-600 hover:text-red-800 font-medium"
                            >删除</button>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-6 py-12 text-center">暂无数据</td></tr>
                @endforelse
            </tbody>
        </table>

        @if(!empty($metaData) && ($metaData['total'] ?? 0) > 0)
            <div class="px-4 py-3 border-t border-gray-200 flex items-center justify-between">
                <div class="text-sm text-gray-700">共 {{ $metaData['total'] ?? 0 }} 条记录</div>
                <div class="flex items-center gap-2">
                    <button wire:click="previousPage" @disabled($currentPage <= 1) class="px-3 py-1 border rounded">上一页</button>
                    @foreach($this->getPages() as $page)
                        <button wire:click="gotoPage({{ $page }})" class="px-3 py-1 border rounded {{ $page === $currentPage ? 'bg-blue-50 text-blue-700' : '' }}">{{ $page }}</button>
                    @endforeach
                    <button wire:click="nextPage" @disabled($currentPage >= ($metaData['total_pages'] ?? 1)) class="px-3 py-1 border rounded">下一页</button>
                </div>
            </div>
        @endif
    </div>

    {{-- 详情侧边栏 --}}
    @if($showDetailModal)
        <div class="fixed inset-0 z-40 flex">
            <div class="flex-1 bg-black/40" wire:click="$set('showDetailModal', false)"></div>
            <div class="w-full max-w-3xl bg-white shadow-xl overflow-y-auto">
                <div class="p-6 border-b flex justify-between items-center">
                    <div>
                        <h3 class="text-lg font-semibold">{{ $editing['question_code'] ?? '题目详情' }}</h3>
                        <p class="text-sm text-gray-500">
                            {{ $editing['kp_name'] ?? ($editing['kp_code'] ?? '') }}
                            @if(!empty($editing['kp_code'])) ({{ $editing['kp_code'] }}) @endif
                        </p>
                    </div>
                    <button class="text-gray-500 hover:text-gray-700" wire:click="$set('showDetailModal', false)">&times;</button>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="text-sm font-medium text-gray-700">知识点代码</label>
                        <input type="text" wire:model="editing.kp_code" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-700">题干</label>
                        <textarea wire:model="editing.stem" rows="4" class="w-full border rounded px-3 py-2 text-sm"></textarea>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-700">答案</label>
                        <textarea wire:model="editing.answer" rows="3" class="w-full border rounded px-3 py-2 text-sm"></textarea>
                    </div>
                    <div>
                        <label class="text-sm font-medium text-gray-700">解析</label>
                        <textarea wire:model="editing.solution" rows="4" class="w-full border rounded px-3 py-2 text-sm"></textarea>
                    </div>
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <label class="text-sm font-medium text-gray-700">难度 (0-1)</label>
                            <input type="number" step="0.01" min="0" max="1" wire:model="editing.difficulty" class="w-full border rounded px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-700">题型</label>
                            <input type="text" wire:model="editing.question_type" class="w-full border rounded px-3 py-2 text-sm" placeholder="choice/fill/answer">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-700">来源</label>
                            <input type="text" wire:model="editing.source" class="w-full border rounded px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-700">标签</label>
                            <input type="text" wire:model="editing.tags" class="w-full border rounded px-3 py-2 text-sm">
                        </div>
                        <div class="col-span-2">
                            <label class="text-sm font-medium text-gray-700">技能（逗号分隔）</label>
                            <input type="text" wire:model="editing.skills_text" class="w-full border rounded px-3 py-2 text-sm">
                        </div>
                        <div><span class="font-medium">创建时间：</span>{{ $editing['created_at'] ?? '-' }}</div>
                        <div><span class="font-medium">更新时间：</span>{{ $editing['updated_at'] ?? '-' }}</div>
                    </div>
                </div>
                <div class="p-6 border-t flex justify-end gap-3">
                    <button class="px-4 py-2 border rounded text-sm" wire:click="$set('showDetailModal', false)">取消</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700" wire:click="saveQuestion">保存</button>
                </div>
            </div>
        </div>
    @endif

    </div>

<script>
document.addEventListener('livewire:init', () => {
    // 定期检查通知
    let checkCount = 0;
    const maxChecks = 30; // 最多检查30次（15秒）

    function checkForNotifications() {
        checkCount++;

        // 使用 fetch 检查是否有新的通知
        fetch('/admin/question-management/check-notifications', {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.hasNotification && data.notification) {
                // 刷新页面以显示通知
                window.location.reload();
            } else if (checkCount < maxChecks) {
                // 继续检查
                setTimeout(checkForNotifications, 500);
            }
        })
        .catch(error => {
            console.error('检查通知失败:', error);
            if (checkCount < maxChecks) {
                setTimeout(checkForNotifications, 500);
            }
        });
    }

    // 页面加载后开始检查
    setTimeout(checkForNotifications, 1000);
});
</script>
