{% load i18n %}
{{ form.media }}

<div class="w-full max-w-2xl mx-auto">
    <!-- Messages -->
    {% if messages %}
        <div class="space-y-2 mb-4" role="alert" aria-live="polite">
            {% for message in messages %}
                <div class="alert {% if message.tags == 'error' %}bg-red-50 border-red-200 text-red-800{% elif message.tags == 'success' %}bg-green-50 border-green-200 text-green-800{% elif message.tags == 'warning' %}bg-yellow-50 border-yellow-200 text-yellow-800{% else %}bg-blue-50 border-blue-200 text-blue-800{% endif %} border rounded-lg px-4 py-3 flex items-start justify-between gap-2">
                    <span class="flex-1 text-sm">{{ message }}</span>
                    <button type="button" 
                            class="text-gray-400 hover:text-gray-600 p-1 shrink-0 touch-target" 
                            onclick="this.parentElement.remove()"
                            aria-label="{% trans 'Dismiss' %}">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="p-6">
            <form hx-boost="true" method="post" id="email-compose-form" action="{% url 'compose_application_email' job.slug %}"
                  hx-include="#application-form"
                  hx-push-url="false"
                  hx-swap="outerHTML"
                  hx-on::after-request="closeEmailModal()"
                  class="space-y-6">
                {% csrf_token %}
                
                <!-- Recipients Field -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        {% trans "To" %}
                    </label>
                    <div class="border-2 border-gray-300 rounded-lg p-4 bg-gray-50 max-h-48 overflow-y-auto">
                        <!-- Hidden inputs for all recipients -->
                        {% for choice in form.to %}
                            <input type="hidden" name="{{ form.to.name }}" value="{{ choice.data.value }}">
                        {% endfor %}

                        <!-- Show first recipient only -->
                        {% for choice in form.to|slice:":1" %}
                            <div class="flex items-center gap-2 mb-2">
                                <div class="w-4 h-4 rounded border-2 border-temple-red bg-temple-red flex items-center justify-center">
                                    <i data-lucide="check" class="w-3 h-3 text-white"></i>
                                </div>
                                <span class="text-sm text-gray-700">{{ choice.choice_label }}</span>
                            </div>
                        {% endfor %}

                        <!-- Summary of remaining recipients -->
                        {% if form.to|length > 1 %}
                            <div class="flex items-center gap-2 text-gray-600 text-sm mt-2 pt-2 border-t border-gray-200">
                                <i data-lucide="info" class="w-4 h-4 text-temple-red"></i>
                                {% with remaining=form.to|length|add:"-1" %}
                                    {% blocktrans count total=remaining %}
                                        And {{ total }} other recipient
                                    {% plural %}
                                        And {{ total }} other recipients
                                    {% endblocktrans %}
                                {% endwith %}
                            </div>
                        {% endif %}
                    </div>

                    {% if form.to.errors %}
                        <div class="text-red-600 text-sm mt-2">
                            {% for error in form.to.errors %}
                                <span class="block">{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- Subject Field -->
                <div>
                    <label for="{{ form.subject.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                        {% trans "Subject" %}
                    </label>
                    <div class="relative">
                        <input type="text" 
                               name="{{ form.subject.name }}" 
                               id="{{ form.subject.id_for_label }}"
                               class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 focus:border-temple-red focus:ring-2 focus:ring-temple-red/20 focus:outline-none transition text-gray-900 placeholder-gray-400 text-sm"
                               placeholder="{% trans 'Enter email subject...' %}"
                               value="{{ form.subject.value|default:'' }}"
                               required>
                        {% if form.subject.errors %}
                            <div class="text-red-600 text-sm mt-2">
                                {% for error in form.subject.errors %}
                                    <span class="block">{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Message Field -->
                <div>
                    <label for="{{ form.message.id_for_label }}" class="block text-sm font-semibold text-gray-700 mb-2">
                        {% trans "Message" %}
                    </label>
                    <div class="relative">
                        <textarea 
                               name="{{ form.message.name }}" 
                               id="{{ form.message.id_for_label }}"
                               rows="8"
                               class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-300 focus:border-temple-red focus:ring-2 focus:ring-temple-red/20 focus:outline-none transition text-gray-900 placeholder-gray-400 text-sm resize-y"
                               placeholder="{% trans 'Write your message here...' %}"
                               required>{{ form.message.value|default:'' }}</textarea>
                        {% if form.message.errors %}
                            <div class="text-red-600 text-sm mt-2">
                                {% for error in form.message.errors %}
                                    <span class="block">{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 pt-4 border-t border-gray-200">
                    <div class="flex items-center gap-2 text-gray-600 text-sm">
                        <i data-lucide="info" class="w-4 h-4 text-temple-red"></i>
                        {% trans "Email will be sent to all selected recipients" %}
                    </div>
                    <div class="flex items-center gap-3 w-full sm:w-auto">
                        <button type="button"
                                class="flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition font-medium"
                                onclick="closeEmailModal()">
                            <i data-lucide="x" class="w-4 h-4"></i>
                            {% trans "Cancel" %}
                        </button>
                        <button type="submit"
                                class="flex-1 sm:flex-none flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg bg-temple-red text-white hover:bg-red-700 transition font-medium shadow-sm"
                                id="send-email-btn">
                            <i data-lucide="send" class="w-4 h-4"></i>
                            {% trans "Send Email" %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="email-loading-overlay" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
        <div class="bg-white rounded-xl shadow-lg p-8 max-w-sm w-full mx-4">
            <div class="flex flex-col items-center gap-4">
                <div class="w-12 h-12 rounded-full border-4 border-temple-red border-t-transparent animate-spin" role="status">
                    <span class="sr-only">{% trans "Loading..." %}</span>
                </div>
                <div class="text-center">
                    <p class="text-lg font-semibold text-gray-800">{% trans "Sending email..." %}</p>
                    <p class="text-sm text-gray-600 mt-1">{% trans "Please wait..." %}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages Container -->
    <div id="email-messages-container" class="fixed bottom-4 right-4 z-50 space-y-2 max-w-md"></div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('email-compose-form');
    const sendBtn = document.getElementById('send-email-btn');
    const loadingOverlay = document.getElementById('email-loading-overlay');
    const messagesContainer = document.getElementById('email-messages-container');

    // Initialize Lucide icons
    lucide.createIcons();

    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            // Show loading state
            if (sendBtn) {
                sendBtn.disabled = true;
                sendBtn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> {% trans "Sending..." %}';
                lucide.createIcons();
            }

            if (loadingOverlay) {
                loadingOverlay.classList.remove('hidden');
            }

            // Clear previous messages
            if (messagesContainer) {
                messagesContainer.innerHTML = '';
            }

            // Submit form via fetch
            const formData = new FormData(form);

            fetch(form.action || window.location.href, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'HX-Request': 'true'
                }
            })
            .then(response => response.json())
            .then(data => {
                // Hide loading state
                if (sendBtn) {
                    sendBtn.disabled = false;
                    sendBtn.innerHTML = '<i data-lucide="send" class="w-4 h-4"></i> {% trans "Send Email" %}';
                    lucide.createIcons();
                }

                if (loadingOverlay) {
                    loadingOverlay.classList.add('hidden');
                }

                // Show result message
                if (data.success || data.status === 'queued') {
                    showMessage(data.message || 'Email enqueued successfully!', 'success');

                    // Close modal after a short delay
                    setTimeout(() => {
                        closeEmailModal();
                    }, 1500);
                } else {
                    showMessage(data.error || data.message || 'Failed to send email. Please try again.', 'danger');
                }
            })
            .catch(error => {
                console.error('Error:', error);

                // Hide loading state
                if (sendBtn) {
                    sendBtn.disabled = false;
                    sendBtn.innerHTML = '<i data-lucide="send" class="w-4 h-4"></i> {% trans "Send Email" %}';
                    lucide.createIcons();
                }

                if (loadingOverlay) {
                    loadingOverlay.classList.add('hidden');
                }

                showMessage('An error occurred while sending the email. Please try again.', 'danger');
            });
        });
    }

    function showMessage(message, type) {
        if (!messagesContainer) return;

        const bgColor = type === 'success' ? 'bg-green-50 border-green-200 text-green-800' : 'bg-red-50 border-red-200 text-red-800';
        const icon = type === 'success' ? 'check-circle' : 'alert-triangle';

        const messageDiv = document.createElement('div');
        messageDiv.className = `alert ${bgColor} border rounded-lg px-4 py-3 flex items-start gap-2 shadow-lg transform transition-all duration-300 translate-x-full`;
        messageDiv.innerHTML = `
            <i data-lucide="${icon}" class="w-5 h-5 shrink-0 mt-0.5"></i>
            <span class="flex-1 text-sm">${message}</span>
            <button type="button" class="text-gray-400 hover:text-gray-600 p-1 shrink-0" onclick="this.parentElement.remove()">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        `;

        messagesContainer.appendChild(messageDiv);
        lucide.createIcons();

        // Animate in
        requestAnimationFrame(() => {
            messageDiv.classList.remove('translate-x-full');
        });

        // Auto-hide success messages after 5 seconds
        if (type === 'success') {
            setTimeout(() => {
                messageDiv.style.opacity = '0';
                messageDiv.style.transform = 'translateX(100%)';
                setTimeout(() => messageDiv.remove(), 300);
            }, 5000);
        }
    }

    // Character counter for message field
    function setupCharacterCounter() {
        const messageField = form.querySelector('#{{ form.message.id_for_label }}');
        if (!messageField) return;

        const counter = document.createElement('div');
        counter.className = 'text-gray-500 text-sm mt-2 text-right';
        counter.id = 'message-counter';

        messageField.parentNode.appendChild(counter);

        function updateCounter() {
            const length = messageField.value.length;
            const maxLength = 5000;
            counter.textContent = `${length} / ${maxLength} characters`;

            if (length > maxLength * 0.9) {
                counter.className = 'text-yellow-600 text-sm mt-2 text-right';
            } else {
                counter.className = 'text-gray-500 text-sm mt-2 text-right';
            }
        }

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

    // Auto-save functionality
    let autoSaveTimer;
    function setupAutoSave() {
        const subject = form.querySelector('#{{ form.subject.id_for_label }}');
        const message = form.querySelector('#{{ form.message.id_for_label }}');

        if (!subject || !message) return;

        function saveDraft() {
            const draftData = {
                subject: subject.value,
                message: message.value,
                timestamp: new Date().toISOString()
            };
            localStorage.setItem('email_draft_' + window.location.pathname, JSON.stringify(draftData));
        }

        function autoSave() {
            clearTimeout(autoSaveTimer);
            autoSaveTimer = setTimeout(saveDraft, 2000);
        }

        [subject, message].forEach(field => {
            field.addEventListener('input', autoSave);
        });

        form.addEventListener('change', autoSave);
    }

    function loadDraft() {
        const draftData = localStorage.getItem('email_draft_' + window.location.pathname);
        if (!draftData) return;

        try {
            const draft = JSON.parse(draftData);

            const subject = form.querySelector('#{{ form.subject.id_for_label }}');
            const message = form.querySelector('#{{ form.message.id_for_label }}');

            if (subject && draft.subject) subject.value = draft.subject;
            if (message && draft.message) message.value = draft.message;

            // Show draft restored notification
            showMessage('Draft restored from local storage', 'success');
        } catch (e) {
            console.error('Error loading draft:', e);
        }
    }

    function clearDraft() {
        localStorage.removeItem('email_draft_' + window.location.pathname);
    }

    // Initialize form enhancements
    setupCharacterCounter();
    setupAutoSave();

    // Load draft on page load
    setTimeout(loadDraft, 100);

    // Clear draft on successful submission
    form.addEventListener('submit', function() {
        setTimeout(clearDraft, 2000);
    });

    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl/Cmd + Enter to submit
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            const activeElement = document.activeElement;
            if (activeElement && (activeElement.tagName === 'TEXTAREA' || activeElement.tagName === 'INPUT')) {
                form.dispatchEvent(new Event('submit'));
            }
        }

        // Escape to cancel/close modal
        if (e.key === 'Escape') {
            closeEmailModal();
        }
    });

    console.log('Email compose form initialized');
});

// Global function to close email modal
function closeEmailModal() {
    const modal = document.querySelector('[id^="emailModal"]');
    if (modal) {
        modal.classList.add('hidden');
        document.body.style.overflow = '';
    }
}
</script>