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

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

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

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

        <div class="p-8 space-y-6">
            <!-- Period Selector -->
            <div class="glass rounded-xl border border-white/10 p-4 flex flex-wrap gap-3 items-center">
                <span class="text-sm text-slate-400">{{ crate::i18n::t("print-mgmt-period-24h", lang) }}</span>
                <button onclick="setPeriod(1)" class="period-btn px-3 py-1 rounded-lg text-sm bg-blue-600 hover:bg-blue-500 text-white">24h</button>
                <button onclick="setPeriod(7)" class="period-btn px-3 py-1 rounded-lg text-sm bg-slate-700 hover:bg-slate-600 text-white">7d</button>
                <button onclick="setPeriod(30)" class="period-btn px-3 py-1 rounded-lg text-sm bg-slate-700 hover:bg-slate-600 text-white">30d</button>
                <button onclick="setPeriod(90)" class="period-btn px-3 py-1 rounded-lg text-sm bg-slate-700 hover:bg-slate-600 text-white">90d</button>
                <div class="flex items-center gap-2 ml-auto">
                    <input type="date" id="date-from" class="bg-slate-800 border border-white/10 rounded-lg px-3 py-1 text-sm text-white">
                    <span class="text-slate-400">～</span>
                    <input type="date" id="date-to" class="bg-slate-800 border border-white/10 rounded-lg px-3 py-1 text-sm text-white">
                    <button onclick="applyCustomRange()" class="px-3 py-1 rounded-lg text-sm bg-blue-600 hover:bg-blue-500 text-white">{{ crate::i18n::t("print-mgmt-apply", lang) }}</button>
                </div>
                <button onclick="exportCsv()" class="px-3 py-1 rounded-lg text-sm 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>

            <!-- Charts Row -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div class="glass rounded-xl border border-white/10 p-6">
                    <h3 class="text-sm font-semibold text-slate-400 mb-4">{{ crate::i18n::t("appusage-chart-by-app", lang) }}</h3>
                    <canvas id="chartByApp" height="250"></canvas>
                </div>
                <div class="glass rounded-xl border border-white/10 p-6">
                    <h3 class="text-sm font-semibold text-slate-400 mb-4">{{ crate::i18n::t("appusage-chart-by-device", lang) }}</h3>
                    <canvas id="chartByDevice" height="250"></canvas>
                </div>
            </div>

            <!-- Log Table -->
            <div class="glass rounded-xl border border-white/10 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-semibold text-slate-400">{{ crate::i18n::t("appusage-log", lang) }}</h3>
                    <div class="flex items-center gap-3">
                        <span id="total-count" class="text-xs text-slate-500"></span>
                        <select id="page-size" onchange="changePageSize()" class="bg-slate-800 border border-white/10 rounded-lg px-2 py-1 text-xs text-white">
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                        </select>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-left text-slate-500 border-b border-white/10">
                                <th class="pb-3 pr-4">{{ crate::i18n::t("appusage-col-time", lang) }}</th>
                                <th class="pb-3 pr-4">{{ crate::i18n::t("appusage-col-hostname", lang) }}</th>
                                <th class="pb-3 pr-4">{{ crate::i18n::t("appusage-col-user", lang) }}</th>
                                <th class="pb-3">{{ crate::i18n::t("appusage-col-app", lang) }}</th>
                                <th class="pb-3">プロセス名</th>
                            </tr>
                        </thead>
                        <tbody id="log-tbody" class="divide-y divide-white/5">
                            <tr><td colspan="5" class="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-4 pt-4 border-t border-white/10" 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>
    </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
let currentSince = null, currentUntil = null;
let chartApp = null, chartDevice = null;
let currentPage = 1;
let currentPageSize = 50;
let currentTotal = 0;

function setPeriod(days) {
    const now = new Date();
    const since = new Date(now - days * 86400000);
    currentSince = since.toISOString();
    currentUntil = null;
    currentPage = 1;
    loadData();
}

