{% extends "portal_base.html" %}
{% load static i18n %}

{% block title %}{% if form.instance.pk %}{% trans "Reply to Message" %}{% else %}{% trans "Compose Message" %}{% endif %}{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto py-6 px-4">
    
    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <!-- Header with gradient background -->
        <div class="px-6 py-4 border-b border-gray-100" style="background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);">
            <h1 class="text-xl sm:text-2xl font-bold flex items-center gap-3">
                {% if form.instance.pk %}
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
                        <i data-lucide="reply" class="w-5 h-5" style="color: #9d2235;"></i>
                    </div>
                    {% trans "Reply to Message" %}
                {% else %}
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: rgba(157, 34, 53, 0.1);">
                        <i data-lucide="mail" class="w-5 h-5" style="color: #9d2235;"></i>
                    </div>
                    {% trans "Compose Message" %}
                {% endif %}
            </h1>
        </div>
        
        <div class="p-6">
            {% if form.instance.parent_message %}
                <div class="px-4 py-3 rounded-lg mb-6" style="background-color: rgba(157, 34, 53, 0.05); border: 1px solid rgba(157, 34, 53, 0.1);">
                    <strong class="text-sm">{% trans "Replying to:" %}</strong> {{ form.instance.parent_message.subject }}
                    <br>
                    <small class="text-gray-500">
                        {% trans "From" %} {{ form.instance.parent_message.sender.get_full_name|default:form.instance.parent_message.sender.username }}
                        {% trans "on" %} {{ form.instance.parent_message.created_at|date:"M d, Y H:i" }}
                    </small>
                    <div class="mt-2">
                        <strong class="text-sm">{% trans "Original message:" %}</strong>
                        <div class="mt-2 pl-3" style="border-left: 3px solid #9d2235;">
                            {{ form.instance.parent_message.content|linebreaks }}
                        </div>
                    </div>
                </div>
            {% endif %}

            <form method="post" id="messageForm" class="space-y-6">
                {% csrf_token %}

                <!-- Subject Field -->
                <div>
                    <label for="id_subject" class="block text-sm font-semibold text-gray-700 mb-2">
                        {% trans "Subject" %} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <i data-lucide="type" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                        <input type="text" 
                               name="subject" 
                               id="id_subject"
                               value="{{ form.subject.value|default:'' }}"
                               class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
                               placeholder="{% trans 'Enter message subject' %}"
                               maxlength="200"
                               required>
                    </div>
                    <div class="text-right mt-1">
                        <small id="subjectCounter" class="text-gray-500">0/200 {% trans "characters" %}</small>
                    </div>
                    {% if form.subject.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.subject.errors.0 }}</div>
                    {% endif %}
                </div>

                <!-- Recipient Field -->
                <div>
                    <label for="id_recipient" class="block text-sm font-semibold text-gray-700 mb-2">
                        {% trans "Recipient" %} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <i data-lucide="user" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
                        <select name="recipient" 
                                id="id_recipient"
                                class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition appearance-none cursor-pointer"
                                style="background-color: white;"
                                required>
                            <option value="">{% trans "Select a recipient" %}</option>
                            {% for recipient in form.fields.recipient.queryset %}
                                <option value="{{ recipient.pk }}" {% if form.recipient.value == recipient.pk|slugify %}selected{% endif %}>
                                    {{ recipient.get_full_name|default:recipient.username }} ({{ recipient.email }})
                                </option>
                            {% endfor %}
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
                    </div>
                    {% if form.recipient.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.recipient.errors.0 }}</div>
                    {% endif %}
                </div>

                <!-- Message Type Field -->
                <div>
                    <label for="id_message_type" class="block text-sm font-semibold text-gray-700 mb-2">
                        {% trans "Message Type" %}
                    </label>
                    <div class="relative">
                        <i data-lucide="tag" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
                        <select name="message_type" 
                                id="id_message_type"
                                class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition appearance-none cursor-pointer"
                                style="background-color: white;">
                            {% for value, label in form.fields.message_type.choices %}
                                <option value="{{ value }}" {% if form.message_type.value == value %}selected{% endif %}>
                                    {{ label }}
                                </option>
                            {% endfor %}
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
                    </div>
                    {% if form.message_type.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.message_type.errors.0 }}</div>
                    {% endif %}
                </div>

                <!-- Content Field -->
                <div>
                    <label for="id_content" class="block text-sm font-semibold text-gray-700 mb-2">
                        {% trans "Message" %} <span class="text-red-500">*</span>
                    </label>
                    <textarea name="content" 
                              id="id_content" 
                              rows="8"
                              class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition resize-vertical"
                              placeholder="{% trans 'Write your message here...' %}"
                              style="min-height: 200px;"
                              required>{{ form.content.value|default:'' }}</textarea>
                    {% if form.content.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.content.errors.0 }}</div>
                    {% endif %}
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row justify-between gap-3 pt-4 border-t border-gray-200">
                    <a href="{% url 'message_list' %}" 
                       class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-medium border-2 border-gray-200 text-gray-700 hover:bg-gray-50 transition-all duration-200">
                        <i data-lucide="x" class="w-4 h-4"></i>
                        {% trans "Cancel" %}
                    </a>
                    <button type="submit"
                            class="inline-flex items-center justify-center gap-2 px-8 py-3 rounded-lg font-medium text-white transition-all duration-200 sm:flex-1"
                            style="background-color: #9d2235;"
                            onmouseover="this.style.backgroundColor='#7a1a29'"
                            onmouseout="this.style.backgroundColor='#9d2235'">
                        <i data-lucide="send" class="w-4 h-4"></i>
                        {% if form.instance.pk %}
                            {% trans "Send Reply" %}
                        {% else %}
                            {% trans "Send Message" %}
                        {% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // Character counter for subject
    const subjectField = document.getElementById('id_subject');
    const subjectCounter = document.getElementById('subjectCounter');
    const maxLength = 200;
    const charsLabel = "{% trans 'characters' %}";

    if (subjectField && subjectCounter) {
        function updateCounter() {
            const remaining = maxLength - subjectField.value.length;
            subjectCounter.textContent = `${subjectField.value.length}/${maxLength} ${charsLabel}`;
            if (remaining < 20) {
                subjectCounter.className = 'text-yellow-600';
            } else {
                subjectCounter.className = 'text-gray-500';
            }
        }
        subjectField.addEventListener('input', updateCounter);
        updateCounter();
    }

    // Auto-resize textarea based on content
    const textarea = document.getElementById('id_content');
    if (textarea) {
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });

        // Set initial height
        textarea.style.height = 'auto';
        textarea.style.height = (textarea.scrollHeight) + 'px';
    }

    // Form validation before submit
    const form = document.getElementById('messageForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            const content = document.getElementById('id_content').value.trim();
            const subject = document.getElementById('id_subject').value.trim();
            const recipient = document.getElementById('id_recipient').value;

            if (!recipient) {
                e.preventDefault();
                alert("{% trans 'Please select a recipient.' %}");
                return false;
            }

            if (!subject) {
                e.preventDefault();
                alert("{% trans 'Please enter a subject.' %}");
                return false;
            }

            if (!content) {
                e.preventDefault();
                alert("{% trans 'Please enter a message.' %}");
                return false;
            }
        });
    }
});
</script>
{% endblock %}