{% extends "base.html" %}

{% block title %}Result Details{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 py-8 px-4">
    <div class="max-w-6xl mx-auto">
        <!-- Back Button -->
        <div class="mb-6">
            <a href="{{ url_for('student.my_results') }}" class="btn btn-outline btn-sm gap-2">
                <i class="fas fa-arrow-left"></i>
                Back to Results
            </a>
        </div>

        <!-- Header Section -->
        <div class="bg-white rounded-xl shadow-xl p-6 sm:p-8 mb-6">
            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                <!-- Left: Title and Info -->
                <div class="flex-1">
                    <h1 class="text-3xl font-bold text-gray-800 mb-2">
                        {{ topic.title }}
                    </h1>
                    <div class="flex flex-wrap items-center gap-2 mb-4">
                        <span class="badge badge-lg {{ 'badge-success' if submission.status == 'approved' else ('badge-warning' if submission.status in ['pending', 'needs_revision'] else 'badge-error') }}">
                            <i class="fas {{ 'fa-check-circle' if submission.status == 'approved' else ('fa-clock' if submission.status == 'pending' else 'fa-exclamation-circle') }} mr-1"></i>
                            {{ submission.status|replace('_', ' ')|title }}
                        </span>
                        <span class="badge badge-lg badge-outline">
                            {% if submission.content_type == 'comprehension' %}
                            <i class="fas fa-brain mr-1"></i>
                            {% elif submission.content_type == 'speaking' %}
                            <i class="fas fa-microphone mr-1"></i>
                            {% endif %}
                            {{ submission.content_type|capitalize }}
                        </span>
                    </div>
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-calendar-alt mr-1"></i>
                        Submitted: {{ submission.created_at.strftime('%d %b %Y, %I:%M %p') }}
                    </p>
                    {% if submission.reviewed_at %}
                    <p class="text-sm text-gray-600">
                        <i class="fas fa-check-circle mr-1"></i>
                        Reviewed: {{ submission.reviewed_at.strftime('%d %b %Y, %I:%M %p') }}
                    </p>
                    {% endif %}
                </div>

                <!-- Right: Scores -->
                <div class="flex flex-col items-center gap-4">
                    <div class="relative inline-block">
                        <svg class="w-32 h-32 transform -rotate-90">
                            <circle cx="64" cy="64" r="56" stroke="#e5e7eb" stroke-width="10" fill="none"/>
                            <circle cx="64" cy="64" r="56" 
                                    stroke="{{ 'rgb(34, 197, 94)' if submission.final_score >= 70 else ('rgb(251, 191, 36)' if submission.final_score >= 50 else 'rgb(239, 68, 68)') }}" 
                                    stroke-width="10" 
                                    fill="none"
                                    stroke-dasharray="{{ (submission.final_score or 0) * 3.51 }} 351"
                                    stroke-linecap="round"/>
                        </svg>
                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <span class="text-4xl font-bold {{ 'text-green-600' if submission.final_score >= 70 else ('text-yellow-600' if submission.final_score >= 50 else 'text-red-600') }}">
                                {{ submission.final_score|round(1) if submission.final_score else 'N/A' }}
                            </span>
                            <span class="text-sm text-gray-600">Final Score</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Score Breakdown -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
            <!-- AI Score Card -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-robot text-blue-600"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-600">AI Score</div>
                        <div class="text-2xl font-bold text-blue-600">{{ submission.score|round(1) if submission.score else 'N/A' }}%</div>
                    </div>
                </div>
                <p class="text-xs text-gray-500">Automated assessment</p>
            </div>

            <!-- Teacher Score Card -->
            {% if submission.teacher_score is not none %}
            <div class="bg-white rounded-xl shadow-md p-6 border-2 border-green-200">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-user-tie text-green-600"></i>
                    </div>
                    <div>
                        <div class="text-sm text-gray-600">Teacher Score</div>
                        <div class="text-2xl font-bold text-green-600">{{ submission.teacher_score|round(1) }}%</div>
                    </div>
                </div>
                <p class="text-xs text-gray-500">Manually reviewed by {% if submission.reviewer %}{{ submission.reviewer.username }}{% else %}teacher{% endif %}</p>
            </div>

            <!-- Final Score Card -->
            <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-md p-6 text-white">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                        <i class="fas fa-trophy text-white"></i>
                    </div>
                    <div>
                        <div class="text-sm text-white/80">Final Score</div>
                        <div class="text-2xl font-bold">{{ submission.teacher_score|round(1) }}%</div>
                    </div>
                </div>
                <p class="text-xs text-white/80">Teacher score applied</p>
            </div>
            {% else %}
            <!-- Final Score = AI Score (no teacher review yet) -->
            <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-md p-6 text-white">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                        <i class="fas fa-trophy text-white"></i>
                    </div>
                    <div>
                        <div class="text-sm text-white/80">Final Score</div>
                        <div class="text-2xl font-bold">{{ submission.score|round(1) if submission.score else 'N/A' }}%</div>
                    </div>
                </div>
                <p class="text-xs text-white/80">AI score (no manual review yet)</p>
            </div>
            {% endif %}
        </div>

        <!-- Teacher Feedback Section -->
        {% if submission.teacher_feedback %}
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl shadow-md p-6 sm:p-8 mb-6 border border-blue-200">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-tie text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold text-gray-800">Teacher Feedback</h2>
                    <p class="text-sm text-gray-600">Personal review from your teacher</p>
                </div>
            </div>
            
            <div class="bg-white rounded-lg p-6 shadow-sm">
                <div class="prose max-w-none">
                    {{ submission.teacher_feedback|replace('\n', '<br>')|safe }}
                </div>
            </div>
            
            <div class="mt-4 flex items-center gap-2 text-sm text-gray-600">
                <i class="fas fa-user-check"></i>
                <span>Reviewed by: <strong>{% if submission.reviewer %}{{ submission.reviewer.username }}{% else %}Teacher{% endif %}</strong></span>
                <span class="mx-2">•</span>
                <i class="fas fa-calendar-alt"></i>
                <span>{{ submission.reviewed_at.strftime('%d %b %Y, %I:%M %p') }}</span>
            </div>
        </div>
        {% endif %}

        <!-- AI Assessment Details -->
        <div class="bg-white rounded-xl shadow-md p-6 sm:p-8 mb-6">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center">
                    <i class="fas fa-brain text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold text-gray-800">AI Assessment Details</h2>
                    <p class="text-sm text-gray-600">Automated evaluation breakdown</p>
                </div>
            </div>

            {% if submission.parsed_feedback and submission.parsed_feedback|length > 0 %}
            <div class="space-y-6">
                {% for item in submission.parsed_feedback %}
                <div class="bg-gray-50 rounded-xl p-6 border border-gray-200">
                    <!-- Question Header -->
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="badge badge-primary">Question {{ loop.index }}</span>
                                {% if item.overall_score is defined %}
                                <span class="badge {{ 'badge-success' if item.overall_score >= 80 else ('badge-warning' if item.overall_score >= 60 else 'badge-error') }}">
                                    Score: {{ item.overall_score }}%
                                </span>
                                {% endif %}
                            </div>
                            <h3 class="text-lg font-semibold text-gray-800 mb-3">
                                {{ item.question }}
                            </h3>
                        </div>
                    </div>

                    <!-- Your Answer -->
                    <div class="mb-4">
                        <div class="text-sm font-semibold text-gray-700 mb-2">Your Answer:</div>
                        <div class="bg-white p-4 rounded-lg border border-gray-200">
                            <p class="text-gray-800">{{ item.answer }}</p>
                        </div>
                    </div>

                    <!-- Scores Grid -->
                    {% if item.content_score is defined or item.grammar_score is defined %}
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-4">
                        {% if item.content_score is defined %}
                        <div class="bg-blue-50 rounded-lg p-3 text-center">
                            <div class="text-2xl font-bold text-blue-600">{{ item.content_score }}</div>
                            <div class="text-xs text-gray-600">Content</div>
                        </div>
                        {% endif %}
                        {% if item.grammar_score is defined %}
                        <div class="bg-green-50 rounded-lg p-3 text-center">
                            <div class="text-2xl font-bold text-green-600">{{ item.grammar_score }}</div>
                            <div class="text-xs text-gray-600">Grammar</div>
                        </div>
                        {% endif %}
                        {% if item.coherence_score is defined %}
                        <div class="bg-orange-50 rounded-lg p-3 text-center">
                            <div class="text-2xl font-bold text-orange-600">{{ item.coherence_score }}</div>
                            <div class="text-xs text-gray-600">Coherence</div>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}

                    <!-- Feedback Sections -->
                    <div class="space-y-3">
                        {% if item.strengths %}
                        <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                            <div class="flex items-center gap-2 mb-2">
                                <i class="fas fa-star text-green-600"></i>
                                <span class="font-semibold text-green-800">What You Did Well</span>
                            </div>
                            <p class="text-sm text-gray-700">{{ item.strengths }}</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-8 text-gray-500">
                <i class="fas fa-info-circle text-4xl mb-2"></i>
                <p>No detailed assessment available</p>
            </div>
            {% endif %}
        </div>

        <!-- Actions -->
        <div class="flex flex-wrap gap-4">
            <a href="{{ url_for('student.my_results') }}" class="btn btn-outline gap-2">
                <i class="fas fa-arrow-left"></i>
                Back to Results
            </a>
            <a href="{{ url_for('student.topic_view', topic_id=topic.id) }}" class="btn btn-primary gap-2">
                <i class="fas fa-book-open"></i>
                View Topic
            </a>
            {% if submission.status == 'approved' and submission.final_score >= 70 %}
            <a href="{{ url_for('student.complete_topic', topic_id=topic.id) }}" 
               class="btn btn-success gap-2">
                <i class="fas fa-trophy"></i>
                Complete Topic
            </a>
            {% elif submission.content_type == 'comprehension' %}
            <a href="{{ url_for('student.comprehension_stage', topic_id=topic.id) }}" 
               class="btn btn-info gap-2">
                <i class="fas fa-redo"></i>
                Practice Again
            </a>
            {% elif submission.content_type == 'speaking' %}
            <a href="{{ url_for('student.speaking_stage', topic_id=topic.id) }}" 
               class="btn btn-info gap-2">
                <i class="fas fa-redo"></i>
                Practice Again
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}