{% extends "base.html" %}
{% block title %}Dashboard — df-storyteller{% endblock %}

{% block content %}
<h1 class="page-header">Fortress Dashboard</h1>
<p class="page-subtitle">{{ fortress_name or "The Fortress" }} — a chronicle in numbers</p>

{% if dashboard.summary.years_active > 0 %}

<!-- Summary Stats -->
<div class="dashboard-summary">
    <div class="stat-card">
        <div class="stat-value">{{ dashboard.summary.population }}</div>
        <div class="stat-label">Population{% if dashboard.summary.peak_population > dashboard.summary.population %} <span style="font-size: 0.7rem; color: var(--ink-faded);">(peak: {{ dashboard.summary.peak_population }})</span>{% endif %}</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ dashboard.summary.years_active }}</div>
        <div class="stat-label">Years Active</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ dashboard.summary.total_deaths }}</div>
        <div class="stat-label">Deaths</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ dashboard.summary.total_artifacts }}</div>
        <div class="stat-label">Artifacts</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ dashboard.summary.total_combats }}</div>
        <div class="stat-label">Combats</div>
    </div>
    {% if dashboard.summary.total_sieges > 0 %}
    <div class="stat-card">
        <div class="stat-value">{{ dashboard.summary.total_sieges }}</div>
        <div class="stat-label">Sieges</div>
    </div>
    {% endif %}
</div>

