@extends('layouts.app')
@section('title', '考試成績')
@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Score Card -->
    <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-gray-100 dark:border-slate-800 overflow-hidden mb-8">
        <div class="p-8 text-center bg-gradient-to-br {{ $result->score >= 80 ? 'from-green-500 to-emerald-600' : ($result->score >= 60 ? 'from-yellow-500 to-orange-600' : 'from-red-500 to-pink-600') }}">
            <p class="text-white/80 text-lg mb-2">{{ $exam->title }}</p>
            <div class="w-32 h-32 mx-auto rounded-full bg-white/20 flex items-center justify-center mb-4">
                <span class="text-5xl font-black text-white">{{ $result->score }}</span>
            </div>
            <p class="text-white text-xl font-bold">
                @if($result->score >= 90) 太棒了！
                @elseif($result->score >= 80) 表現優異！
                @elseif($result->score >= 60) 及格了！
                @elseif($result->score >= 40) 再加油！
                @else 需要多練習！
                @endif
            </p>
            <p class="text-white/70 text-sm mt-2">完成時間：{{ $result->completed_at->format('Y-m-d H:i') }}</p>
        </div>

        <!-- Stats Row -->
        <div class="grid grid-cols-3 divide-x divide-gray-200 dark:divide-slate-700">
            @php
                $correct = $answers->where('is_correct', true)->count();
                $total = $exam->questions->count();
                $wrong = $total - $correct;
            @endphp
            <div class="p-4 text-center">
                <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ $correct }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">答對</p>
            </div>
            <div class="p-4 text-center">
                <p class="text-2xl font-bold text-red-600 dark:text-red-400">{{ $wrong }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">答錯</p>
            </div>
            <div class="p-4 text-center">
                <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $total }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">總題數</p>
            </div>
        </div>
    </div>

    <!-- History -->
    @if($history->count() > 1)
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 mb-8">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">歷史成績</h3>
        <div class="flex gap-3 overflow-x-auto pb-2">
            @foreach($history as $h)
            <div class="flex-shrink-0 w-20 text-center p-3 rounded-lg {{ $h->id === $result->id ? 'bg-blue-50 dark:bg-blue-900/30 border-2 border-blue-500' : 'bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700' }}">
                <p class="text-xl font-bold {{ $h->score >= 60 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">{{ $h->score }}</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $h->completed_at->format('m/d') }}</p>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Detailed Answers -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden mb-8">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">答題詳情</h3>
        </div>

        @foreach($exam->questions as $index => $question)
        @php $answer = $answers[$question->id] ?? null; @endphp
        <div class="p-6 border-b border-gray-100 dark:border-slate-800 {{ $answer && $answer->is_correct ? 'bg-green-50/50 dark:bg-green-900/10' : 'bg-red-50/50 dark:bg-red-900/10' }}">
            <div class="flex items-start gap-3">
                <!-- Status Icon -->
                <div class="w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center {{ $answer && $answer->is_correct ? 'bg-green-500' : 'bg-red-500' }}">
                    @if($answer && $answer->is_correct)
                    <svg class="w-5 h-5 text-white" 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"/></svg>
                    @else
                    <svg class="w-5 h-5 text-white" 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"/></svg>
                    @endif
                </div>

                <div class="flex-1">
                    <p class="font-medium text-gray-900 dark:text-white mb-2">
                        <span class="text-gray-500 dark:text-gray-400">第 {{ $index + 1 }} 題：</span>
                        {{ $question->question_text }}
                    </p>

                    @if($question->image_path)
                    <div class="mb-3">
                        <img src="{{ asset('storage/' . $question->image_path) }}" alt="題目圖片" class="max-w-full max-h-96 rounded-lg border border-gray-200 dark:border-slate-700 shadow-sm cursor-pointer hover:shadow-md transition-shadow" onclick="window.open(this.src, '_blank')">
                    </div>
                    @endif

                    <!-- Options for multiple choice -->
                    @if($question->question_type === 'multiple_choice' && $question->options)
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-1 mb-3">
                        @foreach($question->options as $key => $optionText)
                        @php
                            $isCorrectOption = mb_strtoupper(trim($question->correct_answer ?? '')) === $key;
                            $isStudentChoice = $answer && mb_strtoupper(trim($answer->student_answer)) === $key;
                        @endphp
                        <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm
                            {{ $isCorrectOption ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-bold' : ($isStudentChoice && !$isCorrectOption ? 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 line-through' : 'text-gray-600 dark:text-gray-400') }}">
                            <span class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold {{ $isCorrectOption ? 'bg-green-500 text-white' : ($isStudentChoice ? 'bg-red-500 text-white' : 'bg-gray-200 dark:bg-slate-700 text-gray-500') }}">{{ $key }}</span>
                            {{ $optionText }}
                            @if($isCorrectOption) <svg class="w-4 h-4 ml-auto text-green-500" 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"/></svg> @endif
                        </div>
                        @endforeach
                    </div>
                    @endif

                    <div class="flex flex-wrap gap-4 text-sm">
                        <p><span class="text-gray-500 dark:text-gray-400">您的答案：</span>
                            <span class="font-medium {{ $answer && $answer->is_correct ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">{{ $answer->student_answer ?? '未作答' }}</span>
                        </p>
                        @if($question->correct_answer)
                        <p><span class="text-gray-500 dark:text-gray-400">正確答案：</span>
                            <span class="font-bold text-green-600 dark:text-green-400">{{ $question->correct_answer }}</span>
                        </p>
                        @endif
                    </div>

                    <!-- AI 詳解區塊 -->
                    <div class="mt-3" x-data="aiExplain({{ $question->id }}, '{{ addslashes($answer->student_answer ?? '') }}', {{ $question->ai_explanation ? 'true' : 'false' }})">
                        @if($question->ai_explanation)
                        <!-- 已有 AI 詳解 -->
                        <details class="group">
                            <summary class="flex items-center gap-2 text-sm text-purple-600 dark:text-purple-400 cursor-pointer hover:underline font-medium">
                                <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="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"/></svg>
                                AI 詳解
                            </summary>
                            <div class="mt-2 p-4 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20 rounded-xl border border-purple-200 dark:border-purple-800 text-sm text-gray-700 dark:text-gray-300 leading-relaxed ai-markdown"
                                 x-data x-init="$el.innerHTML = renderMarkdown(@js($question->ai_explanation))"></div>
                        </details>
                        <button @click="regenerate()" :disabled="loading" class="mt-2 text-xs text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
                            <span x-show="!loading">重新產生詳解</span>
                            <span x-show="loading" class="flex items-center gap-1"><svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg> 產生中...</span>
                        </button>
                        @else
                        <!-- 尚無 AI 詳解，顯示產生按鈕 -->
                        <button @click="generate()" :disabled="loading"
                                class="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-600 to-blue-600 text-white text-sm font-medium rounded-lg hover:shadow-lg hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100">
                            <template x-if="!loading">
                                <span class="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="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"/></svg>
                                    AI 詳解此題
                                </span>
                            </template>
                            <template x-if="loading">
                                <span class="flex items-center gap-2">
                                    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                                    AI 分析中...
                                </span>
                            </template>
                        </button>
                        @endif

                        <!-- AI 回應顯示區 -->
                        <div x-show="explanation" x-transition x-cloak class="mt-3 p-4 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20 rounded-xl border border-purple-200 dark:border-purple-800">
                            <div class="flex items-center gap-2 mb-2">
                                <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" 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"/></svg>
                                <span class="text-sm font-bold text-purple-700 dark:text-purple-300">AI 詳解</span>
                            </div>
                            <div class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed ai-markdown" x-html="renderMarkdown(explanation)"></div>
                        </div>

                        <!-- 錯誤訊息 -->
                        <div x-show="error" x-transition x-cloak class="mt-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg text-sm text-red-600 dark:text-red-400" x-text="error"></div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Actions -->
    <div class="flex flex-wrap gap-3 justify-center">
        <a href="{{ route('practice.index') }}" class="px-6 py-3 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors">返回列表</a>
        <a href="{{ route('answers.show', $exam) }}" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg hover:shadow-lg hover:scale-105 transition-all">再次練習</a>
    </div>
</div>

<script>
function aiExplain(questionId, studentAnswer, hasExisting) {
    return {
        loading: false,
        explanation: '',
        error: '',

        async generate() {
            await this.fetchExplanation();
        },

        async regenerate() {
            this.explanation = '';
            await this.fetchExplanation();
        },

        async fetchExplanation() {
            this.loading = true;
            this.error = '';

            try {
                const token = document.querySelector('meta[name="csrf-token"]')?.content
                    || '{{ csrf_token() }}';

                const response = await fetch(`/ai/explain/${questionId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ student_answer: studentAnswer }),
                });

                const data = await response.json();

                if (data.success) {
                    this.explanation = data.explanation;
                } else {
                    this.error = data.message || 'AI 詳解產生失敗';
                }
            } catch (e) {
                this.error = '網路錯誤，請稍後再試。';
            } finally {
                this.loading = false;
            }
        }
    };
}
</script>
@endsection