{% extends "base.html" %}
{% from "_macros.html" import flash, hud_item, bot_card %}

{% set panels = ['agents', 'orchestration', 'connections', 'config'] %}
{% set panel_labels = {
    'agents': 'Agents',
    'orchestration': 'Orchestration',
    'connections': 'Provider Connections',
    'config': 'Configuration'
} %}

{% block body %}
{# ── Sidebar ──────────────────────────────────────────────────── #}
<div class="sidebar" id="sidebar">
    <div class="brand">
        <div class="status-dot {{ 'running' if running else 'stopped' }}"></div>
        <span class="brand-name small-caps">OTTO</span>
    </div>

    <div class="global-hud">
        {{ hud_item('System State', 'Running' if running else 'Stopped',
            'var(--status-running)' if running else 'var(--text-muted)') }}
        {{ hud_item('PID', pid | string if running and pid else '—') }}
        {{ hud_item('Agents', bots | length) }}
    </div>

    <ul class="nav-menu">
        {% for p in panels %}
        <li><a class="nav-item{{ ' active' if active_panel == p else '' }}"
               href="/{{ p }}"
               onclick="switchPanel(event, '{{ p }}')">{{ panel_labels[p] }}</a></li>
        {% endfor %}
    </ul>

    <div style="margin-top: auto; padding: 0 24px;">
        <form method="POST" action="/auth/logout" style="margin-bottom: 12px;">
            <button type="submit" class="btn-logout">Sign Out</button>
        </form>
        <div style="font-size: 11px; color: var(--text-muted); font-family: monospace;">v{{ version }}</div>
    </div>
</div>

{# ── Content pane ─────────────────────────────────────────────── #}
<div class="main-content" id="mainContent">

    {{ flash(flash_status, flash_message) }}

    {# ── Agents Panel ─────────────────────────────────────────── #}
    <div class="panel{{ ' active' if active_panel == 'agents' else '' }}" id="agents">
        <div class="panel-header">
            <div>
                <h1 class="panel-title">Agents</h1>
                <p class="panel-desc">Status and controls for configured agents.</p>
            </div>
            {% if running %}
            <button class="btn btn-danger" type="button" onclick="doAction('/stop')">Stop Daemon</button>
            {% else %}
            <button class="btn btn-primary" type="button" onclick="doAction('/start')">Start Daemon</button>
            {% endif %}
        </div>

        {% if bots %}
        <div class="bot-matrix">
            {% for bot in bots %}
            {{ bot_card(
                alias=bot.alias,
                running=bot.is_running,
                model=bot.model_display,
                channels=bot.channel_types) }}
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <p>No agents configured.</p>
        </div>
        {% endif %}
    </div>

    {# ── Orchestration Panel ──────────────────────────────────── #}
    <div class="panel{{ ' active' if active_panel == 'orchestration' else '' }}" id="orchestration">
        <div class="panel-header">
            <div>
                <h1 class="panel-title">Orchestration</h1>
                <p class="panel-desc">Delegated jobs, subagent activity, and recent events.</p>
            </div>
        </div>

        {# Summary strip — single horizontal row of colored counts #}
        <div class="orch-summary-strip" id="orch-summary">
            <span class="orch-summary-stat" style="color: var(--text-muted);">Loading…</span>
        </div>

        {# Subagent filter pills #}
        <div class="orch-agents-bar" id="orch-subagents"></div>

        {# Jobs — grouped by status #}
        <div id="orch-jobs"></div>

        {# Schedules & Reminders #}
        <div class="orch-section" id="orch-schedules-section">
            <div class="orch-section-header">
                <span class="orch-section-title small-caps">Schedules & Reminders
                    <span class="section-count" id="orch-schedules-count">0</span>
                </span>
                <span class="orch-section-chevron">▾</span>
            </div>
            <div class="orch-section-body" id="orch-schedules"></div>
        </div>

        {# Events — timeline #}
        <div class="orch-events-card" style="margin-top: 20px;">
            <div class="orch-events-header">
                <span class="small-caps">Recent Events</span>
                <span id="orch-events-count" class="small-caps" style="color: var(--text-muted);"></span>
            </div>
            <div class="orch-events-body">
                <div class="orch-timeline" id="orch-events"></div>
            </div>
            <div class="orch-pagination" id="orch-events-pagination" style="display: none;">
                <span id="orch-events-info"></span>
                <div class="orch-pagination-btns">
                    <button class="btn btn-sm" type="button" id="orch-events-prev">← Older</button>
                    <button class="btn btn-sm" type="button" id="orch-events-next">Newer →</button>
                </div>
            </div>
        </div>

    </div>

    {# ── Provider Connections Panel ───────────────────────────── #}
    <div class="panel{{ ' active' if active_panel == 'connections' else '' }}" id="connections">
        <div class="panel-header">
            <div>
                <h1 class="panel-title">Provider Connections</h1>
                <p class="panel-desc">OAuth connection status for supported providers.</p>
            </div>
        </div>

        <div style="display: grid; gap: 10px;">
            {% for provider in oauth_providers %}
            <div class="provider-row">
                <div>
                    <div class="provider-name">{{ provider.label }}</div>
                    <div class="provider-detail">{{ provider.status }} — {{ provider.detail }}</div>
                </div>
                {% if provider.action_label %}
                <form method="post" action="/auth/connect" style="margin: 0;">
                    <input type="hidden" name="provider" value="{{ provider.key }}">
                    <button class="btn btn-sm" type="submit">{{ provider.action_label }}</button>
                </form>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>

    {# ── Configuration Panel ──────────────────────────────────── #}
    <div class="panel{{ ' active' if active_panel == 'config' else '' }}" id="config">
        <div class="panel-header">
            <div>
                <h1 class="panel-title">Configuration</h1>
                <p class="panel-desc">System-wide settings and defaults.</p>
            </div>
        </div>

        {{ config_form | safe }}
    </div>

</div>

<script>
    function switchPanel(evt, panelId) {
        if (evt) evt.preventDefault();
        document.querySelectorAll('.panel').forEach(function(el) { el.classList.remove('active'); });
        document.getElementById(panelId).classList.add('active');
        document.querySelectorAll('.nav-item').forEach(function(el) { el.classList.remove('active'); });
        if (evt && evt.target) { evt.target.classList.add('active'); }
        history.pushState(null, '', '/' + panelId);
    }

    window.addEventListener('popstate', function () {
        var path = location.pathname.replace(/^\//, '') || 'agents';
        var panel = document.getElementById(path);
        if (panel) {
            document.querySelectorAll('.panel').forEach(function(el) { el.classList.remove('active'); });
            panel.classList.add('active');
            document.querySelectorAll('.nav-item').forEach(function(el) {
                el.classList.toggle('active', el.getAttribute('href') === '/' + path);
            });
        }
    });
</script>
{{ dashboard_js | safe }}
{% endblock %}