{% extends "base.html" %}

{% block title %}{% trans %}Dashboard - Edu-Space Admin{% endtrans %}{% endblock %}

{% block content %}
{% if current_user.is_authenticated %}
<div class="container-fluid pt-5 mt-4">
{% endif %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="h3 mb-1">
            <i class="bi bi-speedometer2 text-primary me-2"></i>{% trans %}Panel de Control{% endtrans %}
        </h1>
        <p class="text-muted small mb-0">{% trans %}Resumen general de espacios, materias y reservas académicas{% endtrans %}</p>
    </div>
</div>

<!-- Statistics Cards with Direct Shortcuts -->
<div class="row mb-4 g-3">
    <!-- 1. Total Aulas -->
    <div class="col-md-6 col-xl-3">
        <a href="{{ url_for('classrooms.list_classrooms') }}" class="text-decoration-none text-reset d-block h-100">
            <div class="card border-0 shadow-sm h-100 dashboard-stat-card transition-all">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="text-muted small fw-semibold text-uppercase">{% trans %}Total de Aulas{% endtrans %}</span>
                            <h2 class="mb-0 fw-bold mt-1 text-primary">{{ stats.total_classrooms }}</h2>
                        </div>
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3 text-primary">
                            <i class="bi bi-door-open fs-3"></i>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between pt-3 mt-2 border-top text-primary small fw-semibold">
                        <span>{% trans %}Ver todas las aulas{% endtrans %}</span>
                        <i class="bi bi-arrow-right"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    
    <!-- 2. Total Materias -->
    <div class="col-md-6 col-xl-3">
        <a href="{{ url_for('schedule.commissions_view') }}" class="text-decoration-none text-reset d-block h-100">
            <div class="card border-0 shadow-sm h-100 dashboard-stat-card transition-all">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="text-muted small fw-semibold text-uppercase">{% trans %}Total de Materias{% endtrans %}</span>
                            <h2 class="mb-0 fw-bold mt-1 text-success">{{ stats.total_subjects }}</h2>
                        </div>
                        <div class="bg-success bg-opacity-10 rounded-circle p-3 text-success">
                            <i class="bi bi-book fs-3"></i>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between pt-3 mt-2 border-top text-success small fw-semibold">
                        <span>{% trans %}Gestionar materias{% endtrans %}</span>
                        <i class="bi bi-arrow-right"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    
    <!-- 3. Reservas de Hoy -->
    <div class="col-md-6 col-xl-3">
        <a href="{{ url_for('schedule.today_schedule') }}" class="text-decoration-none text-reset d-block h-100">
            <div class="card border-0 shadow-sm h-100 dashboard-stat-card transition-all">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="text-muted small fw-semibold text-uppercase">{% trans %}Reservas de Hoy{% endtrans %}</span>
                            <h2 class="mb-0 fw-bold mt-1 text-info">{{ stats.today_reservations }}</h2>
                        </div>
                        <div class="bg-info bg-opacity-10 rounded-circle p-3 text-info">
                            <i class="bi bi-calendar-check fs-3"></i>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between pt-3 mt-2 border-top text-info small fw-semibold">
                        <span>{% trans %}Ver cartelera de hoy{% endtrans %}</span>
                        <i class="bi bi-arrow-right"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
    
    <!-- 4. Esta Semana -->
    <div class="col-md-6 col-xl-3">
        <a href="{{ url_for('schedule.calendar_view') }}" class="text-decoration-none text-reset d-block h-100">
            <div class="card border-0 shadow-sm h-100 dashboard-stat-card transition-all">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="text-muted small fw-semibold text-uppercase">{% trans %}Esta Semana{% endtrans %}</span>
                            <h2 class="mb-0 fw-bold mt-1 text-warning">{{ stats.week_reservations }}</h2>
                        </div>
                        <div class="bg-warning bg-opacity-10 rounded-circle p-3 text-warning">
                            <i class="bi bi-calendar-week fs-3"></i>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between pt-3 mt-2 border-top text-warning small fw-semibold">
                        <span>{% trans %}Abrir calendario semanal{% endtrans %}</span>
                        <i class="bi bi-arrow-right"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row">
    <!-- Monthly Chart -->
    <div class="col-md-8 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header border-0 py-3 bg-body-tertiary">
                <h5 class="mb-0 h6 fw-bold">
                    <i class="bi bi-graph-up text-primary me-2"></i>{% trans %}Reservas Mensuales{% endtrans %}
                </h5>
            </div>
            <div class="card-body">
                <canvas id="monthlyChart" height="100"></canvas>
            </div>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="col-md-4 mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header border-0 py-3 bg-body-tertiary">
                <h5 class="mb-0 h6 fw-bold">
                    <i class="bi bi-lightning text-warning me-2"></i>{% trans %}Accesos Rápidos{% endtrans %}
                </h5>
            </div>
            <div class="card-body p-3">
                <div class="d-grid gap-2">
                    <a href="{{ url_for('schedule.calendar_view') }}" class="btn btn-outline-primary text-start">
                        <i class="bi bi-calendar3 me-2"></i>{% trans %}Calendario de Reservas{% endtrans %}
                    </a>
                    <a href="{{ url_for('schedule.today_schedule') }}" class="btn btn-outline-info text-start">
                        <i class="bi bi-calendar-day me-2"></i>{% trans %}Cartelera del Día{% endtrans %}
                    </a>
                    <a href="{{ url_for('classrooms.list_classrooms') }}" class="btn btn-outline-secondary text-start">
                        <i class="bi bi-door-open me-2"></i>{% trans %}Listado de Aulas{% endtrans %}
                    </a>
                    <a href="{{ url_for('buildings.list_buildings') }}" class="btn btn-outline-secondary text-start">
                        <i class="bi bi-buildings me-2"></i>{% trans %}Gestión de Edificios{% endtrans %}
                    </a>
                    {% if current_user.has_permission('reservations', 'read_write') %}
                    <a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-outline-success text-start">
                        <i class="bi bi-calendar-plus me-2"></i>{% trans %}Nueva Reserva{% endtrans %}
                    </a>
                    {% endif %}
                    {% if current_user.has_permission('classrooms', 'read_write') %}
                    <a href="{{ url_for('classrooms.add_classroom') }}" class="btn btn-outline-primary text-start">
                        <i class="bi bi-plus-circle me-2"></i>{% trans %}Crear Nueva Aula{% endtrans %}
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Upcoming Reservations -->
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header border-0 py-3 bg-body-tertiary d-flex justify-content-between align-items-center">
                <h5 class="mb-0 h6 fw-bold">
                    <i class="bi bi-clock-history text-info me-2"></i>{% trans %}Próximas Reservas (Próximos 7 Días){% endtrans %}
                </h5>
                <a href="{{ url_for('schedule.calendar_view') }}" class="btn btn-sm btn-outline-primary">
                    {% trans %}Ver en Calendario{% endtrans %}
                </a>
            </div>
            <div class="card-body p-0">
                {% if upcoming_reservations %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light small text-uppercase">
                                <tr>
                                    <th class="ps-3">{% trans %}Horario{% endtrans %}</th>
                                    <th>{% trans %}Aula{% endtrans %}</th>
                                    <th>{% trans %}Asignatura / Código{% endtrans %}</th>
                                    <th>{% trans %}Turno / Comisión{% endtrans %}</th>
                                    <th>{% trans %}Estado{% endtrans %}</th>
                                    <th class="text-end pe-3">{% trans %}Acciones{% endtrans %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for reservation in upcoming_reservations %}
                                <tr>
                                    <td class="ps-3">
                                        <div class="fw-bold font-monospace text-primary fs-6">
                                            <i class="bi bi-clock text-warning me-1"></i>{{ reservation.start_time.strftime('%H:%M') }} - {{ reservation.end_time.strftime('%H:%M') }} hs
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary-subtle text-secondary border font-monospace">
                                            {{ reservation.classroom.code if reservation.classroom else 'Sin Aula' }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="fw-semibold text-primary">{{ reservation.subject_name }}</div>
                                        <small class="text-muted font-monospace">{{ reservation.subject_code }}</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-info-subtle text-info border me-1">
                                            {{ reservation.shift or 'Tarde' }}
                                        </span>
                                        <small class="text-muted">{{ reservation.commission.code if reservation.commission else 'C1' }}</small>
                                    </td>
                                    <td>
                                        {% if reservation.status == 'CONFIRMED' or reservation.status.value == 'CONFIRMED' %}
                                            <span class="badge bg-success-subtle text-success border border-success-subtle">
                                                <i class="bi bi-check-circle me-1"></i>{% trans %}Confirmada{% endtrans %}
                                            </span>
                                        {% else %}
                                            <span class="badge bg-warning-subtle text-warning border border-warning-subtle">
                                                <i class="bi bi-clock me-1"></i>{% trans %}Pendiente{% endtrans %}
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end pe-3">
                                        <a href="{{ url_for('schedule.view_reservation', id=reservation.id) }}" 
                                           class="btn btn-sm btn-outline-secondary py-0 px-2" title="{% trans %}Ver Ficha{% endtrans %}">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-calendar-x text-muted fs-1 d-block mb-2"></i>
                        <h6 class="fw-bold">{% trans %}No hay reservas para los próximos 7 días{% endtrans %}</h6>
                        <p class="text-muted small">{% trans %}Puedes programar nuevas reservas desde el calendario.{% endtrans %}</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% if current_user.is_authenticated %}
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Fetch monthly data and create chart
    $.get('/api/dashboard-stats')
        .done(function(data) {
            const ctx = document.getElementById('monthlyChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.monthly_data.map(item => item.month),
                    datasets: [{
                        label: 'Reservations',
                        data: data.monthly_data.map(item => item.reservations),
                        borderColor: '#667eea',
                        backgroundColor: 'rgba(102, 126, 234, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });
        });
});
</script>
{% endblock %}