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

{% block title %}{{ crate::i18n::t("print-mgmt-title", lang) }} - Remotto Admin{% endblock %}

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

    <!-- Main Content -->
    <main class="flex-1 overflow-auto md:ml-0 bg-slate-900">
        {% call components::header(crate::i18n::t("print-mgmt-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("print-locked-title", lang) }}</h3>
                    <p class="text-slate-400 max-w-md">{{ crate::i18n::t("print-locked-desc", lang) }}</p>
                </div>
            </div>
            {% else %}
            <!-- Tabs Navigation -->
            <div class="flex border-b border-slate-700">
                <button onclick="switchTab('overview')" id="tab-overview"
                    class="tab-btn px-6 py-3 text-sm font-semibold border-b-2 border-primary-500 text-white">
                    {{ crate::i18n::t("print-mgmt-tab-overview", lang) }}
                </button>
                <button onclick="switchTab('users')" id="tab-users"
                    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("print-mgmt-tab-users", lang) }}
                </button>
                <button onclick="switchTab('email')" id="tab-email"
                    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("settings-tab-print-notify", lang) }}
                </button>
            </div>

            <!-- Overview (Print Status) Tab Content -->
            <div id="content-overview" class="tab-content space-y-6">
                <!-- Header Actions & Filter -->
                <div class="flex justify-end items-center gap-3">
                    <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>

                    <div class="flex bg-slate-800/50 rounded-lg p-1 border border-slate-700 gap-1">
                        <button onclick="setPeriod('24h')"
                            class="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"
                            data-period="24h">{{ crate::i18n::t("print-mgmt-period-24h", lang) }}</button>
                        <button onclick="setPeriod('1m')"
                            class="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"
                            data-period="1m">{{ crate::i18n::t("print-mgmt-period-1m", lang) }}</button>
                        <button onclick="setPeriod('6m')"
                            class="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"
                            data-period="6m">{{ crate::i18n::t("print-mgmt-period-6m", lang) }}</button>
                        <button onclick="setPeriod('1y')"
                            class="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"
                            data-period="1y">{{ crate::i18n::t("print-mgmt-period-1y", lang) }}</button>
                        <button onclick="toggleCustomDatePicker()"
                            class="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"
                            data-period="custom">{{ crate::i18n::t("print-mgmt-period-custom", lang) }}</button>
                    </div>
                </div>

                <!-- Charts Overview -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- User Chart -->
                    <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("print-mgmt-chart-user",
                                lang) }}</h3>
                            <button onclick="exportChartCSV('user')"
                                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 class="relative w-full h-[320px]">
                            <canvas id="chart-user"></canvas>
                        </div>
                        <!-- Pagination (Bottom) -->
                        <div class="flex justify-end items-center gap-2 mt-3">
                            <span id="user-chart-page-info" class="text-xs text-slate-400"></span>
                            <div id="user-chart-page-buttons" class="flex gap-1"></div>
                        </div>
                    </div>

                    <!-- Printer Chart -->
                    <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("print-mgmt-chart-printer",
                                lang) }}</h3>
                            <button onclick="exportChartCSV('printer')"
                                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 class="relative w-full h-[320px]">
                            <canvas id="chart-printer"></canvas>
                        </div>
                        <!-- Pagination (Bottom) -->
                        <div class="flex justify-center items-center gap-2 mt-3">
                            <span id="printer-chart-page-info" class="text-xs text-slate-400"></span>
                            <div id="printer-chart-page-buttons" class="flex gap-1"></div>
                        </div>
                    </div>
                </div>

                <!-- Print History 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("print-mgmt-history", lang)
                            }}
                        </h3>
                        <div class="flex items-center gap-2">
                            <input type="text" id="history-search" placeholder="{{ crate::i18n::t("common-search",
                                lang) }}" onkeyup="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-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-6 py-3">{{ crate::i18n::t("print-mgmt-time", lang) }}</th>
                                    <th class="px-6 py-3">{{ crate::i18n::t("print-mgmt-user", lang) }}</th>
                                    <th class="px-6 py-3">{{ crate::i18n::t("print-mgmt-printer", lang) }}</th>
                                    <th class="px-6 py-3">{{ crate::i18n::t("print-mgmt-document", lang) }}</th>
                                    <th class="px-6 py-3 text-right">{{ crate::i18n::t("print-mgmt-pages", lang) }}</th>
                                    <th class="px-6 py-3">{{ crate::i18n::t("device-details-hostname", lang) }}</th>
                                </tr>
                            </thead>
                            <tbody id="history-table-body" class="divide-y divide-white/10 text-sm">
                                <tr>
                                    <td colspan="6" class="px-6 py-8 text-center text-slate-500">{{
                                        crate::i18n::t("common-loading", lang) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="flex items-center justify-between mt-3">
                        <span id="history-page-info" class="text-xs text-slate-500"></span>
                        <div id="history-page-buttons" class="flex items-center gap-1"></div>
                    </div>
                </div>
            </div> <!-- End of content-overview -->

            <!-- Users (Print Restrictions) Tab Content -->
            <div id="content-users" class="tab-content hidden space-y-6">
                <!-- Print Settings Card -->
                <div class="bg-slate-800/50 rounded-xl border border-white/10 p-4">
                    <h3 class="text-sm font-semibold text-slate-300 mb-4">{{ crate::i18n::t("print-mgmt-settings", lang)
                        }}</h3>
                    <div class="flex items-center gap-4 p-3 bg-slate-900/50 rounded-lg">
                        <div class="flex-1">
                            <label class="block text-sm font-medium text-slate-200">{{
                                crate::i18n::t("print-mgmt-max-pages-per-job", lang) }}</label>
                            <p class="text-xs text-slate-500 mt-1">{{
                                crate::i18n::t("print-mgmt-max-pages-per-job-desc", lang) }}</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="number" id="max_pages_per_job_value" min="1" max="9999" value="100"
                                class="w-20 px-2 py-1 bg-slate-800 border border-slate-600 rounded text-white text-sm text-right"
                                onchange="saveMaxPagesPerJobSetting()">
                            <span class="text-sm text-slate-400">{{ crate::i18n::t("print-mgmt-pages-unit", lang)
                                }}</span>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="max_pages_per_job_enabled" class="sr-only peer"
                                    onchange="saveMaxPagesPerJobSetting()">
                                <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-400">{{ crate::i18n::t("common-enabled", lang) }}</span>
                        </div>
                    </div>
                    <div class="flex items-center gap-4 p-3 bg-slate-900/50 rounded-lg mt-3">
                        <div class="flex-1">
                            <label class="block text-sm font-medium text-slate-200">{{
                                crate::i18n::t("print-mgmt-default-print-limit", lang) }}</label>
                            <p class="text-xs text-slate-500 mt-1">{{
                                crate::i18n::t("print-mgmt-default-print-limit-desc", lang) }}</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="number" id="default_print_limit_value" min="0" max="99999" value="0"
                                class="w-24 px-2 py-1 bg-slate-800 border border-slate-600 rounded text-white text-sm text-right"
                                onchange="saveDefaultPrintLimitSetting()">
                            <span class="text-sm text-slate-400">{{ crate::i18n::t("print-mgmt-pages-unit", lang)
                                }}</span>
                        </div>
                    </div>
                </div>

                <!-- Users Table -->
                <div class="bg-slate-800/50 rounded-xl border border-white/10 p-4">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
                        <h3 class="text-sm font-semibold text-slate-300">{{ crate::i18n::t("print-mgmt-users", lang) }}
                        </h3>
                        <div class="flex items-center gap-3 w-full sm:w-auto">
                            <input type="text" id="users-search" placeholder="{{ crate::i18n::t("common-search", lang)
                                }}" onkeyup="debounceUsersSearch()"
                                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="document.getElementById('import-modal').classList.remove('hidden')"
                                class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm text-white transition-colors flex items-center gap-2">
                                <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-8l-4-4m0 0L8 8m4-4v12"></path>
                                </svg>
                                {{ crate::i18n::t("common-import", lang) }}
                            </button>
                            <button onclick="exportUsersCSV()"
                                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-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-6 py-4">{{ crate::i18n::t("print-mgmt-user", lang) }}</th>
                                    <th class="px-6 py-4">{{ crate::i18n::t("print-mgmt-email", lang) }}</th>
                                    <th class="px-6 py-4 text-right">{{ crate::i18n::t("print-mgmt-used", lang) }}</th>
                                    <th class="px-6 py-4 text-right">{{ crate::i18n::t("print-mgmt-limit", lang) }}</th>
                                    <th class="px-6 py-4 text-center">{{ crate::i18n::t("print-mgmt-usage", lang) }}
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="users-table-body" class="divide-y divide-white/10 text-sm">
                                <tr>
                                    <td colspan="5" class="px-6 py-8 text-center text-slate-500">{{
                                        crate::i18n::t("common-loading", lang) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="flex items-center justify-between mt-3">
                        <span id="users-page-info" class="text-xs text-slate-500"></span>
                        <div id="users-page-buttons" class="flex items-center gap-1"></div>
                    </div>
                </div>
            </div> <!-- End of content-users -->

            <!-- Email Notification Tab Content -->
            <div id="content-email" class="tab-content hidden space-y-6">
                <div class="glass rounded-xl border border-white/10 p-8">
                    <h3 class="text-lg font-semibold mb-6">{{ crate::i18n::t("print-mgmt-email-title", lang) }}</h3>
                    <form id="email-templates-form" class="space-y-6">
                        <!-- Warning Email Settings -->
                        <div class="pb-6 border-b border-white/10">
                            <div class="flex items-center justify-between mb-4">
                                <h4 class="text-md font-medium text-slate-200">{{ crate::i18n::t("print-mgmt-email-warning", lang) }}</h4>
                                <div class="flex items-center gap-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="warning_enabled" id="warning_enabled" class="sr-only peer">
                                        <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">{{ crate::i18n::t("common-enabled", lang) }}</span>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("print-mgmt-email-threshold", lang) }}</label>
                                    <div class="flex items-center gap-2">
                                        <input type="number" name="warning_threshold" id="warning_threshold" min="1" max="99" value="80"
                                            class="w-24 px-3 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
                                        <span class="text-slate-400">%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("print-mgmt-email-subject", lang) }}</label>
                                <input type="text" name="warning_subject" id="warning_subject"
                                    class="w-full px-3 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("print-mgmt-email-body", lang) }}</label>
                                <textarea name="warning_body" id="warning_body" rows="4"
                                    class="w-full px-3 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm font-mono"></textarea>
                            </div>
                        </div>

                        <!-- Limit Reached Email Settings -->
                        <div class="pb-6">
                            <div class="flex items-center justify-between mb-4">
                                <h4 class="text-md font-medium text-slate-200">{{ crate::i18n::t("print-mgmt-email-limit-reached", lang) }}</h4>
                                <div class="flex items-center gap-3">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="limit_reached_enabled" id="limit_reached_enabled" class="sr-only peer">
                                        <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">{{ crate::i18n::t("common-enabled", lang) }}</span>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("print-mgmt-email-subject", lang) }}</label>
                                <input type="text" name="limit_reached_subject" id="limit_reached_subject"
                                    class="w-full px-3 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("print-mgmt-email-body", lang) }}</label>
                                <textarea name="limit_reached_body" id="limit_reached_body" rows="4"
                                    class="w-full px-3 py-2 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white text-sm font-mono"></textarea>
                            </div>
                        </div>

                        <!-- Placeholders Help -->
                        <div class="bg-slate-800/50 rounded-lg p-4 text-sm text-slate-400">
                            <p class="mb-2 font-medium text-slate-300">{{ crate::i18n::t("print-mgmt-email-placeholders", lang) }}:</p>
                            <code class="text-xs">{username} {used_pages} {limit_pages} {remaining_pages}</code>
                        </div>

                        <div class="flex justify-end pt-4 border-t border-white/10">
                            <button type="button" onclick="saveEmailTemplates()"
                                class="px-6 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">
                                {{ crate::i18n::t("common-save", lang) }}
                            </button>
                        </div>
                    </form>
                </div>
            </div> <!-- End of content-email -->

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

