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

{% load l10n %}

{% block title %}Home{% endblock %}

{% block content %}

    <h1>Home</h1>

    {% if has_alerts %}
        <div class="messages">
            {% for goal in exceeded_goals %}
                <div class="message warning">
                    Presupuesto <strong>{{ goal.name }}</strong> excedido:
                    {{ goal.progress|floatformat:2 }}€ de {{ goal.target_amount|floatformat:2 }}€.
                    <a href="{% url 'goal_list' %}">Ver objetivos</a>
                </div>
            {% endfor %}
            {% for item in negative_accounts %}
                <div class="message error">
                    La cuenta <strong>{{ item.account.name }}</strong> está en negativo:
                    {{ item.balance|floatformat:2 }}€.
                    <a href="{% url 'account_list' %}">Ver cuentas</a>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <section class="home-section">
        <h2>Saldo total</h2>
        <p class="balance-total {% if total_balance < 0 %}negative{% endif %}">
            {{ total_balance|floatformat:2 }}€
        </p>

        <ul class="balance-breakdown">
            {% for item in account_balances %}
                <li>
                    <span class="balance-account">{{ item.account.name }}</span>
                    <span class="balance-amount {% if item.balance < 0 %}negative{% endif %}">
                        {{ item.balance|floatformat:2 }}€
                    </span>
                </li>
            {% empty %}
                <li class="muted">No tienes cuentas activas.</li>
            {% endfor %}
        </ul>
    </section>

    <section class="home-section">
        <h2>Resumen del mes</h2>

        <div class="kpi-grid">
            <div class="kpi-card">
                <span class="kpi-label">Gastado este mes</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 usadas</span>
                <span class="kpi-value">{{ kpi_categories }}</span>
            </div>
        </div>

        <p class="comparison">
            {% if diff_pct is None %}
                <span class="muted">Sin gastos el mes pasado para comparar.</span>
            {% else %}
                Mes anterior: {{ prev_total|floatformat:2 }}€ —
                {% if diff_amount > 0 %}
                    <span class="amount-negative">
                        +{{ diff_amount|floatformat:2 }}€ ({{ diff_pct|floatformat:1 }}%)
                    </span>
                {% elif diff_amount < 0 %}
                    <span class="amount-positive">
                        {{ diff_amount|floatformat:2 }}€ ({{ diff_pct|floatformat:1 }}%)
                    </span>
                {% else %}
                    sin variación
                {% endif %}
            {% endif %}
            <br>
            <small class="muted">
                El mes en curso está incompleto: la comparación no es equivalente
                hasta que termine.
            </small>
        </p>
    </section>

    <section class="home-section">
        <h2>Últimos movimientos</h2>
        <ul class="movements-list">
            {% for mov in movements %}
                <li class="movement">
                    <span class="movement-date">{{ mov.date }}</span>
                    <span class="movement-label">{{ mov.label }}</span>
                    <span class="movement-account muted">{{ mov.account }}</span>
                    <span class="movement-amount {% if mov.kind == 'income' %}amount-positive{% else %}amount-negative{% endif %}">
                        {% if mov.kind == 'income' %}+{% else %}−{% endif %}{{ mov.amount|floatformat:2 }}€
                    </span>
                </li>
            {% empty %}
                <li class="muted">Todavía no hay movimientos.</li>
            {% endfor %}
        </ul>
        <div class="section-actions">
            <a class="btn btn-secondary" href="{% url 'expense_list' %}">Ver todos los gastos</a>
            <a class="btn btn-secondary" href="{% url 'income_list' %}">Ver todos los ingresos</a>
        </div>
    </section>

    <section class="home-section">
        <div class="dashboard-grid">
            <div class="card card-chart">
                <h2>Últimos meses</h2>
                <div class="canvas-wrapper">
                    <canvas id="miniChart"></canvas>
                </div>
            </div>
        </div>

        <script>
            const labels = {{ mini_chart_labels|safe }};
            const data = {{ mini_chart_data|safe }};

            const ctx = document.getElementById('miniChart');
            const miniChartColors = getChartColors();

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

            registerThemedChart(miniChart, function (chart, colors) {
                chart.data.datasets[0].backgroundColor = colors.primaryColor;
                applyCartesianColors(chart, colors);
            });
        </script>
    </section>

    <section class="home-section">
        <h2>Objetivos</h2>
        {% if goals %}
            <div class="goals-widget">
                {% for goal in goals %}
                    <div class="goal-card">
                        <strong>{{ goal.name }}</strong>
                        {% if goal.is_exceeded %}
                            <span class="badge badge-inactive">Excedido</span>
                        {% endif %}

                        <div class="progress-bar"
                            role="progressbar"
                            aria-valuemin="0"
                            aria-valuemax="100"
                            aria-valuenow="{{ goal.bar_width|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 class="muted">No tienes objetivos aún.</p>
        {% endif %}
    </section>

{% endblock %}