{% extends 'layouts/base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Import Call Records" %} - PX360{% endblock %}

{% block extra_js %}
<script>
function updateFileName() {
    const input = document.getElementById('csvFile');
    const fileName = document.getElementById('fileName');
    const importButton = document.getElementById('importButton');
    
    if (input.files && input.files[0]) {
        fileName.textContent = 'Selected: ' + input.files[0].name;
        // Enable the import button
        importButton.disabled = false;
        importButton.classList.remove('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');
        importButton.classList.add('bg-navy', 'text-white', 'hover:bg-blue');
    } else {
        fileName.textContent = '';
        // Disable the import button
        importButton.disabled = true;
        importButton.classList.add('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');
        importButton.classList.remove('bg-navy', 'text-white', 'hover:bg-blue');
    }
}

// Drag and drop support
const dropZone = document.getElementById('dropZone');
const csvFile = document.getElementById('csvFile');

if (dropZone && csvFile) {
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('border-blue', 'bg-blue-50');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('border-blue', 'bg-blue-50');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('border-blue', 'bg-blue-50');
        
        const files = e.dataTransfer.files;
        if (files.length > 0 && files[0].name.endsWith('.csv')) {
            csvFile.files = files;
            updateFileName();
        } else {
            alert('Please upload a CSV file');
        }
    });
}
</script>
{% endblock %}

{% block content %}
<!-- Header -->
<div class="mb-6">
    <div class="flex items-center gap-2 text-sm text-slate mb-2">
        <a href="{% url 'callcenter:call_records_list' %}" class="hover:text-navy">{% trans "Call Records" %}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="font-bold text-navy">{% trans "Import CSV" %}</span>
    </div>
    <h1 class="text-2xl font-bold text-navy">{% trans "Import Call Records" %}</h1>
    <p class="text-slate text-sm mt-1">{% trans "Upload call records from your call recording system" %}</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Upload Form -->
    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
        <h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
            <i data-lucide="upload" class="w-5 h-5 text-blue"></i>
            {% trans "Upload CSV File" %}
        </h2>

        <form method="post" enctype="multipart/form-data" id="importForm">
            {% csrf_token %}

            <div class="mb-6">
                <label class="block text-sm font-semibold text-slate mb-2">
                    {% trans "CSV File" %} <span class="text-red-500">*</span>
                </label>
                <div class="border-2 border-dashed border-slate-200 rounded-xl p-8 text-center hover:border-blue transition" id="dropZone">
                    <input type="file" name="csv_file" id="csvFile" accept=".csv" required
                           class="hidden" onchange="updateFileName()">
                    <label for="csvFile" class="cursor-pointer">
                        <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i data-lucide="file-spreadsheet" class="w-8 h-8 text-blue"></i>
                        </div>
                        <p class="text-sm font-semibold text-navy mb-1">{% trans "Click to upload or drag and drop" %}</p>
                        <p class="text-xs text-slate">{% trans "CSV file (max. 100MB)" %}</p>
                        <p id="fileName" class="text-xs text-blue mt-2 font-medium"></p>
                    </label>
                </div>
            </div>

            <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
                <div class="flex items-start gap-3">
                    <i data-lucide="info" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
                    <div>
                        <p class="text-sm font-semibold text-blue-800 mb-1">{% trans "Important Notes" %}</p>
                        <ul class="text-xs text-blue-700 space-y-1">
                            <li>• {% trans "File must be in CSV format with exact headers" %}</li>
                            <li>• {% trans "Duplicate records (by Media ID) will be skipped" %}</li>
                            <li>• {% trans "Invalid records will be skipped with error reporting" %}</li>
                            <li>• {% trans "Large files may take a few moments to process" %}</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <button type="submit" id="importButton" disabled
                   class="px-6 py-3 bg-slate-300 text-slate-500 rounded-xl font-semibold cursor-not-allowed transition flex items-center gap-2">
                    <i data-lucide="upload" class="w-5 h-5"></i>
                    {% trans "Import Records" %}
                </button>
                <a href="{% url 'callcenter:call_records_list' %}" 
                   class="px-6 py-3 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition">
                    {% trans "Cancel" %}
                </a>
            </div>
        </form>
    </div>

    <!-- CSV Format Guide -->
    <div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
        <h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
            <i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
            {% trans "CSV Format Guide" %}
        </h2>

        <p class="text-sm text-slate mb-4">
            {% trans "Your CSV file must contain the following headers:" %}
        </p>

        <div class="bg-slate-50 rounded-xl p-4 mb-6 max-h-80 overflow-y-auto">
            <code class="text-xs text-slate font-mono">
                {% for header in sample_headers %}
                <span class="inline-block px-2 py-1 bg-white border border-slate-200 rounded mr-1 mb-1">{{ header }}</span>
                {% endfor %}
            </code>
        </div>

        <div class="space-y-3">
            <h3 class="text-sm font-bold text-navy">{% trans "Required Fields" %}</h3>
            <ul class="text-sm text-slate space-y-2">
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
                    <span><strong>Media ID</strong> - {% trans "Unique identifier (UUID format)" %}</span>
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
                    <span><strong>Call Start</strong> - {% trans "Call start date/time (MM/DD/YYYY H:MM AM/PM)" %}</span>
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
                    <span><strong>First Name</strong> - {% trans "Caller first name" %}</span>
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
                    <span><strong>Last Name</strong> - {% trans "Caller last name" %}</span>
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
                    <span><strong>Department</strong> - {% trans "Department name" %}</span>
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
                    <span><strong>Length</strong> - {% trans "Call duration (HH:MM:SS)" %}</span>
                </li>
                <li class="flex items-start gap-2">
                    <i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
                    <span><strong>File Name</strong> - {% trans "Recording file name" %}</span>
                </li>
            </ul>
        </div>

        <div class="mt-6 pt-6 border-t border-slate-200">
            <a href="{% url 'callcenter:export_call_records_template' %}" 
               class="inline-flex items-center gap-2 text-blue font-semibold hover:underline text-sm">
                <i data-lucide="download" class="w-4 h-4"></i>
                {% trans "Download sample CSV template" %}
            </a>
        </div>
    </div>
</div>

<!-- Example Table -->
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mt-6">
    <h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
        <i data-lucide="table" class="w-5 h-5 text-blue"></i>
        {% trans "Example Data Format" %}
    </h2>

    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Media ID</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Call Start</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">First Name</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Last Name</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Department</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Length</th>
                    <th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">File Name</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                <tr>
                    <td class="py-3 px-4 font-mono text-xs text-slate">aade2430-2eb0-4e05-93eb-9567e2be07ae</td>
                    <td class="py-3 px-4 text-slate">10/30/2025 7:57:48 PM</td>
                    <td class="py-3 px-4 text-navy">Patient</td>
                    <td class="py-3 px-4 text-navy">Relation</td>
                    <td class="py-3 px-4 text-slate">Patient Relation</td>
                    <td class="py-3 px-4 font-mono text-slate">00:01:11</td>
                    <td class="py-3 px-4 text-slate text-xs">2025-10-30\x1379 19.57.48.467.mp3</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}