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

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

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

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

        <div class="p-8 space-y-6">

            <!-- Filter Bar -->
            <div class="glass rounded-xl border border-white/10 p-4">
                <div class="flex flex-wrap items-end gap-3">
                    <div class="flex flex-col gap-1">
                        <label class="text-xs text-slate-400">{{crate::i18n::t("webmgmt-start-date",lang)}}</label>
                        <input type="date" id="filter-since" class="px-3 py-1.5 bg-slate-700/60 border border-white/10 rounded-lg text-sm text-slate-200 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-xs text-slate-400">{{crate::i18n::t("webmgmt-end-date",lang)}}</label>
                        <input type="date" id="filter-until" class="px-3 py-1.5 bg-slate-700/60 border border-white/10 rounded-lg text-sm text-slate-200 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                    <div class="flex flex-col gap-1 flex-1 min-w-48">
                        <label class="text-xs text-slate-400">{{crate::i18n::t("webmgmt-search-hint",lang)}}</label>
                        <input type="text" id="filter-search" placeholder="{{crate::i18n::t("common-search",lang)}}" 
                            class="px-3 py-1.5 bg-slate-700/60 border border-white/10 rounded-lg text-sm text-slate-200 focus:outline-none focus:ring-1 focus:ring-primary-500 w-full"
                            oninput="debounceSearch()">
                    </div>
                    <button onclick="loadLogs(1)" class="px-3 py-1.5 bg-primary-600 hover:bg-primary-500 text-white text-sm rounded-lg transition-colors">
                        {{crate::i18n::t("common-search",lang)}}
                    </button>
                    <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"></path>
                        </svg>
                        CSV
                    </button>
                </div>
            </div>

            <!-- Log Table -->
            <div class="glass rounded-xl border border-white/10 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-white/10 text-xs text-slate-400">
                                <th class="px-4 py-3 text-left font-medium">{{crate::i18n::t("appusage-col-time",lang)}}</th>
                                <th class="px-4 py-3 text-left font-medium">{{crate::i18n::t("appusage-col-hostname",lang)}}</th>
                                <th class="px-4 py-3 text-left font-medium">{{crate::i18n::t("appusage-col-user",lang)}}</th>
                                <th class="px-4 py-3 text-left font-medium">{{crate::i18n::t("webmgmt-col-title",lang)}}</th>
                                <th class="px-4 py-3 text-left font-medium">URL</th>
                            </tr>
                        </thead>
                        <tbody id="log-table-body" class="divide-y divide-white/5">
                            <tr>
                                <td colspan="5" class="px-6 py-8 text-center text-slate-400">{{crate::i18n::t("common-loading",lang)}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="px-4 py-3 border-t border-white/10 flex items-center gap-2">
                    <select id="page-size-select" onchange="changePageSize(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="btn-prev" onclick="changePage(-1)" 
                        class="px-3 py-1.5 text-xs rounded-lg border border-white/10 hover:bg-white/10 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed">
                        {{crate::i18n::t("common-prev",lang)}}
                    </button>
                    <span id="page-info" class="text-xs text-slate-400 flex-1 text-center">-</span>
                    <button id="btn-next" onclick="changePage(1)"
                        class="px-3 py-1.5 text-xs rounded-lg border border-white/10 hover:bg-white/10 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed">
                        {{crate::i18n::t("common-next",lang)}}
                    </button>
                </div>
            </div>

        </div>
    </main>
</div>

<script>
const I18N_LOADING = '{{crate::i18n::t("common-loading",lang)}}';
const I18N_PAGE = '{{crate::i18n::t("webmgmt-page",lang)}}';

let currentPage = 1;
let logPageSize = 50;
let debounceTimer = null;

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

// Initialize date filters to last 7 days
(function initDates() {
    const now = new Date();
    const since = new Date(now);
    since.setDate(since.getDate() - 7);
    document.getElementById('filter-since').value = toLocalDateStr(since);
    document.getElementById('filter-until').value = toLocalDateStr(now);
})();

function debounceSearch() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => loadLogs(1), 500);
}

function buildParams(page) {
    const since = document.getElementById('filter-since').value;
    const until = document.getElementById('filter-until').value;
    const search = document.getElementById('filter-search').value.trim();
    const params = new URLSearchParams();
    if (since) {
        const parts = since.split('-');
        const s = new Date(parseInt(parts[0]), parseInt(parts[1])-1, parseInt(parts[2]), 0, 0, 0);
        params.set('since', s.toISOString());
    }
    if (until) {
        const parts = until.split('-');
        const u = new Date(parseInt(parts[0]), parseInt(parts[1])-1, parseInt(parts[2]), 23, 59, 59, 999);
        params.set('until', u.toISOString());
    }
    if (search) params.set('search', search);
    params.set('page', page);
    params.set('limit', logPageSize);
    return params;
}

async function loadLogs(page) {
    currentPage = page;
    const params = buildParams(page);
    const tbody = document.getElementById('log-table-body');
    tbody.innerHTML = `<tr><td colspan="7" class="px-6 py-8 text-center text-slate-400">${I18N_LOADING}</td></tr>`;

    const res = await fetch('/admin/api/web-browse-logs?' + params.toString());
    const html = await res.text();
    tbody.innerHTML = html;

    document.getElementById('page-info').textContent = `${I18N_PAGE} ${page}`;
    document.getElementById('btn-prev').disabled = page <= 1;
}

function changePage(delta) {
    const newPage = currentPage + delta;
    if (newPage < 1) return;
    loadLogs(newPage);
}

function changePageSize(val) {
    logPageSize = parseInt(val) || 50;
    currentPage = 1;
    loadLogs(1);
}

function exportCsv() {
    const params = buildParams(1);
    params.delete('page');
    window.location.href = '/admin/api/web-browse-logs/export-csv?' + params.toString();
}

// Initial load
loadLogs(1);
setInterval(() => loadLogs(currentPage), 30000);
</script>
{% endblock %}