{% extends "base.html" %}

{% block title %}{{ t("irc.title", "IRC Chat") }} - {{ config.BBS_NAME }}{% endblock %}

{% block extra_css %}
<style>
.irc-shell {
    display:grid;
    grid-template-areas:"config config config" "channels log users" "channels input users";
    grid-template-columns:180px minmax(0, 1fr) 160px;
    grid-template-rows:auto minmax(16rem, 1fr) auto;
    min-height:75vh;
    border:1px solid var(--theme-primary);
}
.irc-config { grid-area:config; min-width:0; padding:8px; background:var(--theme-bg-dark); }
.irc-fields, .irc-actions, .irc-cert-panel { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.irc-fields > div { min-width:0; }
.irc-fields .irc-server, .irc-fields .irc-autojoin { flex:2 1 10rem; }
.irc-fields .irc-nick, .irc-fields .irc-auth-field { flex:1 1 8rem; }
.irc-fields .irc-port { flex:0 1 6rem; }
.irc-config .form-check { display:flex; align-items:center; gap:.4rem; padding-left:0; }
.irc-config .form-check-input { float:none; flex:none; width:1.1rem; height:1.1rem; min-width:0; margin:0; }
.irc-advanced { margin:8px 0; }
.irc-advanced[open] > summary { margin-bottom:8px; }
.irc-cert-panel { margin-top:8px; align-items:stretch; }
.irc-cert-panel > div { flex:1 1 14rem; min-width:0; }
.irc-config input, .irc-config select, .irc-config button { font-size:0.85rem; }
.irc-channels { grid-area:channels; background:var(--theme-bg-dark); border-right:1px solid var(--theme-primary); overflow:auto; padding:4px; }
.irc-channels .channel-item { padding:4px 8px; cursor:pointer; border-radius:4px; }
.irc-channels .channel-item.active { background:var(--theme-primary); color:#000; }
.irc-channels .channel-item:hover { background:#333; }
.irc-log { grid-area:log; min-width:0; background:#000; color:#0f0; font-family:monospace; font-size:0.85rem; overflow-y:auto; overflow-wrap:anywhere; padding:6px; white-space:pre-wrap; }
.irc-log .line { padding:1px 0; }
.irc-log .system { color:#aaa; }
.irc-log .error { color:#f33; }
.irc-log .self { color:#0ff; }
.irc-log .from { font-weight:bold; }
.irc-log .ts { color:#666; font-size:0.75rem; }
.irc-log .joinpart { color:#888; font-style:italic; }
.irc-log .action { color:#ff6; font-style:italic; }
.irc-log .highlight { background:#ff0; color:#000; padding:1px 2px; border-radius:2px; }
.irc-log .mention { border-left:3px solid #ff0; padding-left:4px; }
.irc-users { grid-area:users; background:var(--theme-bg-dark); border-left:1px solid var(--theme-primary); overflow-y:auto; padding:4px; font-family:monospace; font-size:0.8rem; }
.irc-users .user-item { padding:1px 4px; cursor:pointer; border-radius:3px; }
.irc-users .user-item:hover { background:#333; }
.irc-users .op { color:#0f0; }
.irc-users .voice { color:#0ff; }
.irc-users .header { color:#aaa; font-weight:bold; padding:4px; border-bottom:1px solid #333; margin-bottom:4px; }
.irc-input { grid-area:input; min-width:0; padding:6px; background:var(--theme-bg-dark); border-top:1px solid var(--theme-primary); display:flex; align-items:center; gap:6px; }
.irc-input input { flex:1; min-width:0; }
#current_channel { max-width:25%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px) {
    .irc-header { padding:12px 8px; margin-bottom:12px; }
    .irc-header p { margin-bottom:0; }
    .irc-shell {
        grid-template-areas:"config" "channels" "log" "input";
        grid-template-columns:minmax(0, 1fr);
        grid-template-rows:auto auto minmax(16rem, 45vh) auto;
        min-height:0;
    }
    .irc-users { display:none; }
    .irc-channels { display:flex; gap:4px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--theme-primary); }
    .irc-channels .channel-item { flex:none; white-space:nowrap; }
    .irc-shell .form-control { font-size:1rem; }
    .irc-input button { flex:none; min-width:44px; min-height:44px; }
}
</style>
{% endblock %}

{% block content %}
<div class="bbs-header irc-header">
    <h1><i class="bi bi-broadcast-pin"></i> {{ t("irc.title", "IRC Chat") }}</h1>
    <p>{{ t("irc.description", "Connect to any IRC network from your browser.") }}</p>
</div>

<div class="irc-shell">
    <div class="irc-config">
      <div class="irc-fields">
        <div class="irc-server">
            <label class="form-label mb-0 small" for="cfg_server">{{ t("irc.server", "Server") }}</label>
            <input id="cfg_server" type="text" class="form-control form-control-sm"
                   value="{{ saved.server if saved else (default_preset.server if default_preset else 'irc.libera.chat') }}">
        </div>
        <div class="irc-port">
            <label class="form-label mb-0 small" for="cfg_port">{{ t("irc.port", "Port") }}</label>
            <input id="cfg_port" type="number" class="form-control form-control-sm"
                   value="{{ saved.port if saved else (default_preset.port if default_preset else 6667) }}">
        </div>
        <div class="form-check mb-1">
            <input id="cfg_ssl" class="form-check-input" type="checkbox"
                   {% if (saved and saved.use_ssl) or (not saved and default_preset and default_preset.use_ssl) %}checked{% endif %}>
            <label class="form-check-label small" for="cfg_ssl">TLS</label>
        </div>
        <div class="irc-nick">
            <label class="form-label mb-0 small" for="cfg_nick">{{ t("irc.nick", "Nick") }}</label>
            <input id="cfg_nick" type="text" class="form-control form-control-sm"
                   value="{{ saved.nick if saved else ((default_preset.default_nick if default_preset and default_preset.default_nick else default_nick)) }}">
        </div>
        <div class="irc-autojoin">
            <label class="form-label mb-0 small" for="cfg_channels">{{ t("irc.autojoin", "Auto-join channels (comma-separated)") }}</label>
            <input id="cfg_channels" type="text" class="form-control form-control-sm"
                   value="{{ (saved.channels if saved else (default_preset.channels if default_preset else '')) or '' }}"
                   placeholder="#hangout,#bbs">
        </div>
      </div>
      <details class="irc-advanced">
        <summary>{{ t("irc.advanced", "Advanced authentication") }}</summary>
        <div class="irc-fields">
          <div class="irc-auth-field">
            <label class="form-label mb-0 small" for="cfg_sasl_user">{{ t("irc.sasl_account", "SASL account") }}</label>
            <input id="cfg_sasl_user" type="text" class="form-control form-control-sm"
                   placeholder="{{ t('irc.optional', '(optional)') }}" autocomplete="off">
          </div>
          <div class="irc-auth-field">
            <label class="form-label mb-0 small" for="cfg_sasl_pass">{{ t("irc.sasl_password", "SASL password") }}</label>
            <input id="cfg_sasl_pass" type="password" class="form-control form-control-sm"
                   autocomplete="new-password">
          </div>
          <div class="form-check mb-1">
            <input id="cfg_cert_toggle" class="form-check-input" type="checkbox">
            <label class="form-check-label small" for="cfg_cert_toggle"
                   title="{{ t('irc.cert_help', 'SASL EXTERNAL — authenticate with a TLS client certificate') }}">
                {{ t("irc.cert", "Client certificate") }}
            </label>
          </div>
        </div>
        <div class="irc-cert-panel" id="cfg_cert_panel" style="display:none;">
          <div>
            <label class="form-label mb-0 small" for="cfg_cert_pem">
                {{ t("irc.cert_pem", "Client certificate (PEM) — SASL EXTERNAL / CertFP") }}
            </label>
            <textarea id="cfg_cert_pem" class="form-control form-control-sm font-monospace" rows="4"
                      placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----"
                      autocomplete="off" spellcheck="false"></textarea>
          </div>
          <div>
            <label class="form-label mb-0 small" for="cfg_key_pem">
                {{ t("irc.key_pem", "Client private key (PEM) — held briefly by the server for this session") }}
            </label>
            <textarea id="cfg_key_pem" class="form-control form-control-sm font-monospace" rows="4"
                      placeholder="-----BEGIN PRIVATE KEY-----&#10;...&#10;-----END PRIVATE KEY-----"
                      autocomplete="off" spellcheck="false"></textarea>
          </div>
        </div>
      </details>
      <div class="irc-actions">
        <button id="btn_connect" class="btn btn-success btn-sm">
            <i class="bi bi-plug"></i> {{ t("irc.connect", "Connect") }}
        </button>
        <button id="btn_disconnect" class="btn btn-danger btn-sm" disabled>
            <i class="bi bi-x-circle"></i> {{ t("irc.disconnect", "Disconnect") }}
        </button>
        <button id="btn_save" class="btn btn-outline-secondary btn-sm"
                title="{{ t('irc.save_settings', 'Save these settings') }}"
                aria-label="{{ t('irc.save_settings', 'Save these settings') }}">
            <i class="bi bi-bookmark"></i>
        </button>
      </div>
    </div>

    <div class="irc-channels" id="channels">
        <div class="channel-item active" data-channel="(server)">(server)</div>
    </div>

    <div class="irc-log" id="log">
        <div class="line system">{{ t("irc.start", "Select Connect to begin.") }}</div>
    </div>

    <div class="irc-users" id="users">
        <div class="header" id="usersHeader">Users</div>
        <div id="usersList"></div>
    </div>

    <div class="irc-input">
        <span id="current_channel" class="text-muted">(server)</span>
        <input id="input_line" class="form-control form-control-sm" type="text"
               placeholder="{{ t('irc.message_placeholder', 'Message or /command…') }}"
               aria-label="{{ t('irc.message', 'Message') }}" disabled>
        <button id="btn_send" class="btn btn-primary btn-sm" aria-label="{{ t('irc.send', 'Send') }}" disabled>
            <i class="bi bi-send"></i>
        </button>
    </div>
</div>

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>
(function() {
    const socket = io('/irc', {
        transports: ['websocket', 'polling'],
        reconnection: true,
        // Bumped from 10 → 50 with longer backoff so brief gunicorn worker
        // recycles or upstream IRC server hiccups don't end the session.
        reconnectionAttempts: 50,
        reconnectionDelay: 1000,
        reconnectionDelayMax: 30000,
        randomizationFactor: 0.5,
        timeout: 30000,
    });

    const log = document.getElementById('log');
    const input = document.getElementById('input_line');
    const btnSend = document.getElementById('btn_send');
    const btnConnect = document.getElementById('btn_connect');
    const btnDisconnect = document.getElementById('btn_disconnect');
    const btnSave = document.getElementById('btn_save');
    const channelsBox = document.getElementById('channels');
    const currentChannelLabel = document.getElementById('current_channel');

    let currentChannel = '(server)';
    // Security/correctness fix (templates audit): default_nick is
    // current_user.username, interpolated straight into a JS string
    // literal instead of |tojson. Registration allows apostrophes in
    // usernames (auth.py's RegisterForm Regexp), and admin-side
    // username edit forms have no character restriction at all
    // (web/admin.py's AddUserForm/EditUserForm) -- Jinja's default
    // autoescaping neutralizes the worst of it here (', ", <, > all
    // become HTML entities, which don't decode inside <script>, so a
    // literal quote/backslash pair needed to break out of the string
    // can't actually form), but that just means the nick renders
    // garbled instead of breaking anything -- and it's still the wrong
    // pattern for a value going into a JS context. |tojson is the
    // correct, established way (see MRC_WS_HOST_OVERRIDE below).
    let myNick = {{ default_nick | tojson }};
    const channelLines = { '(server)': [] };
    const channelNames = { };   // channel -> Set of nicks for tab-complete
    const channelModes = { };   // channel -> { nick -> '@'/'+'/'' } for sidebar
    let notifyEnabled = false;
    if ('Notification' in window && Notification.permission === 'granted') {
        notifyEnabled = true;
    }

    function maybeNotify(channel, from, text) {
        // Suppress notifications for messages I sent myself.
        if (from === myNick) return;
        if (channel === currentChannel && document.hasFocus()) return;
        if (!notifyEnabled) return;
        try {
            new Notification(`${channel} — ${from}`, {
                body: text.slice(0, 200),
                tag: 'irc-' + channel,
                silent: false,
            });
        } catch (e) { /* ignore */ }
    }

    function isMention(text) {
        if (!myNick) return false;
        const re = new RegExp('(^|[^a-zA-Z0-9_])' +
            myNick.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') +
            '($|[^a-zA-Z0-9_])', 'i');
        return re.test(text || '');
    }

    function refreshUsersPanel() {
        const header = document.getElementById('usersHeader');
        const list = document.getElementById('usersList');
        if (!header || !list) return;
        const set = channelNames[currentChannel];
        if (!set || !currentChannel.startsWith('#')) {
            header.textContent = 'Users';
            list.innerHTML = '<div class="text-muted small">— pick a channel —</div>';
            return;
        }
        const modes = channelModes[currentChannel] || {};
        // Sort: ops first, then voiced, then plain — alphabetical within group.
        const arr = [...set].sort((a, b) => {
            const am = modes[a] || ''; const bm = modes[b] || '';
            const rank = m => m === '@' ? 0 : m === '+' ? 1 : 2;
            const r = rank(am) - rank(bm);
            if (r) return r;
            return a.toLowerCase().localeCompare(b.toLowerCase());
        });
        header.textContent = `Users in ${currentChannel} (${arr.length})`;
        list.innerHTML = arr.map(n => {
            const m = modes[n] || '';
            const cls = m === '@' ? 'op' : m === '+' ? 'voice' : '';
            return `<div class="user-item ${cls}">${m}${escapeHtml(n)}</div>`;
        }).join('');
    }

    function addLine(channel, html, cls) {
        const ts = new Date().toLocaleTimeString().slice(0, 8);
        const line = `<div class="line ${cls || ''}"><span class="ts">${ts}</span> ${html}</div>`;
        if (!channelLines[channel]) channelLines[channel] = [];
        channelLines[channel].push(line);
        // Cap each channel's history at 1000 lines.
        if (channelLines[channel].length > 1000) channelLines[channel].shift();
        if (channel === currentChannel) {
            log.insertAdjacentHTML('beforeend', line);
            log.scrollTop = log.scrollHeight;
        }
    }

    function ensureChannel(channel) {
        if (!channel || channelLines[channel]) return;
        channelLines[channel] = [];
        const div = document.createElement('div');
        div.className = 'channel-item';
        div.textContent = channel;
        div.dataset.channel = channel;
        div.addEventListener('click', () => switchChannel(channel));
        channelsBox.appendChild(div);
    }

    function switchChannel(channel) {
        currentChannel = channel;
        currentChannelLabel.textContent = channel;
        log.innerHTML = (channelLines[channel] || []).join('');
        log.scrollTop = log.scrollHeight;
        document.querySelectorAll('.channel-item').forEach(el => {
            el.classList.toggle('active', el.dataset.channel === channel);
        });
        refreshUsersPanel();
    }

    function escapeHtml(s) {
        return String(s || '').replace(/[&<>"']/g, c => ({
            '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }

    // --- Socket events ---
    socket.on('connect', () => addLine('(server)', '[socketio connected]', 'system'));
    socket.on('disconnect', reason => {
        addLine('(server)', '[socketio disconnected: ' + reason + ']', 'error');
        input.disabled = true; btnSend.disabled = true;
        btnConnect.disabled = false; btnDisconnect.disabled = true;
    });
    socket.on('connect_error', err => {
        addLine('(server)', '[socketio connect error: ' + (err.message || err) + ']', 'error');
    });
    socket.io.on('reconnect_attempt', n => {
        addLine('(server)', `[reconnecting… attempt ${n}]`, 'system');
    });
    socket.io.on('reconnect', n => {
        addLine('(server)', `[reconnected after ${n} attempts]`, 'system');
    });
    socket.io.on('reconnect_failed', () => {
        addLine('(server)',
            '[reconnect failed — auto-refreshing page in 30s…]', 'error');
        // After 50 backoff'd attempts (~5+ minutes total) failed, the
        // network is genuinely down or our worker is stuck. Auto-refresh
        // so the user gets a fresh socketio handshake without manual
        // intervention. Browser will replay any cached creds and we'll
        // either succeed or land back here again.
        setTimeout(() => location.reload(), 30000);
    });

    socket.on('irc_system', d => addLine('(server)', escapeHtml(d.text), 'system'));
    socket.on('irc_error', d => addLine(currentChannel, '⚠ ' + escapeHtml(d.message), 'error'));
    socket.on('irc_connected', d => {
        addLine('(server)', `Connected to ${escapeHtml(d.server)}:${d.port} as ${escapeHtml(d.nick)}`, 'system');
        myNick = d.nick;
        input.disabled = false; btnSend.disabled = false;
        btnConnect.disabled = true; btnDisconnect.disabled = false;
        input.focus();
        // First connect — ask once for desktop notification permission.
        if ('Notification' in window && Notification.permission === 'default') {
            Notification.requestPermission().then(p => {
                notifyEnabled = (p === 'granted');
                if (notifyEnabled) {
                    addLine('(server)',
                        '[notifications enabled — you will be alerted on mention]',
                        'system');
                }
            });
        }
    });
    socket.on('irc_nick', d => {
        if (d.old === myNick) myNick = d.new;
    });
    socket.on('irc_disconnected', d => {
        addLine('(server)', `Disconnected: ${escapeHtml(d.reason || '')}`, 'system');
        input.disabled = true; btnSend.disabled = true;
        btnConnect.disabled = false; btnDisconnect.disabled = true;
    });

    socket.on('irc_message', d => {
        // d.html is already pre-rendered + safe (server-side mIRC->HTML)
        ensureChannel(d.target);
        const plain = d.plain || '';
        const mentioned = !d.self && isMention(plain);
        let cls = d.self ? 'self' : '';
        if (mentioned) cls += ' mention';
        addLine(d.target, `<span class="from">&lt;${escapeHtml(d.from)}&gt;</span> ${d.html || escapeHtml(plain)}`, cls);
        if (mentioned) maybeNotify(d.target, d.from, plain);
    });
    socket.on('irc_action', d => {
        ensureChannel(d.target);
        addLine(d.target, `<span class="action">* ${escapeHtml(d.from)} ${d.text}</span>`, 'action');
    });
    socket.on('irc_notice', d => {
        // Real gap found live: notices never called ensureChannel(), so a
        // NOTICE-only reply (NickServ/ChanServ almost always reply this
        // way) landed in a tab that visually never existed -- the text
        // was captured but there was nothing to click to see it.
        const target = d.target || '(server)';
        ensureChannel(target);
        addLine(target, `-${escapeHtml(d.from)}- ${d.html || ''}`, 'system');
    });
    socket.on('irc_switch', d => {
        ensureChannel(d.channel);
        if (d.switch) switchChannel(d.channel);
    });
    socket.on('irc_join', d => {
        ensureChannel(d.channel);
        if (!channelNames[d.channel]) channelNames[d.channel] = new Set();
        channelNames[d.channel].add(d.nick);
        addLine(d.channel, `→ ${escapeHtml(d.nick)} joined ${escapeHtml(d.channel)}`, 'joinpart');
        if (d.channel === currentChannel) refreshUsersPanel();
    });
    socket.on('irc_part', d => {
        const r = d.reason ? ` (${escapeHtml(d.reason)})` : '';
        if (channelNames[d.channel]) channelNames[d.channel].delete(d.nick);
        if (channelModes[d.channel]) delete channelModes[d.channel][d.nick];
        addLine(d.channel, `← ${escapeHtml(d.nick)} left ${escapeHtml(d.channel)}${r}`, 'joinpart');
        if (d.channel === currentChannel) refreshUsersPanel();
    });
    socket.on('irc_kick', d => {
        if (channelNames[d.channel]) channelNames[d.channel].delete(d.victim);
        if (channelModes[d.channel]) delete channelModes[d.channel][d.victim];
        addLine(d.channel, `‼ ${escapeHtml(d.kicker)} kicked ${escapeHtml(d.victim)}: ${escapeHtml(d.reason || '')}`, 'error');
        if (d.channel === currentChannel) refreshUsersPanel();
    });
    socket.on('irc_mode', d => {
        addLine(d.target.startsWith('#') ? d.target : '(server)',
                `MODE ${escapeHtml(d.target)} ${escapeHtml(d.modes)} (by ${escapeHtml(d.by)})`, 'system');
    });
    socket.on('irc_topic', d => {
        ensureChannel(d.channel);
        const by = d.by ? ` (set by ${escapeHtml(d.by)})` : '';
        addLine(d.channel, `Topic for ${escapeHtml(d.channel)}: ${escapeHtml(d.topic)}${by}`, 'system');
    });
    socket.on('irc_whois', d => {
        addLine('(server)', `WHOIS ${escapeHtml(d.target)}: ${escapeHtml(d.text)}`, 'system');
    });
    // Channel list browser — accumulate /list rows and surface a clickable
    // panel instead of dumping each line into the server log.
    let listAccum = [];
    let listTimer = null;
    socket.on('irc_list', d => {
        listAccum.push(d);
        if (listTimer) clearTimeout(listTimer);
        listTimer = setTimeout(renderListPanel, 250);
    });
    socket.on('irc_list_end', d => {
        if (listTimer) { clearTimeout(listTimer); listTimer = null; }
        renderListPanel();
        listAccum = [];
        addLine('(server)', `— end of /list (${arguments[0]?.count ?? ''}) —`, 'system');
    });

    function renderListPanel() {
        if (!listAccum.length) return;
        const sorted = [...listAccum].sort((a, b) =>
            (parseInt(b.users) || 0) - (parseInt(a.users) || 0));
        let html = '<div class="card mb-2"><div class="card-header py-1">' +
                   `Channel list (${sorted.length}) — click to /join` +
                   '</div><div class="card-body p-0" style="max-height:300px;overflow-y:auto;">' +
                   '<table class="table table-sm table-hover mb-0">';
        for (const r of sorted.slice(0, 200)) {
            html += `<tr style="cursor:pointer;" data-join="${escapeHtml(r.channel)}">
                <td><code>${escapeHtml(r.channel)}</code></td>
                <td>${escapeHtml(r.users)}</td>
                <td><small>${escapeHtml((r.topic || '').slice(0, 80))}</small></td>
            </tr>`;
        }
        html += '</table></div></div>';
        // Drop the panel into the (server) log and switch to it.
        switchChannel('(server)');
        log.insertAdjacentHTML('beforeend', html);
        log.scrollTop = log.scrollHeight;
        // Wire click-to-join.
        log.querySelectorAll('tr[data-join]').forEach(row => {
            row.addEventListener('click', () => {
                socket.emit('irc_send', { line: '/join ' + row.dataset.join });
            });
        });
    }
    socket.on('irc_names', d => {
        ensureChannel(d.channel);
        // Track mode prefix and strip it for the names Set.
        const modes = {};
        const cleanNames = d.names.map(n => {
            const m = n.match(/^([@+%&~]?)(.*)$/);
            const prefix = m ? m[1] : '';
            const nick = m ? m[2] : n;
            if (prefix) modes[nick] = prefix;
            return nick;
        });
        channelNames[d.channel] = new Set(cleanNames);
        channelModes[d.channel] = modes;
        addLine(d.channel, `Users in ${escapeHtml(d.channel)}: ${escapeHtml(d.names.join(', '))}`, 'system');
        if (d.channel === currentChannel) refreshUsersPanel();
    });
    socket.on('irc_quit', d => {
        // Quit removes nick from every channel
        Object.values(channelNames).forEach(s => s.delete(d.nick));
        Object.values(channelModes).forEach(m => delete m[d.nick]);
        addLine('(server)', `← ${escapeHtml(d.nick)} quit (${escapeHtml(d.reason || '')})`, 'joinpart');
        refreshUsersPanel();
    });
    socket.on('irc_nick', d => {
        Object.values(channelNames).forEach(s => {
            if (s.delete(d.old)) s.add(d.new);
        });
        Object.values(channelModes).forEach(m => {
            if (m[d.old] !== undefined) { m[d.new] = m[d.old]; delete m[d.old]; }
        });
        addLine('(server)', `${escapeHtml(d.old)} is now ${escapeHtml(d.new)}`, 'system');
        refreshUsersPanel();
    });
    socket.on('irc_raw', d => {
        // Only unhandled commands land here now — much less chatty.
        addLine('(server)', escapeHtml(d.line), 'system');
    });

    // --- UI handlers ---
    const certToggle = document.getElementById('cfg_cert_toggle');
    const certPanel = document.getElementById('cfg_cert_panel');
    certToggle.addEventListener('change', () => {
        certPanel.style.display = certToggle.checked ? 'flex' : 'none';
    });

    btnConnect.addEventListener('click', () => {
        const server = document.getElementById('cfg_server').value.trim();
        const port = parseInt(document.getElementById('cfg_port').value, 10) || 6667;
        const useSsl = document.getElementById('cfg_ssl').checked;
        const nick = document.getElementById('cfg_nick').value.trim();
        const channelsCfg = document.getElementById('cfg_channels').value.trim();
        const autojoin = channelsCfg.split(',').map(s => s.trim()).filter(Boolean);
        const saslUser = document.getElementById('cfg_sasl_user').value.trim();
        const saslPass = document.getElementById('cfg_sasl_pass').value;
        const payload = {
            server, port, use_ssl: useSsl, nick, autojoin,
            sasl_user: saslUser || null,
            sasl_pass: saslPass || null,
        };
        // SASL EXTERNAL (client certificate) -- only sent when the
        // "Client Cert" toggle is on, and never as a server-side file
        // path, just the pasted PEM text itself.
        if (certToggle.checked) {
            const certPem = document.getElementById('cfg_cert_pem').value.trim();
            const keyPem = document.getElementById('cfg_key_pem').value.trim();
            payload.client_cert_pem = certPem || null;
            payload.client_key_pem = keyPem || null;
        }
        socket.emit('irc_connect', payload);
    });

    btnDisconnect.addEventListener('click', () => {
        socket.emit('irc_disconnect');
    });

    btnSave.addEventListener('click', async () => {
        const fd = new FormData();
        fd.append('server', document.getElementById('cfg_server').value);
        fd.append('port', document.getElementById('cfg_port').value);
        if (document.getElementById('cfg_ssl').checked) fd.append('use_ssl', '1');
        fd.append('nick', document.getElementById('cfg_nick').value);
        fd.append('channels', document.getElementById('cfg_channels').value);
        // Found in a follow-up audit: this fetch sent no CSRF token at
        // all, and irc.save_settings() is NOT csrf-exempted -- so the
        // app-wide CSRFProtect correctly rejected every save with a
        // 400, silently breaking the "Save" button for real users
        // (the opposite of a vulnerability, but still a real bug).
        // Same meta[name=csrf-token] + X-CSRFToken header convention
        // already used elsewhere in this codebase (e.g. admin/
        // addons.html).
        const csrfMeta = document.querySelector('meta[name="csrf-token"]');
        const r = await fetch('{{ url_for("irc.save_settings") }}', {
            method: 'POST',
            headers: csrfMeta ? {'X-CSRFToken': csrfMeta.content} : {},
            body: fd,
        });
        addLine('(server)',
            r.ok ? '[Settings saved.]' : '[Save failed.]', 'system');
    });

    btnSend.addEventListener('click', sendInput);

    // Tab-complete state — track partial nick + cycle index across consecutive
    // Tab presses so "abc<TAB><TAB><TAB>" cycles through "abcde", "abcfg", etc.
    let tabState = null;

    input.addEventListener('keydown', e => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            tabState = null;
            sendInput();
        } else if (e.key === 'Tab') {
            e.preventDefault();
            const set = channelNames[currentChannel];
            if (!set || set.size === 0) return;
            const value = input.value;
            const cursorAt = input.selectionStart;
            // Find the partial word ending at the cursor (word = no whitespace).
            let wordStart = cursorAt;
            while (wordStart > 0 && !/\s/.test(value[wordStart - 1])) wordStart--;
            const partial = value.slice(wordStart, cursorAt);

            if (!tabState || tabState.partial !== partial || tabState.start !== wordStart) {
                // New completion run — gather matches.
                const lower = partial.toLowerCase();
                const matches = [...set].filter(n => n.toLowerCase().startsWith(lower)).sort();
                if (!matches.length) return;
                tabState = { partial, start: wordStart, matches, idx: 0 };
            } else {
                tabState.idx = (tabState.idx + 1) % tabState.matches.length;
            }
            const completion = tabState.matches[tabState.idx];
            const suffix = (tabState.start === 0) ? ': ' : ' ';
            const newValue = value.slice(0, tabState.start) + completion + suffix + value.slice(cursorAt);
            input.value = newValue;
            const newCursor = tabState.start + completion.length + suffix.length;
            input.setSelectionRange(newCursor, newCursor);
        } else {
            tabState = null;
        }
    });
    function sendInput() {
        const line = input.value;
        if (!line.trim()) return;
        if (line.startsWith('/')) {
            socket.emit('irc_send', { line });
        } else {
            // Real gap found live: this used to only pass a target for
            // "#channel"-looking tabs, silently falling back to whatever
            // the SERVER'S current_channel happened to be for any DM tab
            // (clicking a DM tab in the sidebar never told the server) --
            // plain text typed while looking at a DM could go to the
            // wrong place with no visible error. Any real tab except the
            // synthetic "(server)" one is a valid PRIVMSG target.
            const target = (currentChannel && currentChannel !== '(server)') ? currentChannel : '';
            socket.emit('irc_send', { line, target });
        }
        input.value = '';
    }

    // initial click on (server) entry
    channelsBox.querySelector('.channel-item').addEventListener('click',
        () => switchChannel('(server)'));
})();
</script>
{% endblock %}