{% extends "base.html" %}

{% block title %}Spark - Dashboard{% endblock %}

{% block content %}
<div class="container-fluid" style="max-width: 1100px;">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 style="font-family: var(--app-font-heading); font-weight: 700; margin-bottom: 0.25rem;">Dashboard</h4>
            <p class="mb-0" style="color: var(--app-text-secondary); font-size: 0.875rem;">
                Manage conversations, providers, and tools.
            </p>
        </div>
        <a href="/conversations" class="btn btn-app-primary">
            <i class="bi bi-plus-lg me-1"></i> New Conversation
        </a>
    </div>

    <!-- Provider Status -->
    <div class="row g-3 mb-4">
        {% for provider in providers %}
        <div class="col-sm-6 col-lg-4">
            <div class="app-stat-card{% if provider.enabled and provider.model_count > 0 %} provider-clickable{% endif %}"
                 {% if provider.enabled and provider.model_count > 0 %}
                 style="cursor: pointer;"
                 onclick="showProviderModels('{{ provider.key }}', '{{ provider.name }}')"
                 title="Click to view models"
                 {% endif %}>
                <div class="stat-icon">
                    <i class="bi {{ provider.icon }}"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-value" style="font-size: 1rem;">{{ provider.name }}</div>
                    <div class="stat-label">
                        {% if provider.enabled %}
                        <span class="status-dot online"></span> Connected
                        {% if provider.model_count > 0 %}
                        <span class="badge-app badge-app-primary ms-1" style="font-size: 0.625rem;">
                            {{ provider.model_count }} model{{ 's' if provider.model_count != 1 else '' }}
                        </span>
                        {% endif %}
                        {% else %}
                        <span class="status-dot offline"></span> Disabled
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Tabs -->
    <div class="app-tabs mb-4">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#tab-conversations" role="tab">
                    <i class="bi bi-chat-dots me-1"></i> Conversations
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#tab-tools" role="tab">
                    <i class="bi bi-tools me-1"></i> Tools
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#tab-system" role="tab">
                    <i class="bi bi-info-circle me-1"></i> System
                </a>
            </li>
        </ul>
    </div>

    <div class="tab-content">
        <!-- Conversations Tab -->
        <div class="tab-pane fade show active" id="tab-conversations" role="tabpanel">
            {% if favourite_conversations %}
            <div class="app-card mb-3">
                <div class="card-header d-flex align-items-center">
                    <i class="bi bi-star-fill me-2" style="color: var(--app-warning);"></i>Favourites
                </div>
                <div class="card-body p-0">
                    {% for conv in favourite_conversations %}
                    <a href="/chat/{{ conv.id }}" class="d-flex align-items-center px-3 py-3 text-decoration-none"
                       style="{% if not loop.last %}border-bottom: 1px solid var(--app-border);{% endif %} cursor: pointer; transition: background 0.15s;"
                       onmouseover="this.style.background='var(--app-hover-bg)'"
                       onmouseout="this.style.background=''"
                       onfocus="this.style.background='var(--app-hover-bg)'"
                       onblur="this.style.background=''">
                        <div class="flex-grow-1" style="min-width: 0;">
                            <div class="d-flex align-items-center gap-2">
                                <i class="bi bi-star-fill" style="color: var(--app-warning); font-size: 0.75rem;"></i>
                                <span style="font-weight: 600; color: var(--app-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                    {{ conv.name }}
                                </span>
                            </div>
                            <div style="font-size: 0.75rem; color: var(--app-text-muted); margin-top: 0.125rem;">
                                {{ conv.model_id or 'No model' }}
                                {% if conv.total_tokens %} &middot; {{ conv.total_tokens }} tokens{% endif %}
                            </div>
                        </div>
                        <i class="bi bi-chevron-right ms-2" style="color: var(--app-text-muted); flex-shrink: 0;"></i>
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            {% if recent_conversations %}
            <div class="app-card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <span><i class="bi bi-clock-history me-2"></i>Recent Conversations</span>
                    <a href="/conversations" class="btn btn-app-ghost btn-sm">View all</a>
                </div>
                <div class="card-body p-0">
                    {% for conv in recent_conversations %}
                    <a href="/chat/{{ conv.id }}" class="d-flex align-items-center px-3 py-3 text-decoration-none"
                       style="{% if not loop.last %}border-bottom: 1px solid var(--app-border);{% endif %} cursor: pointer; transition: background 0.15s;"
                       onmouseover="this.style.background='var(--app-hover-bg)'"
                       onmouseout="this.style.background=''"
                       onfocus="this.style.background='var(--app-hover-bg)'"
                       onblur="this.style.background=''">
                        <div class="flex-grow-1" style="min-width: 0;">
                            <div class="d-flex align-items-center gap-2">
                                <span style="font-weight: 600; color: var(--app-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                    {{ conv.name }}
                                </span>
                                {% if conv.message_count is defined and conv.message_count %}
                                <span class="badge-app badge-app-primary" style="font-size: 0.6rem; flex-shrink: 0;">
                                    {{ conv.message_count }} msg{{ 's' if conv.message_count != 1 else '' }}
                                </span>
                                {% endif %}
                            </div>
                            <div style="font-size: 0.75rem; color: var(--app-text-muted); margin-top: 0.125rem;">
                                {{ conv.model_id or 'No model' }}
                                {% if conv.total_tokens %}
                                &middot; {{ conv.total_tokens }} tokens
                                {% endif %}
                            </div>
                        </div>
                        <i class="bi bi-chevron-right ms-2" style="color: var(--app-text-muted); flex-shrink: 0;"></i>
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <div class="app-card">
                <div class="card-body text-center py-5">
                    <i class="bi bi-chat-square-text" style="font-size: 3rem; color: var(--app-text-muted);"></i>
                    <p class="mt-3 mb-0" style="color: var(--app-text-secondary);">
                        No conversations yet. Create one to get started.
                    </p>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Tools Tab -->
        <div class="tab-pane fade" id="tab-tools" role="tabpanel">

            <!-- MCP Summary Stats -->
            <div class="row g-3 mb-4">
                <div class="col-sm-4">
                    <div class="app-stat-card">
                        <div class="stat-icon">
                            <i class="bi bi-hdd-network"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">{{ mcp_stats.servers_configured }}</div>
                            <div class="stat-label">Servers Configured</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="app-stat-card">
                        <div class="stat-icon" {% if mcp_stats.servers_failed > 0 %}style="background: var(--app-danger-bg); color: var(--app-danger);"{% endif %}>
                            <i class="bi bi-exclamation-triangle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">{{ mcp_stats.servers_failed }}</div>
                            <div class="stat-label">Failed Connections</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="app-stat-card">
                        <div class="stat-icon">
                            <i class="bi bi-wrench"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">{{ mcp_stats.total_tools }}</div>
                            <div class="stat-label">Total Tools Available</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Server Cards (Embedded + MCP) -->
            <div class="row g-3">
                {% for server in mcp_servers %}
                <div class="col-sm-6 col-lg-4">
                    {% if server.type == 'embedded' and server.connected %}
                    <div class="app-stat-card" style="cursor: pointer;" tabindex="0" role="button"
                         onclick="showEmbeddedTools()"
                         onkeydown="if(event.key==='Enter') showEmbeddedTools()">
                    {% elif server.type == 'mcp' and server.connected %}
                    <div class="app-stat-card" style="cursor: pointer;" tabindex="0" role="button"
                         onclick="showDashboardTools('{{ server.name }}')"
                         onkeydown="if(event.key==='Enter') showDashboardTools('{{ server.name }}')">
                    {% else %}
                    <a href="{{ server.settings_url }}" class="text-decoration-none">
                    <div class="app-stat-card" style="cursor: pointer;">
                    {% endif %}
                        <div class="stat-icon"
                             {% if not server.connected %}style="background: var(--app-danger-bg); color: var(--app-danger);"{% endif %}>
                            <i class="bi {{ server.icon }}"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value" style="font-size: 0.9375rem;">{{ server.name }}</div>
                            <div class="stat-label">
                                {% if server.connected %}
                                <span class="status-dot online"></span>
                                {{ server.tool_count }} tool{{ 's' if server.tool_count != 1 else '' }} — click to view
                                {% else %}
                                <span class="status-dot error"></span> Disconnected
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% if not (server.type in ('embedded', 'mcp') and server.connected) %}
                    </a>
                    {% endif %}
                </div>
                {% endfor %}
                {% if not mcp_servers %}
                <div class="col-12">
                    <div class="app-card text-center py-4" style="color: var(--app-text-muted);">
                        No servers connected.
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Manage Servers link -->
            <div class="text-end mt-3">
                <a href="/settings#section-mcp-servers" class="btn btn-app-outline btn-sm">
                    <i class="bi bi-gear me-1"></i> Manage MCP Servers
                </a>
            </div>
        </div>

        <!-- System Tab -->
        <div class="tab-pane fade" id="tab-system" role="tabpanel">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="app-card">
                        <div class="card-header">
                            <i class="bi bi-database me-2"></i> Database
                        </div>
                        <div class="card-body" style="font-size: 0.875rem;">
                            <div class="d-flex justify-content-between mb-2">
                                <span style="color: var(--app-text-secondary);">Type</span>
                                <span>SQLite</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="app-card">
                        <div class="card-header">
                            <i class="bi bi-gear me-2"></i> Actions
                        </div>
                        <div class="card-body">
                            <a href="/settings" class="btn btn-app-outline btn-sm me-2">
                                <i class="bi bi-gear me-1"></i> Settings
                            </a>
                            <a href="/logout" class="btn btn-app-ghost btn-sm">
                                <i class="bi bi-box-arrow-right me-1"></i> Sign Out
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Provider Models Modal -->
<div class="modal fade" id="providerModelsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="providerModelsTitle">
                    <i class="bi bi-robot me-2" style="color: var(--app-accent);"></i>
                    <span id="providerModelsName">Provider</span> Models
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="providerModelsLoading" class="text-center py-4">
                    <div class="spinner-border spinner-border-sm" style="color: var(--app-accent);"></div>
                    <span class="ms-2" style="color: var(--app-text-secondary);">Loading models...</span>
                </div>
                <div id="providerModelsContent" style="display: none;">
                    <div class="mb-3" style="font-size: 0.8125rem; color: var(--app-text-secondary);">
                        <span id="providerModelsCount"></span> models available
                    </div>
                    <div class="app-table-responsive">
                        <table class="app-table" style="font-size: 0.8125rem;">
                            <thead>
                                <tr>
                                    <th>Model ID</th>
                                    <th>Name</th>
                                    <th style="text-align: center;">Tools</th>
                                    <th style="text-align: right;">Context</th>
                                </tr>
                            </thead>
                            <tbody id="providerModelsBody"></tbody>
                        </table>
                    </div>
                </div>
                <div id="providerModelsEmpty" style="display: none;">
                    <p class="text-center py-3" style="color: var(--app-text-muted);">No models found for this provider.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Dashboard Tools Modal (MCP + Embedded) -->
