{% extends "base.html" %}

{% block content %}
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold text-gray-900">Writing Stage</h1>
        <div class="text-right">
            <span class="badge badge-primary">Stage 2/3</span>
        </div>
    </div>

    <!-- Writing Task -->
    <div class="bg-white p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Writing Exercise</h2>
        <p class="text-gray-700 mb-4">{{ topic.writing_prompt }}</p>
        
        <form method="POST" action="{{ url_for('student.submit_writing', topic_id=topic.id) }}">
            {{ form.hidden_tag() }}
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Your Response</label>
                    {{ form.content(class="textarea textarea-bordered w-full h-64", 
                                  placeholder="Write your response here...") }}
                </div>
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-sm text-gray-600">
                            Word Count: <span id="wordCount">0</span>
                            {% if topic.min_words %}
                            (Minimum: {{ topic.min_words }} words)
                            {% endif %}
                        </span>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit Writing</button>
                </div>
            </div>
        </form>
    </div>

    {% if previous_submissions %}
    <!-- Previous Submissions -->
    <div class="bg-white p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Previous Submissions</h2>
        {% for submission in previous_submissions %}
        <div class="border-t pt-4 mt-4 first:border-t-0 first:pt-0 first:mt-0">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-600">Submitted on {{ submission.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
                    {% if submission.feedback %}
                    <div class="mt-2 p-4 bg-gray-50 rounded-lg">
                        <h4 class="text-sm font-medium text-gray-900">Teacher's Feedback:</h4>
                        <p class="text-sm text-gray-700">{{ submission.feedback }}</p>
                    </div>
                    {% endif %}
                </div>
                <span class="px-2 py-1 text-xs font-semibold rounded-full
                    {% if submission.status == 'approved' %}bg-green-100 text-green-800
                    {% elif submission.status == 'rejected' %}bg-red-100 text-red-800
                    {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                    {{ submission.status|title }}
                </span>
            </div>
            <div class="mt-2">
                <p class="text-gray-700">{{ submission.content }}</p>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>

{% block extra_js %}
<script>
function countWords(str) {
    return str.trim().split(/\s+/).length;
}

document.addEventListener('DOMContentLoaded', function() {
    const textarea = document.querySelector('textarea');
    const wordCountSpan = document.getElementById('wordCount');
    
    textarea.addEventListener('input', function() {
        const words = this.value.trim() ? countWords(this.value) : 0;
        wordCountSpan.textContent = words;
    });
});
</script>
{% endblock %}
{% endblock %}