<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - SA STEM Tutor</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .question-form {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 30px;
        }
        .user-info {
            background: #e3f2fd;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .premium-badge {
            background: #ffd700;
            color: #000;
            padding: 5px 10px;
            border-radius: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('dashboard') }}">SA STEM Tutor</a>
            <div class="navbar-nav ms-auto">
                <span class="navbar-text me-3">
                    Welcome, {{ user.name }}!
                    {% if user.is_premium %}
                        <span class="premium-badge ms-2">PREMIUM</span>
                    {% endif %}
                </span>
                <a class="nav-link" href="{{ url_for('pricing') }}">Pricing</a>
                <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- Flash messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <!-- User Info -->
        <div class="user-info">
            <h4>Welcome to your dashboard!</h4>
            <p>
                <strong>Questions asked today:</strong> {{ questions_asked }}/{% if is_premium %}Unlimited{% else %}3{% endif %}
                {% if not is_premium and questions_asked >= 3 %}
                    <span class="text-danger"> - Limit reached! <a href="{{ url_for('pricing') }}">Upgrade to premium</a></span>
                {% endif %}
            </p>
            {% if not is_premium %}
                <div class="alert alert-warning">
                    <strong>Free Tier:</strong> You can ask 3 questions per day. 
                    <a href="{{ url_for('pricing') }}" class="alert-link">Upgrade to premium</a> for unlimited questions!
                </div>
            {% endif %}
        </div>

        <!-- Question Form -->
        <div class="question-form">
            <h3>Ask a Question</h3>
            <form id="questionForm">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="subject" class="form-label">Subject</label>
                            <select class="form-select" id="subject" name="subject" required>
                                {% for subject, translations in subjects.items() %}
                                    <option value="{{ subject }}">{{ translations.en }} ({{ subject }})</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="grade" class="form-label">Grade</label>
                            <select class="form-select" id="grade" name="grade" required>
                                {% for grade in range(7, 13) %}
                                    <option value="{{ grade }}">Grade {{ grade }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="language" class="form-label">Language</label>
                            <select class="form-select" id="language" name="language" required>
                                {% for code, name in languages.items() %}
                                    <option value="{{ code }}">{{ name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label for="question" class="form-label">Your Question</label>
                    <textarea class="form-control" id="question" name="question" rows="4" 
                              placeholder="Type your question here..." required></textarea>
                </div>
                
                <button type="submit" class="btn btn-primary btn-lg" id="askButton">
                    Ask Question
                </button>
            </form>
        </div>

        <!-- Answer Display -->
        <div id="answerSection" style="display: none;">
            <h3>Answer</h3>
            <div class="card">
                <div class="card-body">
                    <div id="answerContent"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('questionForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const askButton = document.getElementById('askButton');
            const originalText = askButton.innerHTML;
            askButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Asking...';
            askButton.disabled = true;
            
            const formData = {
                question: document.getElementById('question').value,
                subject: document.getElementById('subject').value,
                grade: document.getElementById('grade').value,
                language: document.getElementById('language').value
            };
            
            try {
                const response = await fetch('/ask', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData)
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    document.getElementById('answerContent').innerHTML = data.answer.replace(/\n/g, '<br>');
                    document.getElementById('answerSection').style.display = 'block';
                    
                    // Scroll to answer
                    document.getElementById('answerSection').scrollIntoView({ behavior: 'smooth' });
                    
                    // Clear form if not premium and limit reached
                    if (!{{ is_premium|lower }} && {{ questions_asked + 1 }} >= 3) {
                        document.getElementById('questionForm').reset();
                    }
                } else {
                    alert('Error: ' + data.error);
                    if (data.limit_reached) {
                        window.location.href = '{{ url_for("pricing") }}';
                    }
                }
            } catch (error) {
                alert('Error: ' + error.message);
            } finally {
                askButton.innerHTML = originalText;
                askButton.disabled = false;
            }
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>