function applyCustomRange() {
    const from = document.getElementById('date-from').value;
    const to = document.getElementById('date-to').value;
    if (!from || !to) return;
    currentSince = new Date(from + 'T00:00:00').toISOString();
    currentUntil = new Date(to + 'T23:59:59').toISOString();
    currentPage = 1;
    loadData();
}

function changePageSize() {
    currentPageSize = parseInt(document.getElementById('page-size').value);
    currentPage = 1;
    loadPage();
}

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

async function loadData() {
    // Load charts + total using a small initial fetch
    let url = '/admin/api/app-usage?limit=1&offset=0';
    if (currentSince) url += '&since=' + encodeURIComponent(currentSince);
    if (currentUntil) url += '&until=' + encodeURIComponent(currentUntil);

    const res = await fetch(url);
    const data = await res.json();
    if (!data.ok) return;

    currentTotal = data.total;

    // Charts (stats don't need pagination)
    renderBarChart('chartByApp', chartApp, data.by_app, (c) => chartApp = c);
    renderBarChart('chartByDevice', chartDevice, data.by_device, (c) => chartDevice = c);

    // Load the log table page
    await loadPage();
}

async function loadPage() {
    const tbody = document.getElementById('log-tbody');
    tbody.innerHTML = '<tr><td colspan="5" class="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 (currentSince) url += '&since=' + encodeURIComponent(currentSince);
    if (currentUntil) url += '&until=' + encodeURIComponent(currentUntil);

    const res = await fetch(url);
    const data = await res.json();
    if (!data.ok) return;

    currentTotal = data.total;

    // Update total count
    document.getElementById('total-count').textContent = data.total + ' {{ crate::i18n::t("appusage-records", lang) }}';

    // Render rows
    if (!data.logs || data.logs.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="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">
                <td class="py-2 pr-4 text-slate-300">${t}</td>
                <td class="py-2 pr-4 text-slate-300">${row.hostname}</td>
                <td class="py-2 pr-4 text-slate-400">${row.username}</td>
                <td class="py-2 text-blue-300">${row.display_name || row.app_name}</td>
                <td class="py-2 font-mono text-slate-500 text-xs">${row.app_name}</td>
            </tr>`;
        }).join('');
    }

    // Render pagination
    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} 件`;

    // Build page buttons: prev, page numbers, next
    const btnClass = (active) => active
        ? 'px-3 py-1 rounded-lg text-xs bg-blue-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-3 py-1 rounded-lg text-xs bg-slate-700 hover:bg-slate-600 text-white disabled:opacity-40">←</button>`;

    // Show page numbers with ellipsis
    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-3 py-1 rounded-lg text-xs bg-slate-700 hover:bg-slate-600 text-white disabled:opacity-40">→</button>`;

    pageButtons.innerHTML = 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 renderBarChart(canvasId, existingChart, items, setChart) {
    const canvas = document.getElementById(canvasId);
    if (existingChart) existingChart.destroy();
    if (!items || items.length === 0) {
        if (existingChart) existingChart.destroy();
        setChart(null);
        return;
    }
    // Sort descending by count, then show top 15
    const sorted = [...items].sort((a, b) => b.count - a.count).slice(0, 15);
    const labels = sorted.map(i => i.name);
    const counts = sorted.map(i => i.count);
    setChart(new Chart(canvas, {
        type: 'bar',
        data: {
            labels,
            datasets: [{
                data: counts,
                backgroundColor: 'rgba(99,102,241,0.7)',
                borderRadius: 4,
            }]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                x: { ticks: { color: '#94a3b8', stepSize: 1 }, grid: { color: 'rgba(255,255,255,0.05)' }, beginAtZero: true },
                y: { ticks: { color: '#94a3b8', font: { size: 11 } }, grid: { color: 'rgba(255,255,255,0.05)' } }
            }
        }
    }));
}

// Default: last 24h
setPeriod(1);
setInterval(loadData, 30000);
</script>
{% endblock %}