{% extends "base.html" %}
{% set active = "clientes" %}
{% block title %}{{ cliente.nombre }} · ArcaBeauty Club{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow"><a href="{{ url_for('clientes_listado') }}">&larr; Clientes</a></div>
        <h1>{{ cliente.nombre }}</h1>
    </div>
    <button class="btn ghost" onclick="document.getElementById('modalEditar').classList.add('open')">Editar expediente</button>
</div>

<div class="grid cols-3" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Teléfono</span>
        <span class="value" style="font-size:18px;">{{ cliente.telefono or "—" }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Nivel de fidelidad</span>
        <span class="value" style="font-size:22px; color:{{ nivel.color }};">{{ nivel.nombre }}</span>
        <span class="sub">{{ cliente.puntos }} puntos disponibles &middot; {{ nivel.descuento }}% descuento automático</span>
    </div>
    <div class="card kpi">
        <span class="label">Cliente desde</span>
        <span class="value" style="font-size:18px;">{{ cliente.fecha_registro[:10] }}</span>
    </div>
</div>

{% if cliente.notas %}
<div class="card" style="margin-bottom:22px; background:var(--crema-oscuro); border:none;">
    <strong>Notas:</strong> {{ cliente.notas }}
</div>
{% endif %}

<div class="card" style="margin-bottom:22px;">
    <h2 style="font-size:18px; margin-bottom:6px;">Programa de fidelidad</h2>
    {% if nivel.siguiente %}
    <p style="font-size:13px; color:var(--tinta-suave); margin-bottom:14px;">
        Le faltan <strong>{{ nivel.faltan_para_siguiente }} puntos</strong> para alcanzar el nivel <strong>{{ nivel.siguiente }}</strong>.
    </p>
    {% else %}
    <p style="font-size:13px; color:var(--salvia); margin-bottom:14px;">¡Ya está en el nivel más alto!</p>
    {% endif %}

    <div class="grid cols-2" style="gap:24px;">
        <div>
            <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin-bottom:8px;">Código de referido</h3>
            <div class="search-box" style="max-width:none; justify-content:space-between;">
                <span class="mono" style="font-weight:700; color:var(--ciruela);">{{ cliente.codigo_referido or "—" }}</span>
                {% if cliente.codigo_referido %}
                <button class="btn ghost sm" onclick="navigator.clipboard.writeText('{{ cliente.codigo_referido }}'); mostrarToast('Código copiado');">Copiar</button>
                {% endif %}
            </div>
            <p style="font-size:12px; color:var(--tinta-suave); margin-top:6px;">Comparte este código: quien lo use al registrarse les da {{ 100 }} puntos a este cliente y 50 al nuevo.</p>

            {% if referidos %}
            <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:16px 0 8px;">Personas que ha referido</h3>
            <ul style="font-size:13px; padding-left:18px; margin:0;">
                {% for r in referidos %}<li><a href="{{ url_for('cliente_detalle', cliente_id=r.id) }}">{{ r.nombre }}</a></li>{% endfor %}
            </ul>
            {% endif %}
        </div>

        <div>
            <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin-bottom:8px;">Canjear puntos por una recompensa</h3>
            {% if recompensas %}
            {% for r in recompensas %}
            <form method="post" action="{{ url_for('cliente_canjear', cliente_id=cliente.id) }}" style="display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--crema-oscuro);">
                <input type="hidden" name="recompensa_id" value="{{ r.id }}">
                <div>
                    <div style="font-size:13px; font-weight:600; color:var(--ciruela);">{{ r.nombre }}</div>
                    <div style="font-size:11px; color:var(--tinta-suave);">{{ r.costo_puntos }} puntos</div>
                </div>
                <button type="submit" class="btn {{ 'accent' if cliente.puntos >= r.costo_puntos else 'ghost' }} sm" {{ 'disabled' if cliente.puntos < r.costo_puntos }}>Canjear</button>
            </form>
            {% endfor %}
            {% else %}
            <p style="font-size:13px; color:var(--tinta-suave);">Aún no hay recompensas configuradas. Crea una desde el panel de Fidelización.</p>
            {% endif %}

            {% if canjes_cliente %}
            <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:16px 0 8px;">Códigos de canje</h3>
            {% for c in canjes_cliente %}
            <div style="font-size:12px; display:flex; justify-content:space-between; padding:4px 0;">
                <span class="mono">{{ c.codigo }}</span>
                <span>{{ c.recompensa_nombre }}</span>
                <span class="badge {{ 'completada' if c.usado else 'confirmada' }}">{{ 'usado' if c.usado else 'disponible' }}</span>
            </div>
            {% endfor %}
            {% endif %}
        </div>
    </div>

    {% if historial_puntos %}
    <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:20px 0 8px;">Historial de puntos</h3>
    <table>
        <thead><tr><th>Fecha</th><th>Motivo</th><th>Puntos</th></tr></thead>
        <tbody>
        {% for h in historial_puntos %}
            <tr>
                <td class="mono">{{ h.fecha[:16] }}</td>
                <td>{{ h.motivo }}</td>
                <td class="mono" style="color:{{ 'var(--salvia)' if h.cambio > 0 else 'var(--alerta)' }}; font-weight:600;">{{ "+" if h.cambio > 0 }}{{ h.cambio }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% endif %}
</div>

<div class="grid cols-2">
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Historial de citas</h2>
        {% if historial_citas %}
        <table>
            <thead><tr><th>Fecha</th><th>Servicio</th><th>Profesional</th><th>Estado</th></tr></thead>
            <tbody>
            {% for h in historial_citas %}
                <tr>
                    <td class="mono">{{ h.fecha }} {{ h.hora_inicio }}</td>
                    <td>{{ h.servicio_nombre }}</td>
                    <td>{{ h.empleado_nombre }}</td>
                    <td><span class="badge {{ h.estado }}">{{ h.estado }}</span></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin citas registradas</div></div>
        {% endif %}
    </div>

    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Historial de compras</h2>
        {% if historial_compras %}
        <table>
            <thead><tr><th>Fecha</th><th>Productos/Servicios</th><th>Total</th></tr></thead>
            <tbody>
            {% for v in historial_compras %}
                <tr>
                    <td class="mono">{{ v.fecha[:10] }}</td>
                    <td>{{ v.detalle_compra or "—" }}</td>
                    <td class="mono">${{ "%.0f"|format(v.total) }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin compras registradas</div></div>
        {% endif %}
    </div>
</div>

<div class="modal-backdrop" id="modalEditar">
    <div class="modal">
        <button class="modal-close" onclick="document.getElementById('modalEditar').classList.remove('open')">&times;</button>
        <h2>Editar expediente</h2>
        <form method="post" action="{{ url_for('cliente_editar', cliente_id=cliente.id) }}">
            <div class="field"><label>Nombre completo</label><input type="text" name="nombre" value="{{ cliente.nombre }}" required></div>
            <div class="field"><label>Teléfono</label><input type="text" name="telefono" value="{{ cliente.telefono or '' }}"></div>
            <div class="field"><label>Correo</label><input type="email" name="email" value="{{ cliente.email or '' }}"></div>
            <div class="field"><label>Fecha de nacimiento</label><input type="date" name="fecha_nacimiento" value="{{ cliente.fecha_nacimiento or '' }}"></div>
            <div class="field"><label>Notas</label><textarea name="notas" rows="3">{{ cliente.notas or '' }}</textarea></div>
            <button type="submit" class="btn accent" style="width:100%;">Guardar cambios</button>
        </form>
    </div>
</div>
{% endblock %}