{% extends "base.html" %}
{% block title %}Dashboard — Grimoire{% endblock %}
{% block nav_dashboard %}active{% endblock %}
{% block content %}

{# ── Header ────────────────────────────────────────────────────────── #}
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
    <div>
        <h1 class="text-3xl font-bold">Dashboard</h1>
        {% if last_refresh %}
        <p class="text-sm opacity-60 mt-1">Last updated {{ last_refresh_ago }}</p>
        {% endif %}
    </div>
    <div class="flex items-center gap-3">
        <span class="text-xs opacity-40 whitespace-nowrap">
            <i class="fa-regular fa-clock"></i> Scheduled: {{ refresh_schedule }}
        </span>
        {% include "partials/refresh_button.html" %}
    </div>
</div>

{# ── Warnings ──────────────────────────────────────────────────────── #}
{% if warnings %}
<div class="alert alert-warning mb-6 shadow-sm">
    <i class="fa-solid fa-circle-exclamation shrink-0"></i>
    <div>
        <div class="font-semibold text-sm mb-1">Some data could not be fetched</div>
        <ul class="text-sm list-disc list-inside space-y-0.5">
            {% for w in warnings %}
            <li>{{ w }}</li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endif %}

{% if repos %}

{# ── Stats Bar ─────────────────────────────────────────────────────── #}
<div class="stats stats-vertical sm:stats-horizontal shadow bg-base-100 w-full mb-6">
    <div class="stat">
        <div class="stat-figure text-primary">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
        </div>
        <div class="stat-title">Repositories</div>
        <div class="stat-value text-primary font-mono-nums">{{ totals.repos }}</div>
        <div class="stat-desc text-sm">
            {%- if totals.repos_error %}<span class="text-error">{{ totals.repos_error }} failing</span>{% endif -%}
            {%- if totals.repos_error and totals.repos_warning %} · {% endif -%}
            {%- if totals.repos_warning %}<span class="text-warning">{{ totals.repos_warning }} warning</span>{% endif -%}
            {%- if (totals.repos_error or totals.repos_warning) and totals.repos_ok %} · {% endif -%}
            {%- if totals.repos_ok %}<span class="text-success">{{ totals.repos_ok }} healthy</span>{% endif -%}
        </div>
    </div>
    <div class="stat">
        <div class="stat-figure text-info">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        </div>
        <div class="stat-title">Open Issues</div>
        <div class="stat-value text-info font-mono-nums">{{ totals.open_issues }}</div>
        {% if totals.stale_issues %}<div class="stat-desc text-sm"><span class="text-warning">{{ totals.stale_issues }} stale</span></div>{% endif %}
    </div>
    <div class="stat">
        <div class="stat-figure text-info">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
        </div>
        <div class="stat-title">Open PRs</div>
        <div class="stat-value text-info font-mono-nums">{{ totals.open_prs }}</div>
        {% if totals.stale_prs %}<div class="stat-desc text-sm"><span class="text-warning">{{ totals.stale_prs }} stale</span></div>{% endif %}
    </div>
    <div class="stat">
        <div class="stat-figure text-accent">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        </div>
        <div class="stat-title">Workflows</div>
        <div class="stat-value text-accent font-mono-nums">{{ totals.total_workflows }}</div>
        <div class="stat-desc text-sm">
            {%- set wf_passing = totals.total_workflows - totals.workflow_failures -%}
            {%- if totals.workflow_failures %}<span class="text-error">{{ totals.workflow_failures }} failing</span>{% endif -%}
            {%- if totals.workflow_failures and wf_passing %} · {% endif -%}
            {%- if wf_passing %}<span class="text-success">{{ wf_passing }} passing</span>{% endif -%}
        </div>
    </div>
    {% if totals.total_checks %}
    <div class="stat">
        <div class="stat-figure text-accent">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" /></svg>
        </div>
        <div class="stat-title">Checks</div>
        <div class="stat-value text-accent font-mono-nums">{{ totals.total_checks }}</div>
        <div class="stat-desc text-sm">
            {%- set checks_passed = totals.total_checks - totals.check_failures - totals.check_warnings -%}
            {%- if totals.check_failures %}<span class="text-error">{{ totals.check_failures }} failing</span>{% endif -%}
            {%- if totals.check_failures and totals.check_warnings %} · {% endif -%}
            {%- if totals.check_warnings %}<span class="text-warning">{{ totals.check_warnings }} warning</span>{% endif -%}
            {%- if (totals.check_failures or totals.check_warnings) and checks_passed %} · {% endif -%}
            {%- if checks_passed %}<span class="text-success">{{ checks_passed }} passed</span>{% endif -%}
        </div>
    </div>
    {% endif %}
</div>

{# ── Sort & View Controls ──────────────────────────────────────────── #}
<div class="flex flex-wrap items-center justify-between gap-2 mb-4">
    <div class="flex flex-wrap items-center gap-2">
        <span class="text-sm opacity-60">Sort by:</span>
        {% for key, label in sort_labels.items() %}
        <button class="btn btn-xs {% if sort == key %}btn-primary{% else %}btn-ghost{% endif %} sort-btn"
                data-sort="{{ key }}" data-label="{{ label }}"
                data-dir="{% if sort == key and dir == 'asc' %}desc{% else %}asc{% endif %}"
                onclick="loadView(this.dataset.sort, this.dataset.dir)">
            {{ label }}
            {% if sort == key %}
                {% if dir == 'asc' %}▲{% else %}▼{% endif %}
            {% endif %}
        </button>
        {% endfor %}
    </div>
    <div class="join" id="view-switcher">
        <button class="btn btn-xs join-item view-btn" data-view="matrix" onclick="switchView('matrix')" title="Matrix view">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18"/></svg>
        </button>
        <button class="btn btn-xs join-item view-btn" data-view="list" onclick="switchView('list')" title="List view">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
    </div>
</div>

{# ── Repo Grid ────────────────────────────────────────────────────── #}
<div id="repo-grid" class="hidden">
    {% include "partials/dashboard_matrix.html" %}
</div>

{% else %}
{# ── Empty State ───────────────────────────────────────────────────── #}
<div class="hero min-h-[40vh]">
    <div class="hero-content text-center">
        <div class="max-w-md">
            <div class="text-6xl mb-4">🔮</div>
            <h2 class="text-2xl font-bold mb-2">No repositories yet</h2>
            <p class="opacity-70 mb-4">
                Edit <code class="kbd kbd-sm">config.yaml</code> to add repositories and restart Grimoire.
            </p>
        </div>
    </div>
</div>
{% endif %}

<script>
    const VIEW_PARTIALS = {
        matrix: '/partials/dashboard-matrix',
        list:   '/partials/dashboard-list',
    };

    let currentView = localStorage.getItem('grimoire-view') || 'matrix';
    // Migrate legacy view preferences to valid options
    if (!(currentView in VIEW_PARTIALS)) currentView = 'matrix';
    let currentSort = '{{ sort }}';
    let currentDir  = '{{ dir }}';

    function updateViewButtons() {
        document.querySelectorAll('.view-btn').forEach(btn => {
            btn.classList.toggle('btn-primary', btn.dataset.view === currentView);
            btn.classList.toggle('btn-ghost', btn.dataset.view !== currentView);
        });
    }

    function updateSortButtons() {
        document.querySelectorAll('.sort-btn').forEach(btn => {
            const isActive = btn.dataset.sort === currentSort;
            btn.classList.toggle('btn-primary', isActive);
            btn.classList.toggle('btn-ghost', !isActive);
            // Update data-dir: if this is the active button, next click inverts; otherwise default asc
            btn.dataset.dir = isActive ? (currentDir === 'asc' ? 'desc' : 'asc') : 'asc';
            // Update arrow indicator
            const label = btn.dataset.label;
            btn.textContent = label + (isActive ? (currentDir === 'asc' ? ' ▲' : ' ▼') : '');
        });
    }

    function fetchView() {
        const url = VIEW_PARTIALS[currentView] + '?sort=' + currentSort + '&dir=' + currentDir;
        return htmx.ajax('GET', url, '#repo-grid');
    }

    function switchView(view) {
        if (view === currentView) return;
        currentView = view;
        localStorage.setItem('grimoire-view', view);
        updateViewButtons();
        fetchView();
    }

    function loadView(sort, dir) {
        // If clicking the same sort key, toggle direction
        if (sort === currentSort) {
            currentDir = currentDir === 'asc' ? 'desc' : 'asc';
        } else {
            currentSort = sort;
            currentDir = dir;
        }
        updateSortButtons();
        fetchView();
    }

    // On page load, apply saved view preference
    document.addEventListener('DOMContentLoaded', function() {
        updateViewButtons();
        if (currentView === 'matrix') {
            document.getElementById('repo-grid').classList.remove('hidden');
        } else {
            fetchView().then(() => document.getElementById('repo-grid').classList.remove('hidden'));
        }
    });

    // Auto-reload data when a background refresh completes
    document.body.addEventListener('refreshCompleted', function() {
        showToast('Refresh complete', 'success');
        fetchView();
    });
</script>
{% endblock %}