{% extends "base.html" %}

{% block title %}Pair Devices - Terra-View{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Pair Devices</h1>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
            Select a recorder (seismograph or SLM) and a modem to create a bidirectional pairing.
        </p>
    </div>

    <!-- Selection Summary Bar -->
    <div id="selection-bar" class="mb-6 p-4 bg-white dark:bg-slate-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div class="flex items-center gap-6">
                <div class="flex items-center gap-2">
                    <span class="text-sm text-gray-600 dark:text-gray-400">Recorder:</span>
                    <span id="selected-recorder" class="font-mono font-medium text-gray-900 dark:text-white">None selected</span>
                </div>
                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
                <div class="flex items-center gap-2">
                    <span class="text-sm text-gray-600 dark:text-gray-400">Modem:</span>
                    <span id="selected-modem" class="font-mono font-medium text-gray-900 dark:text-white">None selected</span>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <button id="clear-selection-btn"
                        onclick="clearSelection()"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
                        disabled>
                    Clear
                </button>
                <button id="pair-btn"
                        onclick="pairDevices()"
                        class="px-4 py-2 text-sm font-medium text-white bg-seismo-orange rounded-lg hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
                        disabled>
                    Pair Devices
                </button>
            </div>
        </div>
    </div>

    <!-- Two Column Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Left Column: Recorders (Seismographs + SLMs) -->
        <div class="bg-white dark:bg-slate-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
            <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                        <svg class="w-5 h-5 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                        Recorders
                        <span id="recorder-count" class="text-sm font-normal text-gray-500 dark:text-gray-400">({{ recorders|length }})</span>
                    </h2>
                </div>
                <!-- Recorder Search & Filters -->
                <div class="space-y-2">
                    <input type="text" id="recorder-search" placeholder="Search by ID..."
                           class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-seismo-orange focus:border-seismo-orange"
                           oninput="filterRecorders()">
                    <div class="flex items-center gap-4">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" id="recorder-hide-paired" onchange="filterRecorders()" class="rounded border-gray-300 dark:border-gray-600 text-seismo-orange focus:ring-seismo-orange">
                            <span class="text-xs text-gray-600 dark:text-gray-400">Hide paired</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" id="recorder-deployed-only" onchange="filterRecorders()" class="rounded border-gray-300 dark:border-gray-600 text-seismo-orange focus:ring-seismo-orange">
                            <span class="text-xs text-gray-600 dark:text-gray-400">Deployed only</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="max-h-[600px] overflow-y-auto">
                <div id="recorders-list" class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for unit in recorders %}
                    <div class="device-row recorder-row p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors"
                         data-id="{{ unit.id }}"
                         data-deployed="{{ unit.deployed|lower }}"
                         data-paired-with="{{ unit.deployed_with_modem_id or '' }}"
                         data-device-type="{{ unit.device_type }}"
                         onclick="selectRecorder('{{ unit.id }}')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full flex items-center justify-center
                                    {% if unit.device_type == 'slm' %}bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400
                                    {% else %}bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400{% endif %}">
                                    {% if unit.device_type == 'slm' %}
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
                                    </svg>
                                    {% else %}
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                    </svg>
                                    {% endif %}
                                </div>
                                <div>
                                    <div class="font-mono font-medium text-gray-900 dark:text-white">{{ unit.id }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ unit.device_type|capitalize }}
                                        {% if not unit.deployed %}<span class="text-yellow-600 dark:text-yellow-400">(Benched)</span>{% endif %}
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2">
                                {% if unit.deployed_with_modem_id %}
                                <span class="px-2 py-1 text-xs rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
                                    → {{ unit.deployed_with_modem_id }}
                                </span>
                                {% endif %}
                                <div class="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center selection-indicator">
                                    <svg class="w-3 h-3 text-seismo-orange hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="p-8 text-center text-gray-500 dark:text-gray-400">
                        No recorders found in roster
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Right Column: Modems -->
        <div class="bg-white dark:bg-slate-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
            <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                        <svg class="w-5 h-5 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path>
                        </svg>
                        Modems
                        <span id="modem-count" class="text-sm font-normal text-gray-500 dark:text-gray-400">({{ modems|length }})</span>
                    </h2>
                </div>
                <!-- Modem Search & Filters -->
                <div class="space-y-2">
                    <input type="text" id="modem-search" placeholder="Search by ID, IP, or phone..."
                           class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-seismo-orange focus:border-seismo-orange"
                           oninput="filterModems()">
                    <div class="flex items-center gap-4">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" id="modem-hide-paired" onchange="filterModems()" class="rounded border-gray-300 dark:border-gray-600 text-seismo-orange focus:ring-seismo-orange">
                            <span class="text-xs text-gray-600 dark:text-gray-400">Hide paired</span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" id="modem-deployed-only" onchange="filterModems()" class="rounded border-gray-300 dark:border-gray-600 text-seismo-orange focus:ring-seismo-orange">
                            <span class="text-xs text-gray-600 dark:text-gray-400">Deployed only</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="max-h-[600px] overflow-y-auto">
                <div id="modems-list" class="divide-y divide-gray-200 dark:divide-gray-700">
                    {% for unit in modems %}
                    <div class="device-row modem-row p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors"
                         data-id="{{ unit.id }}"
                         data-deployed="{{ unit.deployed|lower }}"
                         data-paired-with="{{ unit.deployed_with_unit_id or '' }}"
                         data-ip="{{ unit.ip_address or '' }}"
                         data-phone="{{ unit.phone_number or '' }}"
                         onclick="selectModem('{{ unit.id }}')">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-amber-600 dark:text-amber-400">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"></path>
                                    </svg>
                                </div>
                                <div>
                                    <div class="font-mono font-medium text-gray-900 dark:text-white">{{ unit.id }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">
                                        {% if unit.ip_address %}<span class="font-mono">{{ unit.ip_address }}</span>{% endif %}
                                        {% if unit.phone_number %}{% if unit.ip_address %} · {% endif %}{{ unit.phone_number }}{% endif %}
                                        {% if not unit.ip_address and not unit.phone_number %}Modem{% endif %}
                                        {% if not unit.deployed %}<span class="text-yellow-600 dark:text-yellow-400">(Benched)</span>{% endif %}
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center gap-2">
                                {% if unit.deployed_with_unit_id %}
                                <span class="px-2 py-1 text-xs rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
                                    ← {{ unit.deployed_with_unit_id }}
                                </span>
                                {% endif %}
                                <div class="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center selection-indicator">
                                    <svg class="w-3 h-3 text-seismo-orange hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="p-8 text-center text-gray-500 dark:text-gray-400">
                        No modems found in roster
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Existing Pairings Section -->
    <div class="mt-8 bg-white dark:bg-slate-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
                </svg>
                Existing Pairings
                <span id="pairing-count" class="text-sm font-normal text-gray-500 dark:text-gray-400">({{ pairings|length }})</span>
            </h2>
        </div>
        <div class="max-h-[400px] overflow-y-auto">
            <div id="pairings-list" class="divide-y divide-gray-200 dark:divide-gray-700">
                {% for pairing in pairings %}
                <div class="pairing-row p-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2">
                            <span class="px-2 py-1 text-sm font-mono rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
                                {{ pairing.recorder_id }}
                            </span>
                            <span class="text-xs text-gray-500 dark:text-gray-400">{{ pairing.recorder_type }}</span>
                        </div>
                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                        </svg>
                        <div class="flex items-center gap-2">
                            <span class="px-2 py-1 text-sm font-mono rounded bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400">
                                {{ pairing.modem_id }}
                            </span>
                            {% if pairing.modem_ip %}
                            <span class="text-xs font-mono text-gray-500 dark:text-gray-400">{{ pairing.modem_ip }}</span>
                            {% endif %}
                        </div>
                    </div>
                    <button onclick="unpairDevices('{{ pairing.recorder_id }}', '{{ pairing.modem_id }}')"
                            class="p-2 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-lg transition-colors"
                            title="Unpair devices">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                {% else %}
                <div class="p-8 text-center text-gray-500 dark:text-gray-400">
                    No pairings found. Select a recorder and modem above to create one.
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Toast notification -->
<div id="toast" class="fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg transform translate-y-full opacity-0 transition-all duration-300 z-50"></div>

<script>
let selectedRecorder = null;
let selectedModem = null;

function selectRecorder(id) {
    // Deselect previous
    document.querySelectorAll('.recorder-row').forEach(row => {
        row.classList.remove('bg-seismo-orange/10', 'dark:bg-seismo-orange/20');
        row.querySelector('.selection-indicator').classList.remove('border-seismo-orange', 'bg-seismo-orange');
        row.querySelector('.selection-indicator').classList.add('border-gray-300', 'dark:border-gray-600');
        row.querySelector('.check-icon').classList.add('hidden');
    });

    // Toggle selection
    if (selectedRecorder === id) {
        selectedRecorder = null;
        document.getElementById('selected-recorder').textContent = 'None selected';
    } else {
        selectedRecorder = id;
        document.getElementById('selected-recorder').textContent = id;

        // Highlight selected
        const row = document.querySelector(`.recorder-row[data-id="${id}"]`);
        if (row) {
            row.classList.add('bg-seismo-orange/10', 'dark:bg-seismo-orange/20');
            row.querySelector('.selection-indicator').classList.remove('border-gray-300', 'dark:border-gray-600');
            row.querySelector('.selection-indicator').classList.add('border-seismo-orange', 'bg-seismo-orange');
            row.querySelector('.check-icon').classList.remove('hidden');
        }
    }

    updateButtons();
}

function selectModem(id) {
    // Deselect previous
    document.querySelectorAll('.modem-row').forEach(row => {
        row.classList.remove('bg-seismo-orange/10', 'dark:bg-seismo-orange/20');
        row.querySelector('.selection-indicator').classList.remove('border-seismo-orange', 'bg-seismo-orange');
        row.querySelector('.selection-indicator').classList.add('border-gray-300', 'dark:border-gray-600');
        row.querySelector('.check-icon').classList.add('hidden');
    });

    // Toggle selection
    if (selectedModem === id) {
        selectedModem = null;
        document.getElementById('selected-modem').textContent = 'None selected';
    } else {
        selectedModem = id;
        document.getElementById('selected-modem').textContent = id;

        // Highlight selected
        const row = document.querySelector(`.modem-row[data-id="${id}"]`);
        if (row) {
            row.classList.add('bg-seismo-orange/10', 'dark:bg-seismo-orange/20');
            row.querySelector('.selection-indicator').classList.remove('border-gray-300', 'dark:border-gray-600');
            row.querySelector('.selection-indicator').classList.add('border-seismo-orange', 'bg-seismo-orange');
            row.querySelector('.check-icon').classList.remove('hidden');
        }
    }

    updateButtons();
}

function updateButtons() {
    const pairBtn = document.getElementById('pair-btn');
    const clearBtn = document.getElementById('clear-selection-btn');

    pairBtn.disabled = !(selectedRecorder && selectedModem);
    clearBtn.disabled = !(selectedRecorder || selectedModem);
}

function clearSelection() {
    if (selectedRecorder) selectRecorder(selectedRecorder);
    if (selectedModem) selectModem(selectedModem);
}

function filterRecorders() {
    const searchTerm = document.getElementById('recorder-search').value.toLowerCase().trim();
    const hidePaired = document.getElementById('recorder-hide-paired').checked;
    const deployedOnly = document.getElementById('recorder-deployed-only').checked;

    let visibleRecorders = 0;

    document.querySelectorAll('.recorder-row').forEach(row => {
        const id = row.dataset.id.toLowerCase();
        const pairedWith = row.dataset.pairedWith;
        const deployed = row.dataset.deployed === 'true';

        let show = true;
        if (searchTerm && !id.includes(searchTerm)) show = false;
        if (hidePaired && pairedWith) show = false;
        if (deployedOnly && !deployed) show = false;

        row.style.display = show ? '' : 'none';
        if (show) visibleRecorders++;
    });

    document.getElementById('recorder-count').textContent = `(${visibleRecorders})`;
}

function filterModems() {
    const searchTerm = document.getElementById('modem-search').value.toLowerCase().trim();
    const hidePaired = document.getElementById('modem-hide-paired').checked;
    const deployedOnly = document.getElementById('modem-deployed-only').checked;

    let visibleModems = 0;

    document.querySelectorAll('.modem-row').forEach(row => {
        const id = row.dataset.id.toLowerCase();
        const ip = (row.dataset.ip || '').toLowerCase();
        const phone = (row.dataset.phone || '').toLowerCase();
        const pairedWith = row.dataset.pairedWith;
        const deployed = row.dataset.deployed === 'true';

        let show = true;
        if (searchTerm && !id.includes(searchTerm) && !ip.includes(searchTerm) && !phone.includes(searchTerm)) show = false;
        if (hidePaired && pairedWith) show = false;
        if (deployedOnly && !deployed) show = false;

        row.style.display = show ? '' : 'none';
        if (show) visibleModems++;
    });

    document.getElementById('modem-count').textContent = `(${visibleModems})`;
}

function saveScrollPositions() {
    const recordersList = document.getElementById('recorders-list').parentElement;
    const modemsList = document.getElementById('modems-list').parentElement;
    const pairingsList = document.getElementById('pairings-list').parentElement;

    sessionStorage.setItem('pairDevices_recorderScroll', recordersList.scrollTop);
    sessionStorage.setItem('pairDevices_modemScroll', modemsList.scrollTop);
    sessionStorage.setItem('pairDevices_pairingScroll', pairingsList.scrollTop);

    // Save recorder filter state
    sessionStorage.setItem('pairDevices_recorderSearch', document.getElementById('recorder-search').value);
    sessionStorage.setItem('pairDevices_recorderHidePaired', document.getElementById('recorder-hide-paired').checked);
    sessionStorage.setItem('pairDevices_recorderDeployedOnly', document.getElementById('recorder-deployed-only').checked);

    // Save modem filter state
    sessionStorage.setItem('pairDevices_modemSearch', document.getElementById('modem-search').value);
    sessionStorage.setItem('pairDevices_modemHidePaired', document.getElementById('modem-hide-paired').checked);
    sessionStorage.setItem('pairDevices_modemDeployedOnly', document.getElementById('modem-deployed-only').checked);
}

function restoreScrollPositions() {
    const recorderScroll = sessionStorage.getItem('pairDevices_recorderScroll');
    const modemScroll = sessionStorage.getItem('pairDevices_modemScroll');
    const pairingScroll = sessionStorage.getItem('pairDevices_pairingScroll');

    if (recorderScroll) {
        document.getElementById('recorders-list').parentElement.scrollTop = parseInt(recorderScroll);
    }
    if (modemScroll) {
        document.getElementById('modems-list').parentElement.scrollTop = parseInt(modemScroll);
    }
    if (pairingScroll) {
        document.getElementById('pairings-list').parentElement.scrollTop = parseInt(pairingScroll);
    }

    // Restore recorder filter state
    const recorderSearch = sessionStorage.getItem('pairDevices_recorderSearch');
    const recorderHidePaired = sessionStorage.getItem('pairDevices_recorderHidePaired');
    const recorderDeployedOnly = sessionStorage.getItem('pairDevices_recorderDeployedOnly');

    if (recorderSearch) document.getElementById('recorder-search').value = recorderSearch;
    if (recorderHidePaired === 'true') document.getElementById('recorder-hide-paired').checked = true;
    if (recorderDeployedOnly === 'true') document.getElementById('recorder-deployed-only').checked = true;

    // Restore modem filter state
    const modemSearch = sessionStorage.getItem('pairDevices_modemSearch');
    const modemHidePaired = sessionStorage.getItem('pairDevices_modemHidePaired');
    const modemDeployedOnly = sessionStorage.getItem('pairDevices_modemDeployedOnly');

    if (modemSearch) document.getElementById('modem-search').value = modemSearch;
    if (modemHidePaired === 'true') document.getElementById('modem-hide-paired').checked = true;
    if (modemDeployedOnly === 'true') document.getElementById('modem-deployed-only').checked = true;

    // Apply filters if any were set
    if (recorderSearch || recorderHidePaired === 'true' || recorderDeployedOnly === 'true') {
        filterRecorders();
    }
    if (modemSearch || modemHidePaired === 'true' || modemDeployedOnly === 'true') {
        filterModems();
    }

    // Clear stored values
    sessionStorage.removeItem('pairDevices_recorderScroll');
    sessionStorage.removeItem('pairDevices_modemScroll');
    sessionStorage.removeItem('pairDevices_pairingScroll');
    sessionStorage.removeItem('pairDevices_recorderSearch');
    sessionStorage.removeItem('pairDevices_recorderHidePaired');
    sessionStorage.removeItem('pairDevices_recorderDeployedOnly');
    sessionStorage.removeItem('pairDevices_modemSearch');
    sessionStorage.removeItem('pairDevices_modemHidePaired');
    sessionStorage.removeItem('pairDevices_modemDeployedOnly');
}

// Restore scroll positions on page load
document.addEventListener('DOMContentLoaded', restoreScrollPositions);

async function pairDevices() {
    if (!selectedRecorder || !selectedModem) return;

    const pairBtn = document.getElementById('pair-btn');
    pairBtn.disabled = true;
    pairBtn.textContent = 'Pairing...';

    try {
        const response = await fetch('/api/roster/pair-devices', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                recorder_id: selectedRecorder,
                modem_id: selectedModem
            })
        });

        const result = await response.json();

        if (response.ok) {
            showToast(`Paired ${selectedRecorder} with ${selectedModem}`, 'success');
            // Save scroll positions before reload
            saveScrollPositions();
            setTimeout(() => window.location.reload(), 500);
        } else {
            showToast(result.detail || 'Failed to pair devices', 'error');
        }
    } catch (error) {
        showToast('Error pairing devices: ' + error.message, 'error');
    } finally {
        pairBtn.disabled = false;
        pairBtn.textContent = 'Pair Devices';
    }
}