{% if !is_demo %}

<!-- Import CSV Modal -->
<div id="import-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="bg-slate-800 rounded-xl p-6 border border-white/10 w-full max-w-md mx-4">
        <h3 class="text-lg font-semibold mb-4">{{ crate::i18n::t("print-mgmt-import-csv", lang) }}</h3>
        <p class="text-sm text-slate-400 mb-2">{{ crate::i18n::t("print-mgmt-csv-description", lang) }}</p>
        <div class="text-xs text-slate-500 mb-4 space-y-1">
            <p>Format: username,mail_address,used_pages,limit_pages,operation</p>
            <p class="text-slate-400">operation: create, update, delete, reset</p>
        </div>
        <div class="mb-6">
            <input type="file" id="csv-file" accept=".csv" class="block w-full text-sm text-slate-300
                file:mr-4 file:py-2 file:px-4
                file:rounded-full file:border-0
                file:text-sm file:font-semibold
                file:bg-primary-600 file:text-white
                hover:file:bg-primary-500
                cursor-pointer" />
        </div>
        <div class="flex gap-3">
            <a href="data:text/csv;charset=utf-8,username,mail_address,used_pages,limit_pages,operation%0Auser1,user1@example.com,0,1000,create%0Auser2,user2@example.com,,,delete%0Auser3,user3@example.com,,,reset"
                download="print_users_sample.csv"
                class="flex-1 py-2 px-4 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors text-center text-sm flex items-center justify-center gap-2">
                <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>
                {{ crate::i18n::t("common-template", lang) }}
            </a>
            <button type="button" onclick="document.getElementById('import-modal').classList.add('hidden')"
                class="flex-1 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
                {{ crate::i18n::t("common-cancel", lang) }}
            </button>
            <button onclick="handleCsvUpload()"
                class="flex-1 py-2 bg-primary-600 hover:bg-primary-500 rounded-lg font-medium transition-colors">
                {{ crate::i18n::t("common-import", lang) }}
            </button>
        </div>
    </div>
