{% extends "base.html" %}

{% block title %}Import Phone Contacts - SMS Campaign Manager{% endblock %}

{% block extra_head %}
    <link rel="stylesheet" href="/static/css/dashboard.css?v={{ cache_version }}">
    <style>
        .import-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }

        .header-section {
            margin-bottom: 2rem;
        }

        .header-section h1 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 1rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .stat-label {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 0.25rem;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .search-filter-section {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .search-input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 1rem;
        }

        .filter-options {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 0.5rem 1rem;
            border-radius: 6px;
            border: 1px solid #d1d5db;
            background: white;
            cursor: pointer;
            transition: all 0.2s;
        }

        .filter-btn.active {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }

        .contacts-table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .bulk-actions {
            display: flex;
            gap: 0.5rem;
        }

        .contacts-table {
            width: 100%;
            border-collapse: collapse;
        }

        .contacts-table thead {
            background: #f9fafb;
            border-bottom: 2px solid #e5e7eb;
        }

        .contacts-table th {
            padding: 0.75rem 1rem;
            text-align: left;
            font-weight: 600;
            font-size: 0.875rem;
            color: #374151;
        }

        .contacts-table tbody tr {
            border-bottom: 1px solid #e5e7eb;
            transition: background 0.1s;
        }

        .contacts-table tbody tr:hover {
            background: #f9fafb;
        }

        .contacts-table td {
            padding: 0.75rem 1rem;
        }

        .status-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .status-new {
            background: #dbeafe;
            color: #1e40af;
        }

        .status-existing {
            background: #d1fae5;
            color: #065f46;
        }

        .status-conflict {
            background: #fee2e2;
            color: #991b1b;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

        .btn-primary {
            background: #3b82f6;
            color: white;
        }

        .btn-primary:hover {
            background: #2563eb;
        }

        .btn-secondary {
            background: #e5e7eb;
            color: #374151;
        }

        .btn-secondary:hover {
            background: #d1d5db;
        }

        .loading-spinner {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 2px solid #f3f4f6;
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: white;
            border-radius: 8px;
            padding: 2rem;
            max-width: 500px;
            width: 90%;
        }

        .modal h2 {
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #d1d5db;
            border-radius: 4px;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
    </style>
{% endblock %}

{% block content %}
        <div class="bg-white rounded-b-lg shadow-sm p-6">

            <!-- Stats Row -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6" id="statsRow">
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="text-sm text-gray-600 mb-1">Total on Phone</div>
                    <div class="text-2xl font-bold text-gray-800" id="totalCount">--</div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="text-sm text-gray-600 mb-1">New Contacts</div>
                    <div class="text-2xl font-bold text-blue-600" id="newCount">--</div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="text-sm text-gray-600 mb-1">Already in DB</div>
                    <div class="text-2xl font-bold text-green-600" id="existingCount">--</div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="text-sm text-gray-600 mb-1">Conflicts</div>
                    <div class="text-2xl font-bold text-red-600" id="conflictsCount">--</div>
                </div>
            </div>

            <!-- Search and Filter -->
            <div class="bg-gray-50 rounded-lg p-4 mb-6">
            <input
                type="text"
                id="searchInput"
                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="Search contacts by name or number..."
            >
                <div class="flex gap-2 mt-4 flex-wrap">
                    <button class="px-4 py-2 rounded-lg font-medium transition-colors bg-blue-500 text-white" data-filter="all">All Contacts</button>
                    <button class="px-4 py-2 rounded-lg font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200" data-filter="new">New Only</button>
                    <button class="px-4 py-2 rounded-lg font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200" data-filter="existing">Existing Only</button>
                    <button class="px-4 py-2 rounded-lg font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200" data-filter="conflicts">Conflicts Only</button>
                </div>
            </div>

            <!-- Contacts Table -->
            <div class="bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
            <div class="flex justify-between items-center p-4 border-b border-gray-200">
                <h3 class="font-semibold text-gray-800">
                    <input type="checkbox" id="selectAll" class="mr-2">
                    Select All (<span id="selectedCount">0</span> selected)
                </h3>
                <div class="flex gap-2">
                    <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed" id="fetchContactsBtn">
                        <span id="fetchBtnText">Fetch from Phone</span>
                        <span id="fetchBtnSpinner" class="loading-spinner" style="display: none;"></span>
                    </button>
                    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed" id="importSelectedBtn" disabled>Import Selected</button>
                </div>
            </div>

            <div class="overflow-x-auto" style="max-height: 600px; overflow-y: auto;">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b-2 border-gray-200 sticky top-0">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase" style="width: 40px;"></th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Name</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Phone Number</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Status</th>
                        </tr>
                    </thead>
                    <tbody id="contactsTableBody" class="divide-y divide-gray-200">
                        <tr>
                            <td colspan="4" class="px-4 py-8 text-center text-gray-500">
                                Click "Fetch from Phone" to load contacts
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            </div>
        </div>
    </div>
    <!-- Import Modal -->
    <div class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50" id="importModal">
        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
            <h2 class="text-2xl font-bold mb-4">Import Contacts</h2>
            <form id="importForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Import to:</label>
                    <select id="importListSelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Create New List</option>
                    </select>
                </div>

                <div class="mb-4 hidden" id="newListNameGroup">
                    <label class="block text-sm font-medium text-gray-700 mb-2">New List Name: <span class="text-red-500">*</span></label>
                    <input type="text" id="newListName" placeholder="e.g., Phone Contacts - January 2025" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <div class="mb-4">
                    <label class="flex items-center gap-2">
                        <input type="checkbox" id="skipDuplicates" checked class="rounded">
                        <span class="text-sm text-gray-700">Skip duplicate phone numbers</span>
                    </label>
                </div>

                <div class="mb-6">
                    <label class="flex items-center gap-2">
                        <input type="checkbox" id="updateConflicts" class="rounded">
                        <span class="text-sm text-gray-700">Update existing contacts with new names</span>
                    </label>
                </div>

                <div class="flex gap-3">
                    <button type="submit" class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">Import</button>
                    <button type="button" class="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors" onclick="closeImportModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        let allContacts = [];
        let filteredContacts = [];
        let selectedContacts = new Set();
        let currentFilter = 'all';
        let duplicateAnalysis = null;

        // Check phone status on load
        async function checkPhoneStatus() {
            try {
                const response = await fetch('/api/phone/status', { credentials: 'same-origin' });
                const data = await response.json();

                const termuxStatus = document.getElementById('termuxStatus');
                const adbStatus = document.getElementById('adbStatus');

                if (data.termux_connected) {
                    termuxStatus.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800';
                    termuxStatus.textContent = '🟢 Online';
                } else {
                    termuxStatus.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800';
                    termuxStatus.textContent = '🔴 Offline';
                }

                if (data.adb_connected) {
                    adbStatus.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800';
                    adbStatus.textContent = '🟢 Online';
                } else {
                    adbStatus.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800';
                    adbStatus.textContent = '🔴 Offline';
                }
            } catch (error) {
                console.error('Failed to check phone status:', error);
            }
        }

        // Check status on page load
        checkPhoneStatus();

        // Fetch contacts from phone
        document.getElementById('fetchContactsBtn').addEventListener('click', async function() {
            const btn = this;
            const btnText = document.getElementById('fetchBtnText');
            const btnSpinner = document.getElementById('fetchBtnSpinner');

            btnText.style.display = 'none';
            btnSpinner.style.display = 'inline-block';
            btn.disabled = true;

            try {
                const response = await fetch('/api/contacts/fetch-from-phone', {
                    credentials: 'same-origin'
                });
                const data = await response.json();

                if (data.success) {
                    allContacts = data.contacts || [];
                    duplicateAnalysis = data.duplicate_analysis;

                    // Update stats
                    document.getElementById('totalCount').textContent = data.total_count;
                    document.getElementById('newCount').textContent = data.new_count;
                    document.getElementById('existingCount').textContent = data.existing_count;
                    document.getElementById('conflictsCount').textContent = data.conflicts_count;

                    // Enhance contacts with status
                    allContacts = allContacts.map(contact => {
                        const normalized = normalizePhone(contact.number || contact.phone);
                        let status = 'new';

                        if (duplicateAnalysis.existing.some(c => normalizePhone(c.phone) === normalized)) {
                            status = 'existing';
                        } else if (duplicateAnalysis.conflicts.some(c => normalizePhone(c.phone) === normalized)) {
                            status = 'conflict';
                        }

                        return { ...contact, status, normalized };
                    });

                    applyFilter();
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Failed to fetch contacts: ' + error.message);
            } finally {
                btnText.style.display = 'inline';
                btnSpinner.style.display = 'none';
                btn.disabled = false;
            }
        });

        // Filter buttons
        document.querySelectorAll('[data-filter]').forEach(btn => {
            btn.addEventListener('click', function() {
                // Remove active state from all buttons
                document.querySelectorAll('[data-filter]').forEach(b => {
                    b.classList.remove('bg-blue-500', 'text-white');
                    b.classList.add('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200');
                });
                // Add active state to clicked button
                this.classList.remove('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200');
                this.classList.add('bg-blue-500', 'text-white');
                currentFilter = this.dataset.filter;
                applyFilter();
            });
        });

        // Search input
        document.getElementById('searchInput').addEventListener('input', function(e) {
            applyFilter();
        });

        // Select all
        document.getElementById('selectAll').addEventListener('change', function(e) {
            const checked = e.target.checked;
            filteredContacts.forEach(contact => {
                const key = normalizePhone(contact.number || contact.phone);
                if (checked) {
                    selectedContacts.add(key);
                } else {
                    selectedContacts.delete(key);
                }
            });
            renderTable();
        });

        // Import selected button
        document.getElementById('importSelectedBtn').addEventListener('click', function() {
            if (selectedContacts.size === 0) {
                alert('Please select at least one contact');
                return;
            }
            showImportModal();
        });

        // Import form
        document.getElementById('importForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            await performImport();
        });

        // List select change
        document.getElementById('importListSelect').addEventListener('change', function(e) {
            const newListGroup = document.getElementById('newListNameGroup');
            if (e.target.value === '') {
                newListGroup.classList.remove('hidden');
            } else {
                newListGroup.classList.add('hidden');
            }
        });

        function normalizePhone(phone) {
            if (!phone) return '';
            return phone.replace(/[^\d+]/g, '');
        }

        function applyFilter() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();

            filteredContacts = allContacts.filter(contact => {
                // Apply status filter
                if (currentFilter !== 'all' && contact.status !== currentFilter) {
                    return false;
                }

                // Apply search filter
                if (searchTerm) {
                    const name = (contact.name || '').toLowerCase();
                    const phone = (contact.number || contact.phone || '').toLowerCase();
                    if (!name.includes(searchTerm) && !phone.includes(searchTerm)) {
                        return false;
                    }
                }

                return true;
            });

            renderTable();
        }

        function renderTable() {
            const tbody = document.getElementById('contactsTableBody');
            const selectedCountEl = document.getElementById('selectedCount');
            const importBtn = document.getElementById('importSelectedBtn');

            if (filteredContacts.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="4" class="px-4 py-8 text-center text-gray-500">
                            No contacts found
                        </td>
                    </tr>
                `;
                importBtn.disabled = true;
                return;
            }

            tbody.innerHTML = filteredContacts.map(contact => {
                const phone = contact.number || contact.phone || '';
                const normalized = normalizePhone(phone);
                const isSelected = selectedContacts.has(normalized);

                let statusBadge = '';
                if (contact.status === 'new') {
                    statusBadge = '<span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">New</span>';
                } else if (contact.status === 'existing') {
                    statusBadge = '<span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Existing</span>';
                } else if (contact.status === 'conflict') {
                    statusBadge = '<span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">Conflict</span>';
                }

                return `
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3">
                            <input
                                type="checkbox"
                                class="contact-checkbox"
                                data-phone="${normalized}"
                                ${isSelected ? 'checked' : ''}
                            >
                        </td>
                        <td class="px-4 py-3">${contact.name || '<em class="text-gray-400">No name</em>'}</td>
                        <td class="px-4 py-3">${phone}</td>
                        <td class="px-4 py-3">${statusBadge}</td>
                    </tr>
                `;
            }).join('');

            // Add checkbox listeners
            tbody.querySelectorAll('.contact-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function(e) {
                    const phone = e.target.dataset.phone;
                    if (e.target.checked) {
                        selectedContacts.add(phone);
                    } else {
                        selectedContacts.delete(phone);
                    }
                    updateSelectionUI();
                });
            });

            updateSelectionUI();
        }

        function updateSelectionUI() {
            const selectedCountEl = document.getElementById('selectedCount');
            const importBtn = document.getElementById('importSelectedBtn');
            const selectAllCheckbox = document.getElementById('selectAll');

            selectedCountEl.textContent = selectedContacts.size;
            importBtn.disabled = selectedContacts.size === 0;

            // Update select all checkbox state
            const allFiltered = filteredContacts.every(c =>
                selectedContacts.has(normalizePhone(c.number || c.phone))
            );
            selectAllCheckbox.checked = allFiltered && filteredContacts.length > 0;
        }

        function showImportModal() {
            const modal = document.getElementById('importModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');

            // Load contact lists
            loadContactLists();

            // Show new list name field by default since "Create New List" is selected
            const newListGroup = document.getElementById('newListNameGroup');
            const selectValue = document.getElementById('importListSelect').value;
            if (selectValue === '') {
                newListGroup.classList.remove('hidden');
            } else {
                newListGroup.classList.add('hidden');
            }
        }

        function closeImportModal() {
            const modal = document.getElementById('importModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        async function loadContactLists() {
            try {
                const response = await fetch('/api/database/contact-lists', {
                    credentials: 'same-origin'
                });
                const data = await response.json();

                const select = document.getElementById('importListSelect');
                select.innerHTML = '<option value="">Create New List</option>';

                if (data.success && data.lists) {
                    data.lists.forEach(list => {
                        const option = document.createElement('option');
                        option.value = list.id;
                        option.textContent = `${list.name} (${list.total_contacts} contacts)`;
                        select.appendChild(option);
                    });
                }
            } catch (error) {
                console.error('Failed to load contact lists:', error);
            }
        }

        async function performImport() {
            const listId = document.getElementById('importListSelect').value;
            const listName = document.getElementById('newListName').value;
            const skipDuplicates = document.getElementById('skipDuplicates').checked;
            const updateConflicts = document.getElementById('updateConflicts').checked;

            // Validate
            if (!listId && !listName) {
                alert('Please provide a name for the new list');
                return;
            }

            // Get selected contacts
            const selectedContactsData = allContacts.filter(c =>
                selectedContacts.has(normalizePhone(c.number || c.phone))
            );

            try {
                const response = await fetch('/api/contacts/import-from-phone', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'same-origin',
                    body: JSON.stringify({
                        contacts: selectedContactsData,
                        list_id: listId || null,
                        list_name: listName || null,
                        skip_duplicates: skipDuplicates,
                        update_conflicts: updateConflicts
                    })
                });

                const data = await response.json();

                if (data.success) {
                    alert(data.message);
                    closeImportModal();
                    // Clear selection
                    selectedContacts.clear();
                    renderTable();
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Import failed: ' + error.message);
            }
        }

    </script>
{% endblock %}