<div class="modal fade" id="dashboardToolsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-tools me-2"></i><span id="dashboardToolsTitle"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="dashboardToolsContent">
                <div class="text-center py-3"><div class="app-spinner mx-auto"></div></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function showProviderModels(providerKey, providerName) {
    document.getElementById('providerModelsName').textContent = providerName;
    document.getElementById('providerModelsLoading').style.display = '';
    document.getElementById('providerModelsContent').style.display = 'none';
    document.getElementById('providerModelsEmpty').style.display = 'none';

    new bootstrap.Modal(document.getElementById('providerModelsModal')).show();

    try {
        const resp = await fetch(`/api/provider-models?provider=${encodeURIComponent(providerKey)}`);
        const data = await resp.json();

        document.getElementById('providerModelsLoading').style.display = 'none';

        if (data.models && data.models.length > 0) {
            document.getElementById('providerModelsCount').textContent = data.models.length;
            const tbody = document.getElementById('providerModelsBody');
            tbody.innerHTML = '';

            data.models.sort((a, b) => a.name.localeCompare(b.name));

            data.models.forEach(model => {
                const ctx = model.context_length > 0
                    ? (model.context_length >= 1000000
                        ? (model.context_length / 1000000).toFixed(1) + 'M'
                        : (model.context_length >= 1000
                            ? Math.round(model.context_length / 1000) + 'K'
                            : model.context_length))
                    : '—';

                const toolsBadge = model.supports_tools
                    ? '<span class="badge-app badge-app-success" style="font-size:0.625rem;">Yes</span>'
                    : '<span class="badge-app" style="font-size:0.625rem; opacity:0.5;">No</span>';

                const row = document.createElement('tr');
                row.innerHTML = `
                    <td><code style="font-size:0.75rem;">${model.id}</code></td>
                    <td>${model.name}</td>
                    <td style="text-align:center;">${toolsBadge}</td>
                    <td style="text-align:right;">${ctx}</td>
                `;
                tbody.appendChild(row);
            });

            document.getElementById('providerModelsContent').style.display = '';
        } else {
            document.getElementById('providerModelsEmpty').style.display = '';
        }
    } catch (e) {
        document.getElementById('providerModelsLoading').style.display = 'none';
        document.getElementById('providerModelsEmpty').style.display = '';
    }
}

