{% extends "base_layout.html" %}

{% block title %}Dashboard - InterroGen{% endblock %}

{% block head_extra %}
<style>
    .stats-card {
        text-align: center;
        padding: 1.5rem;
    }
    .stats-card i {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .stats-number {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    .stats-label {
        color: var(--text-muted);
        font-size: 0.875rem;
    }
    .region-badge {
        display: inline-block;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        background-color: rgba(63, 106, 216, 0.1);
        color: var(--primary);
    }
    .region-card {
        cursor: pointer;
        transition: all 0.2s;
    }
    .region-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.08);
    }
    .table-card {
        overflow: hidden;
    }
    .case-status {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .status-active {
        background-color: rgba(22, 170, 255, 0.1);
        color: var(--info);
    }
    .status-completed {
        background-color: rgba(58, 196, 125, 0.1);
        color: var(--success);
    }
    .status-pending {
        background-color: rgba(247, 185, 36, 0.1);
        color: var(--warning);
    }
    .case-row {
        cursor: pointer;
        transition: background-color 0.15s;
    }
    .case-row:hover {
        background-color: rgba(63, 106, 216, 0.05);
    }
    .progress {
        height: 0.5rem;
        border-radius: 0.25rem;
    }
    .chart-bar {
        height: 0.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        /* animation: fillUp 1s ease-out forwards; */ /* Animation can be added if desired */
    }
    .chart-container {
        margin-top: 1rem;
        width: 100%;
    }
    .chart-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
    }
    .region-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background-color: rgba(63, 106, 216, 0.1);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
</style>
{% endblock %}

{% block page_content %}
<div class="heading-container">
    <h1 class="h3">Dashboard</h1>
    <div class="btn-group" role="group" aria-label="Time period">
        <button type="button" class="btn btn-outline-secondary">Day</button>
        <button type="button" class="btn btn-outline-secondary active">Week</button>
        <button type="button" class="btn btn-outline-secondary">Month</button>
        <button type="button" class="btn btn-outline-secondary">Year</button>
    </div>
</div>

<!-- Stats row -->
<div class="row">
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="text-primary">
                <i class="bi bi-folder2-open"></i>
            </div>
            <div class="stats-number">{{ active_cases_count | default("0") }}</div>
            <div class="stats-label">Active Cases</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="text-info">
                <i class="bi bi-chat-square-text"></i>
            </div>
            <div class="stats-number">{{ total_interrogations | default("0") }}</div>
            <div class="stats-label">Interrogations</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="text-success">
                <i class="bi bi-file-earmark-check"></i>
            </div>
            <div class="stats-number">{{ completed_reports_count | default("0") }}</div>
            <div class="stats-label">Completed Reports</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="text-warning">
                <i class="bi bi-clock-history"></i>
            </div>
            <div class="stats-number">{{ resolution_rate | default("N/A") }}</div>
            <div class="stats-label">Case Resolution Rate</div>
        </div>
    </div>
</div>

<!-- Recent cases and regional guidelines -->
<div class="row">
    <div class="col-lg-8">
        <div class="card table-card">
            <div class="card-header">
                Recent Cases
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Case ID</th>
                                <th>Suspect</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Last Update</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if recent_cases %}
                                {% for case in recent_cases %}
                                <tr class="case-row" onclick="window.location=\'{{ url_for('view_case', case_id=case.id) }}\';">
                                    <td>{{ case.case_id_display }}</td>
                                    <td>{{ case.suspect_name }}</td>
                                    <td>{{ case.case_type }}</td>
                                    <td><span class="case-status status-{{ case.status.value.lower() }}">{{ case.status.value }}</span></td>
                                    <td>{{ case.updated_at.strftime("%Y-%m-%d %H:%M") }}</td>
                                    <td><a href="{{ url_for("view_case", case_id=case.id) }}" class="btn btn-sm btn-outline-primary">View</a></td>
                                </tr>
                                {% endfor %}
                            {% else %}
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-4">No recent cases found.</td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                Regional Guidelines Overview
            </div>
            <div class="card-body">
                {% if countries %}
                    {% for country in countries | sort(attribute='name') | list | batch(3) %}
                        <div class="row mb-2">
                            {% for c_item in country %}
                                <div class="col-4">
                                    <a href="{{ url_for('regional_guidelines_page', country_id=c_item.id) }}" class="text-decoration-none">
                                        <div class="region-card p-2 text-center border rounded">
                                            <div class="region-icon"><i class="bi bi-geo-alt-fill"></i></div>
                                            <small>{{ c_item.name }}</small>
                                        </div>
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                     <a href="{{ url_for('regional_guidelines_page') }}" class="btn btn-sm btn-outline-primary mt-2">View All Guidelines</a>
                {% else %}
                    <p class="text-muted">No countries configured for regional guidelines.</p>
                {% endif %}
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                Quick Actions
            </div>
            <div class="card-body">
                <a href="{{ url_for('manage_cases', action='new') }}" class="btn btn-primary w-100 mb-2"> <i class="bi bi-plus-circle-fill me-2"></i>New Case</a>
                <a href="{{ url_for('reports_list_page') }}" class="btn btn-outline-secondary w-100 mb-2"><i class="bi bi-search me-2"></i>Find Report</a>
                <a href="{{ url_for('interrogations_page') }}" class="btn btn-outline-secondary w-100"><i class="bi bi-mic-fill me-2"></i>Start Interrogation</a>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    // Add any dashboard specific JS here if needed
    console.log("Dashboard loaded");
</script>
{% endblock %}