{% extends 'base.html' %}
{% block title %}Step 1: Input Syllabus - 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;
        }
        .hero-title {
            color: #4f46e5; /* Fallback color for visibility */
            background: linear-gradient(45deg, #4f46e5, #9333ea);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 1px 0 rgba(0,0,0,0.05);
        }
        .glow {
            text-shadow: 0 0 12px rgba(255,255,255,0.25);
        }
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px) }
            50% { transform: translateY(-6px) }
            100% { transform: translateY(0px) }
        }
        .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);
        }
        .form-control, .form-select {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }
        .form-control:focus, .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .progress-bar {
            background: linear-gradient(45deg, #667eea, #764ba2);
        }
        .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.active {
            background: linear-gradient(45deg, #667eea, #764ba2);
        }
        .step.inactive {
            background: #ccc;
        }
        .file-upload-area {
            border: 2px dashed #667eea;
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .file-upload-area:hover {
            background-color: #f8f9ff;
            border-color: #764ba2;
        }
        .alert {
            border-radius: 10px;
        }
        /* Enhancements */
        .accent-text {
            color: #4f46e5; /* Fallback color */
            background: linear-gradient(45deg, #4f46e5, #9333ea);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .shimmer {
            position: relative;
            overflow: hidden;
        }
        .shimmer::after {
            content: "";
            position: absolute;
            top: 0; left: -150%;
            width: 50%; height: 100%;
            background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
            animation: shimmer 2.5s infinite;
        }
        @keyframes shimmer {
            0% { left: -150%; }
            60% { left: 150%; }
            100% { left: 150%; }
        }
        .file-upload-area.dragover {
            border-color: #00c2ff;
            box-shadow: 0 10px 25px rgba(0, 194, 255, 0.25);
            background: linear-gradient(0deg, rgba(0,194,255,0.06), transparent 60%);
        }
        .stat-pill {
            border-radius: 999px;
            background: #f3f6ff;
            padding: 6px 12px;
            border: 1px solid #e6ebff;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <!-- Progress Indicator -->
                <div class="step-indicator">
                    <div class="step active">1</div>
                    <div class="step inactive">2</div>
                    <div class="step inactive">3</div>
                </div>

                <div class="card">
                    <div class="card-header bg-transparent text-center py-4">
                        <div class="shimmer">
                            <h2 class="mb-0 hero-title floating">
                                <i class="fas fa-file-text text-primary me-2 glow"></i>
                                Step 1: <span class="accent-text">Input Your Syllabus</span>
                            </h2>
                        </div>
                        <p class="text-muted mt-2">Enter your syllabus content by typing, pasting, or uploading a file</p>
                    </div>
                    <div class="card-body p-4">
                        <form action="/step2" method="POST" enctype="multipart/form-data" id="inputForm">
                            <!-- Text Input Option -->
                             <div class="mb-4">
                                <label for="text_input" class="form-label">
                                    <i class="fas fa-keyboard me-2"></i>Type or Paste Your Syllabus
                                </label>
                                <textarea 
                                    class="form-control" 
                                    id="text_input" 
                                    name="text_input" 
                                    rows="10" 
                                    placeholder="Enter your syllabus content here... You can type or paste text directly into this area."
                                ></textarea>
                                 <div class="d-flex gap-2 mt-2 flex-wrap">
                                     <span class="stat-pill"><i class="fas fa-font me-2 text-primary"></i>Paste text</span>
                                     <span class="stat-pill"><i class="fas fa-file-word me-2 text-primary"></i>Supports .docx</span>
                                     <span class="stat-pill"><i class="fas fa-bolt me-2 text-primary"></i>Fast processing</span>
                                 </div>
                                <div class="form-text">
                                    <i class="fas fa-info-circle me-1"></i>
                                    You can type or paste your syllabus content directly here.
                                </div>
                            </div>

                            <div class="text-center my-3">
                                <span class="badge bg-secondary px-3 py-2">OR</span>
                            </div>

                            <!-- File Upload Option -->
                            <div class="mb-4">
                                <label class="form-label">
                                    <i class="fas fa-upload me-2"></i>Upload a File
                                </label>
                                 <div class="file-upload-area" id="dropArea" onclick="document.getElementById('file').click()">
                                     <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3 floating"></i>
                                     <h5 class="glow">Click to Upload File</h5>
                                     <p class="text-muted mb-0">Supports .txt and .docx files</p>
                                     <input type="file" id="file" name="file" class="d-none" accept=".txt,.docx" onchange="updateFileName(this)">
                                 </div>
                                <div id="fileName" class="mt-2 text-center text-muted"></div>
                            </div>

                            <!-- Submit Button -->
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-arrow-right me-2"></i>
                                    Continue to Question Configuration
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Info Card -->
                <div class="card mt-4">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="fas fa-lightbulb text-warning me-2"></i>
                            How it works
                        </h5>
                        <div class="row">
                            <div class="col-md-4 text-center mb-3">
                                <i class="fas fa-file-text fa-2x text-primary mb-2"></i>
                                <h6>1. Input Content</h6>
                                <small class="text-muted">Provide your syllabus content</small>
                            </div>
                            <div class="col-md-4 text-center mb-3">
                                <i class="fas fa-cogs fa-2x text-primary mb-2"></i>
                                <h6>2. Configure Questions</h6>
                                <small class="text-muted">Choose question types and marks</small>
                            </div>
                            <div class="col-md-4 text-center mb-3">
                                <i class="fas fa-download fa-2x text-primary mb-2"></i>
                                <h6>3. Generate & Download</h6>
                                <small class="text-muted">Get your formatted question paper</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block scripts %}
    <script>
        function updateFileName(input) {
            const fileName = document.getElementById('fileName');
            if (input.files && input.files[0]) {
                fileName.innerHTML = `<i class="fas fa-file me-2"></i>Selected: ${input.files[0].name}`;
                fileName.className = 'mt-2 text-center text-success';
                
                // Clear text input when file is selected
                document.getElementById('text_input').value = '';
            }
        }

        // Clear file input when text is entered
        document.getElementById('text_input').addEventListener('input', function() {
            if (this.value.trim()) {
                document.getElementById('file').value = '';
                document.getElementById('fileName').innerHTML = '';
            }
        });

        // Drag and drop handlers
        const dropArea = document.getElementById('dropArea');
        ;['dragenter','dragover','dragleave','drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, (e) => { e.preventDefault(); e.stopPropagation(); }, false);
        });
        ;['dragenter','dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => dropArea.classList.add('dragover'), false);
        });
        ;['dragleave','drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => dropArea.classList.remove('dragover'), false);
        });
        dropArea.addEventListener('drop', (e) => {
            const dt = e.dataTransfer;
            const files = dt.files;
            if (files && files[0]) {
                const fileInput = document.getElementById('file');
                fileInput.files = files;
                updateFileName(fileInput);
            }
        });

        // Form validation
        document.getElementById('inputForm').addEventListener('submit', function(e) {
            const textInput = document.getElementById('text_input').value.trim();
            const fileInput = document.getElementById('file').files.length;
            
            if (!textInput && !fileInput) {
                e.preventDefault();
                alert('Please provide some text or upload a file before continuing.');
            }
        });
    </script>
{% endblock %}