</div>

<!-- CSV Preview Modal -->
<div id="csv-preview-modal"
    class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="glass rounded-2xl p-8 border border-white/10 w-full max-w-3xl mx-4 max-h-[80vh] flex flex-col">
        <h3 class="text-xl font-semibold mb-4">{{ crate::i18n::t("print-mgmt-import-csv", lang) }}</h3>
        <p class="text-slate-400 text-sm mb-4">
            <span id="csv-count" class="text-white font-bold">0</span>
            {{ crate::i18n::t("autologin-preview-count", lang) }}
        </p>

        <div class="flex-1 overflow-auto mb-6 border border-white/10 rounded-lg">
            <table class="w-full text-sm">
                <thead class="bg-slate-800/50 sticky top-0">
                    <tr>
                        <th class="px-4 py-3 text-left text-slate-300">{{ crate::i18n::t("print-mgmt-user", lang) }}
                        </th>
                        <th class="px-4 py-3 text-left text-slate-300">{{ crate::i18n::t("print-mgmt-email", lang) }}
                        </th>
                        <th class="px-4 py-3 text-right text-slate-300">{{ crate::i18n::t("print-mgmt-used", lang) }}
                        </th>
                        <th class="px-4 py-3 text-right text-slate-300">{{ crate::i18n::t("print-mgmt-limit", lang) }}
                        </th>
                        <th class="px-4 py-3 text-left text-slate-300">Operation</th>
                    </tr>
                </thead>
                <tbody id="csv-preview-body" class="divide-y divide-white/5">
                    <!-- Dynamic content -->
                </tbody>
            </table>
        </div>

        <div class="flex gap-4">
            <button onclick="closeCsvPreview()"
                class="flex-1 py-3 px-4 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
                {{ crate::i18n::t("common-cancel", lang) }}
            </button>
            <button onclick="confirmCsvImport()"
                class="flex-1 py-3 px-4 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                {{ crate::i18n::t("common-import", lang) }}
            </button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // --- i18n Strings ---
    const MSG_SELECT_DATES = '{{ crate::i18n::t("print-mgmt-error-select-dates", lang) }}';
    const MSG_EXPORT_FAILED = '{{ crate::i18n::t("common-export-failed", lang) }}';

    // --- State ---
    let currentPeriod = '24h';

    function toLocalDateStr(d) {
        return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');
    }
    let customStart = null;
    let customEnd = null;
    let userPage = 1;
    let printerPage = 1;
    let historyPage = 1;
    const CHART_LIMIT = 8; // Reduce limit for visual fit
    let HISTORY_LIMIT = 50;

    // Render pagination like the log table style with total count: "1–20 / 42件 ← 1 2 3 →"
    function renderSimplePagination(infoId, buttonsId, page, limit, total, onGoto, onPrev, onNext) {
        const infoEl = document.getElementById(infoId);
        const btnsEl = document.getElementById(buttonsId);
        if (!infoEl || !btnsEl) return;
        const totalPages = Math.ceil(total / limit) || 1;
        const start = (page - 1) * limit + 1;
        const end = Math.min(page * limit, total);
        infoEl.textContent = total > 0 ? `${start}–${end} / ${total}` : '';
        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="${onPrev}" ${page <= 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 - page) <= 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="${onGoto}(${p})" class="${btnClass(p===page)}">${p}</button>`;
        }
        html += `<button onclick="${onNext}" ${page >= totalPages ? 'disabled' : ''}
            class="px-2 py-1 bg-slate-700 hover:bg-slate-600 disabled:opacity-40 rounded text-xs text-white">→</button>`;
        btnsEl.innerHTML = html;
        // Add page-size select if callback provided
        if (arguments.length > 8) {
            const onChangeFn = arguments[8];
            const currentLimit = limit;
            let sel = `<select onchange="${onChangeFn}(this.value)" class="bg-slate-700 border border-slate-600 rounded text-xs text-white px-2 py-1 mr-2">`;
            [50,100,200].forEach(n => sel += `<option value="${n}" ${n===currentLimit?'selected':''}>${n}</option>`);
            sel += '</select>';
            btnsEl.innerHTML = sel + html;
        }
    }

    let userChartObj = null;
    let printerChartObj = null;
    let historySearch = '';
    let historySearchTimeout = null;

    // --- Period Logic ---
    function setPeriod(period) {
        currentPeriod = period;
        // If switching away from custom, reset dates? Ideally keep them in vars in case user switches back, but UI hides input. 
        // Let's clear to keep logic simple.
        if (period !== 'custom') {
            document.getElementById('custom-date-picker').classList.add('hidden');
        }

        updatePeriodButtons();
        refreshAllData();
    }

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

        if (!picker.classList.contains('hidden')) {
            // Set default date if empty
            if (!document.getElementById('custom-start').value) {
                const today = new Date();
                const 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 startVal = document.getElementById('custom-start').value;
        const endVal = document.getElementById('custom-end').value;

        if (!startVal || !endVal) {
            alert(MSG_SELECT_DATES);
            return;
        }

        currentPeriod = 'custom';
        customStart = new Date(startVal + "T00:00:00").toISOString();
        customEnd = new Date(endVal + "T23:59:59").toISOString();

        updatePeriodButtons();
        document.getElementById('custom-date-picker').classList.add('hidden');
        refreshAllData();
    }

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

    function refreshAllData() {
        // Reset pager
        userPage = 1;
        printerPage = 1;
        historyPage = 1;

        loadUserChart();
        loadPrinterChart();
        loadHistory();
    }

    function getQueryParams(extra = {}) {
        const params = new URLSearchParams({ period: currentPeriod, ...extra });
        if (currentPeriod === 'custom' && customStart && customEnd) {
            params.append('start', customStart);
            params.append('end', customEnd);
        }
        return params;
    }

    // --- Charts ---
    function gotoChartPage(type, p) {
        if (type === 'user') { userPage = p; loadUserChart(); }
        else { printerPage = p; loadPrinterChart(); }
    }

    async function changeChartPage(type, delta) {
        if (type === 'user') {
            userPage = Math.max(1, userPage + delta);
            loadUserChart();
        } else {
            printerPage = Math.max(1, printerPage + delta);
            loadPrinterChart();
        }
    }

    async function loadUserChart() {
        try {
            const params = getQueryParams({ page: userPage, limit: CHART_LIMIT });
            const res = await fetch(`/api/print-stats/user?${params}`);
            const json = await res.json();
            const data = Array.isArray(json) ? json : (json.items || []);
            const total = typeof json.total === 'number' ? json.total : data.length;

            const ctx = document.getElementById('chart-user').getContext('2d');
            if (userChartObj) userChartObj.destroy();

            // Colors
            const colors = data.map((_, i) => i < 3 ? 'rgba(59, 130, 246, 0.8)' : 'rgba(59, 130, 246, 0.4)');

            userChartObj = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.map(d => d.label),
                    datasets: [{
                        label: 'Pages',
                        data: data.map(d => d.value),
                        backgroundColor: colors,
                        borderRadius: 4,
                        barPercentage: 0.6,
                        categoryPercentage: 0.8
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: {
                            beginAtZero: true,
                            grid: { color: document.documentElement.classList.contains('light') ? 'rgba(0,0,0,0.08)' : 'rgba(255, 255, 255, 0.05)' },
                            ticks: { color: document.documentElement.classList.contains('light') ? '#475569' : '#64748b' }
                        },
                        y: {
                            grid: { display: false },
                            ticks: { color: document.documentElement.classList.contains('light') ? '#1e293b' : '#e2e8f0', font: { size: 12 } }
                        }
                    }
                }
            });
            renderSimplePagination('user-chart-page-info', 'user-chart-page-buttons', userPage, CHART_LIMIT, total, "gotoChartPage('user',", "changeChartPage('user',-1)", "changeChartPage('user',1)");
        } catch (e) {
            console.error("Chart load error", e);
        }
    }

    async function loadPrinterChart() {
        try {
            const params = getQueryParams({ page: printerPage, limit: CHART_LIMIT });
            const res = await fetch(`/api/print-stats/printer?${params}`);
            const json = await res.json();
            const data = Array.isArray(json) ? json : (json.items || []);
            const total = typeof json.total === 'number' ? json.total : data.length;

            const ctx = document.getElementById('chart-printer').getContext('2d');
            if (printerChartObj) printerChartObj.destroy();

            const colors = data.map((_, i) => i < 3 ? 'rgba(16, 185, 129, 0.8)' : 'rgba(16, 185, 129, 0.4)');

            printerChartObj = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.map(d => d.label),
                    datasets: [{
                        label: 'Pages',
                        data: data.map(d => d.value),
                        backgroundColor: colors,
                        borderRadius: 4,
                        barPercentage: 0.6,
                        categoryPercentage: 0.8
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: {
                            beginAtZero: true,
                            grid: { color: document.documentElement.classList.contains('light') ? 'rgba(0,0,0,0.08)' : 'rgba(255, 255, 255, 0.05)' },
                            ticks: { color: document.documentElement.classList.contains('light') ? '#475569' : '#64748b' }
                        },
                        y: {
                            grid: { display: false },
                            ticks: { color: document.documentElement.classList.contains('light') ? '#1e293b' : '#e2e8f0', font: { size: 12 } }
                        }
                    }
                }
            });
            renderSimplePagination('printer-chart-page-info', 'printer-chart-page-buttons', printerPage, CHART_LIMIT, total, "gotoChartPage('printer',", "changeChartPage('printer',-1)", "changeChartPage('printer',1)");
        } catch (e) {
            console.error("Printer Chart load error", e);
        }
    }

    // --- CSV Charts ---
    async function exportChartCSV(type) {
        try {
            const params = getQueryParams({ limit: 10000 });
            const endpoint = type === 'user' ? '/api/print-stats/user' : '/api/print-stats/printer';
            const res = await fetch(`${endpoint}?${params}`);
            const json = await res.json();
            const data = Array.isArray(json) ? json : (json.items || []);

            let csv = type === 'user' ? 'Username,Pages\n' : 'Printer,Pages\n';
            data.forEach(d => {
                csv += `"${d.label}",${d.value}\n`;
            });
            downloadCSV(`print_stats_${type}.csv`, csv);
        } catch (e) {
            alert(MSG_EXPORT_FAILED);
        }
    }

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

    function changeHistoryPage(delta) {
        historyPage = Math.max(1, historyPage + delta);
        loadHistory();
    }

    function gotoHistoryPage(p) {
        historyPage = p;
        loadHistory();
    }

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

    async function loadHistory() {
        const tbody = document.getElementById('history-table-body');
        try {
            const params = getQueryParams({ page: historyPage, limit: HISTORY_LIMIT });
            if (historySearch) params.append('search', historySearch);

            const res = await fetch(`/api/print-log?${params}`);
            if (!res.ok) throw new Error("Failed");
            const data = await res.json();
            const items = Array.isArray(data) ? data : (data.items || []);
            const total = typeof data.total === 'number' ? data.total : items.length;

            if (items.length === 0) {
                if (historyPage > 1) { historyPage--; return; }
                tbody.innerHTML = `<tr><td colspan="6" class="px-6 py-12 text-center text-slate-500">No print logs found</td></tr>`;
            } else {
                tbody.innerHTML = items.map(l => `
                    <tr class="hover:bg-white/5 transition-colors border-b border-white/5 last:border-0">
                        <td class="px-6 py-2 text-slate-400 text-xs whitespace-nowrap font-mono">${new Date(l.printed_at).toLocaleString()}</td>
                        <td class="px-6 py-2 font-medium text-slate-200">${l.username}</td>
                        <td class="px-6 py-2 text-slate-400">${l.printer_name}</td>
                        <td class="px-6 py-2 text-slate-300 truncate max-w-[200px]" title="${l.document_name || ''}">${l.document_name || '-'}</td>
                        <td class="px-6 py-2 text-white font-bold text-right tabular-nums">${l.pages}</td>
                        <td class="px-6 py-2 text-slate-400 text-xs">${l.hostname || l.device_id}</td>
                    </tr>
                `).join('');
            }
            renderSimplePagination('history-page-info', 'history-page-buttons', historyPage, HISTORY_LIMIT, total, 'gotoHistoryPage', 'changeHistoryPage(-1)', 'changeHistoryPage(1)', 'changeHistoryPageSize');
        } catch (e) {
            console.error(e);
            tbody.innerHTML = `<tr><td colspan="6" class="px-6 py-4 text-center text-red-400">Error loading history</td></tr>`;
        }
    }

    function downloadCSV(filename, content) {
        const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), content], { type: 'text/csv;charset=utf-8' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    }

    function exportHistoryCSV() {
        const params = getQueryParams();
        if (historySearch) params.append('search', historySearch);
        window.location.href = `/admin/api/export/print-logs?${params.toString()}`;
    }

    // === Tab Switching ===
    function switchTab(tabName) {
        // Hide all tab content
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        // Deactivate all tab buttons
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('border-primary-500', 'text-white');
            btn.classList.add('border-transparent', 'text-slate-400');
        });

        // Show selected tab content
        document.getElementById(`content-${tabName}`).classList.remove('hidden');
        // Activate selected tab button
        const activeBtn = document.getElementById(`tab-${tabName}`);
        activeBtn.classList.add('border-primary-500', 'text-white');
        activeBtn.classList.remove('border-transparent', 'text-slate-400');

        // Save tab state in URL hash
        if (history.replaceState) {
            history.replaceState(null, null, '#' + tabName);
        } else {
            location.hash = tabName;
        }

        // Load data for the tab
        if (tabName === 'users') {
            loadUsers();
        } else if (tabName === 'email') {
            loadEmailTemplates();
        } else if (tabName === 'overview') {
            setPeriod(currentPeriod);
        }
    }

    // Restore tab from URL hash on page load
    document.addEventListener('DOMContentLoaded', function () {
        const hash = window.location.hash.replace('#', '');
        if (hash && ['overview', 'users', 'email'].includes(hash)) {
            switchTab(hash);
        } else {
            // Default tab is overview – load charts immediately
            setPeriod('24h');
        }
        // Auto-refresh every 30s
        setInterval(() => { setPeriod(currentPeriod); }, 30000);
    });



    // === Users Tab ===
    let usersPage = 1;
    let usersSearch = '';
    let usersSearchTimeout = null;
    const USERS_LIMIT_DEFAULT = 50;
    let USERS_LIMIT = 50;

    function debounceUsersSearch() {
        clearTimeout(usersSearchTimeout);
        usersSearchTimeout = setTimeout(() => {
            usersSearch = document.getElementById('users-search').value;
            usersPage = 1;
            loadUsers();
        }, 300);
    }

    function changeUsersPage(delta) {
        usersPage = Math.max(1, usersPage + delta);
        loadUsers();
    }

    function gotoUsersPage(p) {
        usersPage = p;
        loadUsers();
    }

    function changeUsersPageSize(val) {
        USERS_LIMIT = parseInt(val) || 50;
        usersPage = 1;
        loadUsers();
    }

    async function loadUsers() {
        const tbody = document.getElementById('users-table-body');
        try {
            const params = new URLSearchParams({ page: usersPage, limit: USERS_LIMIT });
            if (usersSearch) params.append('search', usersSearch);

            const res = await fetch(`/admin/api/print-quotas?${params}`);
            if (!res.ok) throw new Error('Failed to load users');
            const data = await res.json();
            const items = Array.isArray(data) ? data : (data.items || []);
            const total = typeof data.total === 'number' ? data.total : items.length;

            if (items.length === 0) {
                if (usersPage > 1) { usersPage--; return; }
                tbody.innerHTML = `<tr><td colspan="5" class="px-6 py-12 text-center text-slate-500">No quota users found</td></tr>`;
            } else {
                tbody.innerHTML = items.map(u => {
                    const usage = u.limit_pages > 0 ? Math.round(u.used_pages / u.limit_pages * 100) : 0;
                    const progressClass = usage >= 100 ? 'bg-rose-500' : usage >= 80 ? 'bg-amber-500' : 'bg-primary-500';
                    return `
                        <tr class="hover:bg-white/5 transition-colors">
                            <td class="px-6 py-3 font-medium text-slate-200">${u.username}</td>
                            <td class="px-6 py-3 text-slate-400 text-sm">${u.email || '-'}</td>
                            <td class="px-6 py-3 text-right tabular-nums">${u.used_pages}</td>
                            <td class="px-6 py-3 text-right tabular-nums">${u.limit_pages}</td>
                            <td class="px-6 py-3">
                                <div class="flex items-center gap-2">
                                    <div class="flex-1 bg-slate-700 rounded-full h-2 overflow-hidden">
                                        <div class="${progressClass} h-full transition-all" style="width: ${Math.min(usage, 100)}%"></div>
                                    </div>
                                    <span class="text-xs text-slate-400 w-10 text-right">${usage}%</span>
                                </div>
                            </td>
                        </tr>`;
                }).join('');
            }
            renderSimplePagination('users-page-info', 'users-page-buttons', usersPage, USERS_LIMIT, total, 'gotoUsersPage', 'changeUsersPage(-1)', 'changeUsersPage(1)', 'changeUsersPageSize');
        } catch (e) {
            console.error(e);
            tbody.innerHTML = `<tr><td colspan="5" class="px-6 py-4 text-center text-red-400">Error loading users</td></tr>`;
        }
    }


    function exportUsersCSV() {
        window.location.href = '/admin/api/print-quotas/export';
    }

    const MSG_IMPORT_SUCCESS = '{{ crate::i18n::t("print-mgmt-import-success", lang) }}';
    const MSG_IMPORT_FAILED = '{{ crate::i18n::t("error-operation-failed", lang) }}';
    const MSG_NO_RECORDS = '{{ crate::i18n::t("autologin-no-records", lang) }}';
    const MSG_CSV_READ_FAILED = '{{ crate::i18n::t("autologin-read-failed", lang) }}';

    let pendingCsvFile = null;

    function handleCsvUpload() {
        const fileInput = document.getElementById('csv-file');
        if (!fileInput.files || fileInput.files.length === 0) return;

        const file = fileInput.files[0];
        const reader = new FileReader();
        reader.onload = function (e) {
            try {
                const text = e.target.result;
                const lines = text.split(/\r?\n/).filter(l => l.trim());
                const records = [];
                for (let i = 0; i < lines.length; i++) {
                    const line = lines[i];
                    // Skip header
                    if (i === 0 && (line.includes('username') || line.includes('mail_address') || line.includes('limit_pages'))) continue;
                    const parts = line.split(',');
                    if (parts.length < 3) continue;
                    // Format: username,mail_address,used_pages,limit_pages,operation
                    let username, email, limit_pages, used_pages, operation;
                    if (parts.length >= 5) {
                        // Full format: username,mail_address,used_pages,limit_pages,operation
                        username = parts[0].trim();
                        email = parts[1].trim();
                        used_pages = parts[2].trim();
                        limit_pages = parts[3].trim();
                        operation = parts[4].trim() || 'update';
                    } else if (parts.length >= 4) {
                        username = parts[0].trim();
                        email = parts[1].trim();
                        used_pages = parts[2].trim();
                        limit_pages = parts[3].trim();
                        operation = 'update';
                    } else {
                        username = parts[0].trim();
                        email = parts[1].trim();
                        used_pages = parts[2].trim();
                        limit_pages = '';
                        operation = 'update';
                    }
                    if (!username) continue;
                    records.push({ username, email, limit_pages, used_pages, operation });
                }

                if (records.length === 0) {
                    showNotification(MSG_NO_RECORDS, 'error');
                    return;
                }

                pendingCsvFile = fileInput.files[0];
                document.getElementById('import-modal').classList.add('hidden');
                showCsvPreview(records);
            } catch (err) {
                showNotification(MSG_CSV_READ_FAILED, 'error');
            }
        };
        reader.readAsText(file);
    }

    function showCsvPreview(records) {
        document.getElementById('csv-count').textContent = records.length;
        const tbody = document.getElementById('csv-preview-body');
        tbody.innerHTML = '';

        records.forEach(r => {
            const opClass = r.operation === 'delete' ? 'text-red-400' :
                            r.operation === 'reset' ? 'text-amber-400' :
                            r.operation === 'create' ? 'text-green-400' : 'text-slate-300';
            // Warn if used_pages > limit_pages
            const usedNum = parseInt(r.used_pages) || 0;
            const limitNum = parseInt(r.limit_pages) || 0;
            const isOverLimit = r.used_pages && r.limit_pages && limitNum > 0 && usedNum > limitNum && r.operation !== 'delete' && r.operation !== 'reset';

            const tr = document.createElement('tr');
            tr.className = isOverLimit ? 'bg-amber-900/20 hover:bg-amber-900/30' : 'hover:bg-white/5';
            tr.innerHTML = `
                <td class="px-4 py-3">${escapeHtml(r.username)}</td>
                <td class="px-4 py-3 text-slate-400 text-xs">${escapeHtml(r.email)}</td>
                <td class="px-4 py-3 text-right tabular-nums ${isOverLimit ? 'text-amber-400 font-bold' : ''}">${escapeHtml(r.used_pages || '-')}</td>
                <td class="px-4 py-3 text-right tabular-nums ${isOverLimit ? 'text-amber-400 font-bold' : ''}">${escapeHtml(r.limit_pages || '-')}</td>
                <td class="px-4 py-3 ${opClass} font-medium text-xs uppercase">${isOverLimit ? '⚠ over limit' : escapeHtml(r.operation)}</td>
            `;
            tbody.appendChild(tr);
        });

        document.getElementById('csv-preview-modal').classList.remove('hidden');
    }

    function closeCsvPreview() {
        document.getElementById('csv-preview-modal').classList.add('hidden');
        pendingCsvFile = null;
    }

    async function confirmCsvImport() {
        if (!pendingCsvFile) return;

        const formData = new FormData();
        formData.append('file', pendingCsvFile);

        try {
            const res = await fetch('/admin/api/print-quotas/import', {
                method: 'POST',
                body: formData
            });
            const result = await res.json();
            if (result.errors && result.errors.length > 0) {
                const msg = MSG_IMPORT_SUCCESS.replace('{count}', result.imported)
                    + ' (' + result.errors.length + ' errors)';
                showNotification(msg, 'error');
            } else {
                const msg = MSG_IMPORT_SUCCESS.replace('{count}', result.imported);
                showNotification(msg, 'success');
            }
            closeCsvPreview();
            loadUsers();
        } catch (e) {
            showNotification(MSG_IMPORT_FAILED, 'error');
        }
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }


    // === Print Settings ===
    async function loadMaxPagesPerJobSetting() {
        try {
            const res = await fetch('/admin/api/print-settings');
            if (!res.ok) return;
            const data = await res.json();

            document.getElementById('max_pages_per_job_enabled').checked = data.max_pages_per_job_enabled || false;
            document.getElementById('max_pages_per_job_value').value = data.max_pages_per_job || 100;
            document.getElementById('default_print_limit_value').value = data.default_print_limit ?? 0;
        } catch (e) {
            console.error('Failed to load print settings', e);
        }
    }

    async function saveMaxPagesPerJobSetting() {
        const data = {
            max_pages_per_job_enabled: document.getElementById('max_pages_per_job_enabled').checked,
            max_pages_per_job: parseInt(document.getElementById('max_pages_per_job_value').value) || 100
        };

        try {
            const res = await fetch('/admin/api/print-settings', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            if (!res.ok) {
                console.error('Failed to save print settings');
            }
        } catch (e) {
            console.error('Failed to save print settings', e);
        }
    }

    async function saveDefaultPrintLimitSetting() {
        const data = {
            default_print_limit: parseInt(document.getElementById('default_print_limit_value').value) || 0
        };
        try {
            const res = await fetch('/admin/api/print-settings', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            if (!res.ok) {
                console.error('Failed to save default print limit');
            }
        } catch (e) {
            console.error('Failed to save default print limit', e);
        }
    }
    // Load settings when users tab is shown
    const origSwitchTab = switchTab;
    switchTab = function (tabName) {
        origSwitchTab(tabName);
        if (tabName === 'users') {
            loadMaxPagesPerJobSetting();
        }
    };

    // Print Notification Email Functions
    async function loadEmailTemplates() {
        try {
            const res = await fetch('/admin/api/print-email-templates');
            if (!res.ok) return;
            const data = await res.json();
            document.getElementById('warning_enabled').checked = data.warning_enabled || false;
            document.getElementById('warning_threshold').value = data.warning_threshold || 80;
            document.getElementById('warning_subject').value = data.warning_subject || '';
            document.getElementById('warning_body').value = data.warning_body || '';
            document.getElementById('limit_reached_enabled').checked = data.limit_reached_enabled || false;
            document.getElementById('limit_reached_subject').value = data.limit_reached_subject || '';
            document.getElementById('limit_reached_body').value = data.limit_reached_body || '';
        } catch (e) {
            console.error('Failed to load email templates', e);
        }
    }

    async function saveEmailTemplates() {
        const data = {
            warning_enabled: document.getElementById('warning_enabled').checked,
            warning_threshold: parseInt(document.getElementById('warning_threshold').value) || 80,
            warning_subject: document.getElementById('warning_subject').value,
            warning_body: document.getElementById('warning_body').value,
            limit_reached_enabled: document.getElementById('limit_reached_enabled').checked,
            limit_reached_subject: document.getElementById('limit_reached_subject').value,
            limit_reached_body: document.getElementById('limit_reached_body').value
        };
        try {
            const res = await fetch('/admin/api/print-email-templates', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            if (res.ok) {
                showNotification('{{ crate::i18n::t("print-mgmt-email-saved", lang) }}', 'success');
            } else {
                showNotification('{{ crate::i18n::t("error-operation-failed", lang) }}', 'error');
            }
        } catch (e) {
            showNotification('{{ crate::i18n::t("error-generic", lang) }}', 'error');
        }
    }

</script>
{% endif %}
{% endblock %}