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

{% block title %}{% trans "Survey Template Mappings" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Page Header -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
        <div>
            <h2 class="text-3xl font-bold text-gray-800 mb-2 flex items-center gap-2">
                <i data-lucide="layers" class="w-8 h-8 text-navy"></i>
                {% trans "Survey Template Mappings" %}
            </h2>
            <p class="text-gray-500">
                {% trans "Configure which survey templates are sent for each patient type at each hospital." %}
            </p>
        </div>
        <button id="addMappingBtn" class="bg-light0 text-white px-6 py-3 rounded-xl font-bold hover:bg-navy transition flex items-center gap-2 shadow-lg shadow-blue-200 hover:shadow-xl hover:-translate-y-0.5">
            <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Add Mapping" %}
        </button>
    </div>

    <!-- Mappings List -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
        {% if mappings %}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Hospital" %}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Patient Type" %}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Survey Template" %}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
                        <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {% for mapping in mappings %}
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">{{ mapping.hospital.name }}</div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">
                                {{ mapping.patient_type_display }}
                            </span>
                            <div class="text-xs text-gray-400 mt-1">({{ mapping.patient_type }})</div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="font-semibold text-gray-800">{{ mapping.survey_template.name }}</div>
                        </td>
                        <td class="px-6 py-4">
                            {% if mapping.is_active %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">
                                {% trans "Active" %}
                            </span>
                            {% else %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                                {% trans "Inactive" %}
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex gap-2">
                                <button class="edit-mapping px-3 py-2 text-navy bg-light rounded-lg hover:bg-light transition font-medium text-sm flex items-center gap-1"
                                        data-id="{{ mapping.id }}"
                                        data-hospital="{{ mapping.hospital.id }}"
                                        data-patient-type="{{ mapping.patient_type }}"
                                        data-survey-template="{{ mapping.survey_template.id }}"
                                        data-active="{{ mapping.is_active }}">
                                    <i data-lucide="edit" class="w-4 h-4"></i> {% trans "Edit" %}
                                </button>
                                <button class="delete-mapping px-3 py-2 text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition font-medium text-sm flex items-center gap-1"
                                        data-id="{{ mapping.id }}"
                                        data-name="{{ mapping.patient_type_display }} - {{ mapping.survey_template.name }}">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="p-12 text-center">
            <div class="inline-flex items-center justify-center w-20 h-20 bg-blue-100 rounded-full mb-4">
                <i data-lucide="layers" class="w-10 h-10 text-blue-500"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-2">{% trans "No Mappings Configured" %}</h3>
            <p class="text-gray-500 mb-4">{% trans "No survey template mappings configured yet. Click 'Add Mapping' to create your first mapping." %}</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Add/Edit Mapping Modal -->
<div id="addMappingModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="sticky top-0 bg-white border-b border-gray-200 px-8 py-6 flex justify-between items-center">
            <h3 id="mappingModalTitle" class="text-2xl font-bold text-gray-800">{% trans "Add Survey Template Mapping" %}</h3>
            <button id="closeAddModal" class="text-gray-400 hover:text-gray-600 transition">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>
        <div class="p-8">
            {% csrf_token %}
            <form id="mappingForm" class="space-y-6">
                <input type="hidden" id="mappingId" name="id">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="hospital" class="block text-sm font-bold text-gray-700 mb-2">
                            {% trans "Hospital" %} <span class="text-red-500">*</span>
                        </label>
                        <select id="hospital" name="hospital" required
                                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">
                            <option value="">{% trans "Select Hospital" %}</option>
                            {% for hospital in hospitals %}
                            <option value="{{ hospital.id }}">{{ hospital.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div>
                        <label for="surveyTemplate" class="block text-sm font-bold text-gray-700 mb-2">
                            {% trans "Survey Template" %} <span class="text-red-500">*</span>
                        </label>
                        <select id="surveyTemplate" name="survey_template" required
                                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">
                            <option value="">{% trans "Select Survey Template" %}</option>
                        </select>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="patientType" class="block text-sm font-bold text-gray-700 mb-2">
                            {% trans "Patient Type" %} <span class="text-red-500">*</span>
                        </label>
                        <select id="patientType" name="patient_type" required
                                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">
                            <option value="">{% trans "Select Patient Type" %}</option>
                            <option value="1">1 - {% trans "Inpatient (Type 1)" %}</option>
                            <option value="2">2 - {% trans "Outpatient (Type 2)" %}</option>
                            <option value="3">3 - {% trans "Emergency (Type 3)" %}</option>
                            <option value="4">4 - {% trans "Day Case (Type 4)" %}</option>
                            <option value="APPOINTMENT">APPOINTMENT - {% trans "Appointment" %}</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="isActive" class="block text-sm font-bold text-gray-700 mb-2">{% trans "Status" %}</label>
                        <div class="flex items-center gap-3 pt-3">
                            <input type="checkbox" id="isActive" name="is_active" checked
                                   class="w-5 h-5 text-navy border-2 border-gray-300 rounded focus:ring-navy focus:ring-offset-2">
                            <label for="isActive" class="text-gray-700 font-medium">{% trans "Active" %}</label>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="sticky bottom-0 bg-gray-50 border-t border-gray-200 px-8 py-6 flex justify-end gap-3">
            <button id="cancelAddModal" class="border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-xl font-bold hover:bg-gray-100 transition flex items-center gap-2">
                <i data-lucide="x" class="w-5 h-5"></i> {% trans "Cancel" %}
            </button>
            <button id="saveMapping" class="bg-light0 text-white px-6 py-3 rounded-xl font-bold hover:bg-navy transition flex items-center gap-2 shadow-lg shadow-blue-200">
                <i data-lucide="save" class="w-5 h-5"></i> {% trans "Save Mapping" %}
            </button>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4">
        <div class="p-8">
            <div class="text-center mb-6">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
                    <i data-lucide="alert-triangle" class="w-8 h-8 text-red-500"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-800 mb-2">{% trans "Confirm Delete" %}</h3>
                <p class="text-gray-500">{% trans "Are you sure you want to delete this mapping?" %}</p>
                <p id="deleteMappingName" class="font-bold text-gray-800 mt-2"></p>
            </div>
            <div class="flex justify-center gap-3">
                <button id="cancelDeleteModal" class="border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-xl font-bold hover:bg-gray-100 transition flex items-center gap-2">
                    <i data-lucide="x" class="w-5 h-5"></i> {% trans "Cancel" %}
                </button>
                <button id="confirmDelete" class="bg-red-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-red-700 transition flex items-center gap-2 shadow-lg shadow-red-200">
                    <i data-lucide="trash-2" class="w-5 h-5"></i> {% trans "Delete" %}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const API_URL = '/api/integrations/survey-template-mappings/';
    let deleteMappingId = null;
    
    // Modal elements
    const addModal = document.getElementById('addMappingModal');
    const deleteModal = document.getElementById('deleteModal');
    const addMappingBtn = document.getElementById('addMappingBtn');
    const closeAddModal = document.getElementById('closeAddModal');
    const cancelAddModal = document.getElementById('cancelAddModal');
    const closeDeleteModal = document.getElementById('cancelDeleteModal');
    
    // Show/Hide modal helper functions
    function showModal(modal) {
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }
    
    function hideModal(modal) {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }
    
    // Event listeners for modal controls
    addMappingBtn.addEventListener('click', () => showModal(addModal));
    closeAddModal.addEventListener('click', () => hideModal(addModal));
    cancelAddModal.addEventListener('click', () => hideModal(addModal));
    closeDeleteModal.addEventListener('click', () => hideModal(deleteModal));
    
    // Close modal when clicking outside
    addModal.addEventListener('click', (e) => {
        if (e.target === addModal) hideModal(addModal);
    });
    deleteModal.addEventListener('click', (e) => {
        if (e.target === deleteModal) hideModal(deleteModal);
    });
    
    // Load survey templates when hospital changes
    document.getElementById('hospital').addEventListener('change', function() {
        const hospitalId = this.value;
        const surveyTemplateSelect = document.getElementById('surveyTemplate');
        
        // Clear existing options
        surveyTemplateSelect.innerHTML = '<option value="">{% trans "Select Survey Template" %}</option>';
        
        // Store of pending survey template ID to set after loading
        surveyTemplateSelect.dataset.pendingValue = '';
        
        if (hospitalId) {
            // Fetch survey templates for this hospital
            fetch(`/surveys/api/templates/?hospital=${hospitalId}`)
                .then(response => response.json())
                .then(data => {
                    // Handle both array and paginated response formats
                    const templates = Array.isArray(data) ? data : (data.results || []);
                    
                    templates.forEach(template => {
                        const option = document.createElement('option');
                        option.value = template.id;
                        option.textContent = template.name;
                        surveyTemplateSelect.appendChild(option);
                    });
                    
                    // Set of pending value after loading
                    if (surveyTemplateSelect.dataset.pendingValue) {
                        surveyTemplateSelect.value = surveyTemplateSelect.dataset.pendingValue;
                        surveyTemplateSelect.dataset.pendingValue = '';
                    }
                })
                .catch(error => {
                    console.error('Error loading survey templates:', error);
                    console.error('Response data:', error.message);
                });
        }
    });
    
    // Edit mapping button
    document.querySelectorAll('.edit-mapping').forEach(button => {
        button.addEventListener('click', function() {
            // Populate form
            document.getElementById('mappingId').value = this.dataset.id;
            document.getElementById('hospital').value = this.dataset.hospital;
            document.getElementById('patientType').value = this.dataset.patientType;
            document.getElementById('isActive').checked = this.dataset.active === 'true';
            
            // Store survey template ID to set after hospital change loads templates
            const surveyTemplateId = this.dataset.surveyTemplate;
            const surveyTemplateSelect = document.getElementById('surveyTemplate');
            surveyTemplateSelect.dataset.pendingValue = surveyTemplateId;
            
            // Update modal title
            document.getElementById('mappingModalTitle').textContent = '{% trans "Edit Survey Template Mapping" %}';
            
            // Trigger hospital change to load survey templates
            // The survey template value will be set after loading completes
            document.getElementById('hospital').dispatchEvent(new Event('change'));
            
            showModal(addModal);
        });
    });
    
    // Delete mapping button
    document.querySelectorAll('.delete-mapping').forEach(button => {
        button.addEventListener('click', function() {
            deleteMappingId = this.dataset.id;
            document.getElementById('deleteMappingName').textContent = this.dataset.name;
            showModal(deleteModal);
        });
    });
    
    // Confirm delete
    document.getElementById('confirmDelete').addEventListener('click', function() {
        if (deleteMappingId) {
            // Get CSRF token
            const csrfToken = getCSRFToken();
            if (!csrfToken) {
                alert('{% trans "Error: Unable to get CSRF token. Please refresh the page and try again." %}');
                return;
            }
            
            fetch(`${API_URL}${deleteMappingId}/`, {
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': csrfToken
                }
            })
            .then(response => {
                if (response.ok) {
                    location.reload();
                } else {
                    alert('{% trans "Error deleting mapping" %}');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('{% trans "Error deleting mapping" %}');
            });
        }
    });
    
    // Save mapping
    document.getElementById('saveMapping').addEventListener('click', function(event) {
        // Prevent form submission
        event.preventDefault();
        
        const form = document.getElementById('mappingForm');
        
        // Validate required fields
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
        
        const mappingId = document.getElementById('mappingId').value;
        
        const data = {
            hospital: document.getElementById('hospital').value,
            patient_type: document.getElementById('patientType').value,
            survey_template: document.getElementById('surveyTemplate').value,
            is_active: document.getElementById('isActive').checked
        };
        
        console.log('Saving mapping:', data);
        
        const url = mappingId ? `${API_URL}${mappingId}/` : API_URL;
        const method = mappingId ? 'PUT' : 'POST';
        
        // Disable button to prevent double submission
        const saveButton = this;
        saveButton.disabled = true;
        saveButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>{% trans "Saving..." %}';
        
        // Get CSRF token
        const csrfToken = getCSRFToken();
        if (!csrfToken) {
            alert('{% trans "Error: Unable to get CSRF token. Please refresh the page and try again." %}');
            saveButton.disabled = false;
            saveButton.innerHTML = '<i data-lucide="save" class="w-5 h-5"></i> {% trans "Save Mapping" %}';
            return;
        }
        
        console.log('CSRF Token:', csrfToken.substring(0, 20) + '...');
        
        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify(data)
        })
        .then(response => {
            console.log('Response status:', response.status);
            if (!response.ok) {
                return response.json().then(err => {
                    throw new Error(JSON.stringify(err));
                });
            }
            return response.json();
        })
        .then(data => {
            console.log('Success:', data);
            // Hide modal and reload page
            hideModal(addModal);
            location.reload();
        })
        .catch(error => {
            console.error('Error saving mapping:', error);
            alert('{% trans "Error saving mapping" %}: ' + error.message);
            // Re-enable button
            saveButton.disabled = false;
            saveButton.innerHTML = '<i data-lucide="save" class="w-5 h-5"></i> {% trans "Save Mapping" %}';
        });
    });
    
    // Reset modal on close
    addModal.addEventListener('hidden', function() {
        document.getElementById('mappingForm').reset();
        document.getElementById('mappingId').value = '';
        document.getElementById('mappingModalTitle').textContent = '{% trans "Add Survey Template Mapping" %}';
    });
    
    // CSRF token helper - multiple methods for reliability
    function getCSRFToken() {
        // Method 1: Try to get from hidden input (most reliable)
        const csrfInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
        if (csrfInput) {
            return csrfInput.value;
        }
        
        // Method 2: Try to get from cookie (case-insensitive)
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Check both 'csrftoken' and 'csrfToken' (case-insensitive)
            if (cookie.toLowerCase().startsWith('csrftoken=')) {
                return decodeURIComponent(cookie.substring(10));
            }
        }
        
        // Method 3: Check for Django's meta tag
        const metaTag = document.querySelector('meta[name="csrf-token"]');
        if (metaTag) {
            return metaTag.getAttribute('content');
        }
        
        console.error('Unable to find CSRF token');
        return null;
    }
    
    // Initialize Lucide icons
    lucide.createIcons();
});
</script>
{% endblock %}