@extends('layouts.app')

@section('title', __('Theological chat'))
@section('meta_description')
@if(!empty($chatbotWebGrounding))
{{ __('Theological chat uses web-backed retrieval when possible. Verify answers with Scripture and your pastor.') }}
@else
{{ __('Theological chat runs without automatic web search for faster replies; verify answers carefully.') }}
@endif
@endsection


@push('styles')
<style>
    .tc-shell { max-width: 1080px; margin: 0 auto; }
    .tc-hero {
        border-radius: 16px;
        padding: 1.75rem 1.5rem;
        background: linear-gradient(135deg, var(--theme-primary) 0%, #24455f 100%);
        color: #fff;
        box-shadow: 0 12px 28px rgba(47, 95, 128, 0.35);
    }
    .tc-panel {
        border-radius: 14px;
        background: #fff;
        padding: 1rem 1rem 1.25rem;
        box-shadow: 0 4px 18px rgba(28, 39, 51, 0.08);
        margin-top: -2rem;
        position: relative;
        min-height: 280px;
        display: flex;
        flex-direction: column;
    }
    .tc-messages {
        flex: 1;
        max-height: min(52vh, 520px);
        overflow-y: auto;
        padding: 0.5rem 0.25rem 1rem;
        margin-bottom: 0.75rem;
    }
    .tc-msg {
        border-radius: 12px;
        padding: 0.65rem 0.85rem;
        margin-bottom: 0.65rem;
        font-size: 1rem;
        line-height: 1.65;
        white-space: pre-wrap;
        word-break: break-word;
    }
    .tc-msg-user {
        background: rgba(47, 95, 128, 0.08);
        border-inline-start: 4px solid var(--theme-primary);
        margin-inline-start: 2rem;
    }
    .tc-msg-ai {
        background: #fdfbf6;
        border-inline-start: 4px solid var(--theme-accent);
        margin-inline-end: 2rem;
        white-space: normal;
    }
    .tc-msg-ai .tc-msg-main {
        white-space: pre-wrap;
        word-break: break-word;
    }
    .tc-sources {
        margin-top: 0.65rem;
        padding-top: 0.65rem;
        border-top: 1px solid rgba(47, 95, 128, 0.12);
    }
    .tc-sources-title { font-size: 0.8rem; font-weight: 600; color: #64748b; margin-bottom: 0.25rem; }
    .tc-sources-note { font-size: 0.72rem; color: #94a3b8; margin-bottom: 0.4rem; line-height: 1.45; }
    .tc-sources-list { margin: 0; padding-inline-start: 1.15rem; font-size: 0.85rem; line-height: 1.55; }
    .tc-sources-list a { word-break: break-word; }
    .tc-msg-meta { font-size: 0.75rem; color: #64748b; margin-top: 0.35rem; }
    .tc-msg-pending {
        border-inline-start: 4px solid var(--theme-accent);
        margin-inline-end: 2rem;
        animation: tcFadeIn 0.35s ease-out;
    }
    .tc-pending-top {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.65rem;
        font-size: 0.92rem;
        color: var(--theme-primary);
        font-weight: 600;
    }
    .tc-dots {
        display: inline-flex;
        gap: 0.2rem;
        align-items: flex-end;
        height: 1rem;
    }
    .tc-dots span {
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 50%;
        background: var(--theme-accent);
        animation: tcBounce 1.1s ease-in-out infinite;
    }
    .tc-dots span:nth-child(2) { animation-delay: 0.15s; }
    .tc-dots span:nth-child(3) { animation-delay: 0.3s; }
    .tc-shimmer-wrap { display: flex; flex-direction: column; gap: 0.45rem; }
    .tc-shimmer-line {
        height: 0.55rem;
        border-radius: 4px;
        background: linear-gradient(90deg, #eee 0%, #f5f0e6 40%, #fdfbf6 50%, #f5f0e6 60%, #eee 100%);
        background-size: 200% 100%;
        animation: tcShimmer 1.35s ease-in-out infinite;
    }
    .tc-shimmer-line.short { width: 55%; animation-duration: 1.5s; animation-delay: 0.1s; }
    .tc-shimmer-line.medium { width: 78%; animation-duration: 1.65s; animation-delay: 0.2s; }
    #tc-progress {
        height: 3px;
        border-radius: 2px;
        background: rgba(47, 95, 128, 0.15);
        overflow: hidden;
        margin-bottom: 0.65rem;
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    #tc-progress.tc-progress-on { opacity: 1; }
    #tc-progress-bar {
        height: 100%;
        width: 35%;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent), var(--theme-primary));
        background-size: 200% 100%;
        animation: tcProgressSlide 1.8s ease-in-out infinite;
    }
    .tc-session-meta { font-size: 0.72rem; color: #94a3b8; margin-top: 0.15rem; display: block; }
    .tc-status-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-bottom: 0.9rem;
    }
    .tc-status-card {
        border: 1px solid rgba(47, 95, 128, 0.12);
        border-radius: 12px;
        padding: 0.65rem 0.75rem;
        background: linear-gradient(180deg, #fcfdfd 0%, #f8fbfc 100%);
    }
    .tc-status-label {
        display: block;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #64748b;
        margin-bottom: 0.2rem;
    }
    .tc-status-value {
        display: block;
        color: #12344d;
        font-weight: 700;
        line-height: 1.35;
    }
    .tc-status-sub {
        display: block;
        font-size: 0.77rem;
        color: #6b7280;
        margin-top: 0.2rem;
        line-height: 1.4;
    }
    .tc-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.2rem 0.55rem;
        font-size: 0.75rem;
        font-weight: 600;
        background: rgba(47, 95, 128, 0.08);
        color: var(--theme-primary);
    }
    .tc-status-pill.warn {
        background: rgba(180, 83, 9, 0.12);
        color: #9a3412;
    }
    .tc-status-pill.ok {
        background: rgba(22, 163, 74, 0.12);
        color: #166534;
    }
    .tc-sidebar .card { border-radius: 14px; }
    .tc-session-list {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        max-height: min(42vh, 380px);
        overflow-y: auto;
        padding-inline-end: 2px;
    }
    .tc-session-item {
        width: 100%;
        text-align: inherit;
        border: 1px solid rgba(47, 95, 128, 0.18);
        border-radius: 10px;
        padding: 0.5rem 0.6rem;
        background: #fff;
        font-size: 0.88rem;
        line-height: 1.35;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .tc-session-item:hover {
        background: rgba(47, 95, 128, 0.06);
    }
    .tc-session-item.tc-session-active {
        border-color: var(--theme-primary);
        background: rgba(47, 95, 128, 0.09);
    }
    .tc-session-title { font-weight: 600; color: #1e293b; display: block; }
    @keyframes tcFadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes tcBounce {
        0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
        40% { transform: translateY(-5px); opacity: 1; }
    }
    @keyframes tcShimmer {
        0% { background-position: 100% 0; }
        100% { background-position: -100% 0; }
    }
    @keyframes tcProgressSlide {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(350%); }
    }
    .tc-loading textarea { opacity: 0.72; transition: opacity 0.2s ease; }
    @media (min-width: 992px) {
        .tc-shell aside .tc-sidebar.mb-lg-0 {
            margin-top: -2rem;
        }
    }
    @media (max-width: 575.98px) {
        .tc-status-grid {
            grid-template-columns: 1fr;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .tc-msg-pending, .tc-dots span, .tc-shimmer-line, #tc-progress-bar { animation: none !important; }
        .tc-shimmer-line { background: #ece8df; opacity: 0.85; }
        .tc-dots span { opacity: 0.75; }
        #tc-progress-bar { width: 70%; transform: none; margin-inline-start: 15%; opacity: 0.7; }
    }
</style>
@endpush

@section('content')
<div class="container">
    <div class="tc-shell">
        <div class="tc-hero mb-4">
            <h1 class="h3 mb-2">{{ __('Theological chat') }}</h1>
            @if(!empty($chatbotWebGrounding))
                <p class="mb-0 opacity-90">{{ __('For doctrinal questions, the assistant researches trusted Christian sources first (Reformed theology, Bible, Church Fathers), cites sources when possible, never uses the Quran or non-Christian religious texts, and says when it is unsure. Always verify with Scripture and trusted teachers.') }}</p>
            @else
                <p class="mb-0 opacity-90">{{ __('Web-backed search is off so replies return quicker. The assistant stays cautious but may omit sources — verify everything with Scripture and trusted teachers.') }}</p>
                <p class="small mt-2 mb-0 opacity-75">{{ __('Set OPENROUTER_WEB_PLUGIN=true in .env for slower answers that fetch sources first.') }}</p>
            @endif
            <p class="small mb-0 mt-2 opacity-80">{{ __('AI models are tried in configuration order (first to last) until one responds.') }}</p>
            <p class="small mb-0 mt-2 opacity-75">{{ __('Continuing threads: each reply uses earlier messages in this chat unless you start a new task.') }}</p>
        </div>

        <div class="row g-3 align-items-start">
            <aside class="col-12 col-lg-4 col-xxl-3">
                <div class="card border-0 shadow-sm tc-sidebar mb-3 mb-lg-0">
                    <div class="card-body p-3">
                        <button type="button" id="tc-new-chat" class="btn btn-outline-primary w-100 mb-2">{{ __('New task') }}</button>
                        <p class="small text-muted mb-1">{{ __('Starts a fresh conversation; older threads stay in the list.') }}</p>
                        <p class="small text-muted mb-3">{{ __('Stored only in this browser (not on the server).') }}</p>
                        <div class="fw-semibold small text-secondary mb-2">{{ __('Chat history') }}</div>
                        <div id="tc-session-list" class="tc-session-list" role="list" aria-label="{{ __('Chat history') }}"></div>
                    </div>
                </div>
            </aside>
            <div class="col-12 col-lg-8 col-xxl-9">
        <div
            id="tc-root"
            class="tc-panel"
            data-send-url="{{ route('chat.store') }}"
            data-stream-url="{{ route('chat.stream') }}"
            data-status-url="{{ route('chat.status') }}"
            data-status-snapshot='@json($chatStatusSnapshot)'
            data-web-grounding="{{ !empty($chatbotWebGrounding) ? '1' : '0' }}"
            data-str-thinking="{{ __('Thinking…') }}"
            data-str-wait-sources="{{ __('Gathering trusted references…') }}"
            data-str-wait-summarize="{{ __('Searching and summarizing…') }}"
            data-str-wait-compose="{{ __('Putting the answer together…') }}"
            data-str-wait-almost="{{ __('Almost there…') }}"
            data-str-wait-working="{{ __('Working on your answer…') }}"
            data-str-send="{{ __('Send') }}"
            data-str-placeholder="{{ __('Type your message…') }}"
            data-str-network="{{ __('Could not reach the server. Check your connection and try again.') }}"
            data-str-generic="{{ __('Something went wrong. Please try again.') }}"
            data-str-models-failed="{{ __('All AI models are unavailable right now. Please try again later.') }}"
            data-str-model-label="{{ __('Model') }}"
            data-str-provider-label="{{ __('Provider') }}"
            data-str-phase-label="{{ __('Status') }}"
            data-str-eta-label="{{ __('Estimated finish') }}"
            data-str-refresh-label="{{ __('Next refresh') }}"
            data-str-capacity-label="{{ __('Capacity') }}"
            data-str-ready-now="{{ __('Ready now') }}"
            data-str-checking="{{ __('Checking...') }}"
            data-str-queued="{{ __('Queued') }}"
            data-str-processing="{{ __('Processing') }}"
            data-str-streaming="{{ __('Streaming reply') }}"
            data-str-failed="{{ __('Unavailable') }}"
            data-str-estimated="{{ __('Estimated') }}"
            data-str-keys-ready="{{ __('Ready keys') }}"
            data-str-providers-ready="{{ __('Ready providers') }}"
            data-str-sources-label="{{ __('Sources') }}"
            data-str-sources-note="{{ __('Web citation URLs from the API appear below when search ran for this reply.') }}"
            data-str-pending-label="{{ __('Assistant is preparing a reply') }}"
            data-str-new-chat-ready="{{ __('Started a new conversation. What would you like to ask?') }}"
            data-str-untitled-chat="{{ __('Untitled conversation') }}"
        >
            <div id="tc-progress" aria-hidden="true"><div id="tc-progress-bar"></div></div>
            <div class="tc-status-grid" id="tc-status-grid" aria-live="polite">
                <div class="tc-status-card">
                    <span class="tc-status-label">{{ __('Provider') }}</span>
                    <span class="tc-status-value" id="tc-status-provider">{{ __('Checking...') }}</span>
                    <span class="tc-status-sub" id="tc-status-model">—</span>
                </div>
                <div class="tc-status-card">
                    <span class="tc-status-label">{{ __('Status') }}</span>
                    <span class="tc-status-value"><span class="tc-status-pill" id="tc-status-phase">{{ __('Ready now') }}</span></span>
                    <span class="tc-status-sub" id="tc-status-eta">—</span>
                </div>
                <div class="tc-status-card">
                    <span class="tc-status-label">{{ __('Next refresh') }}</span>
                    <span class="tc-status-value" id="tc-status-refresh">{{ __('Ready now') }}</span>
                    <span class="tc-status-sub" id="tc-status-refresh-sub">—</span>
                </div>
                <div class="tc-status-card">
                    <span class="tc-status-label">{{ __('Capacity') }}</span>
                    <span class="tc-status-value" id="tc-status-capacity">—</span>
                    <span class="tc-status-sub" id="tc-status-capacity-sub">—</span>
                </div>
            </div>
            <div id="tc-messages" class="tc-messages" aria-live="polite"></div>
            <div id="tc-alert" class="alert alert-danger py-2 small d-none" role="alert"></div>
            <form id="tc-form" class="mt-auto">
                <label for="tc-input" class="visually-hidden">{{ __('Your message') }}</label>
                <div class="input-group">
                    <textarea id="tc-input" name="message" class="form-control" rows="2" maxlength="12000" required placeholder="{{ __('Type your message…') }}" autocomplete="off"></textarea>
                    <button type="submit" class="btn btn-primary px-4 d-inline-flex align-items-center justify-content-center gap-2" id="tc-send">
                        <span id="tc-send-text">{{ __('Send') }}</span>
                        <span id="tc-send-spin" class="spinner-border spinner-border-sm d-none" role="presentation" aria-hidden="true"></span>
                    </button>
                </div>
                <p id="tc-status" class="small text-muted mb-0 mt-2" style="min-height: 1.35rem;"></p>
            </form>
        </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    var root = document.getElementById('tc-root');
    if (!root) return;

    var STORAGE_KEY = 'cts-theological-chat-v1';
    var sendUrl = root.getAttribute('data-send-url');
    var streamUrl = root.getAttribute('data-stream-url') || sendUrl;
    var statusUrl = root.getAttribute('data-status-url') || '';
    var messagesEl = document.getElementById('tc-messages');
    var form = document.getElementById('tc-form');
    var input = document.getElementById('tc-input');
    var sendBtn = document.getElementById('tc-send');
    var statusEl = document.getElementById('tc-status');
    var alertEl = document.getElementById('tc-alert');
    var progressEl = document.getElementById('tc-progress');
    var sendSpin = document.getElementById('tc-send-spin');
    var sendText = document.getElementById('tc-send-text');
    var sessionListEl = document.getElementById('tc-session-list');
    var newChatBtn = document.getElementById('tc-new-chat');
    var providerStatusEl = document.getElementById('tc-status-provider');
    var modelStatusEl = document.getElementById('tc-status-model');
    var phaseStatusEl = document.getElementById('tc-status-phase');
    var etaStatusEl = document.getElementById('tc-status-eta');
    var refreshStatusEl = document.getElementById('tc-status-refresh');
    var refreshSubStatusEl = document.getElementById('tc-status-refresh-sub');
    var capacityStatusEl = document.getElementById('tc-status-capacity');
    var capacitySubStatusEl = document.getElementById('tc-status-capacity-sub');

    var state = null;
    var transcript = null;
    var statusSnapshot = null;
    var finishEtaAt = null;
    var refreshTimer = null;

    var waitTimer = null;
    var pendingEl = null;

    function ds(key, fallback) {
        var v = root.getAttribute('data-str-' + key);
        return v || fallback;
    }

    function parseInitialStatus() {
        try {
            return JSON.parse(root.getAttribute('data-status-snapshot') || 'null');
        } catch (e0) {
            return null;
        }
    }

    function uuid() {
        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
            return crypto.randomUUID();
        }
        return 't-' + Date.now() + '-' + Math.random().toString(36).slice(2, 12);
    }

    function loadStateRaw() {
        try {
            var raw = localStorage.getItem(STORAGE_KEY);
            if (!raw) return null;
            var o = JSON.parse(raw);
            if (!o || o.version !== 1 || !Array.isArray(o.sessions)) return null;
            return o;
        } catch (e1) {
            return null;
        }
    }

    function saveStateRaw(o) {
        try {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(o));
        } catch (e2) {}
    }

    function getSessionById(id) {
        for (var i = 0; i < state.sessions.length; i++) {
            if (state.sessions[i].id === id) return state.sessions[i];
        }
        return null;
    }

    function flushActiveSessionMeta() {
        var s = getSessionById(state.activeId);
        if (!s) return;
        s.updatedAt = Date.now();
        if (!s.title) {
            for (var j = 0; j < s.messages.length; j++) {
                if (s.messages[j].role === 'user') {
                    s.title = s.messages[j].content.slice(0, 56);
                    break;
                }
            }
        }
    }

    function pruneSessions() {
        state.sessions.sort(function (a, b) {
            return b.updatedAt - a.updatedAt;
        });
        if (state.sessions.length > 28) {
            state.sessions = state.sessions.slice(0, 28);
        }
        if (!getSessionById(state.activeId)) {
            state.activeId = state.sessions[0].id;
            transcript = getSessionById(state.activeId).messages;
        }
    }

    function saveState() {
        pruneSessions();
        saveStateRaw(state);
    }

    function bootstrapState() {
        state = loadStateRaw();
        if (!state || !state.sessions.length) {
            var nid = uuid();
            state = {
                version: 1,
                activeId: nid,
                sessions: [{ id: nid, title: '', updatedAt: Date.now(), messages: [] }],
            };
            saveStateRaw(state);
        }
        var ok = false;
        for (var k = 0; k < state.sessions.length; k++) {
            if (state.sessions[k].id === state.activeId) ok = true;
        }
        if (!ok) state.activeId = state.sessions[0].id;
        transcript = getSessionById(state.activeId).messages;
    }

    function beginEmptySession() {
        flushActiveSessionMeta();
        var nid = uuid();
        var sess = { id: nid, title: '', updatedAt: Date.now(), messages: [] };
        state.sessions.unshift(sess);
        state.activeId = nid;
        transcript = sess.messages;
        messagesEl.innerHTML = '';
    }

    function historyPayload() {
        var out = [];
        for (var h = 0; h < transcript.length; h++) {
            out.push({ role: transcript[h].role, content: transcript[h].content });
        }
        return out;
    }

    function renderSidebar() {
        if (!sessionListEl) return;
        sessionListEl.innerHTML = '';
        var sorted = state.sessions.slice().sort(function (a, b) {
            return b.updatedAt - a.updatedAt;
        });
        for (var idx = 0; idx < sorted.length; idx++) {
            var sess = sorted[idx];
            var btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'tc-session-item' + (sess.id === state.activeId ? ' tc-session-active' : '');
            btn.setAttribute('role', 'listitem');
            var ttl = sess.title || ds('untitled-chat', 'Untitled conversation');
            if (ttl.length > 54) ttl = ttl.slice(0, 52) + '\u2026';
            var span = document.createElement('span');
            span.className = 'tc-session-title';
            span.textContent = ttl;
            var meta = document.createElement('span');
            meta.className = 'tc-session-meta';
            try {
                meta.textContent = new Date(sess.updatedAt).toLocaleString(undefined, {
                    dateStyle: 'short',
                    timeStyle: 'short',
                });
            } catch (e3) {
                meta.textContent = '';
            }
            btn.appendChild(span);
            btn.appendChild(meta);
            (function (sid) {
                btn.addEventListener('click', function () {
                    activateSessionById(sid);
                });
            })(sess.id);
            sessionListEl.appendChild(btn);
        }
    }

    function renderFromTranscript() {
        messagesEl.innerHTML = '';
        for (var r = 0; r < transcript.length; r++) {
            var row = transcript[r];
            if (row.role === 'user') appendUserBubble(row.content);
            else {
                var metaParts = [];
                if (row.provider_name) metaParts.push(ds('provider-label', 'Provider') + ': ' + row.provider_name);
                if (row.model_used) metaParts.push(ds('model-label', 'Model') + ': ' + row.model_used);
                var metaLine = metaParts.join(' • ');
                appendAssistantBubble(row.content, metaLine, row.sources || []);
            }
        }
        scrollMessages();
    }

    function activateSessionById(id) {
        if (id === state.activeId) return;
        flushActiveSessionMeta();
        state.activeId = id;
        transcript = getSessionById(id).messages;
        renderFromTranscript();
        saveState();
        renderSidebar();
        hideAlert();
    }

    function isNewChatCommand(text) {
        var t = text.trim();
        if (!t) return false;
        var lower = t.toLowerCase();
        var en = [/^new\s+chat$/i, /^start\s+over$/i, /^start\s+fresh$/i, /^reset\s+chat$/i, /^reset\s+conversation$/i];
        for (var ei = 0; ei < en.length; ei++) if (en[ei].test(lower)) return true;
        var ar = [
            /^اعمل\s+شات\s+جديد$/i,
            /^اعمل\s+محادثة\s+جديدة$/i,
            /^محادثة\s+جديدة$/i,
            /^ابدأ\s+من\s+جديد$/i,
            /^ابدأ\s+محادثة\s+جديدة$/i,
            /^مسح\s+المحادثة$/i,
            /^شات\s+جديد$/i,
        ];
        for (var ai = 0; ai < ar.length; ai++) if (ar[ai].test(t)) return true;
        return false;
    }

    function csrfToken() {
        var m = document.querySelector('meta[name="csrf-token"]');
        return m ? m.getAttribute('content') : '';
    }

    function hideAlert() {
        alertEl.classList.add('d-none');
        alertEl.textContent = '';
    }

    function showAlert(msg) {
        alertEl.textContent = msg;
        alertEl.classList.remove('d-none');
    }

    function appendUserBubble(text) {
        var wrap = document.createElement('div');
        wrap.className = 'tc-msg tc-msg-user';
        wrap.textContent = text;
        messagesEl.appendChild(wrap);
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }

    function appendAssistantBubble(text, meta, sources) {
        var bubble = createAssistantBubble(meta);
        bubble.main.textContent = text;
        if (sources && sources.length) {
            applySourcesToBubble(bubble.wrap, sources);
        }
        messagesEl.appendChild(bubble.wrap);
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }

    function createAssistantBubble(meta) {
        var wrap = document.createElement('div');
        wrap.className = 'tc-msg tc-msg-ai';
        var main = document.createElement('div');
        main.className = 'tc-msg-main';
        wrap.appendChild(main);

        var metaEl = null;
        if (meta) {
            metaEl = document.createElement('div');
            metaEl.className = 'tc-msg-meta';
            metaEl.textContent = meta;
            wrap.appendChild(metaEl);
        }

        return { wrap: wrap, main: main, meta: metaEl };
    }

    function applySourcesToBubble(wrap, sources) {
        var existing = wrap.querySelector('.tc-sources');
        if (existing) existing.parentNode.removeChild(existing);

        if (!sources || !sources.length) return;

        var ul = document.createElement('ul');
        ul.className = 'tc-sources-list';
        for (var i = 0; i < sources.length; i++) {
            var s = sources[i];
            if (!s || typeof s !== 'object') continue;
            var url = typeof s.url === 'string' ? s.url.trim() : '';
            if (!/^https?:\/\//i.test(url)) continue;
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.href = url;
            a.target = '_blank';
            a.rel = 'noopener noreferrer';
            var t = (typeof s.title === 'string' && s.title.trim()) ? s.title.trim() : url;
            a.textContent = t;
            li.appendChild(a);
            ul.appendChild(li);
        }
        if (!ul.children.length) return;

        var sec = document.createElement('div');
        sec.className = 'tc-sources';
        var st = document.createElement('div');
        st.className = 'tc-sources-title';
        st.textContent = ds('sources-label', 'Sources');
        sec.appendChild(st);
        var sn = ds('sources-note', '');
        if (sn) {
            var note = document.createElement('div');
            note.className = 'tc-sources-note';
            note.textContent = sn;
            sec.appendChild(note);
        }
        sec.appendChild(ul);
        wrap.appendChild(sec);
    }

    function buildMeta(providerName, modelUsed) {
        var parts = [];
        if (providerName) parts.push(ds('provider-label', 'Provider') + ': ' + providerName);
        if (modelUsed) parts.push(ds('model-label', 'Model') + ': ' + modelUsed);
        return parts.join(' • ');
    }

    function formatCountdown(totalSeconds) {
        if (totalSeconds === null || totalSeconds === undefined || totalSeconds < 0) return '—';
        var sec = Math.max(0, Math.round(totalSeconds));
        var mins = Math.floor(sec / 60);
        var rem = sec % 60;
        if (mins <= 0) return rem + 's';
        return mins + 'm ' + rem + 's';
    }

    function formatDateTime(iso) {
        if (!iso) return '—';
        try {
            return new Date(iso).toLocaleString();
        } catch (e5) {
            return iso;
        }
    }

    function setPhase(label, mode) {
        if (!phaseStatusEl) return;
        phaseStatusEl.textContent = label || ds('checking', 'Checking...');
        phaseStatusEl.classList.remove('ok', 'warn');
        if (mode === 'ok') phaseStatusEl.classList.add('ok');
        if (mode === 'warn') phaseStatusEl.classList.add('warn');
    }

    function renderStatusSnapshot(snapshot) {
        statusSnapshot = snapshot || statusSnapshot;
        var snap = statusSnapshot || {};
        var current = snap.current || {};
        var summary = snap.summary || {};
        var queue = snap.queue || {};
        if (providerStatusEl) providerStatusEl.textContent = current.provider || ds('checking', 'Checking...');
        if (modelStatusEl) modelStatusEl.textContent = current.model || '—';
        if (refreshStatusEl) {
            refreshStatusEl.textContent = summary.next_refresh_at ? formatDateTime(summary.next_refresh_at) : ds('ready-now', 'Ready now');
        }
        if (refreshSubStatusEl) {
            refreshSubStatusEl.textContent = summary.next_refresh_in_seconds
                ? ds('estimated', 'Estimated') + ': ' + formatCountdown(summary.next_refresh_in_seconds)
                : ds('ready-now', 'Ready now');
        }
        if (capacityStatusEl) {
            capacityStatusEl.textContent = (summary.keys_ready || 0) + ' / ' + (summary.keys_total || 0) + ' ' + ds('keys-ready', 'Ready keys');
        }
        if (capacitySubStatusEl) {
            capacitySubStatusEl.textContent =
                (summary.providers_ready || 0) + ' / ' + (summary.providers_total || 0) + ' ' + ds('providers-ready', 'Ready providers') +
                ' • ' + (queue.active || 0) + '/' + (queue.max_concurrent || 0) + ' active' +
                ' • ' + (queue.queued || 0) + ' queued';
        }
    }

    function updateEtaLine() {
        if (!etaStatusEl) return;
        if (!finishEtaAt) {
            etaStatusEl.textContent = '—';
            return;
        }
        var remaining = Math.max(0, Math.ceil((finishEtaAt - Date.now()) / 1000));
        etaStatusEl.textContent = ds('estimated', 'Estimated') + ': ' + formatCountdown(remaining);
        if (remaining <= 0) {
            finishEtaAt = null;
        }
    }

    function startStatusTicker() {
        if (refreshTimer) clearInterval(refreshTimer);
        refreshTimer = setInterval(function () {
            updateEtaLine();
            if (statusSnapshot && statusSnapshot.summary && refreshSubStatusEl) {
                var nextSeconds = statusSnapshot.summary.next_refresh_in_seconds;
                if (typeof nextSeconds === 'number' && nextSeconds > 0) {
                    statusSnapshot.summary.next_refresh_in_seconds = Math.max(0, nextSeconds - 1);
                    refreshSubStatusEl.textContent = ds('estimated', 'Estimated') + ': ' + formatCountdown(statusSnapshot.summary.next_refresh_in_seconds);
                }
            }
        }, 1000);
    }

    function refreshStatusSnapshot() {
        if (!statusUrl) return Promise.resolve();
        return fetch(statusUrl, {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            }
        })
            .then(function (res) { return res.ok ? res.json() : null; })
            .then(function (data) {
                if (data) renderStatusSnapshot(data);
            })
            .catch(function () {});
    }

    function scrollMessages() {
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }

    function stopWaitingUi() {
        if (waitTimer) {
            clearInterval(waitTimer);
            waitTimer = null;
        }
        if (pendingEl && pendingEl.parentNode) {
            pendingEl.parentNode.removeChild(pendingEl);
        }
        pendingEl = null;
        if (progressEl) {
            progressEl.classList.remove('tc-progress-on');
        }
        finishEtaAt = null;
        updateEtaLine();
    }

    function startWaitingUi() {
        stopWaitingUi();

        var pendingLabel = ds('pending-label', 'Assistant is preparing a reply');
        pendingEl = document.createElement('div');
        pendingEl.className = 'tc-msg tc-msg-ai tc-msg-pending';
        pendingEl.setAttribute('aria-busy', 'true');
        pendingEl.setAttribute('aria-label', pendingLabel);
        pendingEl.innerHTML =
            '<div class="tc-pending-top">' +
                '<span class="tc-dots" aria-hidden="true"><span></span><span></span><span></span></span>' +
                '<span>' + pendingLabel + '</span>' +
            '</div>' +
            '<div class="tc-shimmer-wrap" aria-hidden="true">' +
                '<div class="tc-shimmer-line"></div>' +
                '<div class="tc-shimmer-line medium"></div>' +
                '<div class="tc-shimmer-line short"></div>' +
            '</div>';
        messagesEl.appendChild(pendingEl);
        scrollMessages();

        if (progressEl) {
            progressEl.classList.add('tc-progress-on');
        }

        var webOn = root.getAttribute('data-web-grounding') === '1';
        var steps = webOn
            ? [
                ds('wait-sources', 'Gathering trusted references…'),
                ds('wait-summarize', 'Searching and summarizing…'),
                ds('wait-compose', 'Putting the answer together…'),
                ds('wait-almost', 'Almost there…')
            ]
            : [
                ds('thinking', 'Thinking…'),
                ds('wait-working', 'Working on your answer…'),
                ds('wait-almost', 'Almost there…')
            ];

        var i = 0;
        statusEl.textContent = steps[0];
        setPhase(ds('processing', 'Processing'), null);
        var maxWaitSeconds = 20;
        if (statusSnapshot && statusSnapshot.current && statusSnapshot.current.max_wait_seconds) {
            maxWaitSeconds = statusSnapshot.current.max_wait_seconds;
        } else if (statusSnapshot && statusSnapshot.queue && statusSnapshot.queue.max_wait_seconds) {
            maxWaitSeconds = statusSnapshot.queue.max_wait_seconds;
        }
        finishEtaAt = Date.now() + (maxWaitSeconds * 1000);
        updateEtaLine();
        waitTimer = setInterval(function () {
            i = (i + 1) % steps.length;
            statusEl.textContent = steps[i];
        }, 3200);
    }

    function setLoading(on) {
        form.classList.toggle('tc-loading', on);
        sendBtn.disabled = on;
        input.disabled = on;
        if (sendSpin) sendSpin.classList.toggle('d-none', !on);
        if (sendText) sendText.classList.toggle('opacity-50', on);
        if (!on) {
            statusEl.textContent = '';
        }
        if (on) hideAlert();
    }

    bootstrapState();
    statusSnapshot = parseInitialStatus();
    renderFromTranscript();
    renderSidebar();
    renderStatusSnapshot(statusSnapshot);
    startStatusTicker();
    refreshStatusSnapshot();

    if (newChatBtn) {
        newChatBtn.addEventListener('click', function () {
            flushActiveSessionMeta();
            if (transcript.length === 0) {
                hideAlert();
                input.focus();
                return;
            }
            beginEmptySession();
            hideAlert();
            saveState();
            renderSidebar();
            input.focus();
        });
    }

    function persistAssistantReply(msg, reply, meta) {
        transcript.push({ role: 'user', content: msg });
        transcript.push({
            role: 'assistant',
            content: reply,
            sources: meta.sources || [],
            model_used: meta.model_used || '',
            provider_name: meta.provider_name || '',
        });
        flushActiveSessionMeta();
        saveState();
        renderSidebar();
    }

    function sendClassic(msg) {
        var hist = historyPayload();

        return fetch(sendUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken(),
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                message: msg,
                thread_id: state.activeId,
                history: hist,
            }),
        })
            .then(function (res) {
                return res.json().then(function (data) {
                    return { ok: res.ok, status: res.status, data: data };
                });
            })
            .then(function (ctx) {
                var data = ctx.data || {};
                if (ctx.ok && data.reply) {
                    var meta = {
                        model_used: data.model_used || '',
                        provider_name: data.provider_name || data.provider_used || '',
                        sources: Array.isArray(data.sources) ? data.sources : [],
                    };
                    persistAssistantReply(msg, data.reply, meta);
                    appendAssistantBubble(data.reply, buildMeta(meta.provider_name, meta.model_used), meta.sources);
                    if (data.status_snapshot) renderStatusSnapshot(data.status_snapshot);
                    setPhase(ds('ready-now', 'Ready now'), 'ok');
                    if (data.timing && typeof data.timing.elapsed_ms === 'number' && etaStatusEl) {
                        etaStatusEl.textContent = ds('estimated', 'Estimated') + ': ' + Math.max(0.1, (data.timing.elapsed_ms / 1000)).toFixed(1) + 's';
                    }
                    hideAlert();
                    return;
                }
                if (!ctx.ok && data.log_error && data.reply) {
                    var meta2 = {
                        model_used: data.model_used || '',
                        provider_name: data.provider_name || data.provider_used || '',
                        sources: Array.isArray(data.sources) ? data.sources : [],
                    };
                    persistAssistantReply(msg, data.reply, meta2);
                    appendAssistantBubble(data.reply, buildMeta(meta2.provider_name, meta2.model_used), meta2.sources);
                    if (data.status_snapshot) renderStatusSnapshot(data.status_snapshot);
                    setPhase(ds('ready-now', 'Ready now'), 'ok');
                    showAlert(data.message || ds('generic', 'Error'));
                    return;
                }
                var text = data && data.message ? data.message : ds('generic', 'Error');
                if (ctx.status === 503) {
                    text = data && data.message ? data.message : ds('models-failed', text);
                }
                if (data.status_snapshot) renderStatusSnapshot(data.status_snapshot);
                if (data.timing && typeof data.timing.elapsed_ms === 'number' && etaStatusEl) {
                    etaStatusEl.textContent = ds('estimated', 'Estimated') + ': ' + Math.max(0.1, (data.timing.elapsed_ms / 1000)).toFixed(1) + 's';
                }
                setPhase(ds('failed', 'Unavailable'), 'warn');
                showAlert(text);
            });
    }

    function sendStreaming(msg) {
        if (!window.ReadableStream || !window.TextDecoder) {
            return sendClassic(msg);
        }

        var hist = historyPayload();

        return fetch(streamUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/x-ndjson',
                'X-CSRF-TOKEN': csrfToken(),
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                message: msg,
                thread_id: state.activeId,
                history: hist,
            }),
        }).then(function (res) {
            if (!res.ok || !res.body) {
                throw new Error('stream-unavailable');
            }

            stopWaitingUi();
            var bubble = createAssistantBubble('');
            messagesEl.appendChild(bubble.wrap);
            scrollMessages();

            var reader = res.body.getReader();
            var decoder = new TextDecoder();
            var buffer = '';
            var reply = '';
            var meta = {
                model_used: '',
                provider_name: '',
                sources: [],
            };

            function updateMeta() {
                var line = buildMeta(meta.provider_name, meta.model_used);
                if (!bubble.meta && line) {
                    bubble.meta = document.createElement('div');
                    bubble.meta.className = 'tc-msg-meta';
                    bubble.wrap.appendChild(bubble.meta);
                }
                if (bubble.meta) bubble.meta.textContent = line;
            }

            function processLine(line) {
                if (!line) return;
                var payload = null;
                try {
                    payload = JSON.parse(line);
                } catch (e4) {
                    return;
                }
                if (!payload || !payload.event) return;

                if (payload.event === 'status') {
                    statusEl.textContent = payload.message || '';
                    setPhase(ds('queued', 'Queued'), null);
                    return;
                }
                if (payload.event === 'meta') {
                    meta.model_used = payload.model_used || '';
                    meta.provider_name = payload.provider_name || payload.provider_used || '';
                    meta.sources = Array.isArray(payload.sources) ? payload.sources : [];
                    if (payload.status_snapshot) renderStatusSnapshot(payload.status_snapshot);
                    if (payload.timing && payload.timing.stream_seconds_estimate) {
                        finishEtaAt = Date.now() + (payload.timing.stream_seconds_estimate * 1000);
                        updateEtaLine();
                    }
                    setPhase(ds('streaming', 'Streaming reply'), 'ok');
                    updateMeta();
                    applySourcesToBubble(bubble.wrap, meta.sources);
                    return;
                }
                if (payload.event === 'delta') {
                    reply += payload.content || '';
                    bubble.main.textContent = reply;
                    scrollMessages();
                    return;
                }
                if (payload.event === 'error') {
                    if (bubble.wrap.parentNode) bubble.wrap.parentNode.removeChild(bubble.wrap);
                    if (payload.status_snapshot) renderStatusSnapshot(payload.status_snapshot);
                    if (payload.timing && typeof payload.timing.elapsed_ms === 'number' && etaStatusEl) {
                        etaStatusEl.textContent = ds('estimated', 'Estimated') + ': ' + Math.max(0.1, (payload.timing.elapsed_ms / 1000)).toFixed(1) + 's';
                    }
                    setPhase(ds('failed', 'Unavailable'), 'warn');
                    showAlert(payload.message || ds('generic', 'Error'));
                }
            }

            function readLoop() {
                return reader.read().then(function (chunk) {
                    if (chunk.done) {
                        if (reply) {
                            persistAssistantReply(msg, reply, meta);
                            setPhase(ds('ready-now', 'Ready now'), 'ok');
                            hideAlert();
                        }
                        return;
                    }
                    buffer += decoder.decode(chunk.value, { stream: true });
                    var lines = buffer.split('\n');
                    buffer = lines.pop() || '';
                    for (var i = 0; i < lines.length; i++) processLine(lines[i].trim());
                    return readLoop();
                });
            }

            return readLoop();
        }).catch(function () {
            stopWaitingUi();
            return sendClassic(msg);
        });
    }

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var msg = (input.value || '').trim();
        if (!msg) return;

        if (isNewChatCommand(msg)) {
            input.value = '';
            beginEmptySession();
            appendUserBubble(msg);
            appendAssistantBubble(ds('new-chat-ready', 'Started a new conversation. What would you like to ask?'), '', []);
            saveState();
            renderSidebar();
            return;
        }

        appendUserBubble(msg);
        input.value = '';
        setLoading(true);
        startWaitingUi();
        refreshStatusSnapshot();

        sendStreaming(msg)
            .catch(function () {
                setPhase(ds('failed', 'Unavailable'), 'warn');
                showAlert(ds('network', 'Network error'));
            })
            .finally(function () {
                stopWaitingUi();
                setLoading(false);
                refreshStatusSnapshot();
            });
    });
})();
</script>
@endpush