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

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

{% block content %}
<!-- Page Header -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
    <div>
        <h1 class="text-2xl font-bold text-navy flex items-center gap-2">
            <i data-lucide="layers" class="w-7 h-7 text-blue"></i>
            {% trans "Survey Template Mappings" %}
        </h1>
        <p class="text-slate mt-1">{% trans "Configure which survey templates are sent for each patient type at each hospital" %}</p>
    </div>
    <button id="addMappingBtn" class="px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
        <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Add Mapping" %}
    </button>
</div>

<!-- Mappings List Card -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    {% if mappings %}
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr class="text-xs font-bold text-slate uppercase tracking-wider">
                    <th class="px-6 py-4 text-left">{% trans "Patient Type" %}</th>
                    <th class="px-6 py-4 text-left">{% trans "Survey Template" %}</th>
                    <th class="px-6 py-4 text-left">{% trans "Status" %}</th>
                    <th class="px-6 py-4 text-left">{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                {% for mapping in mappings %}
                <tr class="hover:bg-light/30 transition">
                    <td class="px-6 py-4">
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-blue-100 text-blue-700">
                            {{ mapping.get_patient_type_display }}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="font-semibold text-navy">{{ mapping.survey_template.name }}</div>
                    </td>
                    <td class="px-6 py-4">
                        {% if mapping.is_active %}
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-700">{% trans "Active" %}</span>
                        {% else %}
                        <span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-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/80 transition font-medium text-sm flex items-center gap-1"
                                    data-id="{{ mapping.id }}"
                                    data-hospital="{{ mapping.hospital.id|default:'' }}"
                                    data-patient-type="{{ mapping.patient_type }}"
                                    data-survey-template="{{ mapping.survey_template.id }}"
                                    data-active="{{ mapping.is_active }}">
                                <i data-lucide="pencil" 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.get_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 %}
    <!-- Empty State -->
    <div class="text-center py-16">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-slate-100 rounded-full mb-4">
            <i data-lucide="layers" class="w-10 h-10 text-slate-400"></i>
        </div>
        <h3 class="text-xl font-bold text-navy mb-2">{% trans "No Mappings Configured" %}</h3>
        <p class="text-slate mb-6">{% trans "No survey template mappings configured yet. Click 'Add Mapping' to create your first mapping." %}</p>
        <button id="addMappingBtnEmpty" class="px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition inline-flex items-center gap-2">
            <i data-lucide="plus" class="w-5 h-5"></i> {% trans "Add Mapping" %}
        </button>
    </div>
    {% endif %}
</div>

