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

{% load l10n %}

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

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

        <p class="muted">
            {% if 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>
            {% if period %}
                <a href="{% url 'dashboard' %}" style="color: red; margin-left: 10px;">❌ Quitar filtros temporales</a>
            {% endif %}
        </div>

        <br>

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

            <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>

            {% if not period %}
                <select name="year" id="yearSelect">
                    {% for y in year_list %}
                        <option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>
                            {{ y }}
                        </option>
                    {% endfor %}
                </select>
            
                <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">Aplicar Filtros</button>
        </form>
    </section>
    <script>
        const yearSelect = document.getElementById('yearSelect');
        const monthSelect = document.getElementById('monthSelect');
        const hiddenPeriod = document.getElementById('hiddenPeriod');

        function clearPeriodPreset() {
            if (hiddenPeriod) {
                hiddenPeriod.value = ""
            }
            document.querySelectorAll('.preset').forEach(btn => btn.classList.remove('active'));
        }
    </script>
    <!-- <script>
        document.querySelectorAll('.dashboard-presets  a').forEach(link => {
            link.addEventListener('click', e => {
                e.preventDefault();

                const period = link.dataset.period;
                const isActive = link.classList.contains('active');

                if (isActive) {
                    window.location.href = link.href;
                } else {
                    window.location.href = `${link.href}?period=${period}`
                }
            });
        });
    </script> -->

    <!-- ========================= -->
    <!-- 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>
    </section>

    {% if compare_enabled %}
        <section class="comparison">
            <h3>📊 Resumen comparativo</h3>
            <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' %}#d9534f{% else %}#5cb85c{% endif %};">
                    {% if kpi_trend == "up" %}+{% endif %}{{ kpi_difference|floatformat:2 }}€ ({{ kpi_percentage|floatformat:1 }}%)
                </strong>
                <small style="display:block; color:gray;">
                    {% if kpi_trend == "up" %}⚠️ Has gastado más que el periodo pasado. {% else %} ¡Bien! Has reducido tus gastos. {% endif %}
                </small>
            </p>
        </section>
    {% endif %}

    <!-- ========================= -->
    <!-- Charts -->
    <!-- ========================= -->
    
    <div class="charts-container">
        <section class="chart-box" style="width: 45%; min-width: 300px; max-width: 550px;">
            <h3>Evolución de Gastos ({% if chart_type == 'day' %}Por día {% else %} Por Meses{% endif %})</h3>
            <div style="position: relative; width: 100%; height: 350px; padding-bottom: 20px;">
                <canvas id="mainChart"></canvas>
            </div>
        </section>

        <section class="chart-box" style="width: 30%; min-width: 280px; max-width: 400px;">
            <h3>Distribución por Categorías</h3>    
            <div style="position: relative; width: 100%; height: 350px; display: flex; align-items: center; justify-content: center">
                <canvas id="categoryChart"></canvas>
            </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 %}];

        new Chart(document.getElementById('categoryChart'), {
            type: 'pie',
            data: {
                labels: catLabels,
                datasets: [{
                    data: catData,
                    backgroundColor: [
                        '#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0', '#ffa1b5'
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'right' }
                }
            }
        });
    </script>

    <h3>Evolución anual por cuenta ({{ selected_year }})</h3>
    <div class="dashboard-grid">
        {% for acc in accounts_charts %}
            <div class="card card-chart">
                <h4>{{ acc.name }}</h4>
                <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');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets:[{
                    label: 'Gastos (€)',
                    data: data,
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    backgroundColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: { y: { beginAtZero: true } }
            }
        });

        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);

                new Chart(
                    document.getElementById('accountChart{{ acc.id }}'),
                    {
                        type: 'line',
                        data: {
                            labels: allMonths,
                            datasets: [{
                                label: 'Saldo Real (€)',
                                data: dataAccount,
                                fill: false,
                                borderColor: 'rgba(54, 162, 235, 1)',
                                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                tension: 0.1
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                y: {
                                    beginAtZero: false
                                }
                            }
                        }
                    }
                );
            })();            
        {% endfor %}
    </script>


    {% if compare_enabled %}
        <section class="comparison">
            <h3>Comparativa</h3>
            
            <p>
                Diferencia:
                <strong class="{% if kpi_trend == 'up' %}positive{% endif %}">
                    {% if kpi_trend == "up" %}+{% endif %}
                    {{ kpi_difference_abs|floatformat:2 }} €
                </strong>
                {% if kpi_percentage %}
                    ({{ kpi_percentage|floatformat:1 }}%)
                {% endif %}
            </p>
        </section>
    {% endif %}

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

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

                    <div class="progress-bar">
                        <div class="progress-fill
                        {% if goal.percentage < 50 %} low
                        {% elif goal.percentage < 80 %} medium
                        {% else %} high
                        {% endif %}"
                        style="width: {{ goal.percentage|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 -->
    <!-- ========================= -->
    <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>

{% endblock %}