{% extends "base.html" %}
{% block title %}Brain MCP — Dashboard{% endblock %}

{% block content %}
<!-- Hero: big conversation count, loaded via htmx -->
<div class="hero-section" id="hero-stats"
     hx-get="/api/stats/overview"
     hx-trigger="load"
     hx-target="#hero-stats"
     hx-swap="innerHTML">
    <article aria-busy="true" style="border:none;background:transparent !important;">Loading...</article>
</div>

<!-- Quick search bar -->
<div class="quick-search">
    <input type="search"
           placeholder="Search your brain..."
           onkeyup="debounceSearch(this, '/api/search?mode=semantic')"
           aria-label="Quick search">
</div>

<!-- Heatmap: 365-day activity calendar -->
<article>
    <header>🗓️ Your Activity</header>
    <div id="heatmap-section"
         hx-get="/api/stats/heatmap.html?days=365"
         hx-trigger="load"
         hx-target="#heatmap-section"
         hx-swap="innerHTML">
        <progress></progress>
    </div>
</article>

<!-- Two-column layout: Recent Activity + Activity Sparkline -->
<div class="grid">
    <!-- Recent Activity feed -->
    <article>
        <header>⚡ Recent Activity</header>
        <div id="recent-activity"
             hx-get="/api/stats/recent.html?limit=5"
             hx-trigger="load"
             hx-target="#recent-activity"
             hx-swap="innerHTML">
            <progress></progress>
        </div>
    </article>

    <!-- Activity sparkline -->
    <article>
        <header>📊 Activity (last 30 days)</header>
        <div id="activity-chart"
             hx-get="/api/stats/activity?days=30"
             hx-trigger="load"
             hx-target="#activity-chart"
             hx-swap="innerHTML">
            <progress></progress>
        </div>
    </article>
</div>

<!-- Two-column layout: Sources + Top Topics -->
<div class="grid">
    <!-- Sources health -->
    <article>
        <header>📱 Connected Apps</header>
        <div id="sources-health"
             hx-get="/api/stats/sources"
             hx-trigger="load"
             hx-target="#sources-health"
             hx-swap="innerHTML">
            <progress></progress>
        </div>
    </article>

    <!-- Top Topics -->
    <article>
        <header>🏷️ Your Top Topics</header>
        <div id="open-threads"
             hx-get="/api/stats/domains"
             hx-trigger="load"
             hx-target="#open-threads"
             hx-swap="innerHTML">
            <progress></progress>
        </div>
    </article>
</div>

<!-- Sync status -->
<article>
    <div class="grid">
        <div>
            <small id="sync-status"
                   hx-get="/api/stats/sync-status"
                   hx-trigger="load"
                   hx-target="#sync-status"
                   hx-swap="innerHTML">
                Checking sync status...
            </small>
        </div>
        <div style="text-align: right;">
            <button class="outline"
                    hx-post="/api/sources/sync-all"
                    hx-target="#sync-status"
                    hx-swap="innerHTML">
                🔄 Update Now
            </button>
        </div>
    </div>
</article>
{% endblock %}