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

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

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

    <!-- Main Content -->
    <main class="flex-1 overflow-auto md:ml-0 bg-slate-900">
        {% call components::header(crate::i18n::t("apprestrict-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("apprestrict-locked-title", lang) }}</h3>
                    <p class="text-slate-400 max-w-md">{{ crate::i18n::t("apprestrict-locked-desc", lang) }}</p>
                </div>
            </div>
            {% else %}

            <!-- Tabs Navigation -->
            <div class="flex border-b border-slate-700">
                <button onclick="switchTab('usage')" id="tab-usage"
                    class="tab-btn px-6 py-3 text-sm font-semibold border-b-2 border-primary-500 text-white">
                    {{ crate::i18n::t("appusage-title", lang) }}
                </button>
                <button onclick="switchTab('restrictions')" id="tab-restrictions"
                    class="tab-btn px-6 py-3 text-sm font-semibold text-slate-400 hover:text-white border-b-2 border-transparent">
                    {{ crate::i18n::t("apprestrict-group-settings", lang) }}
                </button>
            </div>

            <!-- ===== Tab: Restrictions ===== -->
            <div id="content-restrictions" class="tab-content hidden space-y-6">
                <div class="glass rounded-xl border border-white/10 p-6">
                    <h3 class="text-lg font-semibold mb-6">{{ crate::i18n::t("apprestrict-group-settings", lang) }}</h3>
                    <div id="groups-container" class="space-y-6">
                        <div class="text-center text-slate-400 py-8">
                            {{ crate::i18n::t("common-loading", lang) }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===== Tab: App Usage ===== -->
            <div id="content-usage" class="tab-content space-y-6">

                <!-- Filter Bar (print_management style) -->
                <div class="flex justify-end items-center gap-3 flex-wrap">
                    <!-- Custom date picker -->
                    <div id="custom-date-picker" class="hidden flex items-center gap-2 bg-slate-800/80 p-1.5 rounded-lg border border-slate-600">
                        <input type="date" id="custom-start"
                            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 transition-colors" />
                        <span class="text-slate-400 text-xs">〜</span>
                        <input type="date" id="custom-end"
                            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 transition-colors" />
                        <button onclick="applyCustomPeriod()"
                            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>
                    <!-- Period buttons -->
                    <div class="flex bg-slate-800/50 rounded-lg p-1 border border-slate-700 gap-1">
                        <button onclick="setUsagePeriod('24h')" data-period="24h"
                            class="usage-period-btn px-4 py-1.5 rounded-md text-xs font-medium transition-colors bg-primary-600 text-white">
                            {{ crate::i18n::t("print-mgmt-period-24h", lang) }}
                        </button>
                        <button onclick="setUsagePeriod('1m')" data-period="1m"
                            class="usage-period-btn px-4 py-1.5 rounded-md text-xs font-medium transition-colors text-slate-300 hover:text-white hover:bg-white/5">
                            {{ crate::i18n::t("print-mgmt-period-1m", lang) }}
                        </button>
                        <button onclick="setUsagePeriod('6m')" data-period="6m"
                            class="usage-period-btn px-4 py-1.5 rounded-md text-xs font-medium transition-colors text-slate-300 hover:text-white hover:bg-white/5">
                            {{ crate::i18n::t("print-mgmt-period-6m", lang) }}
                        </button>
                        <button onclick="setUsagePeriod('1y')" data-period="1y"
                            class="usage-period-btn px-4 py-1.5 rounded-md text-xs font-medium transition-colors text-slate-300 hover:text-white hover:bg-white/5">
                            {{ crate::i18n::t("print-mgmt-period-1y", lang) }}
                        </button>
                        <button onclick="toggleCustomDatePicker()" data-period="custom"
                            class="usage-period-btn px-4 py-1.5 rounded-md text-xs font-medium transition-colors text-slate-300 hover:text-white hover:bg-white/5">
                            {{ crate::i18n::t("print-mgmt-period-custom", lang) }}
                        </button>
                    </div>
                </div>

                <!-- Charts Row -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- App chart -->
                    <div class="bg-slate-800/50 rounded-xl border border-white/10 p-4">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-sm font-semibold text-slate-300">{{ crate::i18n::t("appusage-chart-by-app", lang) }}</h3>
                            <div class="flex items-center gap-2">
                                <button onclick="downloadChartCsvByApp()" 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"/></svg>
                                    CSV
                                </button>
                            </div>
                        </div>
                        <div class="relative w-full h-[280px]">
                            <canvas id="chartByApp"></canvas>
                        </div>
                        <div id="appChartPagination" class="flex items-center justify-between mt-3" style="display:none!important">
                            <span id="appChartPageInfo" class="text-xs text-slate-500"></span>
                            <div id="appChartPageButtons" class="flex items-center gap-1"></div>
                        </div>
                    </div>
                    <!-- Device chart -->
                    <div class="bg-slate-800/50 rounded-xl border border-white/10 p-4">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-sm font-semibold text-slate-300">{{ crate::i18n::t("appusage-chart-by-device", lang) }}</h3>
                            <div class="flex items-center gap-2">
                                <button onclick="downloadChartCsvByDevice()" 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"/></svg>
                                    CSV
                                </button>
                            </div>
                        </div>
                        <div class="relative w-full h-[340px]">
                            <canvas id="chartByDevice"></canvas>
                        </div>
                        <div id="deviceChartPagination" class="flex items-center justify-between mt-3" style="display:none!important">
                            <span id="deviceChartPageInfo" class="text-xs text-slate-500"></span>
                            <div id="deviceChartPageButtons" class="flex items-center gap-1"></div>
                        </div>
                    </div>
                </div>

                <!-- Log Table -->
                <div class="bg-slate-800/50 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("appusage-log", lang) }}</h3>
                        <div class="flex items-center gap-3">
                            <!-- Search -->
                            <input type="text" id="log-search" placeholder="{{ crate::i18n::t("common-search", lang) }}"
                                oninput="debounceSearch()"
                                class="bg-slate-700 text-slate-200 text-xs rounded px-3 py-1.5 w-56 border border-slate-600 focus:ring-1 focus:ring-primary-500 outline-none placeholder-slate-500">

                            <!-- CSV export -->
                            <button onclick="exportCsv()"
                                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"/>
                                </svg>
                                CSV
                            </button>
                        </div>
                    </div>
                    <div class="overflow-x-auto 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-4 py-3">{{ crate::i18n::t("appusage-col-time", lang) }}</th>
                                    <th class="px-4 py-3">{{ crate::i18n::t("appusage-col-hostname", lang) }}</th>
                                    <th class="px-4 py-3">{{ crate::i18n::t("appusage-col-user", lang) }}</th>
                                    <th class="px-4 py-3">{{ crate::i18n::t("appusage-col-app", lang) }}</th>
                                    <th class="px-4 py-3">プロセス名</th>
                                </tr>
                            </thead>
                            <tbody id="log-tbody" class="divide-y divide-white/10 text-sm">
                                <tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">{{ crate::i18n::t("common-loading", lang) }}</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- Pagination -->
                    <div id="pagination" class="flex items-center justify-between mt-3" style="display:none!important">
                        <span id="page-info" class="text-xs text-slate-500"></span>
                        <div id="page-buttons" class="flex items-center gap-1"></div>
                    </div>
                </div>
            </div>

            {% endif %}
        </div>
    </main>
</div>

{% if !is_demo %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
    // ===================== Restriction Tab =====================
    const i18n = {
        enabled: '{{ crate::i18n::t("apprestrict-enabled", lang) }}',
        disabled: '{{ crate::i18n::t("apprestrict-disabled", lang) }}',
        enableRestriction: '{{ crate::i18n::t("common-enabled", lang) }}',
        apps: '{{ crate::i18n::t("apprestrict-apps", lang) }}',
        appsHint: '{{ crate::i18n::t("apprestrict-apps-hint", lang) }}',
        saved: '{{ crate::i18n::t("apprestrict-saved", lang) }}',
        saveFailed: '{{ crate::i18n::t("apprestrict-save-failed", lang) }}',
        save: '{{ crate::i18n::t("common-save", lang) }}',
        noGroups: '{{ crate::i18n::t("groups-no-groups", lang) }}'
    };
    let groupsData = [];

    async function loadGroups() {
        try {
            const response = await fetch('/admin/api/groups-json');
            const data = await response.json();
            groupsData = data.groups || [];
            renderGroups();
        } catch (error) { console.error('Failed to load groups:', error); }
    }

    async function loadRestriction(groupId) {
        try {
            const response = await fetch(`/admin/api/groups/${groupId}/app-restrictions`);
            if (response.ok) {
                const data = await response.json();
                if (data.ok && data.restriction) return data.restriction;
            }
        } catch(e) {}
        return { enabled: false, apps: [] };
    }

    async function renderGroups() {
        const container = document.getElementById('groups-container');
        if (groupsData.length === 0) {
            container.innerHTML = `<div class="text-center text-slate-400 py-8">${i18n.noGroups}</div>`;
            return;
        }
        let html = '';
        for (const group of groupsData) {
            const restriction = await loadRestriction(group.id);
            const enabledClass = restriction.enabled ? 'bg-green-500/20 text-green-400' : 'bg-slate-600/50 text-slate-400';
            const enabledText = restriction.enabled ? i18n.enabled : i18n.disabled;
            const appsText = (restriction.apps || []).join('\n');
            html += `
            <div class="border border-white/10 rounded-lg p-6 bg-white/5" data-group-id="${group.id}">
                <div class="flex justify-between items-center mb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-500 to-cyan-500 flex items-center justify-center text-lg font-bold">
                            ${group.name.charAt(0).toUpperCase()}
                        </div>
                        <div>
                            <h4 class="font-medium text-white">${group.name}</h4>
                            <span class="px-2 py-0.5 rounded-full text-xs font-medium ${enabledClass}">${enabledText}</span>
                        </div>
                    </div>
                    <div class="flex items-center gap-3">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer restriction-enabled" data-group="${group.id}" ${restriction.enabled ? 'checked' : ''}>
                            <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-500 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600"></div>
                        </label>
                        <span class="text-sm text-slate-300">${i18n.enableRestriction}</span>
                    </div>
                </div>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-2">${i18n.apps}</label>
                        <textarea class="restriction-apps w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm resize-none font-mono" rows="5" data-group="${group.id}" placeholder="notepad&#10;calculatorapp">${appsText}</textarea>
                        <p class="text-xs text-slate-500 mt-1">${i18n.appsHint}</p>
                    </div>
                    <div class="flex justify-end">
                        <button onclick="saveRestriction('${group.id}')" class="px-4 py-2 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all text-sm">
                            ${i18n.save}
                        </button>
                    </div>
                </div>
            </div>`;
        }
        container.innerHTML = html;
    }

    async function saveRestriction(groupId) {
        const enabled = document.querySelector(`.restriction-enabled[data-group="${groupId}"]`).checked;
        const appsText = document.querySelector(`.restriction-apps[data-group="${groupId}"]`).value;
        const apps = appsText.split('\n').map(a => a.trim().toLowerCase()).filter(a => a.length > 0);
        try {
            const response = await fetch(`/admin/api/groups/${groupId}/app-restrictions`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ mode: 'blocklist', apps, enabled })
            });
            if (response.ok) {
                showNotification(i18n.saved, 'success');
                const card = document.querySelector(`[data-group-id="${groupId}"]`);
                const badge = card.querySelector('.rounded-full');
                if (enabled) {
                    badge.className = 'px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/20 text-green-400';
                    badge.textContent = i18n.enabled;
                } else {
                    badge.className = 'px-2 py-0.5 rounded-full text-xs font-medium bg-slate-600/50 text-slate-400';
                    badge.textContent = i18n.disabled;
                }
            } else { showNotification(i18n.saveFailed, 'error'); }
        } catch(e) { showNotification(i18n.saveFailed, 'error'); }
    }

    // ===================== Tab Switching =====================
    function switchTab(tabName) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('border-primary-500', 'text-white');
            btn.classList.add('border-transparent', 'text-slate-400');
        });
        document.getElementById(`content-${tabName}`).classList.remove('hidden');
        const activeBtn = document.getElementById(`tab-${tabName}`);
        activeBtn.classList.add('border-primary-500', 'text-white');
        activeBtn.classList.remove('border-transparent', 'text-slate-400');
        if (history.replaceState) history.replaceState(null, null, '#' + tabName);
        else location.hash = tabName;
        if (tabName === 'usage') {
            if (!usageLoaded) { setUsagePeriod('24h'); usageLoaded = true; }
        }
    }

    // ===================== App Usage Tab =====================
    let usageLoaded = false;

    document.addEventListener('DOMContentLoaded', function() {
        loadGroups();
        const hash = window.location.hash.replace('#', '');
        if (hash === 'restrictions') {
            switchTab('restrictions');
        } else {
            // Default tab is usage – load charts immediately
            usageLoaded = true;
            setUsagePeriod('24h');
        }
        // Auto-refresh every 30s
        setInterval(() => { if (usageLoaded) { loadAll(); loadPage(); } }, 30000);
    });

    let usageSince = null, usageUntil = null;
    let usagePeriodMode = '24h';
    let customStart = null, customEnd = null;

    function toLocalDateStr(d) {
        return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');
    }
    let chartApp = null, chartDevice = null;
    let currentPage = 1, currentPageSize = 50, currentTotal = 0;
    let searchTimeout = null, logSearch = '';
    // Chart pagination state
    const CHART_PAGE_SIZE = 10;
    let byAppData = [], byDeviceStackedData = [], byDeviceFullData = [];
    let appChartPage = 1, deviceChartPage = 1;

    function setUsagePeriod(period) {
        usagePeriodMode = period;
        if (period !== 'custom') {
            const days = period === '24h' ? 1 : period === '1m' ? 30 : period === '6m' ? 180 : 365;
            const now = new Date();
            usageSince = new Date(now - days * 86400000).toISOString();
            usageUntil = null;
            document.getElementById('custom-date-picker').classList.add('hidden');
        }
        updatePeriodButtons();
        currentPage = 1;
        loadUsageData();
    }

    function toggleCustomDatePicker() {
        const picker = document.getElementById('custom-date-picker');
        picker.classList.toggle('hidden');
        if (!picker.classList.contains('hidden') && !document.getElementById('custom-start').value) {
            const today = new Date(), past = new Date();
            past.setDate(today.getDate() - 30);
            document.getElementById('custom-end').value = toLocalDateStr(today);
            document.getElementById('custom-start').value = toLocalDateStr(past);
        }
    }

    function applyCustomPeriod() {
        const s = document.getElementById('custom-start').value;
        const e = document.getElementById('custom-end').value;
        if (!s || !e) return;
        usagePeriodMode = 'custom';
        usageSince = new Date(s + 'T00:00:00').toISOString();
        usageUntil = new Date(e + 'T23:59:59').toISOString();
        updatePeriodButtons();
        document.getElementById('custom-date-picker').classList.add('hidden');
        currentPage = 1;
        loadUsageData();
    }

    function updatePeriodButtons() {
        document.querySelectorAll('.usage-period-btn').forEach(btn => {
            if (btn.dataset.period === usagePeriodMode) {
                btn.classList.add('bg-primary-600', 'text-white');
                btn.classList.remove('text-slate-300', 'hover:text-white', 'hover:bg-white/5');
            } else {
                btn.classList.remove('bg-primary-600', 'text-white');
                btn.classList.add('text-slate-300', 'hover:text-white', 'hover:bg-white/5');
            }
        });
    }

    function exportCsv() {
        let url = '/admin/api/app-usage/export-csv';
        const params = [];
        if (usageSince) params.push('since=' + encodeURIComponent(usageSince));
        if (usageUntil) params.push('until=' + encodeURIComponent(usageUntil));
        if (logSearch) params.push('search=' + encodeURIComponent(logSearch));
        if (params.length) url += '?' + params.join('&');
        window.location.href = url;
    }

    function debounceSearch() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            logSearch = document.getElementById('log-search').value;
            currentPage = 1;
            loadPage();
        }, 300);
    }


    async function loadUsageData() {
        // Load charts with limit=1 (just need stats)
        let url = '/admin/api/app-usage?limit=1&offset=0';
        if (usageSince) url += '&since=' + encodeURIComponent(usageSince);
        if (usageUntil) url += '&until=' + encodeURIComponent(usageUntil);
        const res = await fetch(url);
        const data = await res.json();
        if (!data.ok) return;
        currentTotal = data.total;
        // Cache chart data for pagination and CSV
        byAppData = data.by_app || [];
        byDeviceStackedData = data.by_device_stacked || [];
        byDeviceFullData = data.by_device_full || [];
        appChartPage = 1;
        deviceChartPage = 1;
        renderBarChartByAppPage();
        renderDeviceChartPage();
        await loadPage();
    }

    function renderBarChartByAppPage() {
        const sliceStart = (appChartPage - 1) * CHART_PAGE_SIZE;
        const slice = byAppData.slice(sliceStart, sliceStart + CHART_PAGE_SIZE);
        const totalPages = Math.ceil(byAppData.length / CHART_PAGE_SIZE) || 1;
        if (chartApp) { chartApp.destroy(); chartApp = null; }
        if (slice.length === 0) return;
        const canvas = document.getElementById('chartByApp');
        chartApp = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: slice.map(i => i.name),
                datasets: [{ data: slice.map(i => i.count), backgroundColor: 'rgba(59,130,246,0.8)', borderRadius: 4 }]
            },
            options: {
                indexAxis: 'y', responsive: true, maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { ticks: { color: document.documentElement.classList.contains('light') ? '#475569' : '#64748b', stepSize: 1 }, grid: { color: document.documentElement.classList.contains('light') ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.05)' }, beginAtZero: true },
                    y: { ticks: { color: document.documentElement.classList.contains('light') ? '#1e293b' : '#e2e8f0', font: { size: 11 } }, grid: { display: false } }
                }
            }
        });
        const paginationEl = document.getElementById('appChartPagination');
        const pageInfo = document.getElementById('appChartPageInfo');
        const pageButtons = document.getElementById('appChartPageButtons');
        if (totalPages <= 1) { paginationEl.style.display = 'none'; return; }
        paginationEl.style.display = 'flex';
        const pageStart = sliceStart + 1;
        const end = Math.min(appChartPage * CHART_PAGE_SIZE, byAppData.length);
        pageInfo.textContent = `${pageStart}–${end} / ${byAppData.length} 件`;
        const btnClass = (active) => active
            ? 'px-3 py-1 rounded-lg text-xs bg-primary-600 text-white'
            : 'px-3 py-1 rounded-lg text-xs bg-slate-700 hover:bg-slate-600 text-white';
        let html = `<button onclick="changeAppChartPage(-1)" ${appChartPage===1?'disabled':''}
            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 rounded text-xs text-white">←</button>`;
        const pages = [];
        for (let p = 1; p <= totalPages; p++) {
            if (p === 1 || p === totalPages || Math.abs(p - appChartPage) <= 2) pages.push(p);
            else if (pages[pages.length-1] !== '...') pages.push('...');
        }
        for (const p of pages) {
            if (p === '...') html += `<span class="px-2 text-slate-500">…</span>`;
            else html += `<button onclick="gotoAppChartPage(${p})" class="${btnClass(p===appChartPage)}">${p}</button>`;
        }
        html += `<button onclick="changeAppChartPage(1)" ${appChartPage===totalPages?'disabled':''}
            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 rounded text-xs text-white">→</button>`;
        pageButtons.innerHTML = html;
    }

    function gotoAppChartPage(p) {
        const totalPages = Math.ceil(byAppData.length / CHART_PAGE_SIZE) || 1;
        if (p < 1 || p > totalPages) return;
        appChartPage = p;
        renderBarChartByAppPage();
    }

    function changeAppChartPage(delta) {
        const totalPages = Math.ceil(byAppData.length / CHART_PAGE_SIZE) || 1;
        appChartPage = Math.max(1, Math.min(totalPages, appChartPage + delta));
        renderBarChartByAppPage();
    }

    function renderDeviceChartPage() {
        // Build the ordered hostname list from stacked data for pagination
        const hostnameTotals = {};
        byDeviceStackedData.forEach(({ hostname, count }) => {
            hostnameTotals[hostname] = (hostnameTotals[hostname] || 0) + count;
        });
        const allHostnames = Object.entries(hostnameTotals).sort((a, b) => b[1] - a[1]).map(([h]) => h);
        const totalPages = Math.ceil(allHostnames.length / CHART_PAGE_SIZE) || 1;
        const sliceStart = (deviceChartPage - 1) * CHART_PAGE_SIZE;
        const hostnamesPage = allHostnames.slice(sliceStart, sliceStart + CHART_PAGE_SIZE);
        const pageData = byDeviceStackedData.filter(d => hostnamesPage.includes(d.hostname));
        renderStackedDeviceChart(pageData, hostnamesPage);
        const paginationEl = document.getElementById('deviceChartPagination');
        const pageInfo = document.getElementById('deviceChartPageInfo');
        const pageButtons = document.getElementById('deviceChartPageButtons');
        if (totalPages <= 1) { paginationEl.style.display = 'none'; return; }
        paginationEl.style.display = 'flex';
        const pageStart = sliceStart + 1;
        const end = Math.min(deviceChartPage * CHART_PAGE_SIZE, allHostnames.length);
        pageInfo.textContent = `${pageStart}–${end} / ${allHostnames.length} 件`;
        const btnClass = (active) => active
            ? 'px-3 py-1 rounded-lg text-xs bg-primary-600 text-white'
            : 'px-3 py-1 rounded-lg text-xs bg-slate-700 hover:bg-slate-600 text-white';
        let html = `<button onclick="changeDeviceChartPage(-1)" ${deviceChartPage===1?'disabled':''}
            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 rounded text-xs text-white">←</button>`;
        const pages = [];
        for (let p = 1; p <= totalPages; p++) {
            if (p === 1 || p === totalPages || Math.abs(p - deviceChartPage) <= 2) pages.push(p);
            else if (pages[pages.length-1] !== '...') pages.push('...');
        }
        for (const p of pages) {
            if (p === '...') html += `<span class="px-2 text-slate-500">…</span>`;
            else html += `<button onclick="gotoDeviceChartPage(${p})" class="${btnClass(p===deviceChartPage)}">${p}</button>`;
        }
        html += `<button onclick="changeDeviceChartPage(1)" ${deviceChartPage===totalPages?'disabled':''}
            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 rounded text-xs text-white">→</button>`;
        pageButtons.innerHTML = html;
    }

    function gotoDeviceChartPage(p) {
        const hostnameTotals = {};
        byDeviceStackedData.forEach(({ hostname, count }) => { hostnameTotals[hostname] = (hostnameTotals[hostname] || 0) + count; });
        const totalPages = Math.ceil(Object.keys(hostnameTotals).length / CHART_PAGE_SIZE) || 1;
        if (p < 1 || p > totalPages) return;
        deviceChartPage = p;
        renderDeviceChartPage();
    }

    function changeDeviceChartPage(delta) {
        const hostnameTotals = {};
        byDeviceStackedData.forEach(({ hostname, count }) => { hostnameTotals[hostname] = (hostnameTotals[hostname] || 0) + count; });
        const totalPages = Math.ceil(Object.keys(hostnameTotals).length / CHART_PAGE_SIZE) || 1;
        deviceChartPage = Math.max(1, Math.min(totalPages, deviceChartPage + delta));
        renderDeviceChartPage();
    }

    function downloadChartCsvByApp() {
        if (!byAppData.length) return;
        let csv = 'app_name,count\n';
        byAppData.forEach(({ name, count }) => { csv += `${name},${count}\n`; });
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a'); a.href = url; a.download = 'app_usage_by_app.csv'; a.click();
        URL.revokeObjectURL(url);
    }

    function downloadChartCsvByDevice() {
        if (!byDeviceFullData.length) return;
        let csv = 'hostname,app_name,count\n';
        byDeviceFullData.forEach(({ hostname, app, count }) => {
            csv += `${hostname},${app},${count}\n`;
        });
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a'); a.href = url; a.download = 'app_usage_by_device.csv'; a.click();
        URL.revokeObjectURL(url);
    }

    async function loadPage() {
        const tbody = document.getElementById('log-tbody');
        tbody.innerHTML = '<tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">読み込み中...</td></tr>';
        const offset = (currentPage - 1) * currentPageSize;
        let url = `/admin/api/app-usage?limit=${currentPageSize}&offset=${offset}`;
        if (usageSince) url += '&since=' + encodeURIComponent(usageSince);
        if (usageUntil) url += '&until=' + encodeURIComponent(usageUntil);
        if (logSearch) url += '&search=' + encodeURIComponent(logSearch);
        const res = await fetch(url);
        const data = await res.json();
        if (!data.ok) return;
        currentTotal = data.total;
        if (!data.logs || data.logs.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">{{ crate::i18n::t("common-no-data", lang) }}</td></tr>';
        } else {
            tbody.innerHTML = data.logs.map(row => {
                const t = new Date(row.started_at).toLocaleString();
                return `<tr class="hover:bg-white/5 transition-colors">
                    <td class="px-4 py-2.5 text-slate-400 text-xs font-mono whitespace-nowrap">${t}</td>
                    <td class="px-4 py-2.5 text-slate-300">${row.hostname}</td>
                    <td class="px-4 py-2.5 text-slate-400">${row.username}</td>
                    <td class="px-4 py-2.5 text-blue-300">${row.display_name || row.app_name}</td>
                    <td class="px-4 py-2.5 font-mono text-slate-500 text-xs">${row.app_name}</td>
                </tr>`;
            }).join('');
        }
        renderPagination();
    }

    function renderPagination() {
        const totalPages = Math.ceil(currentTotal / currentPageSize);
        const paginationEl = document.getElementById('pagination');
        const pageInfo = document.getElementById('page-info');
        const pageButtons = document.getElementById('page-buttons');
        if (totalPages <= 1) { paginationEl.style.display = 'none'; return; }
        paginationEl.style.display = 'flex';
        const start = (currentPage - 1) * currentPageSize + 1;
        const end = Math.min(currentPage * currentPageSize, currentTotal);
        pageInfo.textContent = `${start}–${end} / ${currentTotal}`;
        // Page size selector
        let sizeHtml = `<select onchange="changePageSize(this.value)" class="bg-slate-700 border border-slate-600 rounded text-xs text-white px-2 py-1">`;
        [50,100,200].forEach(n => sizeHtml += `<option value="${n}" ${n===currentPageSize?'selected':''}>${n}</option>`);
        sizeHtml += '</select>';
        const btnClass = (active) => active
            ? 'px-3 py-1 rounded-lg text-xs bg-primary-600 text-white'
            : 'px-3 py-1 rounded-lg text-xs bg-slate-700 hover:bg-slate-600 text-white';
        let html = `<button onclick="gotoPage(${currentPage-1})" ${currentPage===1?'disabled':''}
            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 rounded text-xs text-white">←</button>`;
        const pages = [];
        for (let p = 1; p <= totalPages; p++) {
            if (p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2) pages.push(p);
            else if (pages[pages.length-1] !== '...') pages.push('...');
        }
        for (const p of pages) {
            if (p === '...') html += `<span class="px-2 text-slate-500">…</span>`;
            else html += `<button onclick="gotoPage(${p})" class="${btnClass(p===currentPage)}">${p}</button>`;
        }
        html += `<button onclick="gotoPage(${currentPage+1})" ${currentPage===totalPages?'disabled':''}
            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 rounded text-xs text-white">→</button>`;
        pageButtons.innerHTML = sizeHtml + ' ' + html;
    }

    function gotoPage(p) {
        const totalPages = Math.ceil(currentTotal / currentPageSize);
        if (p < 1 || p > totalPages) return;
        currentPage = p;
        loadPage();
        document.getElementById('log-tbody').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function changePageSize(val) {
        currentPageSize = parseInt(val) || 50;
        currentPage = 1;
        loadPage();
    }

    function renderBarChart(canvasId, existingChart, items, setChart) {
        const canvas = document.getElementById(canvasId);
        if (existingChart) existingChart.destroy();
        if (!items || items.length === 0) { setChart(null); return; }
        const sorted = [...items].sort((a,b) => b.count - a.count).slice(0, 12);
        setChart(new Chart(canvas, {
            type: 'bar',
            data: {
                labels: sorted.map(i => i.name),
                datasets: [{ data: sorted.map(i => i.count), backgroundColor: 'rgba(16,185,129,0.8)', borderRadius: 4 }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { ticks: { color: document.documentElement.classList.contains('light') ? '#475569' : '#64748b', stepSize: 1 }, grid: { color: document.documentElement.classList.contains('light') ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.05)' }, beginAtZero: true },
                    y: { ticks: { color: document.documentElement.classList.contains('light') ? '#1e293b' : '#e2e8f0', font: { size: 11 } }, grid: { display: false } }
                }
            }
        }));
    }

    function renderStackedDeviceChart(stackedData, hostnamesOverride) {
        const canvas = document.getElementById('chartByDevice');
        if (chartDevice) { chartDevice.destroy(); chartDevice = null; }
        if (!stackedData || stackedData.length === 0) return;

        // Collect unique hostnames (ordered by total desc) and app names
        const hostnameTotals = {};
        const appSet = new Set();
        stackedData.forEach(({ hostname, app, count }) => {
            hostnameTotals[hostname] = (hostnameTotals[hostname] || 0) + count;
            appSet.add(app);
        });
        // Use caller-supplied order if provided (for pagination), otherwise calc from data
        const hostnames = hostnamesOverride || Object.entries(hostnameTotals)
            .sort((a, b) => b[1] - a[1])
            .map(([h]) => h);

        // Color palette (10 named colors + grey for "other")
        const palette = [
            'rgba(99,102,241,0.8)',   // indigo
            'rgba(16,185,129,0.8)',   // emerald
            'rgba(245,158,11,0.8)',   // amber
            'rgba(239,68,68,0.8)',    // red
            'rgba(59,130,246,0.8)',   // blue
            'rgba(168,85,247,0.8)',   // purple
            'rgba(236,72,153,0.8)',   // pink
            'rgba(20,184,166,0.8)',   // teal
            'rgba(234,179,8,0.8)',    // yellow
            'rgba(249,115,22,0.8)',   // orange
        ];
        const OTHER_COLOR = 'rgba(100,116,139,0.6)'; // slate grey for "other"

        // Build lookup: hostname -> app -> count
        const lookup = {};
        stackedData.forEach(({ hostname, app, count }) => {
            if (!lookup[hostname]) lookup[hostname] = {};
            lookup[hostname][app] = count;
        });

        // Sort apps: named apps first (by total desc), then "other" last
        const namedApps = [...appSet].filter(a => a !== 'other');
        const hasOther = appSet.has('other');
        const sortedApps = namedApps.concat(hasOther ? ['other'] : []);

        const datasets = sortedApps.map((app, i) => ({
            label: app,
            data: hostnames.map(h => (lookup[h] && lookup[h][app]) || 0),
            backgroundColor: app === 'other' ? OTHER_COLOR : palette[i % palette.length],
            borderRadius: 2,
        }));

        chartDevice = new Chart(canvas, {
            type: 'bar',
            data: { labels: hostnames, datasets },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: { color: '#94a3b8', font: { size: 10 }, boxWidth: 12, padding: 8 }
                    },
                    tooltip: {
                        callbacks: {
                            label: ctx => ` ${ctx.dataset.label}: ${ctx.raw}`
                        }
                    }
                },
                scales: {
                    x: { stacked: true, ticks: { color: document.documentElement.classList.contains('light') ? '#475569' : '#64748b', stepSize: 1 }, grid: { color: document.documentElement.classList.contains('light') ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.05)' }, beginAtZero: true },
                    y: { stacked: true, ticks: { color: document.documentElement.classList.contains('light') ? '#1e293b' : '#e2e8f0', font: { size: 11 } }, grid: { display: false } }
                }
            }
        });
    }
</script>
{% endif %}
{% endblock %}