{% extends "base.html" %}
{% set active = "dashboard" %}
{% block title %}Inicio · ArcaBeauty Club{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow">Resumen del día</div>
        <h1>Hola de nuevo &mdash; {{ hoy }}</h1>
    </div>
    <a href="{{ url_for('agenda') }}" class="btn accent">+ Nueva cita</a>
</div>

<div class="grid cols-4" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Citas de hoy</span>
        <span class="value">{{ citas_hoy|length }}</span>
        <span class="sub">en sucursal Centro</span>
    </div>
    <div class="card kpi">
        <span class="label">Ventas de hoy</span>
        <span class="value">${{ "%.0f"|format(ventas_hoy.total) }}</span>
        <span class="sub">{{ ventas_hoy.n }} ticket(s)</span>
    </div>
    <div class="card kpi">
        <span class="label">Clientes registrados</span>
        <span class="value">{{ clientes_total }}</span>
        <span class="sub">expediente digital</span>
    </div>
    <div class="card kpi">
        <span class="label">Reservas online pendientes</span>
        <span class="value">{{ citas_pendientes_online }}</span>
        <span class="sub">por confirmar</span>
    </div>
</div>

<div class="grid cols-2">
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Agenda de hoy</h2>
        {% if citas_hoy %}
        <table>
            <thead><tr><th>Hora</th><th>Cliente</th><th>Servicio</th><th>Profesional</th><th>Estado</th></tr></thead>
            <tbody>
            {% for c in citas_hoy %}
                <tr>
                    <td class="mono">{{ c.hora_inicio }}</td>
                    <td>{{ c.cliente_nombre }}</td>
                    <td>{{ c.servicio_nombre }}</td>
                    <td>{{ c.empleado_nombre }}</td>
                    <td><span class="badge {{ c.estado }}">{{ c.estado }}</span></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <div class="display">Sin citas todavía</div>
            <p>Cuando se agenden citas para hoy, aparecerán aquí.</p>
        </div>
        {% endif %}
    </div>

    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Alertas de inventario</h2>
        {% if stock_bajo %}
        <table>
            <thead><tr><th>Producto</th><th>Stock</th><th>Mínimo</th></tr></thead>
            <tbody>
            {% for p in stock_bajo %}
                <tr>
                    <td>{{ p.nombre }}</td>
                    <td class="mono" style="color:var(--alerta); font-weight:600;">{{ p.stock }}</td>
                    <td class="mono">{{ p.stock_minimo }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <div class="display">Inventario saludable</div>
            <p>Ningún producto está por debajo de su mínimo.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}