function escapeHtml(t) { const d = document.createElement('div'); d.textContent = t; return d.innerHTML; }

function _renderToolList(container, tools, emptyMsg) {
    if (!tools.length) {
        container.innerHTML = `<p style="color:var(--app-text-muted);">${emptyMsg || 'No tools available.'}</p>`;
        return;
    }
    const heading = `<p style="font-size:0.8125rem;color:var(--app-text-secondary);margin-bottom:1rem;">${tools.length} tool${tools.length !== 1 ? 's' : ''} available</p>`;
    const cards = tools.map(t => {
        const desc = t.description ? `<div style="font-size:0.8125rem;color:var(--app-text-secondary);margin-top:0.375rem;">${escapeHtml(t.description)}</div>` : '';
        return `<div style="border:1px solid var(--app-border);border-radius:0.5rem;padding:0.75rem;margin-bottom:0.5rem;"><div class="d-flex align-items-center gap-2"><i class="bi bi-wrench" style="color:var(--app-accent);"></i><strong style="font-size:0.875rem;">${escapeHtml(t.name)}</strong></div>${desc}</div>`;
    }).join('');
    container.innerHTML = heading + cards;
}

async function showDashboardTools(name) {
    document.getElementById('dashboardToolsTitle').textContent = name + ' — Tools';
    const content = document.getElementById('dashboardToolsContent');
    content.innerHTML = '<div class="text-center py-3"><div class="app-spinner mx-auto"></div></div>';
    new bootstrap.Modal(document.getElementById('dashboardToolsModal')).show();
    try {
        const resp = await fetch(`/settings/mcp/api/${encodeURIComponent(name)}/tools`);
        const data = await resp.json();
        _renderToolList(content, data.tools || [], 'No tools available from this server.');
    } catch (err) {
        content.innerHTML = '<div class="alert-app alert-app-danger">Failed to load tools.</div>';
    }
}

async function showEmbeddedTools() {
    document.getElementById('dashboardToolsTitle').textContent = 'Embedded Tools';
    const content = document.getElementById('dashboardToolsContent');
    content.innerHTML = '<div class="text-center py-3"><div class="app-spinner mx-auto"></div></div>';
    new bootstrap.Modal(document.getElementById('dashboardToolsModal')).show();
    try {
        const resp = await fetch('/api/embedded-tools');
        const data = await resp.json();
        _renderToolList(content, data.tools || [], 'No embedded tools enabled.');
    } catch (err) {
        content.innerHTML = '<div class="alert-app alert-app-danger">Failed to load tools.</div>';
    }
}
</script>
{% endblock %}