{% extends 'base.html' %}
{% block extra_css %}
<style>
    /* ============================================
       DASHBOARD - NIX EXAMINATION BRANDING
       ============================================ */
    
    /* Dashboard Header */
    .dash-header {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.75rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--nix-border);
    }

    .dash-header h2 {
        font-weight: 800;
        margin-bottom: .2rem;
        color: var(--nix-black);
        font-size: 1.75rem;
    }

    .dash-header h2 i {
        color: var(--nix-red);
        margin-right: .5rem;
    }

    .dash-header p {
        color: var(--nix-muted);
        margin-bottom: 0;
        font-size: .95rem;
    }

    .dash-header .btn-create {
        background: var(--nix-red);
        border: none;
        color: #fff;
        padding: .6rem 1.5rem;
        border-radius: var(--nix-radius);
        font-weight: 600;
        transition: var(--nix-transition);
        box-shadow: var(--nix-shadow-red);
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        text-decoration: none;
        white-space: nowrap;
    }

    .dash-header .btn-create:hover {
        background: var(--nix-red-dark);
        transform: translateY(-2px);
        box-shadow: var(--nix-shadow-red-lg);
        color: #fff;
    }

    /* Stat Cards */
    .stat-card {
        padding: 1.5rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1rem;
        transition: transform .15s ease, box-shadow .15s ease;
        border: 1px solid var(--nix-border);
        border-radius: var(--nix-radius-lg);
        background: var(--nix-white);
        box-shadow: var(--nix-shadow-sm);
    }

    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--nix-shadow);
    }

    .stat-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: var(--nix-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .stat-icon.red {
        background: var(--nix-red-light);
        color: var(--nix-red);
    }

    .stat-icon.green {
        background: var(--nix-green-light);
        color: var(--nix-green);
    }

    .stat-icon.charcoal {
        background: var(--nix-bg);
        color: var(--nix-black);
    }

    .stat-icon.amber {
        background: #fef3c7;
        color: #b45309;
    }

    .stat-card h3 {
        font-weight: 800;
        margin-bottom: 0;
        font-size: 1.6rem;
        color: var(--nix-black);
    }

    .stat-card .label {
        color: var(--nix-muted);
        font-size: .85rem;
        font-weight: 500;
    }

    /* Panel Cards */
    .panel-card {
        border: 1px solid var(--nix-border);
        border-radius: var(--nix-radius-lg);
        background: var(--nix-white);
        box-shadow: var(--nix-shadow-sm);
        transition: var(--nix-transition);
        height: 100%;
    }

    .panel-card:hover {
        box-shadow: var(--nix-shadow);
    }

    .panel-card .card-header {
        background: transparent;
        border-bottom: 1px solid var(--nix-border);
        font-weight: 700;
        padding: 1.1rem 1.4rem;
        color: var(--nix-black);
        font-size: .95rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .panel-card .card-header i {
        color: var(--nix-red);
        margin-right: .4rem;
    }

    .panel-card .card-header .btn-outline-primary {
        color: var(--nix-red);
        border-color: var(--nix-border);
        font-size: .78rem;
        padding: .2rem .8rem;
        border-radius: var(--nix-radius);
        transition: var(--nix-transition);
        background: transparent;
    }

    .panel-card .card-header .btn-outline-primary:hover {
        background: var(--nix-red);
        border-color: var(--nix-red);
        color: #fff;
    }

    .panel-card .card-body {
        padding: 1.4rem;
    }

    /* Table */
    .table-modern thead th {
        border-top: none;
        border-bottom: 1px solid var(--nix-border);
        color: var(--nix-muted);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 700;
        padding: .75rem .5rem;
    }

    .table-modern td {
        vertical-align: middle;
        border-color: var(--nix-border);
        padding: .75rem .5rem;
        font-size: .9rem;
    }

    .table-modern tbody tr {
        transition: background var(--nix-transition);
    }

    .table-modern tbody tr:hover {
        background: var(--nix-bg);
    }

    /* Status Badge */
    .status-badge {
        border-radius: 999px;
        padding: .3rem .75rem;
        font-weight: 600;
        font-size: .72rem;
        display: inline-block;
    }

    .status-badge.completed {
        background: var(--nix-green-light);
        color: var(--nix-green-dark);
    }

    .status-badge.pending {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.draft {
        background: var(--nix-bg);
        color: var(--nix-muted);
    }

    /* Quick Actions */
    .quick-action {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .8rem 1rem;
        border-radius: var(--nix-radius);
        border: 1px solid var(--nix-border);
        text-decoration: none;
        color: var(--nix-text);
        font-weight: 600;
        margin-bottom: .6rem;
        transition: all var(--nix-transition);
        background: var(--nix-white);
    }

    .quick-action:last-child {
        margin-bottom: 0;
    }

    .quick-action:hover {
        background: var(--nix-bg);
        color: var(--nix-red);
        transform: translateX(4px);
        border-color: var(--nix-red);
        text-decoration: none;
    }

    .quick-action .qa-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: var(--nix-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .95rem;
    }

    .quick-action .qa-icon.red {
        background: var(--nix-red-light);
        color: var(--nix-red);
    }

    .quick-action .qa-icon.green {
        background: var(--nix-green-light);
        color: var(--nix-green);
    }

    .quick-action .qa-icon.charcoal {
        background: var(--nix-bg);
        color: var(--nix-black);
    }

    .quick-action .qa-icon.amber {
        background: #fef3c7;
        color: #b45309;
    }

    /* Subscription Card */
    .subscription-detail {
        display: flex;
        justify-content: space-between;
        padding: .5rem 0;
        border-bottom: 1px solid var(--nix-border);
    }

    .subscription-detail:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .subscription-detail .label {
        color: var(--nix-muted);
        font-size: .85rem;
    }

    .subscription-detail .value {
        font-weight: 700;
        color: var(--nix-black);
        font-size: .9rem;
    }

    .subscription-detail .value .free {
        color: var(--nix-muted);
    }

    .subscription-detail .value .premium {
        color: var(--nix-red);
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 768px) {
        .dash-header {
            flex-direction: column;
            align-items: stretch;
            gap: .75rem;
        }

        .dash-header .btn-create {
            width: 100%;
            justify-content: center;
        }

        .stat-card {
            padding: 1rem;
        }

        .stat-card h3 {
            font-size: 1.25rem;
        }

        .stat-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
            font-size: 1rem;
        }

        .table-modern {
            font-size: .8rem;
        }

        .table-modern thead th,
        .table-modern td {
            padding: .5rem .35rem;
        }

        .panel-card .card-header {
            padding: .9rem 1rem;
            font-size: .85rem;
        }

        .panel-card .card-body {
            padding: 1rem;
        }
    }

    @media (max-width: 576px) {
        .dash-header h2 {
            font-size: 1.35rem;
        }

        .stat-card {
            flex-direction: column;
            text-align: center;
            padding: 1.25rem .75rem;
        }

        .stat-card h3 {
            font-size: 1.1rem;
        }

        .stat-card .label {
            font-size: .75rem;
        }

        .quick-action {
            font-size: .85rem;
            padding: .7rem .85rem;
        }

        .quick-action .qa-icon {
            width: 32px;
            height: 32px;
            min-width: 32px;
            font-size: .8rem;
        }
    }
</style>
{% endblock %}

{% block content %}

<!-- ============================================
     DASHBOARD HEADER
     ============================================ -->
<div class="dash-header">
    <div>
        <h2><i class="fas fa-gauge-high"></i> Welcome back, {{ current_user.first_name }}</h2>
        <p>Here's what's happening with your exams.</p>
    </div>
    <a href="{{ url_for('exams.create') }}" class="btn-create">
        <i class="fas fa-plus"></i> Create New Exam
    </a>
</div>

<!-- ============================================
     STAT CARDS
     ============================================ -->
<div class="row g-3 mb-4">
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card">
            <div class="stat-icon red"><i class="fas fa-file-alt"></i></div>
            <div>
                <h3>{{ total_exams }}</h3>
                <div class="label">Exams Generated</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card">
            <div class="stat-icon green"><i class="fas fa-download"></i></div>
            <div>
                <h3>{{ downloaded }}</h3>
                <div class="label">Downloaded</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card">
            <div class="stat-icon charcoal"><i class="fas fa-crown"></i></div>
            <div>
                <h3>{{ current_user.subscription_type|title }}</h3>
                <div class="label">Current Plan</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="card stat-card">
            <div class="stat-icon amber"><i class="fas fa-file-circle-plus"></i></div>
            <div>
                <h3>
                    {% if current_user.subscription_type == 'free' %}
                        {{ current_user.max_exams - current_user.exams_generated }}
                    {% else %}
                        ∞
                    {% endif %}
                </h3>
                <div class="label">Exams Remaining</div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================
     MAIN CONTENT - Recent Exams + Sidebar
     ============================================ -->
<div class="row g-4">
    <!-- Recent Exams -->
    <div class="col-lg-8">
        <div class="panel-card">
            <div class="card-header">
                <span><i class="fas fa-clock-rotate-left"></i> Recent Exams</span>
                <a href="{{ url_for('exams.index') }}" class="btn-outline-primary">View All</a>
            </div>
            <div class="card-body">
                {% if exams %}
                <div class="table-responsive">
                    <table class="table table-modern table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Subject</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for exam in exams %}
                            <tr>
                                <td class="fw-semibold">{{ exam.title }}</td>
                                <td>{{ exam.subject.name if exam.subject else 'N/A' }}</td>
                                <td>
                                    <span class="status-badge {{ exam.status }}">
                                        {{ exam.status|title }}
                                    </span>
                                </td>
                                <td class="text-muted">{{ exam.created_at.strftime('%Y-%m-%d') }}</td>
                                <td class="text-end">
                                    <a href="{{ url_for('exams.view', exam_id=exam.id) }}" class="btn btn-sm btn-outline-secondary">
                                        View
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <p class="text-muted mb-2">No exams generated yet.</p>
                    <a href="{{ url_for('exams.create') }}" class="btn-create" style="display: inline-flex; padding: .5rem 1.5rem; font-size: .9rem;">
                        <i class="fas fa-plus"></i> Create Your First Exam
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4">
        <!-- Quick Actions -->
        <div class="panel-card mb-4">
            <div class="card-header"><i class="fas fa-bolt"></i> Quick Actions</div>
            <div class="card-body">
                <a href="{{ url_for('exams.create') }}" class="quick-action">
                    <span class="qa-icon red"><i class="fas fa-plus"></i></span>
                    Create New Exam
                </a>
                <a href="{{ url_for('payments.subscribe') }}" class="quick-action">
                    <span class="qa-icon amber"><i class="fas fa-crown"></i></span>
                    Upgrade Plan
                </a>
                <a href="{{ url_for('dashboard.profile') }}" class="quick-action">
                    <span class="qa-icon charcoal"><i class="fas fa-user"></i></span>
                    Edit Profile
                </a>
            </div>
        </div>

        <!-- Subscription -->
        <div class="panel-card">
            <div class="card-header"><i class="fas fa-circle-info"></i> Subscription</div>
            <div class="card-body">
                <div class="subscription-detail">
                    <span class="label">Plan</span>
                    <span class="value">
                        <span class="{% if current_user.subscription_type == 'free' %}free{% else %}premium{% endif %}">
                            {{ current_user.subscription_type|title }}
                        </span>
                    </span>
                </div>
                <div class="subscription-detail">
                    <span class="label">Exams Generated</span>
                    <span class="value">
                        {{ current_user.exams_generated }} 
                        {% if current_user.subscription_type == 'free' %}
                            / {{ current_user.max_exams }}
                        {% endif %}
                    </span>
                </div>
                {% if current_user.subscription_expiry %}
                <div class="subscription-detail">
                    <span class="label">Expires</span>
                    <span class="value">{{ current_user.subscription_expiry.strftime('%Y-%m-%d') }}</span>
                </div>
                {% endif %}
                {% if current_user.subscription_type == 'free' %}
                <div class="mt-3">
                    <a href="{{ url_for('payments.subscribe') }}" class="btn-create" style="display: inline-flex; width: 100%; justify-content: center; padding: .6rem;">
                        <i class="fas fa-crown"></i> Upgrade to Premium
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% endblock %}