{% extends "expenses/base.html" %}

{% load l10n %}

{% block title %}Dashboard{% endblock %}

{% block content %}
    
    <section class="dashboard-context">
        <h1>
            {% if selected_account_obj %}
                {{ selected_account_obj.name }}
            {% else %}
                Todas las cuentas
            {% endif %}
        </h1>

        <p class="muted">
            {% if range_active %}
                Del {{ date_from|date:"d/m/Y"|default:"principio" }}
                al {{ date_to|date:"d/m/Y"|default:"hoy" }}
            {% elif selected_month %}
                {{ selected_month }}/{{ selected_year}}
            {% else %}
                Año {{ selected_year }}
            {% endif %}
        </p>
    </section>

    <!-- ========================= -->
    <!-- Filters -->
    <!-- ========================= -->
    
    <section class="dashboard-filters">
        <div class="dashboard-presets">
            <a href="{% url 'dashboard' %}?period=this_month" class="preset {% if period == 'this_month' %}active{% endif %}">
                Este mes
            </a>
            
            <a href="{% url 'dashboard' %}?period=last_month" class="preset {% if period == 'last_month' %}active{% endif %}">
                Mes anterior
            </a>

            <a href="{% url 'dashboard' %}?period=this_year" class="preset {% if period == 'this_year' %}active{% endif %}">
                Este año
            </a>
        </div>

        {% if period %}
            <div class="clear-filters-row">
                <a href="{% url 'dashboard' %}" class="clear-filters">❌ Quitar filtros temporales</a>
            </div>
        {% endif %}

        <br>

        <form method="get" action="{% url 'dashboard' %}" id="filtered_form">
            {% if period %}
                <input type="hidden" name="period" value="{{ period }}" id="hiddenPeriod">
            {% endif %}

            <label class="sr-only" for="account">Cuenta</label>
            <select name="account" id="account">
                <option value="">Todas las cuentas</option>
                {% for acc in accounts %}
                    <option value="{{ acc.id }}" {% if selected_account == acc.id %}selected{% endif %}>
                        {{ acc.name }}
                    </option>
                {% endfor %}
            </select>

            {% include "expenses/_date_range.html" %}

            {% if not period %}
                <label class="sr-only" for="yearSelect">Año</label>
                <select name="year" id="yearSelect">
                    {% for y in year_list %}
                        <option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>
                            {{ y }}
                        </option>
                    {% endfor %}
                </select>

                <label class="sr-only" for="monthSelect">Mes</label>
                <select name="month" id="monthSelect">
                    <option value="">Todo el año</option>
                    {% for m in months %}
                        <option value="{{ m }}"{% if m == selected_month %}selected{% endif %}>
                            {{ m }}
                        </option>
                    {% endfor %}
                </select>
            {% endif %}

            <label class="checkbox">
                <input type="checkbox" name="compare" value="1" {% if compare_enabled %}checked{% endif %}>
                Comparar periodo anterior
            </label>

            <button type="submit" class="btn btn-primary">Aplicar Filtros</button>
        </form>

        {% if range_active %}
            <p class="range-notice">
                Mostrando del {{ date_from|date:"d/m/Y"|default:"principio" }} al
                {{ date_to|date:"d/m/Y"|default:"hoy" }}. Los filtros de año, mes
                {% if compare_suppressed %}y la comparativa {% endif %}no se aplican.
                <a href="{% url 'dashboard' %}">Quitar el rango</a>
            </p>
        {% endif %}
    </section>

    <!-- ========================= -->
    <!-- KPIs -->
    <!-- ========================= -->

    <section class="kpi-grid">            
        <div class="kpi-card">
            <span class="kpi-label">Saldo actual</span>
            <span class="kpi-value">{{ kpi_balance|floatformat:2 }}€</span>
        </div>
        
        <div class="kpi-card">
            <span class="kpi-label">Gastos totales</span>
            <span class="kpi-value">{{ kpi_total|floatformat:2 }}€</span>
        </div>

        <div class="kpi-card">
            <span class="kpi-label">Nº de gastos</span>
            <span class="kpi-value">{{ kpi_count }}</span>
        </div>

        <div class="kpi-card">
            <span class="kpi-label">Categorías</span>
            <span class="kpi-value">{{ kpi_categories }}</span>
        </div>

        <div class="kpi-card">
            <span class="kpi-label"> Media diaria</span>
            <span class="kpi-value">{{ daily_average|floatformat:2 }}€ / día</span>
        </div>
        
        {% if selected_month == today.month and selected_year == today.year and not range_active %}
            <div class="kpi-card" style="border-left: 4px solid var(--color-warning-accent);">
                <span class="kpi-label">Proyección fin de mes</span>
                <span class="kpi-value">{{ projected_end_of_month|floatformat:2 }}€</span>
                <small style="color: var(--color-text-muted); display:block;">Basado en tu ritmo de gasto actual</small>
            </div>
        {% endif %}
    </section>

    {% if compare_enabled %}
        <section class="comparison">
            <h2>Resumen comparativo</h2>
            <p>
                Gastos periodo actual: <strong>{{ kpi_total|floatformat:2 }} €</strong><br>
                Gastos periodo anterior: <strong>{{ kpi_previous_total|floatformat:2 }} €</strong><br>
                Diferencia:
                <strong style="color: {% if kpi_trend == 'up' %}var(--color-danger-accent){% else %}var(--color-success-accent){% endif %};">
                    {% if kpi_trend == "up" %}+{% endif %}{{ kpi_difference|floatformat:2 }}€ ({{ kpi_percentage|floatformat:1 }}%)
                </strong>
                <small style="display:block; color: var(--color-text-muted);">
                    {% if kpi_trend == "up" %}⚠️ Has gastado más que el periodo pasado. {% else %} ¡Bien! Has reducido tus gastos. {% endif %}
                </small>
            </p>

            <h2>Desglose de cambios por categoría</h2>
            <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Categoría</th>
                        <th>Periodo Anterior</th>
                        <th>Periodo Actual</th>
                        <th>Variación</th>
                    </tr>
                </thead>
                <tbody>
                    {% for cat in category_comparison %}
                        <tr>
                            <td>{{ cat.category }}</td>
                            <td>{{ cat.previous|floatformat:2 }}€</td>
                            <td>{{ cat.current|floatformat:2 }}€</td>
                            <td style="font-weight: bold; color: {% if cat.difference > 0 %}var(--color-danger-accent){% else %}var(--color-success-accent){% endif %};">
                                {% if cat.difference > 0 %}+{% endif %}{{ cat.difference|floatformat:2 }}€
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>
        </section>
    {% endif %}

    <!-- ========================= -->
    <!-- Charts -->
    <!-- ========================= -->
    
    <div class="charts-container">
        <section>
            <h2>Evolución de Gastos ({% if chart_type == 'day' %}Por día {% else %} Por Meses{% endif %})</h2>
            <div class="chart-box">
                <canvas id="mainChart"></canvas>
            </div>
        </section>

        <section>
            <h2>Distribución por Categorías</h2>
            <div class="chart-box">
                <canvas id="categoryChart"></canvas>
            </div>
        </section>

        <section>
            <h2>Gastos Recientes</h2>
            <div class="table-wrap">
            <table class="table">
                <thead>
                    <tr>
                        <th>Fecha</th>
                        <th>cuenta</th>
                        <th>Categoría</th>
                        <th>Concepto</th>
                        <th>Importe</th>
                    </tr>
                </thead>
                <tbody>
                    {% for exp in recent_expenses %}
                        <tr>
                            <td>{{ exp.date|date:"d/m/Y" }}</td>
                            <td>{{ exp.account.name }}</td>
                            <td>
                                {{ exp.category.name }}
                                {% if exp.is_transfer %}
                                    <span class="badge badge-neutral">Traspaso</span>
                                {% endif %}
                            </td>
                            <td>{{ exp.description|default:"-" }}</td>
                            <td style="color: var(--color-danger-accent); font-weight: bold;">{{ exp.amount|floatformat:2 }}</td>
                        </tr>
                    {% empty %}
                        <tr><td colspan="5">No hay gastos recientes registrados</td></tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>
        </section>
    </div>
    
    <div style="clear: both; margin-top: 2rem;"></div>   

    <script>
        const catLabels = [{% for row in by_category_chart %}"{{ row.category__name }}",{% endfor %}];
        const catData = [{% for row in by_category_chart %}{{ row.total|unlocalize }},{% endfor %}];

        const categoryChartColors = getChartColors();

        const categoryChart = new Chart(document.getElementById('categoryChart'), {
            type: 'pie',
            data: {
                labels: catLabels,
                datasets: [{
                    data: catData,
                    backgroundColor: categoryChartColors.palette
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: { color: categoryChartColors.tickColor }
                    }
                }
            }
        });

        registerThemedChart(categoryChart, function (chart, colors) {
            chart.options.plugins.legend.labels.color = colors.tickColor;
        });
    </script>

    <h2>Evolución anual por cuenta ({{ selected_year }})</h2>
    <div class="dashboard-grid">
        {% for acc in accounts_charts %}
            <div class="card card-chart">
                <h3>{{ acc.name }}</h3>
                <p><strong>Saldo actual:</strong> {{ acc.current_balance|floatformat:2 }}€</p>                
                <div class="canvas-wrapper">
                    <canvas id="accountChart{{ acc.id }}"></canvas>
                </div>
            </div>
        {% endfor %}
    </div>

    <script>
        const labels = {{ chart_labels|safe }};
        const data = {{ chart_data|safe }};
        const ctx = document.getElementById('mainChart');
        const mainChartColors = getChartColors();

        const mainChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets:[{
                    label: 'Gastos (€)',
                    data: data,
                    backgroundColor: mainChartColors.primaryColor,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        grid: { color: mainChartColors.gridColor },
                        ticks: { color: mainChartColors.tickColor }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: mainChartColors.gridColor },
                        ticks: { color: mainChartColors.tickColor }
                    }
                }
            }
        });

        registerThemedChart(mainChart, function (chart, colors) {
            chart.data.datasets[0].backgroundColor = colors.primaryColor;
            applyCartesianColors(chart, colors);
        });

        const allMonths = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];

        {% for acc in accounts_charts %}
            (function() {
                const dataAccount = {{ acc.data|safe }};
                const filteredLabels = allMonths.slice(0, dataAccount.length);
                const accountChartColors = getChartColors();

                const accountChart = new Chart(
                    document.getElementById('accountChart{{ acc.id }}'),
                    {
                        type: 'line',
                        data: {
                            labels: allMonths,
                            datasets: [{
                                label: 'Saldo Real (€)',
                                data: dataAccount,
                                fill: false,
                                borderColor: accountChartColors.primaryColor,
                                backgroundColor: accountChartColors.primaryFill,
                                tension: 0.1
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                x: {
                                    grid: { color: accountChartColors.gridColor },
                                    ticks: { color: accountChartColors.tickColor }
                                },
                                y: {
                                    beginAtZero: false,
                                    grid: { color: accountChartColors.gridColor },
                                    ticks: { color: accountChartColors.tickColor }
                                }
                            }
                        }
                    }
                );

                registerThemedChart(accountChart, function (chart, colors) {
                    chart.data.datasets[0].borderColor = colors.primaryColor;
                    chart.data.datasets[0].backgroundColor = colors.primaryFill;
                    applyCartesianColors(chart, colors);
                });
            })();
        {% endfor %}
    </script>


    <!-- ========================= -->
    <!-- Goals -->
    <!-- ========================= -->

    <h2>Objetivos</h2>
    {% if goals %}
        <div class="goals-widget">
            {% for goal in goals %}
                <div class="goal-card">
                    <strong>{{ goal.name }}</strong>

                    <div class="progress-bar"
                         role="progressbar"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         aria-valuenow="{{ goal.percentage|unlocalize }}"
                         aria-label="Progreso de {{ goal.name }}"
                         aria-valuetext="{{ goal.progress|floatformat:1 }}€ de {{ goal.target_amount|floatformat:1 }}€ ({{ goal.percentage|floatformat:1 }}%)">
                        <div class="progress-fill {{ goal.progress_state }}"
                        style="width: {{ goal.bar_width|unlocalize }}%"></div>
                    </div>

                    <span class="progress-label">
                        {{ goal.progress|floatformat:1 }}€ / {{ goal.target_amount|floatformat:1 }}€ ({{ goal.percentage|floatformat:1 }}%)
                    </span>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p>No hay objetivos.</p>
    {% endif %}

    <!-- ========================= -->
    <!-- Categories -->
    <!-- ========================= -->
    <div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Categoría</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            {% for row in by_category %}
                <tr>
                    <td>{{ row.category__name }}</td>
                    <td>{{ row.total|floatformat:2 }} €</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>

{% endblock %}