@extends('layouts.admin')
@section('title', '題目詳情 #' . $question->id)
@section('content')
<div class="max-w-4xl">
    <div class="flex gap-3 mb-6">
        <a href="{{ route('admin.questions.index') }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-blue-600">&larr; 返回列表</a>
        <a href="{{ route('admin.questions.edit', $question) }}" class="text-sm text-blue-600 hover:underline">編輯此題</a>
    </div>

    <!-- 題目資訊 -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 mb-6">
        <div class="flex flex-wrap items-center gap-2 mb-4">
            <span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                {{ match($question->question_type) { 'multiple_choice' => '選擇題', 'true_false' => '是非題', 'fill_blank' => '填充題', 'essay' => '問答題', default => '簡答題' } }}
            </span>
            <span class="px-2.5 py-0.5 text-xs font-bold rounded-full {{ $question->difficulty === 1 ? 'bg-green-100 text-green-700' : ($question->difficulty === 3 ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">{{ $question->difficulty_label }}</span>
            <span class="text-xs text-gray-500 dark:text-gray-400">{{ $question->points ?? 1 }} 分</span>
            @if($question->is_public)
                <span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">公用題庫</span>
            @else
                <span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-gray-100 text-gray-500 dark:bg-slate-800 dark:text-gray-500">私有</span>
            @endif
            @if(auth()->user()->isAdmin() || $question->isOwnedBy(auth()->user()))
            <form action="{{ route('admin.questions.toggle_public', $question) }}" method="POST" class="inline">
                @csrf
                <button class="px-2.5 py-0.5 text-xs font-medium rounded-full border transition-colors {{ $question->is_public ? 'border-orange-300 text-orange-600 hover:bg-orange-50' : 'border-green-300 text-green-600 hover:bg-green-50' }}">
                    {{ $question->is_public ? '轉為私有' : '轉為公開' }}
                </button>
            </form>
            @endif
            @if($question->subject)
            <span class="text-xs text-gray-400">| 科目：<span class="font-medium text-green-600 dark:text-green-400">{{ $question->subject->name }}</span></span>
            @endif
            @if($question->exam_id)
            <span class="text-xs text-gray-400">| 考試：<a href="{{ route('exams.show', $question->exam_id) }}" class="text-blue-600 hover:underline">{{ $question->exam->title ?? '-' }}</a></span>
            @endif
            @if($question->creator)
            <span class="text-xs text-gray-400">| 提供者：{{ $question->creator->name }}</span>
            @endif
        </div>

        <h2 class="text-lg font-bold text-gray-900 dark:text-white leading-relaxed mb-4">{!! nl2br(e($question->question_text)) !!}</h2>

        @if($question->image_path)
        <div class="mb-4">
            <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')">
            <p class="mt-1 text-xs text-gray-400">{{ $question->image_path }}</p>
        </div>
        @endif

        @if($question->options)
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-4">
            @foreach($question->options as $key => $opt)
            <div class="flex items-center gap-2 px-4 py-2.5 rounded-lg {{ $question->correct_answer === $key ? 'bg-green-100 dark:bg-green-900/30 border-2 border-green-400' : 'bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700' }}">
                <span class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold {{ $question->correct_answer === $key ? 'bg-green-500 text-white' : 'bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300' }}">{{ $key }}</span>
                <span class="{{ $question->correct_answer === $key ? 'text-green-700 dark:text-green-400 font-bold' : 'text-gray-700 dark:text-gray-300' }}">{{ $opt }}</span>
                @if($question->correct_answer === $key) <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

        @if($question->correct_answer && !$question->options)
        <div class="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800 mb-4">
            <span class="text-sm text-gray-500 dark:text-gray-400">正確答案：</span>
            <span class="font-bold text-green-700 dark:text-green-400">{{ $question->correct_answer }}</span>
        </div>
        @endif
    </div>

    <!-- AI 詳解 -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-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>
                AI 詳解
            </h3>
            <form action="{{ route('admin.questions.regenerate_ai', $question) }}" method="POST">
                @csrf
                <button class="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-xs font-medium hover:bg-purple-700 flex items-center gap-1">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    {{ $question->ai_explanation ? '重新產生' : '產生詳解' }}
                </button>
            </form>
        </div>

        @if($question->ai_explanation)
        <div class="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>
        @if($question->ai_generated_answer)
        <p class="mt-3 text-sm"><span class="text-gray-500">AI 建議答案：</span><span class="font-bold text-purple-600 dark:text-purple-400">{{ $question->ai_generated_answer }}</span></p>
        @endif
        @else
        <div class="p-6 text-center text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-slate-800 rounded-xl">
            <p>尚無 AI 詳解，點擊上方按鈕產生。</p>
            <p class="text-xs mt-1">建立題目時會自動產生（需設定 AI_API_KEY）</p>
        </div>
        @endif
    </div>

    <!-- 作答統計 -->
    @if($question->studentAnswers->count() > 0)
    @php
        $total = $question->studentAnswers->count();
        $correct = $question->studentAnswers->where('is_correct', true)->count();
        $rate = $total > 0 ? round($correct / $total * 100) : 0;
    @endphp
    <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">作答統計</h3>
        <div class="grid grid-cols-3 gap-4">
            <div class="text-center">
                <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $total }}</p>
                <p class="text-xs text-gray-500">作答人次</p>
            </div>
            <div class="text-center">
                <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ $correct }}</p>
                <p class="text-xs text-gray-500">答對人次</p>
            </div>
            <div class="text-center">
                <p class="text-2xl font-bold {{ $rate >= 60 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">{{ $rate }}%</p>
                <p class="text-xs text-gray-500">正確率</p>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection