{% extends "base.html" %}
{% import "components.html" as components %}

{% block title %}{{ crate::i18n::t("history-title", lang) }} - Remotto Console{% endblock %}

{% block content %}
<div class="flex h-screen">
    <!-- Sidebar -->
    {% call components::sidebar("history", lang) %}

    <!-- Main Content -->
    <main class="flex-1 overflow-auto md:ml-0 bg-slate-900">
        {% call components::header(crate::i18n::t("history-title", lang), username, lang) %}

        <div class="p-8 space-y-6">
            {% if is_demo %}
            <!-- Feature Lock Overlay for Trial -->
            <div class="glass rounded-xl border border-white/10 p-12 text-center">
                <div class="flex flex-col items-center justify-center gap-4">
                    <div class="w-20 h-20 rounded-full bg-slate-700/50 flex items-center justify-center">
                        <svg class="w-10 h-10 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold text-slate-300">{{ crate::i18n::t("history-locked-title", lang) }}</h3>
                    <p class="text-slate-400 max-w-md">{{ crate::i18n::t("history-locked-desc", lang) }}</p>
                </div>
            </div>
            {% else %}
            <!-- Time Range Filter -->
            <div class="flex justify-end items-center gap-3">
                <div id="custom-date-picker" class="hidden flex items-center gap-2">
                    <input type="date" id="custom-start-date"
                        class="bg-slate-700 text-slate-200 text-xs rounded px-2 py-1.5 border border-slate-600 focus:ring-1 focus:ring-primary-500 outline-none" />
                    <span class="text-slate-400 text-xs">〜</span>
                    <input type="date" id="custom-end-date"
                        class="bg-slate-700 text-slate-200 text-xs rounded px-2 py-1.5 border border-slate-600 focus:ring-1 focus:ring-primary-500 outline-none" />
                    <button onclick="applyCustomDateRange()"
                        class="px-3 py-1.5 bg-primary-600 hover:bg-primary-500 rounded text-xs font-medium text-white transition-colors">
                        {{ crate::i18n::t("print-mgmt-apply", lang) }}
                    </button>
                </div>
                <div class="flex bg-slate-800/50 rounded-lg p-1 border border-slate-600 gap-1">
                    <button onclick="loadCharts('24h')"
                        class="range-btn px-4 py-1.5 rounded-md hover:bg-white/10 text-xs font-medium transition-colors text-slate-300 hover:text-white"
                        data-range="24h">
                        {{ crate::i18n::t("print-mgmt-period-24h", lang) }}
                    </button>
                    <button onclick="loadCharts('1m')"
                        class="range-btn px-4 py-1.5 rounded-md hover:bg-white/10 text-xs font-medium transition-colors text-slate-300 hover:text-white"
                        data-range="1m">
                        {{ crate::i18n::t("print-mgmt-period-1m", lang) }}
                    </button>
                    <button onclick="loadCharts('6m')"
                        class="range-btn px-4 py-1.5 rounded-md hover:bg-white/10 text-xs font-medium transition-colors text-slate-300 hover:text-white"
                        data-range="6m">
                        {{ crate::i18n::t("print-mgmt-period-6m", lang) }}
                    </button>
                    <button onclick="loadCharts('1y')"
                        class="range-btn px-4 py-1.5 rounded-md hover:bg-white/10 text-xs font-medium transition-colors text-slate-300 hover:text-white"
                        data-range="1y">
                        {{ crate::i18n::t("print-mgmt-period-1y", lang) }}
                    </button>
                    <button onclick="toggleCustomDatePicker()"
                        class="range-btn px-4 py-1.5 rounded-md hover:bg-white/10 text-xs font-medium transition-colors text-slate-300 hover:text-white"
                        data-range="custom">
                        {{ crate::i18n::t("print-mgmt-period-custom", lang) }}
                    </button>
                </div>
            </div>

            <!-- Charts -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- User Usage Chart -->
                <div class="glass rounded-xl border border-white/10 p-4">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="text-sm font-semibold text-slate-300">{{ crate::i18n::t("common-chart-user-usage",
                            lang) }}</h3>
                        <button onclick="exportUserUsageCSV()"
                            class="px-3 py-1.5 rounded-lg text-xs border border-white/20 hover:bg-white/10 text-slate-300 flex items-center gap-1">
                            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                            CSV
                        </button>
                    </div>
                    <div>
                        <canvas id="userUsageChart"></canvas>
                    </div>
                    <div class="flex justify-center items-center gap-4 mt-3">
                        <button id="user-prev-btn" onclick="changePage('user', -1)"
                            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed rounded text-xs text-white transition-colors">
                            {{ crate::i18n::t("common-prev", lang) }}
                        </button>
                        <span id="user-page-indicator" class="text-xs text-slate-300 font-mono">1</span>
                        <button id="user-next-btn" onclick="changePage('user', 1)"
                            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed rounded text-xs text-white transition-colors">
                            {{ crate::i18n::t("common-next", lang) }}
                        </button>
                    </div>
                </div>
                <!-- Device Usage Chart -->
                <div class="glass rounded-xl border border-white/10 p-4">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="text-sm font-semibold text-slate-300">{{ crate::i18n::t("common-chart-device-usage",
                            lang) }}</h3>
                        <button onclick="exportDeviceUsageCSV()"
                            class="px-3 py-1.5 rounded-lg text-xs border border-white/20 hover:bg-white/10 text-slate-300 flex items-center gap-1">
                            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                            CSV
                        </button>
                    </div>
                    <div>
                        <canvas id="deviceUsageChart"></canvas>
                    </div>
                    <div class="flex justify-center items-center gap-4 mt-3">
                        <button id="device-prev-btn" onclick="changePage('device', -1)"
                            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed rounded text-xs text-white transition-colors">
                            {{ crate::i18n::t("common-prev", lang) }}
                        </button>
                        <span id="device-page-indicator" class="text-xs text-slate-300 font-mono">1</span>
                        <button id="device-next-btn" onclick="changePage('device', 1)"
                            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed rounded text-xs text-white transition-colors">
                            {{ crate::i18n::t("common-next", lang) }}
                        </button>
                    </div>
                </div>
            </div>

            <!-- History Table -->
            <div class="glass rounded-xl border border-white/10 p-4">
                <div class="flex justify-between items-center mb-3">
                    <h3 class="text-sm font-semibold text-slate-300">{{ crate::i18n::t("history-title", lang) }}</h3>
                    <div class="flex items-center gap-2">
                        <input type="text" id="history-search"
                            placeholder='{{ crate::i18n::t("common-search", lang) }}'
                            oninput="debounceHistorySearch()"
                            class="bg-slate-700 text-slate-200 text-xs rounded px-3 py-1.5 w-64 border border-slate-600 focus:ring-1 focus:ring-primary-500 outline-none placeholder-slate-500" />
                        <button onclick="exportHistoryCSV()"
                            class="px-3 py-1.5 rounded-lg text-xs border border-white/20 hover:bg-white/10 text-slate-300 flex items-center gap-1">
                            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                            CSV
                        </button>
                    </div>
                </div>
                <div class="overflow-hidden rounded-lg">
                    <table class="w-full text-left">
                        <thead class="bg-slate-800/50 text-xs uppercase text-slate-400 font-medium">
                            <tr>
                                <th class="px-6 py-4">{{ crate::i18n::t("common-date", lang) }}</th>
                                <th class="px-6 py-4">{{ crate::i18n::t("devices-hostname", lang) }}</th>
                                <th class="px-6 py-4">{{ crate::i18n::t("devices-user", lang) }}</th>
                                <th class="px-6 py-4">{{ crate::i18n::t("devices-ip", lang) }}</th>
                                <th class="px-6 py-4">{{ crate::i18n::t("devices-mac", lang) }}</th>
                            </tr>
                        </thead>
                        <tbody id="history-table-body" class="divide-y divide-white/10 text-sm">
                            <tr>
                                <td colspan="5" class="px-6 py-4 text-center text-slate-500">{{
                                    crate::i18n::t("common-loading", lang) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="flex justify-center items-center gap-4 mt-3">
                    <select id="history-page-size" onchange="changeHistoryPageSize(this.value)" class="bg-slate-700 border border-slate-600 rounded text-xs text-white px-2 py-1">
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                    </select>
                    <button id="history-prev-btn" onclick="changeHistoryPage(-1)"
                        class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed rounded text-xs text-white transition-colors">
                        {{ crate::i18n::t("common-prev", lang) }}
                    </button>
                    <span id="history-page-indicator" class="text-xs text-slate-300 font-mono">1</span>
                    <button id="history-next-btn" onclick="changeHistoryPage(1)"
                        class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed rounded text-xs text-white transition-colors">
                        {{ crate::i18n::t("common-next", lang) }}
                    </button>
                </div>
            </div>
            {% endif %}
        </div>
    </main>
</div>

{% if !is_demo %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    let userChart = null;
    let deviceChart = null;
    let currentRange = '24h';
    let customStartDate = null;
    let customEndDate = null;
    let LIMIT = 50;
    let pages = { user: 1, device: 1 };

    function toLocalDateStr(d) {
        return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');
    }

    // Translation keys
    const I18N = {
        hourSuffix: '{{ crate::i18n::t("common-unit-hour-suffix", lang) }}',
        minuteSuffix: '{{ crate::i18n::t("common-unit-minute-suffix", lang) }}',
        usageTimeLabel: '{{ crate::i18n::t("common-usage-time-label", lang) }}'
    };

    // Cookie helpers
    function setCookie(name, value, days = 365) {
        const expires = new Date(Date.now() + days * 864e5).toUTCString();
        document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
    }

    function getCookie(name) {
        const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
        return match ? decodeURIComponent(match[2]) : null;
    }

    // Restore custom dates from cookie on load
    (function restoreCustomDates() {
        const savedStart = getCookie('historyCustomStart');
        const savedEnd = getCookie('historyCustomEnd');
        if (savedStart && savedEnd) {
            customStartDate = savedStart;
            customEndDate = savedEnd;
        }
    })();

    // CSV Export helper
    function downloadCSV(filename, csvContent) {
        const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = filename;
        link.click();
    }

    function toggleCustomDatePicker() {
        const picker = document.getElementById('custom-date-picker');
        picker.classList.toggle('hidden');

        if (!picker.classList.contains('hidden')) {
            const savedStart = getCookie('historyCustomStart');
            const savedEnd = getCookie('historyCustomEnd');

            if (savedStart && savedEnd) {
                document.getElementById('custom-start-date').value = savedStart;
                document.getElementById('custom-end-date').value = savedEnd;
            } else {
                const today = new Date();
                const monthAgo = new Date(today);
                monthAgo.setDate(today.getDate() - 30);
                document.getElementById('custom-end-date').value = toLocalDateStr(today);
                document.getElementById('custom-start-date').value = toLocalDateStr(monthAgo);
            }
        }
    }

    function applyCustomDateRange() {
        const startInput = document.getElementById('custom-start-date').value;
        const endInput = document.getElementById('custom-end-date').value;

        if (startInput && endInput) {
            customStartDate = startInput;
            customEndDate = endInput;
            setCookie('historyCustomStart', startInput);
            setCookie('historyCustomEnd', endInput);
            currentRange = 'custom';
            pages = { user: 1, device: 1 };
            loadCharts('custom');
            document.getElementById('custom-date-picker').classList.add('hidden');
        }
    }

    function formatSeconds(secs) {
        const h = Math.floor(secs / 3600);
        const m = Math.floor((secs % 3600) / 60);
        if (h > 0) return `${h}${I18N.hourSuffix}${m}${I18N.minuteSuffix}`;
        return `${m}${I18N.minuteSuffix}`;
    }

    async function loadCharts(range) {
        currentRange = range || currentRange;

        // Update button styles
        document.querySelectorAll('.range-btn').forEach(btn => {
            btn.classList.remove('bg-primary-600', 'text-white');
            if (btn.dataset.range === currentRange) {
                btn.classList.add('bg-primary-600', 'text-white');
            }
        });

        // Update page indicators
        const userPageIndicator = document.getElementById('user-page-indicator');
        if (userPageIndicator) userPageIndicator.textContent = pages.user;

        const devicePageIndicator = document.getElementById('device-page-indicator');
        if (devicePageIndicator) devicePageIndicator.textContent = pages.device;

        // Fetch user stats
        try {
            let query = `?range=${currentRange}&limit=${LIMIT}&page=${pages.user}`;
            if (currentRange === 'custom' && customStartDate && customEndDate) {
                query += `&start_date=${customStartDate}&end_date=${customEndDate}`;
            }
            const userRes = await fetch(`/admin/api/usage-stats/user${query}`);
            const userData = await userRes.json();

            if (pages.user > 1 && userData.length === 0) {
                pages.user--;
                if (userPageIndicator) userPageIndicator.textContent = pages.user;
                return;
            }

            renderChart('userUsageChart', userData, 'rgba(59, 130, 246, 0.8)', userChart, (c) => userChart = c);

            const prevBtn = document.getElementById('user-prev-btn');
            const nextBtn = document.getElementById('user-next-btn');
            if (prevBtn) prevBtn.disabled = pages.user <= 1;
            if (nextBtn) nextBtn.disabled = userData.length < LIMIT;

        } catch (e) {
            console.error('Failed to load user stats:', e);
        }

        // Fetch device stats
        try {
            let query = `?range=${currentRange}&limit=${LIMIT}&page=${pages.device}`;
            if (currentRange === 'custom' && customStartDate && customEndDate) {
                query += `&start_date=${customStartDate}&end_date=${customEndDate}`;
            }
            const deviceRes = await fetch(`/admin/api/usage-stats/device${query}`);
            const deviceData = await deviceRes.json();

            if (pages.device > 1 && deviceData.length === 0) {
                pages.device--;
                if (devicePageIndicator) devicePageIndicator.textContent = pages.device;
                return;
            }

            renderChart('deviceUsageChart', deviceData, 'rgba(16, 185, 129, 0.8)', deviceChart, (c) => deviceChart = c);

            const prevBtn = document.getElementById('device-prev-btn');
            const nextBtn = document.getElementById('device-next-btn');
            if (prevBtn) prevBtn.disabled = pages.device <= 1;
            if (nextBtn) nextBtn.disabled = deviceData.length < LIMIT;

        } catch (e) {
            console.error('Failed to load device stats:', e);
        }
    }

    function changePage(type, delta) {
        const newPage = pages[type] + delta;
        if (newPage < 1) return;
        pages[type] = newPage;
        loadCharts(currentRange);
    }

    function renderChart(canvasId, data, color, existingChart, setChart) {
        const ctx = document.getElementById(canvasId).getContext('2d');

        const container = ctx.canvas.parentNode;
        const newHeight = Math.max(300, data.length * 30);
        container.style.height = `${newHeight}px`;

        if (existingChart) {
            existingChart.destroy();
        }

        const labels = data.map(d => d.label);
        const values = data.map(d => d.value / 3600);

        const chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: I18N.usageTimeLabel,
                    data: values,
                    backgroundColor: color,
                    borderColor: color.replace('0.8', '1'),
                    borderWidth: 1,
                    borderRadius: 4,
                    barThickness: 'flex',
                    maxBarThickness: 30,
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: (ctx) => formatSeconds(ctx.raw * 3600)
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        grid: { color: document.documentElement.classList.contains('light') ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.1)' },
                        ticks: { color: document.documentElement.classList.contains('light') ? '#475569' : '#94a3b8' }
                    },
                    y: {
                        grid: { display: false },
                        ticks: { color: document.documentElement.classList.contains('light') ? '#1e293b' : '#e2e8f0' }
                    }
                }
            }
        });
        setChart(chart);
    }

    // CSV Export functions
    async function exportUserUsageCSV() {
        try {
            let query = `?range=${currentRange}&limit=10000`;
            if (currentRange === 'custom' && customStartDate && customEndDate) {
                query += `&start_date=${customStartDate}&end_date=${customEndDate}`;
            }
            const res = await fetch(`/admin/api/usage-stats/user${query}`);
            const data = await res.json();

            if (data.length === 0) {
                showNotification('{{ crate::i18n::t("common-no-export-data", lang) }}', 'error');
                return;
            }
            let csv = 'username,usage_seconds,usage_hours\n';
            data.forEach(d => {
                csv += `"${d.label}",${Math.round(d.value)},${(d.value / 3600).toFixed(2)}\n`;
            });
            downloadCSV('user_usage_stats.csv', csv);
        } catch (e) {
            console.error('Export failed:', e);
            showNotification('{{ crate::i18n::t("common-export-failed", lang) }}', 'error');
        }
    }

    async function exportDeviceUsageCSV() {
        try {
            let query = `?range=${currentRange}&limit=10000`;
            if (currentRange === 'custom' && customStartDate && customEndDate) {
                query += `&start_date=${customStartDate}&end_date=${customEndDate}`;
            }
            const res = await fetch(`/admin/api/usage-stats/device${query}`);
            const data = await res.json();

            if (data.length === 0) {
                showNotification('{{ crate::i18n::t("common-no-export-data", lang) }}', 'error');
                return;
            }
            let csv = 'hostname,usage_seconds,usage_hours\n';
            data.forEach(d => {
                csv += `"${d.label}",${Math.round(d.value)},${(d.value / 3600).toFixed(2)}\n`;
            });
            downloadCSV('device_usage_stats.csv', csv);
        } catch (e) {
            console.error('Export failed:', e);
            showNotification('{{ crate::i18n::t("common-export-failed", lang) }}', 'error');
        }
    }

    // History table functions
    let HISTORY_LIMIT = 50;
    let historyPage = 1;
    let historySearch = '';
    let historySearchTimeout = null;

    function debounceHistorySearch() {
        clearTimeout(historySearchTimeout);
        historySearchTimeout = setTimeout(() => {
            historySearch = document.getElementById('history-search').value;
            historyPage = 1;
            loadHistory();
        }, 300);
    }

    function changeHistoryPage(delta) {
        const newPage = historyPage + delta;
        if (newPage < 1) return;
        historyPage = newPage;
        loadHistory();
    }

    function changeHistoryPageSize(val) {
        HISTORY_LIMIT = parseInt(val) || 50;
        historyPage = 1;
        loadHistory();
    }

    async function loadHistory() {
        const tbody = document.getElementById('history-table-body');
        const pageIndicator = document.getElementById('history-page-indicator');
        if (pageIndicator) pageIndicator.textContent = historyPage;

        try {
            const params = new URLSearchParams({
                page: historyPage,
                limit: HISTORY_LIMIT
            });
            if (historySearch) params.append('search', historySearch);

            const res = await fetch(`/admin/api/history/json?${params}`);
            if (!res.ok) throw new Error("Failed to fetch");
            const data = await res.json();

            if (historyPage > 1 && data.length === 0) {
                historyPage--;
                if (pageIndicator) pageIndicator.textContent = historyPage;
                return;
            }

            tbody.innerHTML = data.map(l => `
                <tr class="hover:bg-white/5 transition-colors">
                    <td class="px-6 py-4 text-slate-400 text-xs whitespace-nowrap">${new Date(l.login_at).toLocaleString('{{ lang }}')}</td>
                    <td class="px-6 py-4 font-medium text-white">${l.hostname || '-'}</td>
                    <td class="px-6 py-4 text-slate-300">${l.username || '-'}</td>
                    <td class="px-6 py-4 text-slate-400">${l.ip_address || '-'}</td>
                    <td class="px-6 py-4 text-slate-400">${l.mac_address || '-'}</td>
                </tr>
            `).join('');

            if (data.length === 0) tbody.innerHTML = `<tr><td colspan="5" class="px-6 py-8 text-center text-slate-500">{{ crate::i18n::t("common-no-history", lang) }}</td></tr>`;

            const prevBtn = document.getElementById('history-prev-btn');
            const nextBtn = document.getElementById('history-next-btn');
            if (prevBtn) prevBtn.disabled = historyPage <= 1;
            if (nextBtn) nextBtn.disabled = data.length < HISTORY_LIMIT;

        } catch (e) {
            console.error(e);
            tbody.innerHTML = `<tr><td colspan="5" class="px-6 py-4 text-center text-red-400">{{ crate::i18n::t("common-error-loading-history", lang) }}</td></tr>`;
        }
    }

    function formatLocalTime(dateStr) {
        if (!dateStr) return '';
        const d = new Date(dateStr);
        if (isNaN(d.getTime())) return '';
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        const hours = String(d.getHours()).padStart(2, '0');
        const minutes = String(d.getMinutes()).padStart(2, '0');
        const seconds = String(d.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    async function exportHistoryCSV() {
        try {
            const params = new URLSearchParams({ limit: 10000, range: currentRange });
            if (currentRange === 'custom' && customStartDate && customEndDate) {
                params.append('start_date', customStartDate);
                params.append('end_date', customEndDate);
            }
            if (historySearch) params.append('search', historySearch);

            const res = await fetch(`/admin/api/history/json?${params}`);
            const data = await res.json();
            const items = data.items || data;

            if (items.length === 0) {
                showNotification('{{ crate::i18n::t("common-no-export-data", lang) }}', 'error');
                return;
            }
            let csv = 'login_at,hostname,username,ip_address,mac_address\n';
            items.forEach(d => {
                const date = formatLocalTime(d.login_at);
                csv += `"${date}","${d.hostname || ''}","${d.username || ''}","${d.ip_address || ''}","${d.mac_address || ''}"\n`;
            });
            downloadCSV('login_history.csv', csv);
        } catch (e) {
            console.error('Export failed:', e);
            showNotification('{{ crate::i18n::t("common-export-failed", lang) }}', 'error');
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        const monthInput = document.getElementById('month-input');
        if (monthInput) {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            monthInput.value = `${year}-${month}`;
        }

        loadCharts('24h');
        loadHistory();
        // Auto-refresh every 30s
        setInterval(() => { loadCharts(currentRange); loadHistory(); }, 30000);
    });
</script>
{% endif %}
{% endblock %}