<!-- Add/Edit Mapping Modal -->
<div id="addMappingModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black/50 modal-backdrop"></div>
        <div class="relative bg-white rounded-2xl max-w-2xl w-full shadow-xl overflow-hidden">
            <!-- Modal Header -->
            <div class="bg-slate-50 border-b border-slate-100 px-6 py-4 flex justify-between items-center">
                <h3 id="mappingModalTitle" class="text-xl font-bold text-navy flex items-center gap-2">
                    <i data-lucide="layers" class="w-6 h-6 text-blue"></i>
                    {% trans "Add Survey Template Mapping" %}
                </h3>
                <button id="closeAddModal" class="text-slate hover:text-navy transition p-1 hover:bg-light rounded-lg">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            
            <!-- Modal Body -->
            <div class="p-6">
                <form id="mappingForm" class="space-y-5">
                    {% csrf_token %}
                    <input type="hidden" id="mappingId" name="id">
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <!-- Hospital (auto-set, hidden for users with hospital context) -->
                        {% if user_hospital %}
                        <input type="hidden" id="hospital" name="hospital" value="{{ user_hospital.id }}">
                        {% else %}
                        <div>
                            <label for="hospital" class="block text-sm font-bold text-slate mb-2">
                                {% trans "Hospital" %} <span class="text-red-500">*</span>
                            </label>
                            <select id="hospital" name="hospital" required
                                    class="form-select w-full px-4 py-2.5 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white">
                                <option value="">{% trans "Select Hospital" %}</option>
                                {% for hospital in hospitals %}
                                <option value="{{ hospital.id }}">{{ hospital.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% endif %}
                        
                        <!-- Survey Template -->
                        <div>
                            <label for="surveyTemplate" class="block text-sm font-bold text-slate mb-2">
                                {% trans "Survey Template" %} <span class="text-red-500">*</span>
                            </label>
                            <select id="surveyTemplate" name="survey_template" required
                                    class="form-select w-full px-4 py-2.5 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white">
                                <option value="">{% trans "Select Survey Template" %}</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <!-- Patient Type -->
                        <div>
                            <label for="patientType" class="block text-sm font-bold text-slate mb-2">
                                {% trans "Patient Type" %} <span class="text-red-500">*</span>
                            </label>
                            <select id="patientType" name="patient_type" required
                                    class="form-select w-full px-4 py-2.5 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white">
                                <option value="">{% trans "Select Patient Type" %}</option>
                                <option value="1">{% trans "Inpatient (Type 1)" %}</option>
                                <option value="2">{% trans "Outpatient (Type 2)" %}</option>
                                <option value="3">{% trans "Emergency (Type 3)" %}</option>
                                <option value="4">{% trans "Day Case (Type 4)" %}</option>
                                <option value="APPOINTMENT">{% trans "Appointment" %}</option>
                            </select>
                        </div>
                        
                        <!-- Status -->
                        <div>
                            <label class="block text-sm font-bold text-slate mb-2">{% trans "Status" %}</label>
                            <label class="flex items-center gap-3 p-3 bg-light/50 rounded-xl border border-slate-100 cursor-pointer hover:bg-light transition">
                                <input type="checkbox" id="isActive" name="is_active" checked
                                       class="w-5 h-5 text-navy border-2 border-slate-300 rounded focus:ring-navy focus:ring-offset-2">
                                <span class="text-navy font-medium">{% trans "Active" %}</span>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            
            <!-- Modal Footer -->
            <div class="bg-slate-50 border-t border-slate-100 px-6 py-4 flex justify-end gap-3">
                <button id="cancelAddModal" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-white hover:text-navy transition">
                    {% trans "Cancel" %}
                </button>
                <button id="saveMapping" class="px-4 py-2 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
                    <i data-lucide="save" class="w-4 h-4"></i> {% trans "Save Mapping" %}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black/50 modal-backdrop"></div>
        <div class="relative bg-white rounded-2xl max-w-md w-full shadow-xl overflow-hidden">
            <!-- Modal Header -->
            <div class="bg-red-50 border-b border-red-100 px-6 py-4 flex justify-between items-center">
                <h3 class="text-xl font-bold text-red-700 flex items-center gap-2">
                    <i data-lucide="alert-triangle" class="w-6 h-6 text-red-600"></i>
                    {% trans "Confirm Delete" %}
                </h3>
                <button id="cancelDeleteModal" class="text-red-400 hover:text-red-700 transition p-1 hover:bg-red-100 rounded-lg">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            
            <!-- Modal Body -->
            <div class="p-6">
                <div class="text-center">
                    <p class="text-slate mb-4">{% trans "Are you sure you want to delete this mapping?" %}</p>
                    <p id="deleteMappingName" class="font-bold text-navy bg-light/50 p-3 rounded-xl inline-block"></p>
                </div>
            </div>
            
            <!-- Modal Footer -->
            <div class="bg-slate-50 border-t border-slate-100 px-6 py-4 flex justify-end gap-3">
                <button id="cancelDeleteBtn" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-white hover:text-navy transition">
                    {% trans "Cancel" %}
                </button>
                <button id="confirmDelete" class="px-4 py-2 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700 transition flex items-center gap-2">
                    <i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<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 addMappingBtnEmpty = document.getElementById('addMappingBtnEmpty');
    const closeAddModal = document.getElementById('closeAddModal');
    const cancelAddModal = document.getElementById('cancelAddModal');
    const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
    const cancelDeleteModal = document.getElementById('cancelDeleteModal');
    
    // Show/Hide modal helper functions
    function showModal(modal) {
        modal.classList.remove('hidden');
        lucide.createIcons();
    }
    
    function hideModal(modal) {
        modal.classList.add('hidden');
    }
    
    // Load survey templates when hospital changes
    function loadSurveyTemplates(hospitalId, pendingValue = null) {
        const surveyTemplateSelect = document.getElementById('surveyTemplate');
        
        // Clear existing options
        surveyTemplateSelect.innerHTML = '<option value="">{% trans "Select Survey Template" %}</option>';
        
        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 pending value after loading (for edit mode)
                    if (pendingValue) {
                        surveyTemplateSelect.value = pendingValue;
                        surveyTemplateSelect.dataset.pendingValue = '';
                    }
                })
                .catch(error => {
                    console.error('Error loading survey templates:', error);
                });
        }
    }
    
    // Event listeners for modal controls
    if (addMappingBtn) addMappingBtn.addEventListener('click', () => {
        showModal(addModal);
        // Load survey templates if hospital is pre-set
        const hospitalInput = document.getElementById('hospital');
        if (hospitalInput && hospitalInput.value) {
            loadSurveyTemplates(hospitalInput.value);
        }
    });
    if (addMappingBtnEmpty) addMappingBtnEmpty.addEventListener('click', () => {
        showModal(addModal);
        // Load survey templates if hospital is pre-set
        const hospitalInput = document.getElementById('hospital');
        if (hospitalInput && hospitalInput.value) {
            loadSurveyTemplates(hospitalInput.value);
        }
    });
    closeAddModal.addEventListener('click', () => hideModal(addModal));
    cancelAddModal.addEventListener('click', () => hideModal(addModal));
    cancelDeleteBtn.addEventListener('click', () => hideModal(deleteModal));
    cancelDeleteModal.addEventListener('click', () => hideModal(deleteModal));
    
    // Close modal when clicking outside
    addModal.addEventListener('click', (e) => {
        if (e.target === addModal.querySelector('.modal-backdrop')) hideModal(addModal);
    });
    deleteModal.addEventListener('click', (e) => {
        if (e.target === deleteModal.querySelector('.modal-backdrop')) hideModal(deleteModal);
    });
    
    // Load survey templates when hospital changes (for select element)
    document.getElementById('hospital').addEventListener('change', function() {
        const surveyTemplateSelect = document.getElementById('surveyTemplate');
        const pendingValue = surveyTemplateSelect.dataset.pendingValue;
        loadSurveyTemplates(this.value, pendingValue);
    });
    
    // 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';
            
            // Get survey template ID to set after loading templates
            const surveyTemplateId = this.dataset.surveyTemplate;
            const hospitalId = this.dataset.hospital;
            
            // Update modal title
            document.getElementById('mappingModalTitle').innerHTML = `
                <i data-lucide="layers" class="w-6 h-6 text-blue"></i> {% trans "Edit Survey Template Mapping" %}
            `;
            
            // Load survey templates with the pending value
            loadSurveyTemplates(hospitalId, surveyTemplateId);
            
            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 from form input or cookie
            let csrfToken = document.querySelector('[name="csrfmiddlewaretoken"]')?.value;
            if (!csrfToken) {
                csrfToken = getCookie('csrftoken');
            }
            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) {
        event.preventDefault();
        
        const form = document.getElementById('mappingForm');
        
        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
        };
        
        const url = mappingId ? `${API_URL}${mappingId}/` : API_URL;
        const method = mappingId ? 'PUT' : 'POST';
        
        const saveButton = this;
        const originalContent = saveButton.innerHTML;
        saveButton.disabled = true;
        saveButton.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> {% trans "Saving..." %}';
        lucide.createIcons();
        
        // Get CSRF token from form input or cookie
        let csrfToken = document.querySelector('[name="csrfmiddlewaretoken"]')?.value;
        if (!csrfToken) {
            csrfToken = getCookie('csrftoken');
        }
        if (!csrfToken) {
            alert('{% trans "Error: Unable to get CSRF token. Please refresh the page and try again." %}');
            saveButton.disabled = false;
            saveButton.innerHTML = originalContent;
            lucide.createIcons();
            return;
        }
        
        fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify(data)
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(err => {
                    throw new Error(JSON.stringify(err));
                });
            }
            return response.json();
        })
        .then(data => {
            hideModal(addModal);
            location.reload();
        })
        .catch(error => {
            console.error('Error saving mapping:', error);
            alert('{% trans "Error saving mapping" %}: ' + error.message);
            saveButton.disabled = false;
            saveButton.innerHTML = originalContent;
            lucide.createIcons();
        });
    });
    
    // Reset modal on close
    addModal.addEventListener('hidden', function() {
        document.getElementById('mappingForm').reset();
        document.getElementById('mappingId').value = '';
        document.getElementById('mappingModalTitle').innerHTML = `
            <i data-lucide="layers" class="w-6 h-6 text-blue"></i> {% trans "Add Survey Template Mapping" %}
        `;
        lucide.createIcons();
    });
    
    // Initialize Lucide icons
    lucide.createIcons();
});
</script>
{% endblock %}