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

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

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

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

            <!-- Tab Navigation -->
            <div class="flex border-b border-slate-700">
                <button onclick="switchTab('logs')" id="tab-logs"
                    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("webmgmt-access-log", lang) }}
                </button>
                <button onclick="switchTab('restrictions')" id="tab-restrictions"
                    class="tab-btn px-6 py-3 text-sm font-semibold border-b-2 border-primary-500 text-white">
                    {{ crate::i18n::t("webmgmt-restrictions-tab", lang) }}
                </button>
            </div>

            <!-- ===== Tab: アクセスログ ===== -->
            <div id="panel-logs" class="hidden space-y-4">

                <!-- Filter Bar -->
                <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="filter-since"
                            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="filter-until"
                            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="setLogPeriod('24h')" data-period="24h"
                            class="log-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="setLogPeriod('1m')" data-period="1m"
                            class="log-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="setLogPeriod('6m')" data-period="6m"
                            class="log-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="setLogPeriod('1y')" data-period="1y"
                            class="log-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="log-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>

                <!-- 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("webmgmt-access-log", lang) }}</h3>
                        <div class="flex items-center gap-3">
                            <!-- Search -->
                            <input type="text" id="filter-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"></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-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("webmgmt-col-title", lang) }}</th>
                                    <th class="px-4 py-3">URL</th>
                                </tr>
                            </thead>
                            <tbody id="log-table-body" 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">
                        <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>

            <!-- ===== Tab: 閲覧制限設定 ===== -->
            <div id="panel-restrictions" class="space-y-6">
                <!-- Info Banner -->
                <div class="bg-blue-900/30 border border-blue-500/40 rounded-xl p-6">
                    <div class="flex items-start gap-3">
                        <svg class="w-6 h-6 text-blue-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <div class="text-sm text-blue-200/80 space-y-1">
                            <p>{{ crate::i18n::t("settings-proxy-info-main", lang) }}</p>
                            <p>{{ crate::i18n::t("settings-proxy-info-cert", lang) }}</p>
                        </div>
                    </div>
                </div>

                <!-- Web Restriction per Group -->
                <div class="glass rounded-xl border border-white/10 p-6">
                    <h3 class="text-lg font-semibold mb-6">{{ crate::i18n::t("webrestrict-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>

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

{% if !is_demo %}
<script>
const I18N_LOADING = '{{crate::i18n::t("common-loading",lang)}}';
const I18N_NO_LOGS = '{{crate::i18n::t("common-no-data",lang)}}';
const I18N_RECORDS = '{{crate::i18n::t("appusage-records",lang)}}';
// ===== Tab switching =====
let currentTab = 'restrictions';

function switchTab(tab) {
    currentTab = tab;
    // Hide all panels
    document.getElementById('panel-logs').classList.add('hidden');
    document.getElementById('panel-restrictions').classList.add('hidden');

    // Deactivate all tab buttons
    const tabs = ['tab-logs', 'tab-restrictions'];
    tabs.forEach(id => {
        const el = document.getElementById(id);
        el.classList.remove('border-primary-500', 'text-white');
        el.classList.add('border-transparent', 'text-slate-400');
    });

    // Activate selected tab
    const activeTab = document.getElementById('tab-' + tab);
    activeTab.classList.add('border-primary-500', 'text-white');
    activeTab.classList.remove('border-transparent', 'text-slate-400');
    document.getElementById('panel-' + tab).classList.remove('hidden');

    if (tab === 'restrictions' && !restrictionsLoaded) {
        loadGroups();
        restrictionsLoaded = true;
    }

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

// On page load
document.addEventListener('DOMContentLoaded', async () => {
    // Load restrictions (with proxy state)
    loadGroups();
    restrictionsLoaded = true;

    // Initialize logs
    initLogDates();
    loadLogs(1);
    logsInitialized = true;
    setInterval(() => loadLogs(currentPage), 30000);

    // Check hash for direct link
    const hashTab = window.location.hash.replace('#', '');
    if (hashTab && ['logs', 'restrictions'].includes(hashTab)) {
        switchTab(hashTab);
    } else {
        switchTab('restrictions');
    }
});

// ===== Browse Log logic =====
let currentPage = 1;
let debounceTimer = null;
let currentPeriod = '1m';

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

function initLogDates() {
    setLogPeriod('24h');
}

function setLogPeriod(period) {
    currentPeriod = period;
    const now = new Date();
    const since = new Date(now);

    // Update button styles
    document.querySelectorAll('.log-period-btn').forEach(btn => {
        if (btn.dataset.period === period) {
            btn.className = 'log-period-btn px-4 py-1.5 rounded-md text-xs font-medium transition-colors bg-primary-600 text-white';
        } else {
            btn.className = 'log-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';
        }
    });

    if (period === 'custom') return;

    // Hide custom date picker for preset periods
    document.getElementById('custom-date-picker').classList.add('hidden');

    switch (period) {
        case '24h': since.setDate(since.getDate() - 1); break;
        case '1m':  since.setDate(since.getDate() - 30); break;
        case '6m':  since.setDate(since.getDate() - 180); break;
        case '1y':  since.setDate(since.getDate() - 365); break;
    }

    document.getElementById('filter-since').value = toLocalDateStr(since);
    document.getElementById('filter-until').value = toLocalDateStr(now);
    loadLogs(1);
}

function toggleCustomDatePicker() {
    const picker = document.getElementById('custom-date-picker');
    picker.classList.toggle('hidden');
    document.querySelectorAll('.log-period-btn').forEach(btn => {
        if (btn.dataset.period === 'custom') {
            btn.className = 'log-period-btn px-4 py-1.5 rounded-md text-xs font-medium transition-colors bg-primary-600 text-white';
        } else {
            btn.className = 'log-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';
        }
    });
}

function applyCustomPeriod() {
    currentPeriod = 'custom';
    loadLogs(1);
}

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);
    return params;
}
let LOG_PAGE_SIZE = 50;
let currentTotal = 0;

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

    const res = await fetch('/admin/api/web-browse-logs?' + params.toString());
    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">${I18N_NO_LOGS}</td></tr>`;
    } else {
        tbody.innerHTML = data.logs.map(row => `
            <tr class="hover:bg-white/5 transition-colors">
                <td class="px-4 py-2.5 text-slate-400 text-xs font-mono whitespace-nowrap">${row.accessed_at}</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-slate-200 max-w-[300px] truncate" title="${escapeHtml(row.title)}">${escapeHtml(row.title)}</td>
                <td class="px-4 py-2.5 text-xs max-w-xs truncate" title="${escapeHtml(row.url)}"><a href="${escapeHtml(row.url)}" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 hover:underline">${escapeHtml(row.url)}</a></td>
            </tr>
        `).join('');
    }
    renderLogPagination();
}

