{% 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 ─────────────────────────────────────────────────────── #}
{% include "partials/dashboard_stats.html" %}

{# ── 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="flex items-center gap-2">
        <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 class="dropdown dropdown-end">
            <label tabindex="0" class="btn btn-xs btn-ghost" title="Health status display options">
                <i class="fa-solid fa-gear"></i>
            </label>
            <div tabindex="0" class="dropdown-content z-[1] menu p-3 shadow bg-base-100 rounded-box w-64 gap-1">
                <p class="text-xs font-semibold opacity-60 px-1 pb-1">Health status includes</p>
                <label class="label cursor-pointer justify-start gap-2 py-1">
                    <input type="checkbox" id="health-include-checks" class="checkbox checkbox-sm" checked />
                    <span class="label-text text-sm">Check results</span>
                </label>
                <label class="label cursor-pointer justify-start gap-2 py-1">
                    <input type="checkbox" id="health-include-stale" class="checkbox checkbox-sm" checked />
                    <span class="label-text text-sm">Stale issues/PRs</span>
                </label>
                <p class="text-xs opacity-40 px-1 pt-1">Workflow failures always count.</p>
            </div>
        </div>
    </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',
    };
    const STATS_PARTIAL = '/partials/dashboard-stats';

    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 getHealthFlag(key) {
        const stored = localStorage.getItem(key);
        return stored === null ? true : stored === 'true';
    }
    let includeChecks = getHealthFlag('grimoire-health-include-checks');
    let includeStale  = getHealthFlag('grimoire-health-include-stale');

    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 healthQuery() {
        return '&include_checks=' + includeChecks + '&include_stale=' + includeStale;
    }

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

    function fetchStats() {
        const url = STATS_PARTIAL + '?include_checks=' + includeChecks + '&include_stale=' + includeStale;
        return htmx.ajax('GET', url, '#stats-bar');
    }

    function refreshAll() {
        return Promise.all([fetchView(), fetchStats()]);
    }

    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();
    }

    function updateHealthCheckboxes() {
        const checksBox = document.getElementById('health-include-checks');
        const staleBox = document.getElementById('health-include-stale');
        if (checksBox) checksBox.checked = includeChecks;
        if (staleBox) staleBox.checked = includeStale;
    }

    // On page load, apply saved view + health-toggle preferences
    // (checkboxes only exist when there are repos to show)
    document.addEventListener('DOMContentLoaded', function() {
        updateViewButtons();
        updateHealthCheckboxes();

        const checksBox = document.getElementById('health-include-checks');
        const staleBox = document.getElementById('health-include-stale');
        if (checksBox) {
            checksBox.addEventListener('change', function() {
                includeChecks = this.checked;
                localStorage.setItem('grimoire-health-include-checks', includeChecks);
                refreshAll();
            });
        }
        if (staleBox) {
            staleBox.addEventListener('change', function() {
                includeStale = this.checked;
                localStorage.setItem('grimoire-health-include-stale', includeStale);
                refreshAll();
            });
        }

        const needsCorrection = currentView !== 'matrix' || !includeChecks || !includeStale;
        if (!needsCorrection) {
            document.getElementById('repo-grid').classList.remove('hidden');
        } else {
            refreshAll().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');
        refreshAll();
    });
</script>
{% endblock %}