{% extends 'base.html' %}
{% block title %}Step 3: Your Question Paper - AutoExamGen{% endblock %}
{% block head %}
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            padding-top: 2rem;
        }
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }
        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .btn-success {
            border-radius: 25px;
            padding: 12px 30px;
            font-weight: 600;
        }
        .btn-secondary {
            border-radius: 25px;
            padding: 12px 30px;
            font-weight: 600;
        }
        .step-indicator {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
        }
        .step {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
            font-weight: bold;
            color: white;
        }
        .step.completed {
            background: #28a745;
        }
        .step.active {
            background: linear-gradient(45deg, #667eea, #764ba2);
        }
        .question-paper {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin: 1rem 0;
        }
        .paper-header {
            text-align: center;
            border-bottom: 2px solid #333;
            padding-bottom: 1rem;
            margin-bottom: 2rem;
        }
        .section-header {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            margin: 1.5rem 0 1rem 0;
            font-weight: bold;
        }
        .question {
            margin-bottom: 1.5rem;
            padding: 1rem;
            border-left: 4px solid #667eea;
            background-color: #f8f9ff;
            border-radius: 0 8px 8px 0;
        }
        .question-number {
            font-weight: bold;
            color: #667eea;
        }
        .question-marks {
            float: right;
            background: #667eea;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        .mcq-options {
            margin-top: 0.5rem;
            padding-left: 1rem;
        }
        .mcq-option {
            margin: 0.3rem 0;
            padding: 0.3rem 0;
        }
        .summary-stats {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .stat-item {
            text-align: center;
        }
        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            display: block;
        }
        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        .preview-mode {
            max-height: 600px;
            overflow-y: auto;
            border: 2px solid #e9ecef;
            border-radius: 15px;
        }
        @media print {
            body {
                background: white !important;
            }
            .no-print {
                display: none !important;
            }
            .question-paper {
                box-shadow: none;
                margin: 0;
                padding: 1rem;
            }
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <!-- Progress Indicator -->
                <div class="step-indicator no-print">
                    <div class="step completed">1</div>
                    <div class="step completed">2</div>
                    <div class="step active">3</div>
                </div>

                <!-- Header Card -->
                <div class="card no-print">
                    <div class="card-header bg-transparent text-center py-4">
                        <h2 class="mb-0">
                            <i class="fas fa-check-circle text-success me-2"></i>
                            Your Question Paper is Ready!
                        </h2>
                        <p class="text-muted mt-2">Review your generated question paper below</p>
                    </div>
                </div>

                <!-- Summary Stats -->
                <div class="summary-stats no-print">
                    <div class="row">
                        <div class="col-md-2 stat-item">
                            <span class="stat-number">{{ config.short_questions + config.long_questions + config.mcq_questions }}</span>
                            <span class="stat-label">Total Questions</span>
                        </div>
                        <div class="col-md-2 stat-item">
                            <span class="stat-number">{{ total_marks }}</span>
                            <span class="stat-label">Total Marks</span>
                        </div>
                        <div class="col-md-2 stat-item">
                            <span class="stat-number">{{ config.short_questions }}</span>
                            <span class="stat-label">Short Questions</span>
                        </div>
                        <div class="col-md-2 stat-item">
                            <span class="stat-number">{{ config.long_questions }}</span>
                            <span class="stat-label">Long Questions</span>
                        </div>
                        <div class="col-md-2 stat-item">
                            <span class="stat-number">{{ config.mcq_questions }}</span>
                            <span class="stat-label">MCQ Questions</span>
                        </div>
                        <div class="col-md-2 stat-item">
                            <span class="stat-number">{{ display_duration }}</span>
                            <span class="stat-label">Time (min)</span>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="row mb-4 no-print">
                    <div class="col-md-3">
                        <a href="/" class="btn btn-secondary btn-lg w-100">
                            <i class="fas fa-home me-2"></i>
                            Start Over
                        </a>
                    </div>
                    <div class="col-md-3">
                        <button onclick="window.print()" class="btn btn-primary btn-lg w-100">
                            <i class="fas fa-print me-2"></i>
                            Print Paper
                        </button>
                    </div>
                    <div class="col-md-3">
                        <a href="/download" class="btn btn-success btn-lg w-100">
                            <i class="fas fa-download me-2"></i>
                            Download HTML
                        </a>
                    </div>
                    <div class="col-md-3">
                        <button onclick="togglePreview()" class="btn btn-primary btn-lg w-100" id="previewBtn">
                            <i class="fas fa-eye me-2"></i>
                            Preview Mode
                        </button>
                    </div>
                </div>

                <!-- Question Paper -->
                <div class="question-paper" id="questionPaper">
                    <div class="paper-header">
                        <h1>{{ config.exam_name if config.exam_name else 'EXAMINATION QUESTION PAPER' }}</h1>
                        <h3>Subject: {{ config.subject_name if config.subject_name else '[Subject Name]' }}</h3>
                        <p><strong>Date:</strong> {{ exam_date }} &nbsp;&nbsp;&nbsp; <strong>Time:</strong> {{ display_duration }} minutes &nbsp;&nbsp;&nbsp; <strong>Total Marks:</strong> {{ total_marks }}</p>
                        <hr>
                        <p><strong>Instructions:</strong></p>
                        <ul style="text-align: left; display: inline-block;">
                            <li>Answer all questions</li>
                            <li>Write clearly and legibly</li>
                            <li>Manage your time effectively</li>
                            {% if config.mcq_questions > 0 %}
                            <li>For MCQ questions, choose the best answer</li>
                            {% endif %}
                        </ul>
                    </div>

                    <!-- Multiple Choice Questions -->
                    {% if config.mcq_questions > 0 and question_paper.mcq_questions %}
                    <div class="section-header">
                        <i class="fas fa-list-ul me-2"></i>
                        SECTION A: MULTIPLE CHOICE QUESTIONS (1 mark each)
                    </div>
                    {% for question in question_paper.mcq_questions %}
                    <div class="question">
                        <span class="question-marks">1 mark</span>
                        <span class="question-number">{{ loop.index }}.</span>
                        {{ question.question if question.question else question }}
                        
                        {% if question.options %}
                        <div class="mcq-options">
                            {% for option in question.options %}
                            <div class="mcq-option">
                                <strong>{{ ['A', 'B', 'C', 'D'][loop.index0] }})</strong> {{ option }}
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="mcq-options">
                            <div class="mcq-option"><strong>A)</strong> [Option A]</div>
                            <div class="mcq-option"><strong>B)</strong> [Option B]</div>
                            <div class="mcq-option"><strong>C)</strong> [Option C]</div>
                            <div class="mcq-option"><strong>D)</strong> [Option D]</div>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                    {% endif %}

                    <!-- Short Answer Questions -->
                    {% if config.short_questions > 0 and question_paper.short_questions %}
                    <div class="section-header">
                        <i class="fas fa-edit me-2"></i>
                        SECTION B: SHORT ANSWER QUESTIONS ({{ config.short_marks }} marks each)
                    </div>
                    {% for item in question_paper.short_questions %}
                    {% if config.short_or and (item.a or item.b) %}
                    <div class="question">
                        <span class="question-marks">{{ config.short_marks }} marks</span>
                        <span class="question-number">{{ loop.index }}.</span>
                        <div>
                            {{ (item.a.question if item.a.question else item.a) if item.a else '' }}
                        </div>
                        {% if item.b %}
                        <div class="text-center my-2"><em>OR</em></div>
                        <div>
                            {{ (item.b.question if item.b.question else item.b) if item.b else '' }}
                        </div>
                        {% endif %}
                    </div>
                    {% else %}
                    <div class="question">
                        <span class="question-marks">{{ config.short_marks }} marks</span>
                        <span class="question-number">{{ loop.index }}.</span>
                        {{ item.question if item.question else item }}
                    </div>
                    {% endif %}
                    {% endfor %}
                    {% endif %}

                    <!-- Long Answer Questions -->
                    {% if config.long_questions > 0 and question_paper.long_questions %}
                    <div class="section-header">
                        <i class="fas fa-file-alt me-2"></i>
                        SECTION C: LONG ANSWER QUESTIONS ({{ config.long_marks }} marks each)
                    </div>
                    {% if config.long_attempt %}
                    <div class="alert alert-info">Attempt any {{ config.long_attempt }} out of {{ config.long_questions }} questions.</div>
                    {% endif %}
                    {% for question in question_paper.long_questions %}
                    <div class="question">
                        <span class="question-marks">{{ config.long_marks }} marks</span>
                        <span class="question-number">{{ loop.index }}.</span>
                        {{ question.question if question.question else question }}
                    </div>
                    {% endfor %}
                    {% endif %}

                    <!-- Footer -->
                    <div style="text-align: center; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ccc;">
                        <p><strong>*** END OF QUESTION PAPER ***</strong></p>
                        <p style="font-size: 0.9rem; color: #666;">
                            Generated on {{ exam_date }} using AI Question Generator
                        </p>
                    </div>
                </div>

                <!-- Tips Card -->
                <div class="card mt-4 no-print">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="fas fa-lightbulb text-warning me-2"></i>
                            Next Steps
                        </h5>
                        <div class="row">
                            <div class="col-md-4">
                                <h6><i class="fas fa-print text-primary me-2"></i>Print</h6>
                                <small class="text-muted">Use the Print button to get a clean, formatted printout of your question paper.</small>
                            </div>
                            <div class="col-md-4">
                                <h6><i class="fas fa-download text-success me-2"></i>Download</h6>
                                <small class="text-muted">Download as HTML file to save or share your question paper digitally.</small>
                            </div>
                            <div class="col-md-4">
                                <h6><i class="fas fa-edit text-info me-2"></i>Customize</h6>
                                <small class="text-muted">Edit the subject name, instructions, or questions as needed before printing.</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block scripts %}
    <script>
        function togglePreview() {
            const paper = document.getElementById('questionPaper');
            const btn = document.getElementById('previewBtn');
            
            if (paper.classList.contains('preview-mode')) {
                paper.classList.remove('preview-mode');
                btn.innerHTML = '<i class="fas fa-eye me-2"></i>Preview Mode';
            } else {
                paper.classList.add('preview-mode');
                btn.innerHTML = '<i class="fas fa-expand me-2"></i>Full View';
            }
        }

        // Auto-scroll to paper on load
        window.addEventListener('load', function() {
            document.getElementById('questionPaper').scrollIntoView({ 
                behavior: 'smooth', 
                block: 'start' 
            });
        });
    </script>
{% endblock %}