{% extends "base.html" %}

{% block css %}
table {
    width: 80%;
    border-collapse: collapse;
    margin: 1em auto;
}

th, td {
    padding: 10px;
    border: 1px solid #333;
    text-align: left;
}

th {
    background-color: #1f1f1f;
    color: white;
    position: sticky;
    top: 0;
    z-index: 2;
    cursor: pointer;
}

.sort-icon {
    font-size: 0.7em;
    margin-left: 4px;
}

tr:nth-child(even) {
    background-color: #181818;
}

tr:nth-child(odd) {
    background-color: #222;
}

tr:hover {
    background-color: #2a2a2a;
}

.filter-container {
    width: 80%;
    margin: 1em auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

select, .export-btn, .search-box, .clear-btn {
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #333;
    cursor: pointer;
}

.search-box {
    flex: 1;
}

.export-btn {
    background-color: #28a745;
    color: white;
    border: none;
}

.export-btn:hover {
    background-color: #218838;
}

.clear-btn {
    background-color: #dc3545;
    color: white;
    border: none;
}

.clear-btn:hover {
    background-color: #c82333;
}

.count-container {
    width: 80%;
    margin: 0 auto 10px;
    font-weight: bold;
    color: white;
}

.favorite-star {
    cursor: pointer;
    font-size: 1.2em;
    user-select: none;
    transition: color 0.2s;
}

.favorite-star:hover {
    transform: scale(1.2);
}

.favorite-star.active {
    color: #ffd700;
}

.favorites-btn {
    background-color: #ffd700;
    color: #000;
    border: none;
}

.favorites-btn:hover {
    background-color: #ffed4e;
}

.favorites-btn.active {
    background-color: #ff6b6b;
    color: white;
}
{% endblock %}

{% block body %}
<div class="filter-container">
    <input type="text" id="search-box" class="search-box" placeholder="Search by name or ID..." />

    <select id="role-filter"><option value="">All Roles</option></select>
    <select id="channel-filter"><option value="">All Channels</option></select>
    <select id="hw-filter"><option value="">All HW Models</option></select>
    <select id="firmware-filter"><option value="">All Firmware</option></select>

    <button class="favorites-btn" id="favorites-btn">⭐ Show Favorites</button>
    <button class="export-btn" id="export-btn">Export CSV</button>
    <button class="clear-btn" id="clear-btn">Clear Filters</button>
</div>

<div class="count-container">
    Showing <span id="node-count">0</span> nodes
</div>

<div id="node-list">
    <table>
        <thead>
            <tr>
                <th>Short <span class="sort-icon">▲</span></th>
                <th>Long Name <span class="sort-icon"></span></th>
                <th>HW Model <span class="sort-icon"></span></th>
                <th>Firmware <span class="sort-icon"></span></th>
                <th>Role <span class="sort-icon"></span></th>
                <th>Last Latitude <span class="sort-icon"></span></th>
                <th>Last Longitude <span class="sort-icon"></span></th>
                <th>Channel <span class="sort-icon"></span></th>
                <th>Last Seen <span class="sort-icon"></span></th>
                <th> </th>
            </tr>
        </thead>
        <tbody id="node-table-body">
            <tr><td colspan="10" style="text-align:center; color:white;">Loading nodes...</td></tr>
        </tbody>
    </table>
</div>

<script>
// =====================================================
// GLOBALS
// =====================================================
let allNodes = [];
let sortColumn = "short_name";
let sortAsc = true;
let showOnlyFavorites = false;

const headers = document.querySelectorAll("thead th");
const keyMap = [
    "short_name","long_name","hw_model","firmware","role",
    "last_lat","last_long","channel","last_seen_us"
];

// =====================================================
// FAVORITES SYSTEM (localStorage)
// =====================================================
function getFavorites() {
    const favorites = localStorage.getItem('nodelist_favorites');
    return favorites ? JSON.parse(favorites) : [];
}

function saveFavorites(favs) {
    localStorage.setItem('nodelist_favorites', JSON.stringify(favs));
}

function toggleFavorite(nodeId) {
    let favs = getFavorites();
    const idx = favs.indexOf(nodeId);
    if (idx >= 0) favs.splice(idx, 1);
    else favs.push(nodeId);
    saveFavorites(favs);
}

function isFavorite(nodeId) {
    return getFavorites().includes(nodeId);
}

// =====================================================
// "TIME AGO" FORMATTER
// =====================================================
function timeAgo(usTimestamp) {
    if (!usTimestamp) return "N/A";
    const ms = usTimestamp / 1000;
    const diff = Date.now() - ms;

    if (diff < 60000) return "just now";
    const mins = Math.floor(diff / 60000);
    if (mins < 60) return `${mins} min ago`;
    const hrs = Math.floor(mins / 60);
    if (hrs < 24) return `${hrs} hr ago`;
    const days = Math.floor(hrs / 24);
    return `${days} day${days > 1 ? "s" : ""} ago`;
}

// =====================================================
// DOM LOADED: FETCH NODES
// =====================================================
document.addEventListener("DOMContentLoaded", async function() {
    const tbody = document.getElementById("node-table-body");
    const roleFilter = document.getElementById("role-filter");
    const channelFilter = document.getElementById("channel-filter");
    const hwFilter = document.getElementById("hw-filter");
    const firmwareFilter = document.getElementById("firmware-filter");
    const searchBox = document.getElementById("search-box");
    const countSpan = document.getElementById("node-count");
    const exportBtn = document.getElementById("export-btn");
    const clearBtn = document.getElementById("clear-btn");
    const favoritesBtn = document.getElementById("favorites-btn");

    try {
        const res = await fetch("/api/nodes?days_active=3");
        if (!res.ok) throw new Error("Failed to fetch nodes");

        const data = await res.json();
        allNodes = data.nodes;

        populateFilters(allNodes);
        renderTable(allNodes);
        updateSortIcons();
    } catch (err) {
        tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; color:red;">Error loading nodes: ${err.message}</td></tr>`;
    }

    roleFilter.addEventListener("change", applyFilters);
    channelFilter.addEventListener("change", applyFilters);
    hwFilter.addEventListener("change", applyFilters);
    firmwareFilter.addEventListener("change", applyFilters);
    searchBox.addEventListener("input", applyFilters);
    exportBtn.addEventListener("click", exportToCSV);
    clearBtn.addEventListener("click", clearFilters);
    favoritesBtn.addEventListener("click", toggleFavoritesFilter);

    // STAR CLICK HANDLER
    tbody.addEventListener("click", e => {
        if (e.target.classList.contains('favorite-star')) {
            const nodeId = parseInt(e.target.dataset.nodeId);
            const isFav = isFavorite(nodeId);

            if (isFav) {
                e.target.classList.remove("active");
                e.target.textContent = "☆";
            } else {
                e.target.classList.add("active");
                e.target.textContent = "★";
            }
            toggleFavorite(nodeId);
        }
    });

    // SORTING
    headers.forEach((th, index) => {
        th.addEventListener("click", () => {
            let key = keyMap[index];
            sortAsc = (sortColumn === key) ? !sortAsc : true;
            sortColumn = key;
            applyFilters();
        });
    });

    // =====================================================
    // FILTER POPULATION
    // =====================================================
    function populateFilters(nodes) {
        const roles = new Set(), channels = new Set(), hws = new Set(), fws = new Set();

        nodes.forEach(n => {
            if (n.role) roles.add(n.role);
            if (n.channel) channels.add(n.channel);
            if (n.hw_model) hws.add(n.hw_model);
            if (n.firmware) fws.add(n.firmware);
        });

        fillSelect(roleFilter, roles);
        fillSelect(channelFilter, channels);
        fillSelect(hwFilter, hws);
        fillSelect(firmwareFilter, fws);
    }

    function fillSelect(select, values) {
        [...values].sort().forEach(v => {
            const opt = document.createElement("option");
            opt.value = v;
            opt.textContent = v;
            select.appendChild(opt);
        });
    }

    // =====================================================
    // FAVORITES FILTER
    // =====================================================
    function toggleFavoritesFilter() {
        showOnlyFavorites = !showOnlyFavorites;
        favoritesBtn.textContent = showOnlyFavorites ? "⭐ Show All" : "⭐ Show Favorites";
        favoritesBtn.classList.toggle("active", showOnlyFavorites);
        applyFilters();
    }

    // =====================================================
    // APPLY FILTERS + SORT
    // =====================================================
    function applyFilters() {
        const searchTerm = searchBox.value.trim().toLowerCase();

        let filtered = allNodes.filter(n => {
            const roleMatch = !roleFilter.value || n.role === roleFilter.value;
            const channelMatch = !channelFilter.value || n.channel === channelFilter.value;
            const hwMatch = !hwFilter.value || n.hw_model === hwFilter.value;
            const fwMatch = !firmwareFilter.value || n.firmware === firmwareFilter.value;
            const searchMatch =
                !searchTerm ||
                (n.long_name && n.long_name.toLowerCase().includes(searchTerm)) ||
                (n.short_name && n.short_name.toLowerCase().includes(searchTerm)) ||
                n.node_id.toString().includes(searchTerm);

            const favMatch = !showOnlyFavorites || isFavorite(n.node_id);

            return roleMatch && channelMatch && hwMatch && fwMatch && searchMatch && favMatch;
        });

        filtered = sortNodes(filtered, sortColumn, sortAsc);

        renderTable(filtered);
        updateSortIcons();
    }

    // =====================================================
    // RENDER TABLE
    // =====================================================
    function renderTable(nodes) {
        tbody.innerHTML = "";

        if (!nodes.length) {
            tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; color:white;">No nodes found</td></tr>`;
            countSpan.textContent = 0;
            return;
        }

        nodes.forEach(node => {
            const isFav = isFavorite(node.node_id);
            const star = isFav ? "★" : "☆";

            const row = document.createElement("tr");
            row.innerHTML = `
                <td>${node.short_name || "N/A"}</td>
                <td><a href="/node/${node.node_id}">${node.long_name || "N/A"}</a></td>
                <td>${node.hw_model || "N/A"}</td>
                <td>${node.firmware || "N/A"}</td>
                <td>${node.role || "N/A"}</td>
                <td>${node.last_lat ? (node.last_lat / 1e7).toFixed(7) : "N/A"}</td>
                <td>${node.last_long ? (node.last_long / 1e7).toFixed(7) : "N/A"}</td>
                <td>${node.channel || "N/A"}</td>
                <td>${timeAgo(node.last_seen_us)}</td>
                <td style="text-align:center;">
                    <span class="favorite-star ${isFav ? "active" : ""}" data-node-id="${node.node_id}">${star}</span>
                </td>
            `;
            tbody.appendChild(row);
        });

        countSpan.textContent = nodes.length;
    }

    // =====================================================
    // CLEAR FILTERS
    // =====================================================
    function clearFilters() {
        roleFilter.value = "";
        channelFilter.value = "";
        hwFilter.value = "";
        firmwareFilter.value = "";
        searchBox.value = "";
        sortColumn = "short_name";
        sortAsc = true;
        showOnlyFavorites = false;
        favoritesBtn.textContent = "⭐ Show Favorites";
        favoritesBtn.classList.remove("active");

        renderTable(allNodes);
        updateSortIcons();
    }

    // =====================================================
    // EXPORT CSV
    // =====================================================
    function exportToCSV() {
        const rows = [];
        const headerList = Array.from(headers).map(h => `"${h.innerText.replace(/▲|▼/g,'')}"`);
        rows.push(headerList.join(","));

        const trs = tbody.querySelectorAll("tr");
        trs.forEach(tr => {
            const cells = Array.from(tr.children).map(td => `"${td.innerText.replace(/"/g,'""')}"`);
            rows.push(cells.join(","));
        });

        const csv = "data:text/csv;charset=utf-8,\uFEFF" + rows.join("\n");
        const a = document.createElement("a");
        a.href = encodeURI(csv);
        a.download = "nodelist.csv";
        a.click();
    }

    // =====================================================
    // SORT NODES
    // =====================================================
    function sortNodes(nodes, key, asc) {
        return [...nodes].sort((a, b) => {
            let A = a[key];
            let B = b[key];

            // special handling for timestamp
            if (key === "last_seen_us") {
                A = A || 0;
                B = B || 0;
            }

            if (A < B) return asc ? -1 : 1;
            if (A > B) return asc ? 1 : -1;
            return 0;
        });
    }

    // =====================================================
    // SORT ICONS
    // =====================================================
    function updateSortIcons() {
        headers.forEach((th, i) => {
            const span = th.querySelector(".sort-icon");
            if (!span) return;
            span.textContent = keyMap[i] === sortColumn ? (sortAsc ? "▲" : "▼") : "";
        });
    }
});
</script>
{% endblock %}