async function unpairDevices(recorderId, modemId) {
    if (!confirm(`Unpair ${recorderId} from ${modemId}?`)) return;

    try {
        const response = await fetch('/api/roster/unpair-devices', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                recorder_id: recorderId,
                modem_id: modemId
            })
        });

        const result = await response.json();

        if (response.ok) {
            showToast(`Unpaired ${recorderId} from ${modemId}`, 'success');
            // Save scroll positions before reload
            saveScrollPositions();
            setTimeout(() => window.location.reload(), 500);
        } else {
            showToast(result.detail || 'Failed to unpair devices', 'error');
        }
    } catch (error) {
        showToast('Error unpairing devices: ' + error.message, 'error');
    }
}

function showToast(message, type = 'info') {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.className = 'fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 z-50';

    if (type === 'success') {
        toast.classList.add('bg-green-500', 'text-white');
    } else if (type === 'error') {
        toast.classList.add('bg-red-500', 'text-white');
    } else {
        toast.classList.add('bg-gray-800', 'text-white');
    }

    // Show
    toast.classList.remove('translate-y-full', 'opacity-0');

    // Hide after 3 seconds
    setTimeout(() => {
        toast.classList.add('translate-y-full', 'opacity-0');
    }, 3000);
}
</script>

<style>
.bg-seismo-orange\/10 {
    background-color: rgb(249 115 22 / 0.1);
}
.dark\:bg-seismo-orange\/20:is(.dark *) {
    background-color: rgb(249 115 22 / 0.2);
}
</style>
{% endblock %}