{% extends "base_app.html" %}
{% set active_page = 'dashboard' %}
{% block title %}Dashboard — TheNicheQuiz{% endblock %}

{% block body %}
<div class="app-page">
    <div class="page-header">
        <h1 class="page-title">Welcome back, {{ current_user.name or 'there' }} 👋</h1>
        <p class="page-subtitle">Here's an overview of your campaign activity.</p>
    </div>

    <!-- Stats -->
    <div class="stat-grid">
        <div class="stat-card">
            <div class="stat-icon stat-icon-amber">📊</div>
            <div>
                <div class="stat-value">{{ campaign_count }}</div>
                <div class="stat-label">Saved Campaigns</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon stat-icon-purple">🎨</div>
            <div>
                <div class="stat-value">{{ image_count }}</div>
                <div class="stat-label">Images Generated</div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon stat-icon-blue">📥</div>
            <div>
                <div class="stat-value">{{ export_count }}</div>
                <div class="stat-label">CSV Exports</div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div style="display: flex; gap: 12px; margin-bottom: 40px; flex-wrap: wrap;">
        <a href="/app/generate" class="btn btn-amber">
            <svg style="width:16px;height:16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            Start New Quiz
        </a>
        <a href="/app/campaigns" class="btn btn-outline">
            <svg style="width:16px;height:16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
            View All Campaigns
        </a>
    </div>

    <!-- Recent Campaigns -->
    <div class="card">
        <h2 style="font-size: 18px; font-weight: 700; margin-bottom: 20px;">Recent Campaigns</h2>

        {% if recent_campaigns %}
        <table class="data-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Niche Path</th>
                    <th>Created</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for c in recent_campaigns %}
                <tr>
                    <td style="font-weight: 600;">{{ c.name }}</td>
                    <td>
                        {% if c.industry %}
                        <span class="badge badge-amber">{{ c.industry }}</span>
                        {% endif %}
                        {% if c.micro_niche %}
                        <span class="badge badge-purple" style="margin-left: 4px;">{{ c.micro_niche[:40] }}{% if c.micro_niche|length > 40 %}...{% endif %}</span>
                        {% endif %}
                    </td>
                    <td style="color: var(--text-muted); font-size: 13px;">{{ c.created_at.strftime('%b %d, %Y') if c.created_at else 'N/A' }}</td>
                    <td>
                        <a href="/app/campaigns/{{ c.id }}" class="btn btn-outline btn-sm">View</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <div class="empty-icon">🚀</div>
            <div class="empty-title">No campaigns yet</div>
            <div class="empty-desc">Take the quiz to generate your first batch of AI-powered campaigns.</div>
            <a href="/app/generate" class="btn btn-amber">Start the Quiz</a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}