@props(['questions'])

@if(isset($questions) && !empty($questions))
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
    <div class="p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-bold text-gray-900">📋 题目深度分析</h2>
            <p class="text-sm text-gray-600">重点关注解题过程与知识点关联</p>
        </div>
    </div>

    <div class="divide-y divide-gray-200">
        @foreach($questions as $index => $question)
        <div class="p-6 hover:bg-gray-50 transition-colors duration-150">
            <!-- 题目头部信息 -->
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center space-x-3">
                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-semibold text-sm">
                        第{{ $question['question_number'] ?? 'N/A' }}题
                    </span>
                    @if(!empty($question['kp_code']))
                    <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full font-medium">
                        {{ $question['knowledge_point']['name'] ?? $question['kp_code'] }}
                    </span>
                    @endif
                    @if(isset($question['question_type']) && $question['question_type'])
                    <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">{{ $question['question_type'] }}</span>
                    @endif
                </div>
                <div class="flex items-center space-x-3">
                    @if(isset($question['score_total']) && $question['score_total'] !== null)
                    <div class="text-right">
                        <p class="text-xs text-gray-500">得分</p>
                        <p class="text-lg font-bold {{ ($question['score_obtained'] ?? 0) == $question['score_total'] ? 'text-green-600' : 'text-red-600' }}">
                            {{ $question['score_obtained'] ?? 0 }} / {{ $question['score_total'] }}
                        </p>
                    </div>
                    @endif
                    @if(($question['is_correct'] ?? false))
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            正确
                        </span>
                    @elseif(!empty($question['student_answer']) && $question['student_answer'] !== '未作答')
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                            错误
                        </span>
                    @else
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-600">
                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                            未作答
                        </span>
                    @endif
                </div>
            </div>

            <!-- 题目内容 -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                    <svg class="w-5 h-5 mr-2 text-gray-500" 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"></path>
                    </svg>
                    题目内容
                </h3>
                <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg p-4 border border-gray-200">
                    <p class="text-gray-800 leading-relaxed">{{ $question['question_text'] ?? 'N/A' }}</p>
                </div>
            </div>

            <!-- 解题分析区 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- 正确答案与解题过程 -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        正确答案与解题过程
                    </h3>

                    @if(isset($question['answer']) && !empty($question['answer']))
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                        <p class="text-sm font-semibold text-green-800 mb-2">标准答案</p>
                        <p class="text-green-700 font-medium">{{ $question['answer'] }}</p>
                    </div>
                    @endif

                    @if(isset($question['solution']) && !empty($question['solution']))
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <p class="text-sm font-semibold text-blue-800 mb-2">解题步骤</p>
                        <div class="text-blue-700 space-y-2">
                            {{ $question['solution'] }}
                        </div>
                    </div>
                    @endif

                    @if(isset($question['ai_analysis']['correct_solution']) && !empty($question['ai_analysis']['correct_solution']))
                    <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
                        <p class="text-sm font-semibold text-indigo-800 mb-2">详细解析</p>
                        <div class="text-indigo-700 text-sm leading-relaxed">
                            {{ $question['ai_analysis']['correct_solution'] }}
                        </div>
                    </div>
                    @endif
                </div>

                <!-- 学生作答对比 -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        作答分析
                    </h3>

                    <div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
                        <p class="text-sm font-semibold text-orange-800 mb-2">学生答案</p>
                        <p class="text-orange-700">{{ $question['student_answer'] ?? '未作答' }}</p>
                    </div>

                    @if(isset($question['answer_comparison']))
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                        <p class="text-sm font-semibold text-red-800 mb-2">答案对比</p>
                        <div class="space-y-2 text-sm">
                            <div class="flex">
                                <span class="font-medium text-gray-600 w-20">学生答案:</span>
                                <span class="text-red-700">{{ $question['answer_comparison']['student'] }}</span>
                            </div>
                            <div class="flex">
                                <span class="font-medium text-gray-600 w-20">正确答案:</span>
                                <span class="text-green-700 font-medium">{{ $question['answer_comparison']['correct'] }}</span>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- AI深度分析 -->
            @if(isset($question['ai_analysis']) && !empty($question['ai_analysis']))
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                    AI智能分析
                </h3>

                <div class="bg-gradient-to-br from-purple-50 to-pink-50 border border-purple-200 rounded-lg p-5">
                    @if($question['ai_analysis']['analysis'])
                    <div class="mb-4">
                        <p class="text-sm font-semibold text-purple-800 mb-2">综合分析</p>
                        <p class="text-gray-700 leading-relaxed">{{ $question['ai_analysis']['analysis'] }}</p>
                    </div>
                    @endif

                    @if(!$question['is_correct'] && ($question['ai_analysis']['mistake_type'] || $question['ai_analysis']['mistake_category']))
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                        @if($question['ai_analysis']['mistake_type'])
                        <div class="bg-white/60 rounded-lg p-3">
                            <p class="text-xs font-semibold text-red-700 mb-1">错误类型</p>
                            <p class="text-sm text-red-600">{{ $question['ai_analysis']['mistake_type'] }}</p>
                        </div>
                        @endif
                        @if($question['ai_analysis']['mistake_category'])
                        <div class="bg-white/60 rounded-lg p-3">
                            <p class="text-xs font-semibold text-red-700 mb-1">错误类别</p>
                            <p class="text-sm text-red-600">{{ $question['ai_analysis']['mistake_category'] }}</p>
                        </div>
                        @endif
                    </div>
                    @endif

                    @if(isset($question['ai_analysis']['suggestions']) && !empty($question['ai_analysis']['suggestions']))
                    <div>
                        <p class="text-sm font-semibold text-purple-800 mb-2">学习建议</p>
                        <ul class="space-y-2">
                            @foreach($question['ai_analysis']['suggestions'] as $suggestion)
                            @if($suggestion)
                            <li class="flex items-start">
                                <svg class="w-5 h-5 mr-2 text-purple-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="text-sm text-gray-700">{{ $suggestion }}</span>
                            </li>
                            @endif
                            @endforeach
                        </ul>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            <!-- 知识点与技能点关联 -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                    </svg>
                    知识点与技能点
                </h3>

                @if(isset($question['knowledge_point']))
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm font-semibold text-blue-800 mb-2">知识点信息</p>
                            <div class="space-y-2">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">名称:</span>
                                    <span class="text-sm font-medium text-gray-900">{{ $question['knowledge_point']['name'] }}</span>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">编码:</span>
                                    <span class="text-sm font-medium text-gray-900">{{ $question['kp_code'] }}</span>
                                </div>
                                @if(!empty($question['knowledge_point']['phase']))
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">学段:</span>
                                    <span class="text-sm text-gray-900">{{ $question['knowledge_point']['phase'] }}</span>
                                </div>
                                @endif
                                @if(!empty($question['knowledge_point']['grade']))
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-600">年级:</span>
                                    <span class="text-sm text-gray-900">{{ $question['knowledge_point']['grade'] }}</span>
                                </div>
                                @endif
                            </div>
                        </div>

                        <div>
                            <p class="text-sm font-semibold text-green-800 mb-2">掌握程度</p>
                            <div class="flex items-center space-x-3">
                                <div class="flex-1">
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-gradient-to-r from-green-400 to-green-600 h-2 rounded-full" style="width: {{ ($question['is_correct'] ?? false) ? '100%' : '30%' }}"></div>
                                    </div>
                                </div>
                                <span class="text-sm font-medium {{ ($question['is_correct'] ?? false) ? 'text-green-700' : 'text-orange-700' }}">
                                    {{ ($question['is_correct'] ?? false) ? '已掌握' : '需加强' }}
                                </span>
                            </div>
                        </div>
                    </div>

                    @if(isset($question['knowledge_point']['skills']) && !empty($question['knowledge_point']['skills']))
                    <div class="mt-4 pt-4 border-t border-blue-200">
                        <p class="text-sm font-semibold text-purple-800 mb-2">相关技能点</p>
                        <div class="flex flex-wrap gap-2">
                            @foreach($question['knowledge_point']['skills'] as $skill)
                            <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-purple-100 text-purple-800">
                                {{ $skill['name'] }}
                            </span>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
                @else
                <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                    <p class="text-sm text-gray-600">暂无关联知识点信息</p>
                </div>
                @endif
            </div>

            <!-- 相似题目推荐 -->
            <x-exam-analysis.similar-questions
                :kpCode="$question['kp_code'] ?? null"
                :currentQuestion="$question"
            />
        </div>
        @endforeach
    </div>
</div>
@endif