{% extends 'base.html' %}
{% block title %}Review Submission{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Enhanced Page Header -->
    <div class="mb-6 sm:mb-8">
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl shadow-2xl overflow-hidden">
            <div class="p-6 sm:p-8">
                <div class="flex flex-col lg:flex-row justify-between items-start gap-6">
                    <div class="flex-1">
                        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-3">
                            <div class="flex items-center gap-3">
                                <div class="w-14 h-14 bg-white/20 backdrop-blur-lg rounded-xl flex items-center justify-center">
                                    <i class="fas fa-clipboard-check text-2xl"></i>
                                </div>
                                <div>
                                    <h1 class="text-2xl sm:text-3xl font-bold">Review Submission</h1>
                                    <p class="text-white/80 text-sm">Provide feedback on student's work</p>
                                </div>
                            </div>
                            <div class="badge badge-lg {{ submission.status == 'pending' and 'badge-warning' or (submission.status == 'approved' and 'badge-success' or (submission.status == 'needs_revision' and 'badge-info' or 'badge-error')) }} shadow-lg">
                                <i class="fas {{ submission.status == 'pending' and 'fa-clock' or (submission.status == 'approved' and 'fa-check' or (submission.status == 'needs_revision' and 'fa-exclamation' or 'fa-times')) }} mr-2"></i>
                                {{ submission.status|capitalize }}
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-4">
                            <div class="bg-white/10 backdrop-blur-lg rounded-lg p-3">
                                <div class="text-white/70 text-xs mb-1">Student</div>
                                <div class="font-semibold truncate">{{ submission.progress.student.username }}</div>
                            </div>
                            <div class="bg-white/10 backdrop-blur-lg rounded-lg p-3">
                                <div class="text-white/70 text-xs mb-1">Topic</div>
                                <div class="font-semibold truncate">{{ submission.progress.topic.title }}</div>
                            </div>
                            <div class="bg-white/10 backdrop-blur-lg rounded-lg p-3">
                                <div class="text-white/70 text-xs mb-1">Type</div>
                                <div class="font-semibold capitalize">
                                    <i class="fas {{ submission.content_type == 'comprehension' and 'fa-brain' or 'fa-microphone' }} mr-1"></i>
                                    {{ submission.content_type }}
                                </div>
                            </div>
                            <div class="bg-white/10 backdrop-blur-lg rounded-lg p-3">
                                <div class="text-white/70 text-xs mb-1">Submitted</div>
                                <div class="font-semibold text-sm">{{ submission.created_at.strftime('%d %b, %I:%M %p') }}</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row gap-3">
                        <a href="{{ url_for('teacher.student_details', student_id=submission.progress.student_id) }}" 
                           class="btn btn-lg bg-white/20 backdrop-blur-lg border-white/30 hover:bg-white/30 text-white">
                            <i class="fas fa-user mr-2"></i> Student Profile
                        </a>
                        <a href="{{ url_for('teacher.dashboard') }}" 
                           class="btn btn-lg btn-outline border-white/50 hover:bg-white/10 text-white">
                            <i class="fas fa-arrow-left mr-2"></i> Back
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column: AI Score & Review Form -->
        <div class="lg:col-span-1 space-y-6">
            <!-- AI Score Card -->
            {% if submission.score %}
            <div class="card bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 shadow-xl border border-blue-200 dark:border-blue-800">
                <div class="card-body p-6">
                    <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
                        <i class="fas fa-robot text-blue-600"></i>
                        AI Assessment Score
                    </h3>
                    
                    <div class="flex justify-center mb-4">
                        <div class="relative">
                            <svg class="transform -rotate-90" width="140" height="140">
                                <circle cx="70" cy="70" r="60" stroke="currentColor" stroke-width="10" fill="none" class="text-gray-200 dark:text-gray-700"/>
                                <circle cx="70" cy="70" r="60" stroke="currentColor" stroke-width="10" fill="none" 
                                        class="{{ 'text-green-500' if submission.score >= 70 else ('text-yellow-500' if submission.score >= 50 else 'text-red-500') }} transition-all duration-1000"
                                        stroke-dasharray="376.99" 
                                        stroke-dashoffset="{{ 376.99 - (376.99 * (submission.score / 100)) }}"
                                        stroke-linecap="round"/>
                            </svg>
                            <div class="absolute inset-0 flex items-center justify-center">
                                <div class="text-center">
                                    <div class="text-4xl font-bold {{ 'text-green-600' if submission.score >= 70 else ('text-yellow-600' if submission.score >= 50 else 'text-red-600') }}">
                                        {{ submission.score|round(1) }}
                                    </div>
                                    <div class="text-sm text-gray-600 dark:text-gray-400">out of 100</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert {{ 'alert-success' if submission.score >= 70 else ('alert-warning' if submission.score >= 50 else 'alert-error') }} shadow-sm">
                        <i class="fas {{ 'fa-check-circle' if submission.score >= 70 else ('fa-exclamation-triangle' if submission.score >= 50 else 'fa-times-circle') }}"></i>
                        <span class="text-sm">
                            {% if submission.score >= 70 %}
                                Excellent performance!
                            {% elif submission.score >= 50 %}
                                Good effort, needs improvement
                            {% else %}
                                Needs significant improvement
                            {% endif %}
                        </span>
                    </div>
                </div>
            </div>
            {% endif %}
            
            <!-- Teacher Review Form -->
            <form method="POST" action="{{ url_for('teacher.review_submission', submission_id=submission.id) }}" class="card bg-base-100 shadow-xl">
                {{ form.csrf_token }}
                
                <div class="card-body p-6">
                    <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
                        <i class="fas fa-pen text-purple-600"></i>
                        Your Review
                    </h3>
                    
                    <div class="space-y-5">
                        <!-- Teacher Score (Optional) -->
                        <div class="form-control">
                            <label class="label pb-1">
                                <span class="label-text font-semibold flex items-center gap-2">
                                    <i class="fas fa-star text-yellow-500"></i>
                                    Manual Score Override
                                </span>
                            </label>
                            <div class="join w-full">
                                <input type="number" 
                                       name="teacher_score" 
                                       min="0" 
                                       max="100" 
                                       step="0.1"
                                       value="{{ submission.teacher_score if submission.teacher_score is not none else '' }}"
                                       placeholder="0-100"
                                       class="input input-bordered join-item flex-1 text-lg font-semibold">
                                <span class="btn btn-ghost join-item">/ 100</span>
                            </div>
                            <label class="label pt-1">
                                <span class="label-text-alt text-xs">
                                    {% if submission.teacher_score %}
                                    <span class="text-success font-medium"><i class="fas fa-check-circle mr-1"></i>Your score is active</span>
                                    {% else %}
                                    <span class="text-info"><i class="fas fa-info-circle mr-1"></i>Leave empty to use AI score</span>
                                    {% endif %}
                                </span>
                            </label>
                        </div>
                        
                        <!-- Feedback Text Area -->
                        <div class="form-control">
                            <label class="label pb-1">
                                <span class="label-text font-semibold flex items-center gap-2">
                                    <i class="fas fa-comment-dots text-blue-600"></i>
                                    Student Feedback
                                </span>
                                <span class="label-text-alt text-xs badge badge-sm badge-info">Visible to student</span>
                            </label>
                            <textarea name="feedback" 
                                      class="textarea textarea-bordered h-32 w-full text-base leading-relaxed" 
                                      placeholder="Write constructive feedback to help the student improve...">{{ submission.teacher_feedback or '' }}</textarea>
                            <label class="label pt-1">
                                <span class="label-text-alt text-xs">Be specific and constructive</span>
                            </label>
                        </div>
                        
                        <!-- Private Notes (Optional) -->
                        <div class="form-control">
                            <label class="label pb-1">
                                <span class="label-text font-semibold flex items-center gap-2">
                                    <i class="fas fa-lock text-gray-600"></i>
                                    Private Notes
                                </span>
                                <span class="label-text-alt text-xs badge badge-sm badge-ghost">Teachers only</span>
                            </label>
                            <textarea name="notes" 
                                      class="textarea textarea-bordered h-24 w-full text-sm" 
                                      placeholder="Internal notes, observations, or reminders...">{{ submission.teacher_notes or '' }}</textarea>
                        </div>
                        
                        <!-- Status Buttons -->
                        <div class="form-control">
                            <label class="label pb-2">
                                <span class="label-text font-semibold flex items-center gap-2">
                                    <i class="fas fa-clipboard-check text-purple-600"></i>
                                    Review Decision
                                </span>
                            </label>
                            <div class="space-y-2">
                                <label class="label cursor-pointer justify-start gap-3 bg-green-50 dark:bg-green-900/20 rounded-lg p-4 hover:bg-green-100 dark:hover:bg-green-900/30 transition-all border-2 border-transparent hover:border-green-500 {{ 'border-green-500 bg-green-100 dark:bg-green-900/30' if submission.status == 'approved' else '' }}">
                                    <input type="radio" name="status" value="approved" class="radio radio-success radio-lg" {{ 'checked' if submission.status == 'approved' else '' }}>
                                    <div>
                                        <div class="flex items-center gap-2 font-semibold text-green-700 dark:text-green-400">
                                            <i class="fas fa-check-circle text-lg"></i>
                                            Approve Submission
                                        </div>
                                        <div class="text-xs text-green-600 dark:text-green-500 mt-1">Student completed the task successfully</div>
                                    </div>
                                </label>
                                
                                <label class="label cursor-pointer justify-start gap-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-4 hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-all border-2 border-transparent hover:border-yellow-500 {{ 'border-yellow-500 bg-yellow-100 dark:bg-yellow-900/30' if submission.status == 'needs_revision' else '' }}">
                                    <input type="radio" name="status" value="needs_revision" class="radio radio-warning radio-lg" {{ 'checked' if submission.status == 'needs_revision' else '' }}>
                                    <div>
                                        <div class="flex items-center gap-2 font-semibold text-yellow-700 dark:text-yellow-400">
                                            <i class="fas fa-exclamation-triangle text-lg"></i>
                                            Request Revision
                                        </div>
                                        <div class="text-xs text-yellow-600 dark:text-yellow-500 mt-1">Student needs to make improvements</div>
                                    </div>
                                </label>
                                
                                <label class="label cursor-pointer justify-start gap-3 bg-red-50 dark:bg-red-900/20 rounded-lg p-4 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all border-2 border-transparent hover:border-red-500 {{ 'border-red-500 bg-red-100 dark:bg-red-900/30' if submission.status == 'rejected' else '' }}">
                                    <input type="radio" name="status" value="rejected" class="radio radio-error radio-lg" {{ 'checked' if submission.status == 'rejected' else '' }}>
                                    <div>
                                        <div class="flex items-center gap-2 font-semibold text-red-700 dark:text-red-400">
                                            <i class="fas fa-times-circle text-lg"></i>
                                            Reject Submission
                                        </div>
                                        <div class="text-xs text-red-600 dark:text-red-500 mt-1">Work does not meet requirements</div>
                                    </div>
                                </label>
                            </div>
                        </div>
                        
                        <!-- Submit Button -->
                        <div class="pt-2">
                            <button type="submit" class="btn btn-primary btn-lg w-full shadow-lg hover:shadow-xl transition-all">
                                <i class="fas fa-save mr-2"></i>
                                Save Review & Update Status
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- Submission Content and AI Feedback - Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Student's Submission -->
            <div class="card bg-base-100 shadow-xl mb-6">
                <div class="card-body p-4 sm:p-6">
                    <h2 class="card-title text-lg flex items-center">
                        <i class="fas fa-file-alt text-secondary mr-2"></i>
                        Student's Submission
                    </h2>
                    
                    <div class="divider my-2"></div>
                    
                    <!-- Content based on submission type -->
                    {% if submission.content_type == 'comprehension' %}
                        <div class="space-y-6">
                            {% for entry in submission.parsed_feedback %}
                                <div class="card bg-base-200 shadow-sm hover:shadow-md transition-shadow">
                                    <div class="card-body p-4 sm:p-6">
                                        <div class="mb-4 pb-3 border-b border-base-300">
                                            <h3 class="font-bold text-md flex items-center gap-2 text-primary">
                                                <i class="fas fa-question-circle"></i>
                                                Question:
                                            </h3>
                                            <div class="bg-base-100 p-3 sm:p-4 rounded-lg mt-2 shadow-sm">
                                                {{ entry.question }}
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <h3 class="font-bold text-md flex items-center gap-2 text-secondary">
                                                <i class="fas fa-pen-alt"></i>
                                                Student's Answer:
                                            </h3>
                                            <div class="bg-base-100 p-3 sm:p-4 rounded-lg mt-2 shadow-sm">
                                                {{ entry.answer }}
                                            </div>
                                        </div>
                                        
                                        {% if entry.score is defined %}
                                            <div class="flex items-center gap-2 mt-4 pt-2 border-t border-base-300">
                                                <span class="font-medium">Score:</span>
                                                <div class="badge badge-lg {{ entry.score >= 70 and 'badge-success' or (entry.score >= 50 and 'badge-warning' or 'badge-error') }}">
                                                    {{ entry.score }}%
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% elif submission.content_type == 'speaking' %}
                        <div class="bg-base-200 rounded-xl p-4 sm:p-6 shadow-inner">
                            {% if submission.parsed_content.get('transcription') %}
                                <h3 class="font-bold mb-3 text-lg flex items-center gap-2">
                                    <i class="fas fa-microphone text-accent"></i>
                                    Transcription:
                                </h3>
                                <div class="bg-base-100 p-4 sm:p-6 rounded-lg shadow-sm border border-base-300">
                                    <p class="italic text-base-content/90 leading-relaxed">
                                        "{{ submission.parsed_content.transcription }}"
                                    </p>
                                </div>
                            {% else %}
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    <span>No transcription available for this speaking submission.</span>
                                </div>
                            {% endif %}
                        </div>
                    {% else %}
                        <div class="bg-base-200 rounded-xl p-4 sm:p-6 shadow-inner">
                            <div class="bg-base-100 p-4 rounded-lg shadow-sm border border-base-300">
                                <p class="text-base-content">{{ submission.content }}</p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- AI Feedback -->
            <div class="card bg-base-100 shadow-xl">
                <div class="card-body p-4 sm:p-6">
                    <h2 class="card-title text-lg flex items-center">
                        <i class="fas fa-robot text-accent mr-2"></i>
                        AI-Generated Feedback
                    </h2>
                    
                    <div class="divider my-2"></div>
                    
                    {% if submission.content_type == 'speaking' and submission.parsed_content.get('scores') %}
                        <!-- Speaking Scores -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mb-4">
                            {% for key, score in submission.parsed_content.scores.items() %}
                                {% if key != 'overall' %}
                                    <div class="stat bg-base-200 rounded-lg shadow-sm p-3 sm:p-4">
                                        <div class="stat-title capitalize flex items-center gap-2">
                                            {% if key == 'pronunciation' %}
                                                <i class="fas fa-comments text-accent"></i>
                                            {% elif key == 'fluency' %}
                                                <i class="fas fa-tachometer-alt text-accent"></i>
                                            {% elif key == 'vocabulary' %}
                                                <i class="fas fa-book text-accent"></i>
                                            {% elif key == 'grammar' %}
                                                <i class="fas fa-spell-check text-accent"></i>
                                            {% else %}
                                                <i class="fas fa-chart-bar text-accent"></i>
                                            {% endif %}
                                            {{ key }}
                                        </div>
                                        <div class="stat-value text-xl sm:text-2xl flex items-center gap-2 mt-2">
                                            <div class="score-display">
                                                <div class="radial-progress text-{{ 'success' if score >= 70 else ('warning' if score >= 50 else 'error') }}" 
                                                     style="--value:{{ score }}; --size:2.5rem; --thickness: 0.25rem;" data-score="{{ score }}">
                                                    <div class="score-text score-text-sm">{{ score }}</div>
                                                </div>
                                            </div>
                                            <span class="font-medium">/ 100</span>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                            
                            <!-- Overall Score -->
                            {% if submission.parsed_content.scores.get('overall') %}
                                <div class="stat bg-primary/10 rounded-lg shadow-sm p-4 md:col-span-2">
                                    <div class="stat-title text-primary font-medium flex items-center gap-2">
                                        <i class="fas fa-star text-primary"></i>
                                        Overall Score
                                    </div>
                                    <div class="stat-value text-3xl text-primary flex items-center gap-2">
                                        <div class="score-display">
                                            <div class="radial-progress text-primary" 
                                                 style="--value:{{ submission.parsed_content.scores.overall }}; --size:3rem; --thickness: 0.3rem;" data-score="{{ submission.parsed_content.scores.overall }}">
                                                <div class="score-text score-text-md">{{ submission.parsed_content.scores.overall }}</div>
                                            </div>
                                        </div>
                                        <span>%</span>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                    
                    <!-- Feedback Display -->
                    {% if submission.parsed_feedback %}
                        <div class="space-y-4">
                            {% if submission.content_type == 'comprehension' %}
                                <div class="grid grid-cols-1 sm:grid-cols-1 gap-4">
                                    {% for entry in submission.parsed_feedback %}
                                        <div class="bg-base-200/80 p-4 sm:p-5 rounded-lg shadow-sm">
                                            <div class="flex items-center gap-2 mb-2 text-primary">
                                                <i class="fas fa-comment-alt"></i>
                                                <span class="font-bold">AI Feedback:</span>
                                            </div>
                                            <div class="bg-base-100 p-3 sm:p-4 rounded-lg mb-4 shadow-inner">
                                                <p class="text-base-content">{{ entry.feedback }}</p>
                                            </div>
                                            
                                            {% if entry.suggestions %}
                                                <div class="flex items-center gap-2 mb-2 text-secondary">
                                                    <i class="fas fa-lightbulb"></i>
                                                    <span class="font-bold">Suggestions:</span>
                                                </div>
                                                <div class="bg-base-100 p-3 sm:p-4 rounded-lg shadow-inner">
                                                    <p class="text-base-content">{{ entry.suggestions }}</p>
                                                </div>
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            {% elif submission.content_type == 'speaking' %}
                                {% if submission.parsed_content.get('feedback') %}
                                    <div class="grid grid-cols-1 gap-3">
                                        {% for key, feedback in submission.parsed_content.feedback.items() %}
                                            <div class="collapse collapse-arrow bg-base-200 rounded-lg">
                                                <input type="checkbox" id="feedback-{{ loop.index }}-{{ key|slugify }}" name="feedback-toggle-{{ loop.index }}" /> 
                                                <div class="collapse-title font-medium capitalize flex items-center gap-2">
                                                    {% if key == 'pronunciation' %}
                                                        <i class="fas fa-comments text-accent"></i>
                                                    {% elif key == 'fluency' %}
                                                        <i class="fas fa-tachometer-alt text-accent"></i>
                                                    {% elif key == 'vocabulary' %}
                                                        <i class="fas fa-book text-accent"></i>
                                                    {% elif key == 'grammar' %}
                                                        <i class="fas fa-spell-check text-accent"></i>
                                                    {% else %}
                                                        <i class="fas fa-chart-bar text-accent"></i>
                                                    {% endif %}
                                                    {{ key }} Feedback
                                                </div>
                                                <div class="collapse-content bg-base-100/50"> 
                                                    <p class="p-2">{{ feedback }}</p>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% else %}
                                    <div class="alert alert-info shadow-sm">
                                        <i class="fas fa-info-circle"></i>
                                        <span>No detailed AI feedback available for this submission.</span>
                                    </div>
                                {% endif %}
                            {% else %}
                                <div class="bg-base-200 p-4 rounded-lg">
                                    <p>{{ submission.feedback }}</p>
                                </div>
                            {% endif %}
                        </div>
                    {% else %}
                        <div class="alert alert-info shadow-sm">
                            <i class="fas fa-info-circle"></i>
                            <span>No AI feedback available for this submission.</span>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Use shared radial-progress.css for progress circles */
    
    /* Responsive card and spacing adjustments */
    @media (max-width: 768px) {
        .card-body {
            padding: 1.25rem;
        }
        
        .form-control .label {
            padding-left: 0;
            padding-right: 0;
        }
        
        .space-y-4 > * + * {
            margin-top: 1rem;
        }

        .badge-lg {
            font-size: 0.75rem;
        }
        
        .stat {
            padding: 0.75rem;
        }
        
        .stat-value {
            font-size: 1.5rem;
        }
    }

    /* Improved card and element styling */
    .card {
        transition: all 0.3s ease;
    }
    
    .card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .divider {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        opacity: 0.6;
    }
    
    /* Feedback accordion improvements */
    .collapse-title {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-weight: 500;
    }
    
    .collapse-content {
        padding: 0.5rem 1rem;
    }
    
    /* Progress circle sizing classes */
    .score-circle-sm {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .score-circle-md {
        width: 4rem;
        height: 4rem;
    }
    
    .score-circle-lg {
        width: 6rem;
        height: 6rem;
    }
    
    /* Better contrast for text on colored backgrounds */
    .text-success {
        font-weight: 600;
    }
    
    .text-error {
        font-weight: 600;
    }
    
    .text-warning {
        font-weight: 600;
    }
    
    /* Box shadows for content areas */
    .bg-base-200 {
        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    }
    
    /* Fix mobile appearance */
    @media (max-width: 640px) {
        .grid {
            gap: 1rem;
        }
        
        h1, .h1 {
            font-size: 1.5rem;
        }
        
        .card-title {
            font-size: 1.125rem;
        }
    }
</style>
{% endblock %}