{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Send Survey Manually" %} - PX360{% endblock %}

{% block content %}
<!-- Header -->
<header class="mb-6">
    <div class="flex justify-between items-start">
        <div>
            <h1 class="text-2xl font-bold text-navy">
                <i data-lucide="send" class="w-6 h-6 inline-block mr-2"></i>
                {% trans "Send Survey Manually" %}
            </h1>
            <p class="text-sm text-slate mt-1">{% trans "Select a survey template and send it to a patient or staff member" %}</p>
        </div>
        <a href="{% url 'surveys:instance_list' %}" class="inline-flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-xl text-sm font-semibold text-slate hover:bg-light transition">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            {% trans "Back to Surveys" %}
        </a>
    </div>
</header>

<!-- Mode Selection Tabs -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden mb-6">
    <div class="flex border-b border-slate-100">
        <a href="{% url 'surveys:manual_send' %}" class="flex-1 px-6 py-4 text-center font-medium text-navy bg-light border-b-2 border-navy">
            <i data-lucide="search" class="w-5 h-5 inline-block mr-2"></i>
            {% trans "Search Existing" %}
        </a>
        <a href="{% url 'surveys:manual_send_phone' %}" class="flex-1 px-6 py-4 text-center font-medium text-slate hover:bg-light transition border-b-2 border-transparent">
            <i data-lucide="smartphone" class="w-5 h-5 inline-block mr-2"></i>
            {% trans "Enter Phone" %}
        </a>
        <a href="{% url 'surveys:manual_send_csv' %}" class="flex-1 px-6 py-4 text-center font-medium text-slate hover:bg-light transition border-b-2 border-transparent">
            <i data-lucide="file-spreadsheet" class="w-5 h-5 inline-block mr-2"></i>
            {% trans "Upload CSV" %}
        </a>
    </div>
</div>

<!-- Form Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <div class="p-5 border-b border-slate-100">
            <h3 class="font-bold text-navy flex items-center gap-2 text-sm">
                <i data-lucide="envelope-paper" class="w-4 h-4"></i>
                {% trans "Survey Details" %}
            </h3>
        </div>
        <div class="p-6">
            <form method="post" id="manualSurveySendForm">
                {% csrf_token %}
                
                <!-- Recipient Type -->
                <div class="mb-6">
                    <label class="block text-sm font-bold text-gray-700 mb-3">
                        {% trans "Recipient Type" %}
                        <span class="text-red-500 ml-1">*</span>
                    </label>
                    <div class="flex gap-4">
                        <label class="flex items-center gap-3 px-4 py-3 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-400 hover:bg-light transition flex-1">
                            <input type="radio" name="recipient_type" value="patient" 
                                   {% if form.recipient_type.value == 'patient' or not form.recipient_type.value %}checked{% endif %}
                                   class="w-5 h-5 text-navy focus:ring-navy">
                            <i data-lucide="user" class="w-5 h-5 text-gray-600"></i>
                            <span class="font-medium text-gray-800">{% trans "Patient" %}</span>
                        </label>
                        <label class="flex items-center gap-3 px-4 py-3 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-400 hover:bg-light transition flex-1">
                            <input type="radio" name="recipient_type" value="staff"
                                   {% if form.recipient_type.value == 'staff' %}checked{% endif %}
                                   class="w-5 h-5 text-navy focus:ring-navy">
                            <i data-lucide="user-workspace" class="w-5 h-5 text-gray-600"></i>
                            <span class="font-medium text-gray-800">{% trans "Staff" %}</span>
                        </label>
                    </div>
                </div>

                <!-- Survey Template -->
                <div class="mb-6">
                    <label for="{{ form.survey_template.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
                        {% trans "Survey Template" %}
                        <span class="text-red-500 ml-1">*</span>
                    </label>
                    <div class="relative">
                        <select name="{{ form.survey_template.name }}" id="{{ form.survey_template.id_for_label }}"
                                class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition appearance-none cursor-pointer">
                            {% for value, label in form.survey_template.field.choices %}
                                <option value="{{ value }}" {% if form.survey_template.value == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none"></i>
                    </div>
                    {% if form.survey_template.errors %}
                        <div class="mt-2 text-red-500 text-sm flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {% for error in form.survey_template.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- Recipient Search -->
                <div class="mb-6 relative">
                    <label for="{{ form.recipient.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
                        {% trans "Recipient" %}
                        <span class="text-red-500 ml-1">*</span>
                    </label>
                    <div class="relative">
                        <div class="relative">
                            <i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                            <input type="text" 
                                   class="w-full pl-12 pr-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" 
                                   id="recipient_search"
                                   placeholder="{% trans 'Search by name, MRN, or ID...' %}"
                                   autocomplete="off">
                        </div>
                        <input type="hidden" name="recipient" id="recipient_input" value="">
                        <div class="mt-2 text-red-500 text-sm flex items-center gap-1" id="recipient_error" style="display: none;">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {% trans "Please select a recipient from the search results" %}
                        </div>
                    </div>
                    <p class="mt-2 text-sm text-gray-500 flex items-center gap-1">
                        <i data-lucide="info" class="w-4 h-4"></i>
                        {% trans "Start typing to search. Select a recipient from the dropdown." %}
                    </p>
                    
                    <!-- Selected Recipient Display -->
                    <div id="selected_recipient" class="mt-3" style="display: none;">
                        <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 flex items-center">
                            <i data-lucide="user-check" class="w-8 h-8 text-blue-500 mr-4"></i>
                            <div class="flex-1">
                                <strong id="selected_recipient_name" class="text-gray-800"></strong>
                                <div id="selected_recipient_details" class="text-sm text-gray-500"></div>
                            </div>
                            <button type="button" class="p-2 text-red-500 hover:bg-red-50 rounded-lg transition" id="clear_recipient">
                                <i data-lucide="x" class="w-5 h-5"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Search Results Dropdown -->
                    <div id="search_results" class="absolute z-50 w-full bg-white border border-gray-200 rounded-xl shadow-lg mt-1 max-h-80 overflow-y-auto hidden">
                    </div>
                </div>

                <!-- Delivery Channel -->
                <div class="mb-6">
                    <label for="{{ form.delivery_channel.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
                        {% trans "Delivery Channel" %}
                        <span class="text-red-500 ml-1">*</span>
                    </label>
                    <div class="grid grid-cols-3 gap-4">
                        {% for value, label in form.delivery_channel.field.choices %}
                        <label class="delivery-channel-option relative cursor-pointer">
                            <input type="radio" name="{{ form.delivery_channel.name }}" value="{{ value }}"
                                   {% if form.delivery_channel.value == value %}checked{% endif %}
                                   class="peer sr-only">
                            <div class="border-2 border-gray-200 rounded-xl p-4 text-center hover:border-blue-400 hover:bg-light transition peer-checked:border-navy peer-checked:bg-light">
                                {% if value == 'email' %}
                                <i data-lucide="mail" class="w-8 h-8 mx-auto mb-2 text-gray-600 peer-checked:text-navy"></i>
                                {% elif value == 'sms' %}
                                <i data-lucide="message-square" class="w-8 h-8 mx-auto mb-2 text-gray-600 peer-checked:text-navy"></i>
                                {% else %}
                                <i data-lucide="link" class="w-8 h-8 mx-auto mb-2 text-gray-600 peer-checked:text-navy"></i>
                                {% endif %}
                                <div class="text-sm font-medium text-gray-800">{{ label }}</div>
                            </div>
                        </label>
                        {% endfor %}
                    </div>
                    {% if form.delivery_channel.errors %}
                        <div class="mt-2 text-red-500 text-sm flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {% for error in form.delivery_channel.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>

                <!-- Custom Message -->
                <div class="mb-6">
                    <label for="{{ form.custom_message.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
                        {% trans "Custom Message" %}
                        <span class="text-gray-400">({% trans "Optional" %})</span>
                    </label>
                    <textarea name="{{ form.custom_message.name }}" id="{{ form.custom_message.id_for_label }}" 
                              rows="4"
                              class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition"
                              placeholder="{% trans 'Add a personalized message to the survey invitation...' %}">{{ form.custom_message.value|default:'' }}</textarea>
                    {% if form.custom_message.errors %}
                        <div class="mt-2 text-red-500 text-sm flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            {% for error in form.custom_message.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                    <p class="mt-2 text-sm text-gray-500 flex items-center gap-1">
                        <i data-lucide="info" class="w-4 h-4"></i>
                        {% trans "Add a personalized message to the survey invitation" %}
                    </p>
                </div>

                <!-- Submit Buttons -->
                <div class="flex justify-end gap-3 pt-4 border-t border-gray-100">
                    <a href="{% url 'surveys:instance_list' %}" class="px-6 py-3 border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:bg-gray-50 transition">
                        {% trans "Cancel" %}
                    </a>
                    <button type="submit" class="px-8 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-navy hover:shadow-lg hover:shadow-blue-200 transition flex items-center gap-2" id="submitBtn">
                        <i data-lucide="send" class="w-5 h-5"></i>
                        {% trans "Send Survey" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
    
    const searchInput = document.getElementById('recipient_search');
    const searchResults = document.getElementById('search_results');
    const recipientInput = document.getElementById('recipient_input');
    const selectedRecipientDiv = document.getElementById('selected_recipient');
    const selectedRecipientName = document.getElementById('selected_recipient_name');
    const selectedRecipientDetails = document.getElementById('selected_recipient_details');
    const recipientError = document.getElementById('recipient_error');
    const clearRecipientBtn = document.getElementById('clear_recipient');
    const recipientTypeRadios = document.getElementsByName('recipient_type');
    
    let searchTimeout;
    let selectedRecipient = null;
    
    // Recipient type change handler
    recipientTypeRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            clearRecipient();
            searchInput.focus();
        });
    });
    
    // Search functionality
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        const query = this.value.trim();
        
        if (query.length < 2) {
            searchResults.classList.add('hidden');
            return;
        }
        
        searchTimeout = setTimeout(function() {
            performSearch(query);
        }, 300);
    });
    
    // Hide search results when clicking outside
    document.addEventListener('click', function(e) {
        if (!searchResults.contains(e.target) && e.target !== searchInput) {
            searchResults.classList.add('hidden');
        }
    });
    
    // Clear recipient button
    clearRecipientBtn.addEventListener('click', clearRecipient);
    
    function clearRecipient() {
        selectedRecipient = null;
        recipientInput.value = '';
        searchInput.value = '';
        selectedRecipientDiv.style.display = 'none';
        recipientError.style.display = 'none';
        searchInput.classList.remove('border-red-500', 'border-2');
    }
    
    function performSearch(query) {
        const recipientType = document.querySelector('input[name="recipient_type"]:checked').value;
        const searchUrl = `/api/${recipientType}s/search/?q=${encodeURIComponent(query)}&active=true`;
        
        fetch(searchUrl)
            .then(response => response.json())
            .then(data => {
                displaySearchResults(data);
            })
            .catch(error => {
                console.error('Search error:', error);
            });
    }
    
    function displaySearchResults(results) {
        if (!results || results.length === 0) {
            searchResults.innerHTML = `
                <div class="p-4 text-center text-gray-500">
                    <i data-lucide="search" class="w-8 h-8 mx-auto mb-2 text-gray-300"></i>
                    {% trans "No results found" %}
                </div>
            `;
            lucide.createIcons();
        } else {
            const recipientType = document.querySelector('input[name="recipient_type"]:checked').value;
            searchResults.innerHTML = results.map(result => {
                let details = '';
                if (recipientType === 'patient') {
                    details = result.mrn ? `<span class="text-xs text-gray-500">MRN: ${result.mrn}</span>` : '';
                } else {
                    details = result.employee_id ? `<span class="text-xs text-gray-500">ID: ${result.employee_id}</span>` : '';
                }
                return `
                    <div class="p-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition"
                         data-id="${result.id}"
                         data-name="${result.first_name} ${result.last_name}"
                         data-details="${details}">
                        <div class="flex justify-between items-center">
                            <div>
                                <strong class="text-gray-800">${result.first_name} ${result.last_name}</strong>
                                ${details ? `<div>${details}</div>` : ''}
                            </div>
                            <i data-lucide="plus-circle" class="w-5 h-5 text-navy"></i>
                        </div>
                    </div>
                `;
            }).join('');
            
            // Add click handlers to results
            searchResults.querySelectorAll('[data-id]').forEach(item => {
                item.addEventListener('click', function() {
                    selectRecipient(this.dataset.id, this.dataset.name, this.dataset.details);
                });
            });
        }
        
        searchResults.classList.remove('hidden');
    }
    
    function selectRecipient(id, name, details) {
        selectedRecipient = { id, name, details };
        recipientInput.value = id;
        searchInput.value = name;
        
        selectedRecipientName.textContent = name;
        selectedRecipientDetails.textContent = details || '';
        selectedRecipientDiv.style.display = 'block';
        searchResults.classList.add('hidden');
        recipientError.style.display = 'none';
        searchInput.classList.remove('border-red-500', 'border-2');
    }
    
    // Form submission validation
    const form = document.getElementById('manualSurveySendForm');
    form.addEventListener('submit', function(e) {
        if (!selectedRecipient || !selectedRecipient.id) {
            e.preventDefault();
            recipientError.style.display = 'flex';
            searchInput.classList.add('border-red-500', 'border-2');
            searchInput.focus();
            return false;
        }
        
        recipientInput.value = selectedRecipient.id;
        
        // Show loading state
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = `
            <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            {% trans "Sending..." %}
        `;
    });
});
</script>

<style>
.delivery-channel-option:hover .w-8,
.delivery-channel-option input:checked + div .w-8 {
    transform: scale(1.1);
    transition: transform 0.2s;
}
</style>
{% endblock %}