function escapeHtml(str) {
    if (!str) return '-';
    return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function renderLogPagination() {
    const totalPages = Math.ceil(currentTotal / LOG_PAGE_SIZE);
    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) * LOG_PAGE_SIZE + 1;
    const end = Math.min(currentPage * LOG_PAGE_SIZE, currentTotal);
    pageInfo.textContent = `${start}–${end} / ${currentTotal}`;
    let sizeHtml = `<select onchange="changeLogPageSize(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===LOG_PAGE_SIZE?'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="gotoLogPage(${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="gotoLogPage(${p})" class="${btnClass(p===currentPage)}">${p}</button>`;
    }
    html += `<button onclick="gotoLogPage(${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 changeLogPageSize(val) {
    LOG_PAGE_SIZE = parseInt(val) || 50;
    currentPage = 1;
    loadLogs(1);
}

function gotoLogPage(p) {
    const totalPages = Math.ceil(currentTotal / LOG_PAGE_SIZE);
    if (p < 1 || p > totalPages) return;
    loadLogs(p);
}

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

// ===== Web Restriction logic =====
let restrictionsLoaded = false;
{% if !is_demo %}
const i18n = {
    enabled: '{{ crate::i18n::t("webrestrict-enabled", lang) }}',
    disabled: '{{ crate::i18n::t("webrestrict-disabled", lang) }}',
    enableRestriction: '{{ crate::i18n::t("common-enabled", lang) }}',
    mode: '{{ crate::i18n::t("webrestrict-mode", lang) }}',
    modeBlocklist: '{{ crate::i18n::t("webrestrict-mode-blocklist", lang) }}',
    modeAllowlist: '{{ crate::i18n::t("webrestrict-mode-allowlist", lang) }}',
    domains: '{{ crate::i18n::t("webrestrict-domains", lang) }}',
    domainsHint: '{{ crate::i18n::t("webrestrict-domains-hint", lang) }}',
    saved: '{{ crate::i18n::t("webrestrict-saved", lang) }}',
    saveFailed: '{{ crate::i18n::t("webrestrict-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}/restrictions`);
        if (response.ok) {
            const data = await response.json();
            if (data.ok && data.restriction) return data.restriction;
        }
    } catch (error) {
        console.error('Failed to load restriction:', error);
    }
    return { enabled: false, mode: 'blocklist', domains: [] };
}

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 domainsText = (restriction.domains || []).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.mode}</label>
                    <div class="relative mode-dropdown">
                        <input type="hidden" class="restriction-mode" data-group="${group.id}" value="${restriction.mode || 'blocklist'}">
                        <button type="button" onclick="toggleModeDropdown('${group.id}')"
                            class="flex items-center justify-between gap-2 w-full px-3 py-2 bg-slate-800/50 border border-slate-600 rounded-lg text-white text-sm focus:ring-2 focus:ring-primary-500 outline-none">
                            <span class="mode-label-${group.id} truncate">${restriction.mode === 'allowlist' ? i18n.modeAllowlist : i18n.modeBlocklist}</span>
                            <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                        <div class="mode-menu-${group.id} hidden absolute top-full mt-2 left-0 w-full bg-slate-800 border border-slate-600 rounded-lg shadow-xl overflow-hidden z-20">
                            <button type="button" onclick="selectMode('${group.id}', 'blocklist', '${i18n.modeBlocklist}')" class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">${i18n.modeBlocklist}</button>
                            <button type="button" onclick="selectMode('${group.id}', 'allowlist', '${i18n.modeAllowlist}')" class="w-full text-left px-4 py-2 hover:bg-white/10 text-sm text-slate-200">${i18n.modeAllowlist}</button>
                        </div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">${i18n.domains}</label>
                    <textarea class="restriction-domains 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="*.youtube.com&#10;twitter.com&#10;facebook.com">${domainsText}</textarea>
                    <p class="text-xs text-slate-500 mt-1">${i18n.domainsHint}</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;
}

