{% extends "base.html" %}
{% block title %}Connected{% endblock %}
{% block content %}

<div class="steps" aria-label="Enrollment progress">
    <div class="step done">
        <span class="step-circle">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </span>
        <span class="step-label">Connect</span>
    </div>
    <div class="step-sep done"></div>
    <div class="step done">
        <span class="step-circle">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        </span>
        <span class="step-label">Approve</span>
    </div>
    <div class="step-sep done"></div>
    <div class="step active">
        <span class="step-circle">03</span>
        <span class="step-label">Online</span>
    </div>
</div>

<section class="panel">
    <div class="success-hero">
        <div class="check-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"/>
            </svg>
        </div>
        <div style="text-align: center;">
            <div class="panel-eyebrow">Identity issued</div>
            <h1 class="panel-title" style="margin: 6px 0 0;">You are on the <em>network</em></h1>
        </div>
    </div>

    <div class="identity-card">
        <div class="identity-row">
            <span class="identity-k">Agent ID</span>
            <span class="identity-v">{{ agent_id or '—' }}</span>
        </div>
        <div class="identity-row">
            <span class="identity-k">Organization</span>
            <span class="identity-v">{{ site_host or '—' }}</span>
        </div>
        <div class="identity-row">
            <span class="identity-k">Capabilities</span>
            <span class="identity-v">
                {% if capabilities %}
                    {{ capabilities | join(', ') }}
                {% else %}
                    <span class="muted">none · minimal role</span>
                {% endif %}
            </span>
        </div>
        <div class="identity-row">
            <span class="identity-k">Issued at</span>
            <span class="identity-v">{{ issued_at or '—' }}</span>
        </div>
    </div>

    <div class="btn-row" style="margin-top: 16px;">
        <button type="button"
                id="test-ping-btn"
                class="btn btn-ghost"
                hx-post="/api/test-ping"
                hx-swap="none"
                hx-on::before-request="prepareTestPing(this)"
                hx-on::after-request="handleTestPingResult(this, event)">
            Test connection
        </button>
        <span id="test-ping-result" class="muted" style="font-size: 12px; align-self: center;"></span>
    </div>
</section>

<section class="panel">
    <div class="toggle-row">
        <div class="toggle-meta">
            <div class="panel-eyebrow">Persistence</div>
            <div class="toggle-title">Start Cullis at login</div>
            <div class="toggle-desc">
                Keep the connector running so MCP tools stay available the
                moment you open Cursor or Claude Desktop — no manual launch.
            </div>
            {% if autostart_enabled and autostart_service_path %}
            <div class="toggle-desc mono" style="margin-top: 6px; font-size: 11px; opacity: 0.7;">
                Active at <span title="{{ autostart_service_path }}">{{ autostart_service_path }}</span>
            </div>
            {% endif %}
        </div>
        <button type="button"
                class="toggle-switch"
                data-enabled="{{ 'true' if autostart_enabled else 'false' }}"
                hx-post="/autostart/toggle"
                hx-swap="none"
                hx-on::before-request="this.setAttribute('data-pending','true')"
                hx-on::after-request="handleAutostartResult(this, event)"
                aria-label="Toggle start at login">
            <span class="toggle-thumb"></span>
        </button>
    </div>
</section>

<section class="panel">
    <div class="panel-head">
        <div class="panel-eyebrow">Step 03 · Wire up your tools</div>
        <h2 class="panel-title" style="font-size: 18px;">Connect your IDE</h2>
        <p class="panel-sub">
            Pick the apps where you want Cullis tools to appear. We'll write
            the MCP config for you — restart the app after to see them.
        </p>
    </div>

    <div class="ide-grid">
        {% for ide in ides %}
        <button
            type="button"
            class="ide-card"
            data-status="{{ ide.status }}"
            {% if ide.status != 'missing' %}
            hx-post="/configure/{{ ide.id }}"
            hx-swap="none"
            hx-on::after-request="handleConfigureResult(this, event)"
            {% else %}
            disabled
            title="{{ ide.note }}"
            {% endif %}>
            <span class="ide-card-name">{{ ide.name }}</span>
            <span class="ide-card-status">
                {% if ide.status == 'installed' %}Already configured{% elif ide.status == 'detected' %}Ready to configure{% else %}Not detected{% endif %}
            </span>
            {% if ide.note and ide.status != 'missing' %}
            <span class="ide-card-status muted" style="font-size: 9px;">{{ ide.note }}</span>
            {% endif %}
        </button>
        {% endfor %}

        <button type="button" class="ide-card" data-status="detected"
                onclick="copyText(mcpSnippet)">
            <span class="ide-card-name">Other MCP client</span>
            <span class="ide-card-status">Copy JSON snippet</span>
        </button>
    </div>

    <div class="btn-row">
        <a class="btn btn-ghost" href="https://cullis.io/docs/connector/ide" target="_blank" rel="noopener">
            Manual setup docs →
        </a>
    </div>
</section>

<p class="footer-hint">
    You can close this window — the connector keeps running in the background.
</p>

{% endblock %}

{% block after_body %}
<script>
const mcpSnippet = {{ mcp_snippet|tojson }};

function handleAutostartResult(btn, event) {
    btn.removeAttribute('data-pending');
    let payload = {};
    try { payload = JSON.parse(event.detail.xhr.responseText); } catch (e) {}
    if (event.detail.successful) {
        btn.setAttribute('data-enabled', payload.enabled ? 'true' : 'false');
        showToast(payload.enabled ? 'Autostart enabled' : 'Autostart disabled');
    } else {
        showToast(payload.error || 'Could not change autostart setting');
    }
}

function prepareTestPing(btn) {
    btn.disabled = true;
    btn.textContent = 'Pinging…';
    const out = document.getElementById('test-ping-result');
    if (out) { out.textContent = ''; out.style.color = ''; }
}

function handleTestPingResult(btn, event) {
    btn.disabled = false;
    btn.textContent = 'Test connection';
    const out = document.getElementById('test-ping-result');
    if (!out) return;
    let payload = {};
    try { payload = JSON.parse(event.detail.xhr.responseText); } catch (e) {}
    if (payload.ok) {
        out.style.color = '';
        out.textContent = '✓ ' + (payload.site_status || 'reachable')
            + ' · ' + payload.rtt_ms + ' ms'
            + (payload.site_version && payload.site_version !== 'unknown'
                ? ' · v' + payload.site_version : '')
            + (payload.tls_verified ? ' · TLS verified' : ' · TLS NOT verified');
    } else {
        out.style.color = 'var(--err, #c62828)';
        out.textContent = '✗ ' + (payload.error || 'unreachable');
    }
}

function handleConfigureResult(btn, event) {
    const statusEl = btn.querySelector('.ide-card-status');
    let payload = null;
    try { payload = JSON.parse(event.detail.xhr.responseText); } catch (e) {}
    const ok = event.detail.successful && payload;

    if (!ok) {
        statusEl.textContent = 'Error · check logs';
        btn.setAttribute('data-status', 'missing');
        showToast((payload && payload.error) || 'Configuration failed');
        return;
    }

    if (payload.status === 'installed' || payload.status === 'already_configured') {
        btn.setAttribute('data-status', 'installed');
        statusEl.textContent = payload.status === 'already_configured'
            ? 'Already configured'
            : 'Configured · restart app';
        showToast(payload.message || 'Configured');
    } else if (payload.status === 'error') {
        statusEl.textContent = 'Error · ' + (payload.error || 'unknown');
        btn.setAttribute('data-status', 'missing');
        showToast(payload.error || 'Configuration failed');
    }
}
</script>
{% endblock %}