<!-- Dashboard Hub Grid -->
<div class="dashboard-grid" style="margin-bottom: 1.5rem;">
    <!-- Recent Activity -->
    {% if dashboard.recent_events %}
    <div class="parchment">
        <h3 class="chart-title">Recent Activity</h3>
        {% for evt in dashboard.recent_events %}
        <div class="event-card {{ evt.type | lower | replace(' ', '_') }}" style="margin-bottom: 0.3rem;">
            <div class="event-time">{{ evt.season }} Y{{ evt.year }} &middot; {{ evt.type }}</div>
            <div class="event-text">{{ evt.description }}</div>
        </div>
        {% endfor %}
        <div style="text-align: right; margin-top: 0.5rem;">
            <a href="/events" style="color: var(--gold-dark); font-size: 0.85rem;">View all events &rarr;</a>
        </div>
    </div>
    {% endif %}

    <!-- Right column: Notable Citizens + Mood + Skills -->
    <div>
        <!-- Notable Citizens -->
        {% if dashboard.notable_citizens %}
        <div class="parchment" style="margin-bottom: 1rem;">
            <h3 class="chart-title">Notable Citizens</h3>
            {% for citizen in dashboard.notable_citizens %}
            <div style="margin-bottom: 0.4rem;">
                <a href="/dwarves/{{ citizen.unit_id }}" style="color: var(--gold-dark); text-decoration: none; font-weight: 600;">{{ citizen.name }}</a>
                <span style="color: var(--ink-faded); font-size: 0.85rem;"> &middot; {{ citizen.profession }}</span>
                <span class="role-badge role-{{ citizen.role }}" style="font-size: 0.7rem;">{{ citizen.role }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Fortress Mood -->
        {% if dashboard.mood_counts %}
        <div class="parchment" style="margin-bottom: 1rem;">
            <h3 class="chart-title">Fortress Mood</h3>
            <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                {% for mood, count in dashboard.mood_counts.items() %}
                <div style="text-align: center; padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 3px; font-size: 0.85rem;">
                    <div style="font-weight: 700; color: var(--gold-dark);">{{ count }}</div>
                    <div style="color: var(--ink-faded);">{{ mood }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Top Skills -->
        {% if dashboard.top_skills %}
        <div class="parchment">
            <h3 class="chart-title">Master Craftsdwarves</h3>
            {% for s in dashboard.top_skills %}
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; font-size: 0.9rem;">
                <span>
                    <a href="/dwarves/{{ s.unit_id }}" style="color: var(--gold-dark); text-decoration: none;">{{ s.dwarf_name }}</a>
                    <span style="color: var(--ink-faded);"> &middot; {{ s.skill }}</span>
                </span>
                <span style="font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 3px;
                    {% if s.level_num >= 15 %}background: rgba(201,168,76,0.25); color: #c9a84c; font-weight: 700;
                    {% elif s.level_num >= 12 %}background: rgba(139,37,0,0.15); color: #c98b8b;
                    {% elif s.level_num >= 8 %}background: rgba(45,90,39,0.15); color: #8bc98b;
                    {% else %}background: rgba(74,111,165,0.15); color: #8b9cc9;
                    {% endif %}">Lv{{ s.level_num }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Latest Chronicle -->
{% if dashboard.latest_chronicle %}
<div class="parchment" style="margin-bottom: 1.5rem;">
    <h3 class="chart-title">Latest Chronicle</h3>
    <div style="font-size: 0.85rem; color: var(--ink-faded); margin-bottom: 0.3rem;">{{ dashboard.latest_chronicle.header }}</div>
    <div style="font-style: italic; color: var(--ink-light); line-height: 1.6;">{{ dashboard.latest_chronicle.excerpt }}</div>
    <div style="text-align: right; margin-top: 0.5rem;">
        <a href="/" style="color: var(--gold-dark); font-size: 0.85rem;">Read more &rarr;</a>
    </div>
</div>
{% endif %}

<!-- Charts Grid -->
<div class="dashboard-grid">
    {% if dashboard.population_series %}
    <div class="chart-container parchment">
        <h3 class="chart-title">Population Over Time</h3>
        <canvas id="population-chart"></canvas>
    </div>
    {% endif %}

    {% if dashboard.deaths_series %}
    <div class="chart-container parchment">
        <h3 class="chart-title">Deaths Per Season</h3>
        <canvas id="deaths-chart"></canvas>
    </div>
    {% endif %}

    {% if dashboard.combat_series %}
    <div class="chart-container parchment">
        <h3 class="chart-title">Combat Activity</h3>
        <canvas id="combat-chart"></canvas>
    </div>
    {% endif %}

    {% if dashboard.migration_series %}
    <div class="chart-container parchment">
        <h3 class="chart-title">Migration Waves</h3>
        <canvas id="migration-chart"></canvas>
    </div>
    {% endif %}

    {% if dashboard.wealth_series %}
    <div class="chart-container parchment">
        <h3 class="chart-title">Fortress Wealth</h3>
        <canvas id="wealth-chart"></canvas>
    </div>
    {% endif %}
</div>

<!-- Milestones -->
{% if dashboard.milestones %}
<div class="parchment" style="margin-top: 1.5rem;">
    <h3 class="chart-title">Notable Firsts</h3>
    <div class="milestones-list">
        {% for m in dashboard.milestones %}
        <div class="milestone-item">
            <div class="milestone-when">{{ m.season }} of Year {{ m.year }}</div>
            <div class="milestone-label">{{ m.label }}</div>
            <div class="milestone-desc">{{ m.description }}</div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Siege History -->
{% if dashboard.sieges %}
<div class="parchment" style="margin-top: 1.5rem;">
    <h3 class="chart-title">Siege History</h3>
    {% for s in dashboard.sieges %}
    {% if s.status == 'started' %}
    <div class="milestone-item">
        <div class="milestone-when">{{ s.season }} of Year {{ s.year }}</div>
        <div class="milestone-label" style="color: #c98b8b;">{{ s.invader_count }} {{ s.invader_race }} invaders from {{ s.civilization }}</div>
    </div>
    {% elif s.status == 'ended' %}
    <div class="milestone-item">
        <div class="milestone-when">{{ s.season }} of Year {{ s.year }}</div>
        <div class="milestone-label" style="color: var(--success);">Siege ended &mdash; invaders defeated or driven off</div>
    </div>
    {% endif %}
    {% endfor %}
</div>
{% endif %}

<!-- Active Mandates -->
{% if dashboard.mandates %}
<div class="parchment" style="margin-top: 1.5rem;">
    <h3 class="chart-title">Mandates</h3>
    {% for m in dashboard.mandates %}
    <div class="milestone-item">
        <div class="milestone-when">{{ m.season }} of Year {{ m.year }}</div>
        <div class="milestone-label">{{ m.issuer }}: {{ m.type }} on {{ m.item }}</div>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Crimes & Justice -->
{% if dashboard.crimes %}
<div class="parchment" style="margin-top: 1.5rem;">
    <h3 class="chart-title">Crimes &amp; Justice</h3>
    {% for c in dashboard.crimes %}
    <div class="milestone-item">
        <div class="milestone-when">{{ c.season }} of Year {{ c.year }}</div>
        <div class="milestone-label">
            {{ c.type }} &mdash; victim: {{ c.victim }}
            {% if c.suspect != 'unknown' %}, suspect: <a href="/dwarves/{{ c.suspect_id }}" style="color: var(--gold-dark);">{{ c.suspect }}</a>{% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Caravan Visits -->
{% if dashboard.caravans %}
<div class="parchment" style="margin-top: 1.5rem;">
    <h3 class="chart-title">Caravan Visits</h3>
    {% for c in dashboard.caravans %}
    <div class="milestone-item">
        <div class="milestone-when">{{ c.season }} of Year {{ c.year }}</div>
        <div class="milestone-label">{{ c.type }} from {{ c.civilization }}</div>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Artifact Gallery -->
{% if dashboard.artifacts %}
<div class="parchment" style="margin-top: 1.5rem;">
    <h3 class="chart-title">Artifact Gallery</h3>
    <div class="dwarf-grid">
        {% for a in dashboard.artifacts %}
        <div class="dwarf-card" style="opacity: 0.9;">
            <div class="dwarf-name">{{ a.name }}</div>
            <div class="dwarf-profession">
                {% if a.item_type %}{{ a.item_type }}{% endif %}
                {% if a.material %} &middot; {{ a.material }}{% endif %}
            </div>
            {% if a.creator_name %}
            <div class="dwarf-traits">Created by {{ a.creator_name }}</div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% else %}
<div class="parchment" style="text-align: center; padding: 2rem;">
    <p style="color: var(--ink-faded); font-style: italic;">
        No fortress data yet. Take a snapshot in DFHack
        (<code>storyteller-begin</code>) and play through a few seasons to see trends.
    </p>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
const dashboardData = {{ dashboard | tojson | safe }};

// Theme colors
Chart.defaults.color = '#d4bc7c';
Chart.defaults.borderColor = 'rgba(184, 160, 120, 0.2)';
Chart.defaults.font.family = "'Crimson Text', serif";

const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: { display: false },
    },
    scales: {
        x: {
            ticks: { maxRotation: 45, font: { size: 11 } },
            grid: { color: 'rgba(184, 160, 120, 0.1)' },
        },
        y: {
            beginAtZero: true,
            ticks: { stepSize: 1, font: { size: 11 } },
            grid: { color: 'rgba(184, 160, 120, 0.1)' },
        },
    },
};

function makeChart(canvasId, data, type, color, fillColor) {
    const el = document.getElementById(canvasId);
    if (!el || !data.length) return;
    new Chart(el, {
        type: type,
        data: {
            labels: data.map(d => d.label),
            datasets: [{
                data: data.map(d => d.value),
                borderColor: color,
                backgroundColor: fillColor || color,
                borderWidth: 2,
                tension: 0.3,
                fill: type === 'line',
                pointRadius: 3,
                pointBackgroundColor: color,
            }],
        },
        options: chartOptions,
    });
}

makeChart('population-chart', dashboardData.population_series, 'line', '#c9a84c', 'rgba(201, 168, 76, 0.15)');
makeChart('deaths-chart', dashboardData.deaths_series, 'bar', '#8b2500', 'rgba(139, 37, 0, 0.6)');
makeChart('combat-chart', dashboardData.combat_series, 'bar', '#d4bc7c', 'rgba(212, 188, 124, 0.5)');
makeChart('migration-chart', dashboardData.migration_series, 'bar', '#8a6d3b', 'rgba(138, 109, 59, 0.6)');
makeChart('wealth-chart', dashboardData.wealth_series || [], 'line', '#c9a84c', 'rgba(201, 168, 76, 0.1)');
</script>
{% endblock %}