function toggleModeDropdown(groupId) {
    document.querySelectorAll('[class^="mode-menu-"]').forEach(m => m.classList.add('hidden'));
    document.querySelector(`.mode-menu-${groupId}`).classList.toggle('hidden');
}

function selectMode(groupId, value, label) {
    document.querySelector(`.restriction-mode[data-group="${groupId}"]`).value = value;
    document.querySelector(`.mode-label-${groupId}`).textContent = label;
    document.querySelector(`.mode-menu-${groupId}`).classList.add('hidden');
}

async function saveRestriction(groupId) {
    const enabled = document.querySelector(`.restriction-enabled[data-group="${groupId}"]`).checked;
    const mode = document.querySelector(`.restriction-mode[data-group="${groupId}"]`).value;
    const domainsText = document.querySelector(`.restriction-domains[data-group="${groupId}"]`).value;
    const domains = domainsText.split('\n').map(d => d.trim()).filter(d => d.length > 0);
    try {
        // Save restriction settings
        const response = await fetch(`/admin/api/groups/${groupId}/restrictions`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ mode, domains, enabled })
        });
        // Sync proxy_enabled with restriction enabled state
        await fetch(`/admin/api/groups/${groupId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ proxy_enabled: 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 (error) {
        showNotification(i18n.saveFailed, 'error');
    }
}

document.addEventListener('click', function(e) {
    if (!e.target.closest('.mode-dropdown')) {
        document.querySelectorAll('[class^="mode-menu-"]').forEach(m => m.classList.add('hidden'));
    }
});
{% endif %}

let logsInitialized = false;


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