{% extends "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 %}

                <!-- First Row: Job, Recipient, Type -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <!-- Job Field -->
                    <div>
                        <label for="{{ form.job.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Related Job" %} <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <i data-lucide="briefcase" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
                            {{ form.job }}
                        </div>
                        {% if form.job.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.job.errors.0 }}</div>
                        {% endif %}
                        <p class="text-gray-500 text-xs mt-1">
                            {% trans "Select a job if this message is related to a specific position" %}
                        </p>
                    </div>

                    <!-- Recipient Field -->
                    <div>
                        <label for="{{ form.recipient.id_for_label }}" 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>
                            {{ form.recipient }}
                        </div>
                        {% if form.recipient.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.recipient.errors.0 }}</div>
                        {% endif %}
                        <p class="text-gray-500 text-xs mt-1">
                            {% trans "Select user who will receive this message" %}
                        </p>
                    </div>

                    <!-- Message Type Field -->
                    <div>
                        <label for="{{ form.message_type.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                            {% trans "Message Type" %} <span class="text-red-500">*</span>
                        </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>
                            {{ form.message_type }}
                        </div>
                        {% if form.message_type.errors %}
                            <div class="text-red-600 text-sm mt-1">{{ form.message_type.errors.0 }}</div>
                        {% endif %}
                        <p class="text-gray-500 text-xs mt-1">
                            {% trans "Select type of message you're sending" %}
                        </p>
                    </div>
                </div>

                <!-- Subject Field -->
                <div>
                    <label for="{{ form.subject.id_for_label }}" 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>
                        {{ form.subject }}
                    </div>
                    {% if form.subject.errors %}
                        <div class="text-red-600 text-sm mt-1">{{ form.subject.errors.0 }}</div>
                    {% endif %}
                </div>

                <!-- Content Field -->
                <div>
                    <label for="{{ form.content.id_for_label }}" 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 %}
                    <p class="text-gray-500 text-xs mt-1">
                        {% trans "Write your message here. You can use line breaks and basic formatting." %}
                    </p>
                </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>

<style>
/* Custom styling for form fields */
select[name="job"],
select[name="recipient"],
select[name="message_type"],
input[name="subject"] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    background-color: white;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s;
}

select[name="job"]:focus,
select[name="recipient"]:focus,
select[name="message_type"]:focus,
input[name="subject"]:focus {
    outline: none;
    border-color: #9d2235;
    box-shadow: 0 0 0 3px rgba(157, 34, 53, 0.1);
}

select[name="job"]:hover,
select[name="recipient"]:hover,
select[name="message_type"]:hover,
input[name="subject"]:hover {
    border-color: #d1d5db;
}

/* Add chevron icons for select dropdowns */
select[name="job"]::after,
select[name="recipient"]::after,
select[name="message_type"]::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #9ca3af;
}
</style>

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

    // 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';
    }

    // Character counter for subject
    const subjectField = document.getElementById('id_subject');
    const maxLength = 200;

    if (subjectField) {
        // Add character counter display
        const counter = document.createElement('small');
        counter.className = 'text-gray-500';
        counter.style.float = 'right';
        subjectField.parentNode.appendChild(counter);

        function updateCounter() {
            const remaining = maxLength - subjectField.value.length;
            counter.textContent = `${subjectField.value.length}/${maxLength} {% trans "characters" %}`;
            if (remaining < 20) {
                counter.className = 'text-yellow-600';
            } else {
                counter.className = 'text-gray-500';
            }
        }

        subjectField.addEventListener('input', updateCounter);
        updateCounter();
    }

    // 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 %}