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

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow">Programa de lealtad</div>
        <h1>Fidelización</h1>
    </div>
</div>

<div class="grid cols-4" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Puntos otorgados (histórico)</span>
        <span class="value">{{ puntos_otorgados }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Canjes realizados</span>
        <span class="value">{{ canjes_realizados }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Clientes referidos</span>
        <span class="value">{{ referidos_total }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Niveles activos</span>
        <span class="value">{{ niveles|length }}</span>
    </div>
</div>

<div class="card" style="margin-bottom:22px;">
    <h2 style="font-size:18px; margin-bottom:14px;">Niveles del programa</h2>
    <table>
        <thead><tr><th>Nivel</th><th>Puntos acumulados mínimos</th><th>Descuento automático</th><th>Clientes en este nivel</th></tr></thead>
        <tbody>
        {% for n in niveles %}
            <tr>
                <td><span class="badge" style="background:{{ n.color }}22; color:{{ n.color }};">{{ n.nombre }}</span></td>
                <td class="mono">{{ n.minimo }}+</td>
                <td class="mono">{{ n.descuento }}%</td>
                <td class="mono">{{ conteo_niveles.get(n.nombre, 0) }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <p style="font-size:12px; color:var(--tinta-suave); margin-top:10px;">Los niveles se calculan sobre los puntos acumulados de por vida (no se pierden al canjear), y el descuento se aplica automáticamente al seleccionar al cliente en el punto de venta.</p>
</div>

<div class="grid cols-2" style="margin-bottom:22px;">
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Catálogo de recompensas</h2>
        {% if recompensas %}
        <table>
            <thead><tr><th>Recompensa</th><th>Costo</th><th>Beneficio</th><th></th></tr></thead>
            <tbody>
            {% for r in recompensas %}
                <tr style="{{ 'opacity:0.5;' if not r.activo }}">
                    <td>{{ r.nombre }}</td>
                    <td class="mono">{{ r.costo_puntos }} pts</td>
                    <td class="mono">{{ r.valor|int if r.tipo=='descuento_pct' else "$%.0f"|format(r.valor) }}{{ "%" if r.tipo=='descuento_pct' }}</td>
                    <td>
                        <form method="post" action="{{ url_for('recompensa_toggle', recompensa_id=r.id) }}">
                            <button type="submit" class="btn ghost sm">{{ "Desactivar" if r.activo else "Activar" }}</button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin recompensas todavía</div></div>
        {% endif %}

        <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:18px 0 8px;">Nueva recompensa</h3>
        <form method="post" action="{{ url_for('recompensa_crear') }}">
            <div class="field"><label>Nombre</label><input type="text" name="nombre" required placeholder="Ej. Manicure gratis"></div>
            <div class="field"><label>Descripción</label><input type="text" name="descripcion"></div>
            <div class="grid cols-2">
                <div class="field"><label>Costo en puntos</label><input type="number" name="costo_puntos" min="1" required></div>
                <div class="field"><label>Tipo de beneficio</label>
                    <select name="tipo">
                        <option value="descuento_pct">% de descuento</option>
                        <option value="descuento_fijo">Descuento en $</option>
                    </select>
                </div>
            </div>
            <div class="field"><label>Valor (% o $ según el tipo)</label><input type="number" name="valor" step="0.01" required></div>
            <button type="submit" class="btn accent" style="width:100%;">Crear recompensa</button>
        </form>
    </div>

    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Cupones promocionales</h2>
        {% if cupones %}
        <table>
            <thead><tr><th>Código</th><th>Beneficio</th><th>Usos</th><th></th></tr></thead>
            <tbody>
            {% for c in cupones %}
                <tr style="{{ 'opacity:0.5;' if not c.activo }}">
                    <td class="mono">{{ c.codigo }}</td>
                    <td class="mono">{{ c.valor|int if c.tipo=='porcentaje' else "$%.0f"|format(c.valor) }}{{ "%" if c.tipo=='porcentaje' }}</td>
                    <td class="mono">{{ c.usos_actuales }}{{ "/" + c.usos_maximos|string if c.usos_maximos else "" }}</td>
                    <td>
                        <form method="post" action="{{ url_for('cupon_toggle', cupon_id=c.id) }}">
                            <button type="submit" class="btn ghost sm">{{ "Desactivar" if c.activo else "Activar" }}</button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin cupones todavía</div></div>
        {% endif %}

        <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:18px 0 8px;">Nuevo cupón</h3>
        <form method="post" action="{{ url_for('cupon_crear') }}">
            <div class="field"><label>Código</label><input type="text" name="codigo" required placeholder="Ej. VERANO10" style="text-transform:uppercase;"></div>
            <div class="field"><label>Descripción</label><input type="text" name="descripcion" placeholder="Ej. Promoción de verano"></div>
            <div class="grid cols-2">
                <div class="field"><label>Tipo</label>
                    <select name="tipo">
                        <option value="porcentaje">% de descuento</option>
                        <option value="fijo">Descuento en $</option>
                    </select>
                </div>
                <div class="field"><label>Valor</label><input type="number" name="valor" step="0.01" required></div>
            </div>
            <div class="grid cols-2">
                <div class="field"><label>Vigente desde</label><input type="date" name="fecha_inicio"></div>
                <div class="field"><label>Vigente hasta</label><input type="date" name="fecha_fin"></div>
            </div>
            <div class="field"><label>Usos máximos (vacío = ilimitado)</label><input type="number" name="usos_maximos" min="1"></div>
            <button type="submit" class="btn accent" style="width:100%;">Crear cupón</button>
        </form>
    </div>
</div>

<div class="card">
    <h2 style="font-size:18px; margin-bottom:14px;">Top referidores</h2>
    {% if top_referidores %}
    <table>
        <thead><tr><th>Cliente</th><th>Personas referidas</th></tr></thead>
        <tbody>
        {% for r in top_referidores %}
            <tr>
                <td><a href="{{ url_for('cliente_detalle', cliente_id=r.id) }}">{{ r.nombre }}</a></td>
                <td class="mono">{{ r.total_referidos }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state"><div class="display">Todavía no hay referidos registrados</div></div>
    {% endif %}
</div>
{% endblock %}