{% extends "base.html" %}
{% set active = "finanzas" %}
{% block title %}Dirección · ArcaBeauty Club{% endblock %}

{% block extra_css %}
<style>
.fin-periodo { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-bottom:22px; }
.fin-periodo .field { margin-bottom:0; }
.kpi-variacion { font-size:12px; font-weight:600; margin-top:2px; }
.kpi-variacion.sube { color: var(--salvia); }
.kpi-variacion.baja { color: var(--alerta); }
.chart-container { position:relative; height:220px; width:100%; }
canvas { max-width:100%; }
.barra-horizontal { background: var(--crema-oscuro); border-radius:4px; height:14px; overflow:hidden; margin-top:4px; }
.barra-fill { height:100%; border-radius:4px; background: linear-gradient(90deg, var(--terracota), var(--terracota-claro)); }
.tabla-fin th { font-size:11px; }
.tabla-fin td { font-size:13px; }
.badge-tipo { padding:2px 8px; border-radius:999px; font-size:10px; font-weight:700; text-transform:uppercase; }
.badge-tipo.servicio { background:rgba(111,143,113,0.15); color:var(--salvia); }
.badge-tipo.producto { background:rgba(201,123,83,0.15); color:var(--terracota); }
</style>
{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow">Gestión</div>
        <h1>Dirección y Finanzas</h1>
    </div>
</div>

<form method="get" class="fin-periodo">
    <div class="field"><label>Desde</label><input type="date" name="fecha_inicio" value="{{ fecha_inicio }}"></div>
    <div class="field"><label>Hasta</label><input type="date" name="fecha_fin" value="{{ fecha_fin }}"></div>
    <button type="submit" class="btn secondary sm">Actualizar</button>
    <a href="{{ url_for('finanzas_panel', fecha_inicio=hoy_menos30, fecha_fin=hoy) }}" class="btn ghost sm">Últimos 30 días</a>
    <a href="{{ url_for('finanzas_panel', fecha_inicio=mes_inicio, fecha_fin=hoy) }}" class="btn ghost sm">Este mes</a>
    <a href="{{ url_for('finanzas_panel', fecha_inicio=anio_inicio, fecha_fin=hoy) }}" class="btn ghost sm">Este año</a>
</form>

<!-- KPIs principales -->
<div class="grid cols-4" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Ingresos</span>
        <span class="value">${{ "%.0f"|format(kpis.ingresos) }}</span>
        {% if kpis.variacion_pct is not none %}
        <span class="kpi-variacion {{ 'sube' if kpis.variacion_pct >= 0 else 'baja' }}">
            {{ "+" if kpis.variacion_pct >= 0 }}{{ kpis.variacion_pct }}% vs periodo anterior
        </span>
        {% endif %}
    </div>
    <div class="card kpi">
        <span class="label">Utilidad bruta</span>
        <span class="value">${{ "%.0f"|format(kpis.utilidad_bruta) }}</span>
        <span class="sub">ingresos &minus; costo productos</span>
    </div>
    <div class="card kpi">
        <span class="label">Ticket promedio</span>
        <span class="value">${{ "%.0f"|format(kpis.ticket_promedio) }}</span>
        <span class="sub">{{ kpis.n_ventas }} venta{{ "s" if kpis.n_ventas != 1 }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Descuentos aplicados</span>
        <span class="value">${{ "%.0f"|format(kpis.descuentos) }}</span>
        <span class="sub">
            {%- if kpis.ingresos > 0 -%}
            {{ "%.1f"|format(kpis.descuentos / (kpis.ingresos + kpis.descuentos) * 100) }}% sobre ventas brutas
            {%- else -%}—{%- endif -%}
        </span>
    </div>
</div>

<div class="grid cols-4" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Citas atendidas</span>
        <span class="value">{{ kpis.citas_completadas }}</span>
        <span class="sub">de {{ kpis.citas_total }} agendadas</span>
    </div>
    <div class="card kpi">
        <span class="label">Tasa de cancelación</span>
        <span class="value" style="{{ 'color:var(--alerta);' if kpis.tasa_cancelacion > 15 }}">{{ kpis.tasa_cancelacion }}%</span>
    </div>
    <div class="card kpi">
        <span class="label">Clientes nuevos</span>
        <span class="value">{{ kpis.clientes_nuevos }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Valor del inventario</span>
        <span class="value">${{ "%.0f"|format(inv.valor) }}</span>
        <span class="sub" style="{{ 'color:var(--alerta);' if inv.bajo_stock > 0 }}">{{ inv.bajo_stock }} producto{{ "s" if inv.bajo_stock != 1 }} bajo stock</span>
    </div>
</div>

<!-- Gráfica de ventas por día -->
<div class="card" style="margin-bottom:22px;">
    <h2 style="font-size:18px; margin-bottom:16px;">Ingresos por día</h2>
    {% if ventas_dia %}
    <div class="chart-container">
        <canvas id="chartVentas"></canvas>
    </div>
    {% else %}
    <div class="empty-state"><div class="display">Sin ventas en este periodo</div></div>
    {% endif %}
</div>

<div class="grid cols-2" style="margin-bottom:22px;">
    <!-- Ventas por empleado -->
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Ventas por profesional</h2>
        {% if por_empleado %}
        {% set max_emp = por_empleado[0].total if por_empleado[0].total > 0 else 1 %}
        {% for e in por_empleado %}
        <div style="margin-bottom:12px;">
            <div style="display:flex; justify-content:space-between; font-size:13px;">
                <span><strong>{{ e.nombre }}</strong></span>
                <span class="mono">${{ "%.0f"|format(e.total) }}</span>
            </div>
            <div class="barra-horizontal">
                <div class="barra-fill" style="width:{{ (e.total / max_emp * 100)|round|int }}%"></div>
            </div>
            <div style="font-size:11px; color:var(--tinta-suave); margin-top:2px;">{{ e.n }} venta{{ "s" if e.n != 1 }}</div>
        </div>
        {% endfor %}
        {% else %}
        <div class="empty-state"><div class="display">Sin datos</div></div>
        {% endif %}
    </div>

    <!-- Top 10 items más vendidos -->
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Top productos y servicios</h2>
        {% if top %}
        <table class="tabla-fin">
            <thead><tr><th>Nombre</th><th>Tipo</th><th>Unidades</th><th>Ingresos</th></tr></thead>
            <tbody>
            {% for t in top %}
                <tr>
                    <td>{{ t.nombre }}</td>
                    <td><span class="badge-tipo {{ t.tipo }}">{{ t.tipo }}</span></td>
                    <td class="mono">{{ t.unidades }}</td>
                    <td class="mono">${{ "%.0f"|format(t.ingresos) }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin datos</div></div>
        {% endif %}
    </div>
</div>

<!-- Utilidad por categoría -->
<div class="card" style="margin-bottom:22px;">
    <h2 style="font-size:18px; margin-bottom:14px;">Utilidad por categoría</h2>
    {% if por_categoria %}
    {% set max_cat = por_categoria[0].ingresos if por_categoria[0].ingresos > 0 else 1 %}
    <table class="tabla-fin">
        <thead><tr><th>Categoría</th><th>Tipo</th><th>Ventas</th><th>Ingresos</th><th>Costo</th><th>Utilidad</th><th>Margen</th><th></th></tr></thead>
        <tbody>
        {% for c in por_categoria %}
            <tr>
                <td><strong>{{ c.categoria }}</strong></td>
                <td><span class="badge-tipo {{ c.tipo.lower() }}">{{ c.tipo }}</span></td>
                <td class="mono">{{ c.n }}</td>
                <td class="mono">${{ "%.0f"|format(c.ingresos) }}</td>
                <td class="mono">${{ "%.0f"|format(c.costo) }}</td>
                <td class="mono" style="color:var(--salvia); font-weight:700;">${{ "%.0f"|format(c.utilidad) }}</td>
                <td class="mono">{{ c.margen }}%</td>
                <td style="min-width:80px;">
                    <div class="barra-horizontal" style="height:8px;">
                        <div class="barra-fill" style="width:{{ (c.ingresos / max_cat * 100)|round|int }}%; background:{{ 'var(--salvia)' if c.tipo=='Servicio' else 'var(--terracota)' }};"></div>
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state"><div class="display">Sin ventas en este periodo</div></div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
{% if ventas_dia %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
const labels = {{ ventas_dia | map(attribute='dia') | list | tojson }};
const datos  = {{ ventas_dia | map(attribute='total') | list | tojson }};
const ctx = document.getElementById('chartVentas').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels,
        datasets: [{
            label: 'Ingresos',
            data: datos,
            backgroundColor: 'rgba(201,123,83,0.7)',
            borderColor: 'rgba(201,123,83,1)',
            borderWidth: 1,
            borderRadius: 5,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { callback: v => '$' + v.toLocaleString() }
            },
            x: { grid: { display: false } }
        }
    }
});
</script>
{% endif %}
{% endblock %}