{% extends "base.html" %}

{% block title %}{{ t.configs_portal_heading }} | {{ t.site_name }}{% endblock title %}

{% block head_extra %}
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
    * { box-sizing: border-box; }
    [x-cloak] { display: none !important; }
    body { margin: 0; min-height: 100vh; background: #edf3ef; color: #18232d; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    button, input { font: inherit; }
    button { min-height: 40px; border: 1px solid #18342f; border-radius: 8px; padding: .55rem .85rem; background: #18342f; color: #fff; cursor: pointer; font-weight: 750; }
    button.secondary { background: #fff; color: #18342f; border-color: #c7d4ce; }
    button.ghost { background: transparent; color: #42515d; border-color: transparent; }
    button.danger { background: #a8312d; border-color: #a8312d; color: #fff; }
    button:disabled { opacity: .48; cursor: default; }
    input { width: 100%; min-height: 42px; border: 1px solid #c7d4ce; border-radius: 8px; padding: .55rem .7rem; color: #18232d; background: #fff; }
    code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; background: #f1f4f2; color: #26313a; padding: .18rem .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
    .portal { min-height: 100vh; display: flex; flex-direction: column; }
    .topbar { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94); border-bottom: 1px solid #d6dfda; backdrop-filter: blur(12px); }
    .topbar-inner { width: min(1040px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .85rem; padding: .75rem 1rem; }
    .brand { display: flex; align-items: center; gap: .65rem; min-width: 0; color: inherit; text-decoration: none; }
    .brand-mark { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #18342f; color: #cce8da; font-weight: 900; }
    .brand-text { display: grid; gap: .05rem; min-width: 0; }
    .brand-title { font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brand-version { color: #7a858d; font-size: .75rem; }
    .top-actions { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; flex-wrap: wrap; }
    .user-pill { color: #53616c; font-size: .86rem; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lang-switch { display: inline-flex; align-items: center; border: 1px solid #d6dfda; border-radius: 8px; background: #f7faf8; overflow: hidden; }
    .lang-switch a { min-width: 38px; padding: .38rem .5rem; color: #53616c; text-align: center; text-decoration: none; font-size: .82rem; font-weight: 800; }
    .lang-switch a.active { background: #18342f; color: #fff; }
    .logout-link { color: #53616c; text-decoration: none; font-size: .88rem; font-weight: 750; padding: .45rem .55rem; border-radius: 8px; }
    .logout-link:hover { background: #e4ebe7; color: #18232d; }
    .page { width: min(1040px, 100%); margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }
    .panel { border: 1px solid #d6dfda; border-radius: 8px; background: #fff; box-shadow: 0 10px 30px rgba(24, 52, 47, .08); }
    .intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; padding: 1rem; }
    .eyebrow { margin: 0 0 .3rem; color: #5b6b64; font-size: .78rem; font-weight: 850; letter-spacing: 0; text-transform: uppercase; }
    h1 { margin: 0; font-size: 2rem; line-height: 1.08; letter-spacing: 0; }
    .counters { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
    .counter { min-width: 92px; border: 1px solid #dce5e0; border-radius: 8px; padding: .55rem .65rem; background: #f7faf8; display: grid; gap: .1rem; }
    .counter strong { font-size: 1.25rem; line-height: 1; }
    .counter span { color: #69777f; font-size: .78rem; font-weight: 750; }
    .portal-server-status { display: grid; gap: .45rem; padding: 0 1rem 1rem; }
    .portal-server-head { display: flex; align-items: center; justify-content: space-between; gap: .65rem; color: #34424b; font-size: .83rem; font-weight: 850; }
    .mini-button { min-height: 28px; border-radius: 7px; padding: .2rem .5rem; background: #fff; color: #18342f; border-color: #c7d4ce; font-size: .76rem; }
    .server-status-grid { max-height: 138px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: .4rem; padding-right: .12rem; }
    .server-status-chip { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .42rem .5rem; align-items: center; border: 1px solid #dce5e0; border-radius: 8px; background: #f7faf8; padding: .45rem .52rem; }
    .server-status-dot { width: .58rem; height: .58rem; border-radius: 999px; background: #8a969e; }
    .server-status-chip.tone-online .server-status-dot { background: #2f8f4e; }
    .server-status-chip.tone-warning .server-status-dot { background: #d39a00; }
    .server-status-chip.tone-error .server-status-dot { background: #a8312d; }
    .server-status-chip.tone-offline .server-status-dot { background: #69777f; }
    .server-status-text { min-width: 0; display: grid; gap: .08rem; }
    .server-status-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #18232d; font-size: .86rem; font-weight: 850; }
    .server-status-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #69777f; font-size: .74rem; font-weight: 750; }
    .server-status-muted { color: #69777f; font-size: .82rem; }
    .create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; padding: 0 1rem 1rem; align-items: end; }
    .field { display: grid; gap: .32rem; min-width: 0; }
    .field label { color: #34424b; font-size: .83rem; font-weight: 800; }
    .notice { border: 1px solid #d6dfda; border-left-width: 4px; border-radius: 8px; background: #fff; padding: .75rem .85rem; display: grid; gap: .25rem; box-shadow: 0 8px 24px rgba(24, 52, 47, .06); }
    .notice strong { color: #18232d; }
    .notice span { color: #53616c; font-size: .9rem; }
    .notice details { color: #69777f; font-size: .82rem; }
    .notice summary { cursor: pointer; font-weight: 750; }
    .notice.tone-success { border-left-color: #2f8f4e; }
    .notice.tone-warning { border-left-color: #d39a00; }
    .notice.tone-error { border-left-color: #a8312d; }
    .empty { padding: 1rem; color: #53616c; }
    .empty strong { display: block; margin-bottom: .25rem; color: #18232d; }
    .key-list { display: grid; gap: .75rem; }
    .key-card { border: 1px solid #d6dfda; border-radius: 8px; background: #fff; padding: .85rem; display: grid; gap: .75rem; }
    .key-card.is-disabled { background: #fafafa; }
    .key-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; min-width: 0; }
    .key-title { min-width: 0; display: grid; gap: .32rem; }
    .key-name { margin: 0; color: #18232d; font-size: 1.08rem; line-height: 1.2; overflow-wrap: anywhere; }
    .status-chip { width: max-content; max-width: 100%; display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: .15rem .5rem; font-size: .78rem; font-weight: 850; }
    .status-chip.enabled { color: #155d36; background: #dcefe4; }
    .status-chip.disabled { color: #69777f; background: #e8eeeb; }
    .meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
    .meta-item { min-width: 0; display: grid; gap: .24rem; }
    .meta-label { color: #69777f; font-size: .77rem; font-weight: 800; }
    .key-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; }
    .key-actions .server-button { justify-self: stretch; }
    .key-updated { color: #69777f; font-size: .82rem; overflow-wrap: anywhere; }
    .backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; background: rgba(16, 28, 36, .42); }
    .sheet { width: min(720px, 100%); max-height: min(760px, calc(100vh - 2rem)); border: 1px solid #d6dfda; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px rgba(16, 28, 36, .25); padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
    .sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
    .sheet-title { min-width: 0; display: grid; gap: .2rem; }
    .sheet-title h2 { margin: 0; font-size: 1.18rem; line-height: 1.2; }
    .sheet-title span { color: #69777f; font-size: .86rem; overflow-wrap: anywhere; }
    .server-list { border: 1px solid #d6dfda; border-radius: 8px; overflow: auto; }
    .server-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .62rem .7rem; border-bottom: 1px solid #e7eee9; background: #fff; }
    .server-row:last-child { border-bottom: 0; }
    .server-row:hover { background: #f7faf8; }
    .server-main { min-width: 0; display: grid; gap: .28rem; }
    .server-main strong { overflow-wrap: anywhere; }
    .server-actions { display: flex; align-items: center; gap: .32rem; }
    .icon-button { position: relative; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; border-radius: 8px; }
    .icon-button svg { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .icon-button .qr-mark { font-size: .72rem; line-height: 1; font-weight: 900; letter-spacing: 0; }
    .icon-button::after { content: attr(data-tip); position: absolute; right: calc(100% + .35rem); top: 50%; z-index: 4; width: max-content; max-width: 180px; padding: .38rem .5rem; border-radius: 6px; background: #18232d; color: #fff; font-size: .76rem; line-height: 1.2; font-weight: 750; opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity .12s ease; }
    .icon-button:hover::after, .icon-button:focus-visible::after { opacity: 1; }
    .qr-modal { width: min(380px, 100%); border: 1px solid #d6dfda; border-radius: 8px; background: #fff; padding: 1rem; box-shadow: 0 20px 60px rgba(16, 28, 36, .25); display: grid; gap: .8rem; }
    .qr-modal h2 { margin: 0; font-size: 1.08rem; overflow-wrap: anywhere; }
    .qr-box { display: grid; place-items: center; padding: .75rem; border: 1px solid #d6dfda; border-radius: 8px; background: #fff; }
    .qr-box svg { width: min(280px, 100%); height: auto; display: block; }
    .modal-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
    .telegram-sheet { width: min(480px, 100%); }
    .telegram-copy { color: #53616c; line-height: 1.45; margin: 0; }
    .guide-list { margin: 0; padding-left: 1.2rem; color: #34424b; display: grid; gap: .45rem; line-height: 1.4; }
    .guide-list a { color: #18342f; font-weight: 850; }
    .guide-list a.disabled { color: #69777f; pointer-events: none; text-decoration: none; }
    @media (max-width: 720px) {
        .topbar-inner { align-items: flex-start; flex-direction: column; }
        .top-actions { width: 100%; justify-content: space-between; }
        .user-pill { max-width: 100%; }
        .intro { grid-template-columns: 1fr; align-items: start; }
        h1 { font-size: 1.55rem; }
        .counters { justify-content: stretch; }
        .counter { flex: 1 1 120px; }
        .server-status-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); max-height: 156px; }
        .create { grid-template-columns: 1fr; }
        .create button { width: 100%; }
        .meta-grid { grid-template-columns: 1fr; }
        .key-head { flex-direction: column; }
        .key-actions { grid-template-columns: 1fr 1fr; }
        .key-actions .server-button { grid-column: 1 / -1; }
        .key-actions button { width: 100%; }
        .backdrop { align-items: end; padding: 0; }
        .sheet { max-height: 92vh; border-radius: 8px 8px 0 0; }
        .server-row { grid-template-columns: minmax(0, 1fr) auto; padding: .58rem .62rem; }
        .server-actions { gap: .25rem; }
        .icon-button { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
        .qr-modal { width: 100%; border-radius: 8px 8px 0 0; }
    }
</style>
{% endblock head_extra %}

{% block body %}
<div class="portal" x-data="clientPortal()" x-init="init()">
    <header class="topbar">
        <div class="topbar-inner">
            <a class="brand" href="/configs">
                <span class="brand-mark">A</span>
                <span class="brand-text">
                    <span class="brand-title">{{ t.site_name }}</span>
                    <span class="brand-version">v{{ app_version }}</span>
                </span>
            </a>
            <div class="top-actions">
                <span class="user-pill">{{ user_name }} ({{ user_role }})</span>
                <div class="lang-switch">
                    <a href="#"{% if t.lang.code() == "en" %} class="active"{% endif %} onclick="location.href='/set-lang?lang=en&next='+encodeURIComponent(location.pathname);return false">EN</a>
                    <a href="#"{% if t.lang.code() == "ru" %} class="active"{% endif %} onclick="location.href='/set-lang?lang=ru&next='+encodeURIComponent(location.pathname);return false">RU</a>
                </div>
                <a class="logout-link" href="/logout">{{ t.nav_logout }}</a>
            </div>
        </div>
    </header>

    <main class="page">
        <section class="panel">
            <div class="intro">
                <div>
                    <p class="eyebrow">{{ t.configs_portal_kicker }}</p>
                    <h1>{{ t.configs_portal_heading }}</h1>
                </div>
                <div class="counters" aria-label="{{ t.configs_key_status }}">
                    <div class="counter">
                        <strong x-text="activeClients()"></strong>
                        <span>{{ t.configs_active_keys }}</span>
                    </div>
                    <div class="counter">
                        <strong x-text="clients.length"></strong>
                        <span>{{ t.configs_total_keys }}</span>
                    </div>
                </div>
            </div>
            <div class="portal-server-status">
                <div class="portal-server-head">
                    <span>{{ t.configs_server_status }}</span>
                    <button type="button" class="mini-button" @click="loadServerStatus()" :disabled="serverStatusBusy">{{ t.configs_refresh }}</button>
                </div>
                <template x-if="serverStatusBusy && serverPods().length === 0">
                    <div class="server-status-muted">{{ t.configs_loading_status }}</div>
                </template>
                <template x-if="serverStatusError && serverPods().length === 0 && !serverStatusBusy">
                    <div class="server-status-muted">{{ t.configs_status_unavailable }}</div>
                </template>
                <template x-if="serverStatus && serverPods().length === 0 && !serverStatusBusy && !serverStatusError">
                    <div class="server-status-muted">{{ t.configs_no_servers }}</div>
                </template>
                <template x-if="serverPods().length > 0">
                    <div class="server-status-grid">
                        <template x-for="pod in serverPods()" :key="pod.name">
                            <div class="server-status-chip" :class="`tone-${serverTone(pod)}`" :title="serverTooltip(pod)">
                                <span class="server-status-dot"></span>
                                <span class="server-status-text">
                                    <span class="server-status-name" x-text="serverName(pod)"></span>
                                    <span class="server-status-label" x-text="serverStatusLabel(pod)"></span>
                                </span>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
            <div class="create">
                <div class="field">
                    <label for="client-name">{{ t.configs_new_key }}</label>
                    <input id="client-name" x-model="newName" @keydown.enter.prevent="createClient()" placeholder="{{ t.configs_name_placeholder }}">
                </div>
                <button type="button" @click="createClient()" :disabled="busy">{{ t.configs_create }}</button>
            </div>
        </section>

        <template x-if="notice">
            <section class="notice" :class="`tone-${notice.kind}`">
                <strong x-text="notice.title"></strong>
                <span x-text="notice.message"></span>
                <details x-show="notice.detail">
                    <summary>{{ t.notice_detail }}</summary>
                    <span x-text="notice.detail"></span>
                </details>
            </section>
        </template>

        <template x-if="!busy && clients.length === 0">
            <section class="panel empty">
                <strong>{{ t.configs_empty_title }}</strong>
                <span>{{ t.configs_empty_hint }}</span>
            </section>
        </template>

        <template x-if="clients.length > 0">
            <section class="key-list">
                <template x-for="client in sortedClients()" :key="client.id">
                    <article class="key-card" :class="{ 'is-disabled': !client.enabled }">
                        <div class="key-head">
                            <div class="key-title">
                                <h2 class="key-name" x-text="client.name"></h2>
                                <span class="status-chip" :class="client.enabled ? 'enabled' : 'disabled'" x-text="client.enabled ? '{{ t.configs_enabled_state }}' : '{{ t.configs_disabled_state }}'"></span>
                            </div>
                        </div>

                        <div class="meta-grid">
                            <div class="meta-item">
                                <span class="meta-label">{{ t.configs_address }}</span>
                                <code x-text="client.address + '/32'"></code>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">{{ t.configs_public_key }}</span>
                                <code x-text="shortKey(client.public_key)"></code>
                            </div>
                        </div>

                        <div class="key-actions">
                            <button type="button" class="server-button" @click="openServers(client)" :disabled="busy || !client.enabled">{{ t.configs_choose_server }}</button>
                            <button type="button" class="secondary" @click="setEnabled(client, !client.enabled)" :disabled="busy" x-text="client.enabled ? '{{ t.configs_disable }}' : '{{ t.configs_enable }}'"></button>
                            <button type="button" class="danger" @click="deleteClient(client)" :disabled="busy">{{ t.users_delete }}</button>
                        </div>

                        <span class="key-updated" x-text="client.updated_at ? '{{ t.configs_updated }}: ' + formatDate(client.updated_at) : '{{ t.configs_key_ready }}'"></span>
                    </article>
                </template>
            </section>
        </template>
    </main>

    <template x-if="serverModal">
        <div class="backdrop" x-cloak @click.self="closeServers()">
            <section class="sheet">
                <div class="sheet-head">
                    <div class="sheet-title">
                        <h2>{{ t.configs_choose_server }}</h2>
                        <span x-text="serverModal.client.name"></span>
                    </div>
                    <button type="button" class="ghost" @click="closeServers()">{{ t.admin_close }}</button>
                </div>
                <input x-model="serverModal.filter" placeholder="{{ t.configs_server_search }}">
                <template x-if="serverModal.loading">
                    <div class="empty">{{ t.configs_loading_servers }}</div>
                </template>
                <template x-if="!serverModal.loading && filteredServers().length === 0">
                    <div class="empty">{{ t.configs_no_servers }}</div>
                </template>
                <template x-if="!serverModal.loading && filteredServers().length > 0">
                    <div class="server-list">
                        <template x-for="server in filteredServers()" :key="server.endpoint_id || server.endpoint_name">
                            <article class="server-row">
                                <div class="server-main">
                                    <strong x-text="server.endpoint_name"></strong>
                                    <code x-text="server.endpoint"></code>
                                </div>
                                <div class="server-actions">
                                    <button type="button" class="icon-button" @click="copyVpnUrl(serverModal.client, server)" :disabled="busy" data-tip="{{ t.configs_copy_link }}" title="{{ t.configs_copy_link }}" aria-label="{{ t.configs_copy_link }}">
                                        <svg aria-hidden="true" viewBox="0 0 24 24">
                                            <path d="M10 13a5 5 0 0 1 0-7l1-1a5 5 0 0 1 7 7l-1 1"></path>
                                            <path d="M14 11a5 5 0 0 1 0 7l-1 1a5 5 0 0 1-7-7l1-1"></path>
                                        </svg>
                                    </button>
                                    <button type="button" class="secondary icon-button" @click="openQr(serverModal.client, server)" :disabled="busy" data-tip="{{ t.configs_qr_code }}" title="{{ t.configs_qr_code }}" aria-label="{{ t.configs_qr_code }}">
                                        <span class="qr-mark" aria-hidden="true">QR</span>
                                    </button>
                                    <button type="button" class="secondary icon-button" @click="downloadConfig(serverModal.client, server)" :disabled="busy" data-tip="{{ t.configs_download }}" title="{{ t.configs_download }}" aria-label="{{ t.configs_download }}">
                                        <svg aria-hidden="true" viewBox="0 0 24 24">
                                            <path d="M12 3v12"></path>
                                            <path d="m7 10 5 5 5-5"></path>
                                            <path d="M5 21h14"></path>
                                        </svg>
                                    </button>
                                </div>
                            </article>
                        </template>
                    </div>
                </template>
            </section>
        </div>
    </template>

    <template x-if="qrModal">
        <div class="backdrop" x-cloak @click.self="closeQr()">
            <section class="qr-modal">
                <h2 x-text="qrModal.title"></h2>
                <div class="qr-box" x-html="qrModal.svg"></div>
                <div class="modal-actions">
                    <button type="button" class="secondary" @click="copyText(qrModal.url)">{{ t.configs_copy_link }}</button>
                    <button type="button" @click="closeQr()">{{ t.admin_close }}</button>
                </div>
            </section>
        </div>
    </template>

    <template x-if="telegramModal">
        <div class="backdrop" x-cloak>
            <section class="sheet telegram-sheet">
                <div class="sheet-head">
                    <div class="sheet-title">
                        <h2>{{ t.telegram_link_title }}</h2>
                        <span x-text="telegramBotLabel()"></span>
                    </div>
                </div>

                <template x-if="telegramModal === 'webapp'">
                    <div>
                        <p class="telegram-copy">{{ t.telegram_webapp_message }}</p>
                        <div class="modal-actions">
                            <button type="button" class="secondary" @click="declineTelegramLink()" :disabled="telegramBusy">{{ t.telegram_skip }}</button>
                            <button type="button" @click="linkTelegramWebApp()" :disabled="telegramBusy">{{ t.telegram_save }}</button>
                        </div>
                    </div>
                </template>

                <template x-if="telegramModal === 'manualPrompt'">
                    <div>
                        <p class="telegram-copy">{{ t.telegram_manual_message }}</p>
                        <div class="modal-actions">
                            <button type="button" class="secondary" @click="declineTelegramLink()" :disabled="telegramBusy">{{ t.telegram_skip }}</button>
                            <button type="button" @click="telegramModal = 'manualGuide'">{{ t.telegram_connect }}</button>
                        </div>
                    </div>
                </template>

                <template x-if="telegramModal === 'manualGuide'">
                    <div class="field">
                        <p class="eyebrow">{{ t.telegram_guide_title }}</p>
                        <ol class="guide-list">
                            <li>{{ t.telegram_guide_start }} <a :href="telegramBotUrl()" target="_blank" rel="noreferrer" :class="{ disabled: !telegram.bot_url }">{{ t.telegram_open_bot }}</a></li>
                            <li>{{ t.telegram_guide_get_id }}</li>
                            <li>{{ t.telegram_guide_paste }}</li>
                        </ol>
                        <label for="telegram-id">{{ t.telegram_id_label }}</label>
                        <input id="telegram-id" x-model="telegramManualId" inputmode="numeric" pattern="[0-9]*" placeholder="{{ t.telegram_id_placeholder }}" @keydown.enter.prevent="saveTelegramManual()">
                        <div class="modal-actions">
                            <button type="button" class="secondary" @click="declineTelegramLink()" :disabled="telegramBusy">{{ t.telegram_skip }}</button>
                            <button type="button" @click="saveTelegramManual()" :disabled="telegramBusy || !telegramManualId.trim()">{{ t.telegram_save }}</button>
                        </div>
                    </div>
                </template>
            </section>
        </div>
    </template>
</div>

<script>
function clientPortal() {
    return {
        clients: [],
        newName: '',
        busy: false,
        status: '',
        error: '',
        notice: null,
        serverStatus: null,
        serverStatusBusy: false,
        serverStatusError: '',
        serverStatusTimer: null,
        serverConfigs: {},
        serverModal: null,
        qrModal: null,
        telegram: {
            enabled: false,
            bot_username: '',
            bot_url: '',
            linked: false,
            declined: false,
            telegram_id: null,
            isWebApp: false,
            initData: '',
        },
        telegramModal: null,
        telegramManualId: '',
        telegramBusy: false,
        telegramPromptChecked: false,
        init() {
            this.initTelegramWebApp();
            this.load();
            this.loadServerStatus();
            this.loadTelegramStatus();
            this.serverStatusTimer = setInterval(() => this.loadServerStatus(true), 30000);
        },
        async request(url, options = {}) {
            const response = await fetch(url, {
                headers: { 'content-type': 'application/json' },
                ...options,
            });
            const data = await response.json().catch(() => ({}));
            if (!response.ok) {
                const error = new Error(data.error || this.httpStatusMessage(response.status));
                error.title = data.title || this.httpStatusTitle(response.status);
                error.detail = data.detail || '';
                error.code = data.code || '';
                error.status = response.status;
                throw error;
            }
            return data;
        },
        async load() {
            this.error = '';
            this.busy = true;
            try {
                const data = await this.request('/api/vpn-clients');
                this.clients = data.clients || [];
            } catch (e) {
                this.showError(e);
            } finally {
                this.busy = false;
            }
        },
        async loadServerStatus(silent = false) {
            this.serverStatusError = '';
            if (!silent) this.serverStatusBusy = true;
            try {
                this.serverStatus = await this.request('/api/vpn-status');
            } catch (e) {
                this.serverStatusError = e.message;
            } finally {
                this.serverStatusBusy = false;
            }
        },
        initTelegramWebApp() {
            const webApp = window.Telegram && window.Telegram.WebApp;
            if (!webApp) return;
            try {
                webApp.ready();
                webApp.expand();
            } catch (_) {}
            this.telegram.isWebApp = Boolean(webApp.initData);
            this.telegram.initData = webApp.initData || '';
        },
        async loadTelegramStatus() {
            try {
                const status = await this.request('/api/telegram-link/status');
                this.applyTelegramStatus(status);
                this.maybePromptTelegram();
            } catch (e) {
                console.warn('telegram status failed', e);
            }
        },
        applyTelegramStatus(status) {
            this.telegram = {
                ...this.telegram,
                enabled: Boolean(status.enabled),
                bot_username: status.bot_username || '',
                bot_url: status.bot_url || '',
                linked: Boolean(status.linked),
                declined: Boolean(status.declined),
                telegram_id: status.telegram_id || null,
            };
        },
        maybePromptTelegram() {
            if (this.telegramPromptChecked) return;
            this.telegramPromptChecked = true;
            if (!this.telegram.enabled || this.telegram.linked || this.telegram.declined) return;
            this.telegramModal = (this.telegram.isWebApp && this.telegram.initData) ? 'webapp' : 'manualPrompt';
        },
        async linkTelegramWebApp() {
            this.telegramBusy = true;
            this.clearNotice();
            try {
                const data = await this.request('/api/telegram-link/webapp', {
                    method: 'POST',
                    body: JSON.stringify({ init_data: this.telegram.initData }),
                });
                this.applyTelegramStatus(data.status || {});
                this.telegramModal = null;
                this.setNotice('success', '{{ t.notice_success_title }}', '{{ t.telegram_saved }}');
            } catch (e) {
                this.showError(e);
            } finally {
                this.telegramBusy = false;
            }
        },
        async saveTelegramManual() {
            this.telegramBusy = true;
            this.clearNotice();
            try {
                const data = await this.request('/api/telegram-link/manual', {
                    method: 'POST',
                    body: JSON.stringify({ telegram_id: this.telegramManualId }),
                });
                this.applyTelegramStatus(data.status || {});
                this.telegramManualId = '';
                this.telegramModal = null;
                this.setNotice('success', '{{ t.notice_success_title }}', '{{ t.telegram_saved }}');
            } catch (e) {
                this.showError(e);
            } finally {
                this.telegramBusy = false;
            }
        },
        async declineTelegramLink() {
            this.telegramBusy = true;
            this.clearNotice();
            try {
                const data = await this.request('/api/telegram-link/decline', { method: 'POST' });
                this.applyTelegramStatus(data.status || {});
                this.telegramModal = null;
                this.setNotice('success', '{{ t.notice_success_title }}', '{{ t.telegram_declined }}');
            } catch (e) {
                this.showError(e);
            } finally {
                this.telegramBusy = false;
            }
        },
        telegramBotUrl() {
            return this.telegram.bot_url || '#';
        },
        telegramBotLabel() {
            return this.telegram.bot_username ? `@${this.telegram.bot_username}` : '{{ t.telegram_bot_unconfigured }}';
        },
        async createClient() {
            this.clearNotice();
            this.busy = true;
            try {
                const data = await this.request('/api/vpn-clients', {
                    method: 'POST',
                    body: JSON.stringify({ name: this.newName }),
                });
                this.clients.push(data.client);
                delete this.serverConfigs[data.client.id];
                this.newName = '';
                this.applyResponseNotice(data, '{{ t.notice_create_success }}');
            } catch (e) {
                this.showError(e);
            } finally {
                this.busy = false;
            }
        },
        async setEnabled(client, enabled) {
            this.clearNotice();
            this.busy = true;
            try {
                const data = await this.request(`/api/vpn-clients/${client.id}/enabled`, {
                    method: 'POST',
                    body: JSON.stringify({ enabled }),
                });
                const index = this.clients.findIndex((item) => item.id === client.id);
                if (index !== -1) this.clients[index] = data.client;
                delete this.serverConfigs[client.id];
                this.applyResponseNotice(data, '{{ t.notice_update_success }}');
            } catch (e) {
                this.showError(e);
            } finally {
                this.busy = false;
            }
        },
        async deleteClient(client) {
            if (!confirm('{{ t.users_delete_confirm }}')) return;
            this.clearNotice();
            this.busy = true;
            try {
                const data = await this.request(`/api/vpn-clients/${client.id}`, { method: 'DELETE' });
                this.clients = this.clients.filter((item) => item.id !== client.id);
                delete this.serverConfigs[client.id];
                this.applyResponseNotice(data, '{{ t.notice_delete_success }}');
            } catch (e) {
                this.showError(e);
            } finally {
                this.busy = false;
            }
        },
        async openServers(client) {
            this.clearNotice();
            const cached = this.serverConfigs[client.id];
            this.serverModal = {
                client,
                filter: '',
                loading: !cached || cached.loading,
                servers: cached ? cached.servers : [],
            };
            try {
                const servers = await this.loadClientServers(client);
                if (this.serverModal && this.serverModal.client.id === client.id) {
                    this.serverModal.loading = false;
                    this.serverModal.servers = servers;
                }
            } catch (e) {
                if (this.serverModal && this.serverModal.client.id === client.id) {
                    this.serverModal.loading = false;
                    this.serverModal.servers = [];
                }
                this.showError(e, {
                    title: '{{ t.notice_server_list_error_title }}',
                    message: '{{ t.notice_server_list_error_message }}',
                });
            }
        },
        async loadClientServers(client) {
            const cached = this.serverConfigs[client.id];
            if (cached && !cached.loading) return cached.servers || [];

            this.serverConfigs[client.id] = { loading: true, servers: [] };
            try {
                const data = await this.request(`/api/vpn-clients/${client.id}/config`);
                const servers = data.servers || [];
                this.serverConfigs[client.id] = { loading: false, servers };
                return servers;
            } catch (e) {
                this.serverConfigs[client.id] = { loading: false, servers: [] };
                throw e;
            }
        },
        closeServers() {
            this.serverModal = null;
        },
        filteredServers() {
            if (!this.serverModal) return [];
            const query = this.serverModal.filter.trim().toLowerCase();
            if (!query) return this.serverModal.servers;
            return this.serverModal.servers.filter((server) => {
                return [server.endpoint_name, server.endpoint, server.endpoint_id]
                    .filter(Boolean)
                    .some((value) => value.toLowerCase().includes(query));
            });
        },
        async copyVpnUrl(client, server) {
            this.clearNotice();
            this.busy = true;
            try {
                await this.copyText(server.vpn_url);
                this.setNotice('success', '{{ t.notice_success_title }}', `${server.endpoint_name}: {{ t.configs_vpn_url_copied }}`);
            } catch (e) {
                this.showError(e);
            } finally {
                this.busy = false;
            }
        },
        async downloadConfig(client, server) {
            this.clearNotice();
            this.busy = true;
            try {
                const blob = new Blob([server.config], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `${this.fileSlug(client.name || 'amnezia-client')}-${this.fileSlug(server.endpoint_name)}.conf`;
                document.body.appendChild(a);
                a.click();
                a.remove();
                URL.revokeObjectURL(url);
                this.setNotice('success', '{{ t.notice_success_title }}', `${server.endpoint_name}: ${server.endpoint}`);
            } catch (e) {
                this.showError(e);
            } finally {
                this.busy = false;
            }
        },
        openQr(client, server) {
            this.qrModal = {
                title: `${client.name || 'amnezia-client'} - ${server.endpoint_name}`,
                svg: server.qr_svg,
                url: server.vpn_url,
            };
        },
        closeQr() {
            this.qrModal = null;
        },
        async copyText(text) {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(text);
                return;
            }

            const textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.setAttribute('readonly', '');
            textarea.style.position = 'fixed';
            textarea.style.left = '-9999px';
            document.body.appendChild(textarea);
            textarea.select();
            const copied = document.execCommand('copy');
            textarea.remove();
            if (!copied) {
                throw new Error('copy failed');
            }
        },
        sortedClients() {
            return [...this.clients].sort((left, right) => {
                if (left.enabled !== right.enabled) return left.enabled ? -1 : 1;
                return String(left.name || '').localeCompare(String(right.name || ''));
            });
        },
        activeClients() {
            return this.clients.filter((client) => client.enabled).length;
        },
        serverPods() {
            return (this.serverStatus && this.serverStatus.pods) || [];
        },
        serverName(pod) {
            return pod.endpoint_name || pod.node_name || pod.name || '{{ t.configs_status_unknown }}';
        },
        serverTone(pod) {
            if (!pod.ready) return 'offline';
            if (pod.rollout_status === 'applied') return 'online';
            if (pod.rollout_status === 'error') return 'error';
            if (pod.rollout_status === 'pending_apply' || pod.rollout_status === 'pending_restart' || pod.rollout_status === 'starting') return 'warning';
            return 'offline';
        },
        serverStatusLabel(pod) {
            if (!pod.ready) return '{{ t.configs_status_offline }}';
            const labels = {
                applied: '{{ t.configs_status_online }}',
                starting: '{{ t.configs_status_starting }}',
                pending_apply: '{{ t.configs_status_pending_apply }}',
                pending_restart: '{{ t.configs_status_pending_apply }}',
                error: '{{ t.configs_status_error }}',
                unknown: '{{ t.configs_status_unknown }}',
            };
            return labels[pod.rollout_status] || pod.rollout_status || '{{ t.configs_status_unknown }}';
        },
        serverTooltip(pod) {
            return [
                this.serverName(pod),
                pod.endpoint || null,
                pod.ready ? '{{ t.configs_ready }}' : '{{ t.configs_not_ready }}',
                this.serverStatusLabel(pod),
            ].filter(Boolean).join(' - ');
        },
        shortKey(key) {
            if (!key || key.length <= 16) return key || '';
            return `${key.slice(0, 8)}...${key.slice(-8)}`;
        },
        fileSlug(value) {
            return String(value || 'amnezia').trim().replace(/[^A-Za-z0-9._-]+/g, '-').replace(/^-+|-+$/g, '') || 'amnezia';
        },
        clearNotice() {
            this.error = '';
            this.status = '';
            this.notice = null;
        },
        setNotice(kind, title, message, detail = '') {
            this.notice = { kind, title, message, detail };
            this.error = kind === 'error' ? message : '';
            this.status = kind === 'error' ? '' : message;
        },
        applyResponseNotice(data, fallbackMessage) {
            if (data.notice) {
                const notice = this.normalizeNotice(data.notice);
                this.setNotice(notice.kind, notice.title, notice.message, notice.detail || '');
                return;
            }
            this.setNotice('success', '{{ t.notice_success_title }}', (data.sync && data.sync.message) || fallbackMessage);
        },
        normalizeNotice(notice) {
            if (notice.code === 'secret_sync_failed') {
                return {
                    kind: 'warning',
                    title: '{{ t.notice_sync_warning_title }}',
                    message: '{{ t.notice_sync_warning_message }}',
                    detail: notice.detail || '',
                };
            }
            return {
                kind: notice.kind || 'warning',
                title: notice.title || '{{ t.notice_warning_title }}',
                message: notice.message || '',
                detail: notice.detail || '',
            };
        },
        showError(error, fallback = {}) {
            this.setNotice(
                'error',
                fallback.title || error.title || '{{ t.notice_error_title }}',
                fallback.message || error.message || '{{ t.notice_error_title }}',
                error.detail || ''
            );
        },
        httpStatusTitle(status) {
            if (status === 401) return '{{ t.login_heading }}';
            if (status === 403) return '{{ t.notice_error_title }}';
            if (status === 404) return '{{ t.configs_empty }}';
            if (status === 409) return '{{ t.notice_warning_title }}';
            if (status === 503) return '{{ t.notice_server_list_error_title }}';
            return '{{ t.notice_error_title }}';
        },
        httpStatusMessage(status) {
            if (status === 401) return 'not authenticated';
            if (status === 403) return 'access denied';
            if (status === 404) return 'not found';
            if (status === 409) return '{{ t.configs_no_servers }}';
            if (status === 503) return '{{ t.notice_server_list_error_message }}';
            return '{{ t.notice_error_title }}';
        },
        formatDate(value) {
            if (!value) return '{{ t.configs_never }}';
            const parsed = Date.parse(value);
            if (Number.isNaN(parsed)) return value;
            return new Date(parsed).toLocaleDateString();
        },
    };
}
</script>
{% endblock body %}