{% extends "base.html" %}
{% set active = "medicina" %}
{% block title %}Medicina Estética · ArcaBeauty Club{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow">Módulo Premium</div>
        <h1>Medicina Estética</h1>
    </div>
    <button class="btn accent" onclick="document.getElementById('modalNuevoExpediente').classList.add('open')">+ Nuevo expediente</button>
</div>

<div class="grid cols-3" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Expedientes activos</span>
        <span class="value">{{ total_expedientes }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Sesiones este mes</span>
        <span class="value">{{ sesiones_mes }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Consentimientos pendientes de firma</span>
        <span class="value" style="{{ 'color:var(--alerta);' if consentimientos_pendientes > 0 }}">{{ consentimientos_pendientes }}</span>
    </div>
</div>

<div class="grid cols-2" style="margin-bottom:22px;">
    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Expedientes</h2>
        {% if expedientes %}
        <table>
            <thead><tr><th>Paciente</th><th>Médico</th><th>Abierto</th><th></th></tr></thead>
            <tbody>
            {% for e in expedientes %}
                <tr>
                    <td>
                        <strong>{{ e.cliente_nombre }}</strong>
                        {% if e.embarazo %}<span class="badge pendiente" style="margin-left:6px;">Embarazo</span>{% endif %}
                        {% if e.anticoagulantes %}<span class="badge cancelada" style="margin-left:6px;">Anticoag.</span>{% endif %}
                    </td>
                    <td>{{ e.medico_nombre or "—" }}</td>
                    <td class="mono">{{ e.fecha_apertura }}</td>
                    <td><a href="{{ url_for('expediente_detalle', expediente_id=e.id) }}" class="btn ghost sm">Ver expediente</a></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin expedientes todavía</div></div>
        {% endif %}
    </div>

    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Tratamientos configurados</h2>
        {% if tratamientos %}
        <table>
            <thead><tr><th>Tratamiento</th><th>Duración</th><th>Precio</th></tr></thead>
            <tbody>
            {% for t in tratamientos %}
                <tr><td>{{ t.nombre }}</td><td class="mono">{{ t.duracion_min }} min</td><td class="mono">${{ "%.0f"|format(t.precio) }}</td></tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin tratamientos</div></div>
        {% endif %}

        <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:18px 0 8px;">Nuevo tratamiento</h3>
        <form method="post" action="{{ url_for('tratamiento_medico_crear') }}">
            <div class="field"><label>Nombre</label><input type="text" name="nombre" required></div>
            <div class="field"><label>Descripción</label><input type="text" name="descripcion"></div>
            <div class="grid cols-2">
                <div class="field"><label>Duración (min)</label><input type="number" name="duracion_min" value="30"></div>
                <div class="field"><label>Precio</label><input type="number" name="precio" step="0.01" value="0"></div>
            </div>
            <button type="submit" class="btn accent" style="width:100%;">Guardar tratamiento</button>
        </form>
    </div>
</div>

<div class="modal-backdrop" id="modalNuevoExpediente">
    <div class="modal">
        <button class="modal-close" onclick="document.getElementById('modalNuevoExpediente').classList.remove('open')">&times;</button>
        <h2>Nuevo expediente médico</h2>
        <form method="post" action="{{ url_for('expediente_crear') }}">
            <div class="field">
                <label>Buscar cliente</label>
                <input type="text" id="buscarClienteMed" placeholder="Nombre o teléfono..." autocomplete="off">
                <div id="resultadosClienteMed"></div>
                <input type="hidden" name="cliente_id" id="clienteIdMed" required>
                <div id="clienteSelMed" style="font-size:13px; color:var(--salvia); margin-top:4px;"></div>
            </div>
            <div class="field"><label>Alergias conocidas</label><input type="text" name="alergias" placeholder="Ej. Penicilina, látex..."></div>
            <div class="field"><label>Medicamentos actuales</label><input type="text" name="medicamentos"></div>
            <div class="field"><label>Enfermedades crónicas</label><input type="text" name="enfermedades"></div>
            <div class="field"><label>Cirugías previas</label><input type="text" name="cirugias_previas"></div>
            <div style="display:flex; gap:20px; margin-bottom:14px;">
                <label style="display:flex; align-items:center; gap:6px; font-weight:400; text-transform:none; font-size:13px;">
                    <input type="checkbox" name="embarazo" style="width:auto;"> Embarazo actual
                </label>
                <label style="display:flex; align-items:center; gap:6px; font-weight:400; text-transform:none; font-size:13px;">
                    <input type="checkbox" name="anticoagulantes" style="width:auto;"> Toma anticoagulantes
                </label>
            </div>
            <div class="field"><label>Notas del médico</label><textarea name="notas_medico" rows="2"></textarea></div>
            <button type="submit" class="btn accent" style="width:100%;">Abrir expediente</button>
        </form>
    </div>
</div>

<script>
document.getElementById('buscarClienteMed').addEventListener('input', function() {
    const q = this.value.trim();
    const box = document.getElementById('resultadosClienteMed');
    if (q.length < 2) { box.innerHTML = ''; return; }
    fetch('/api/clientes/buscar?q=' + encodeURIComponent(q))
        .then(r => r.json())
        .then(data => {
            box.innerHTML = data.map(c =>
                `<div class="card" style="padding:7px 10px; margin-top:4px; cursor:pointer;" onclick="selMedCliente(${c.id},'${c.nombre.replace(/'/g,'')}')">
                    <strong>${c.nombre}</strong> &middot; ${c.telefono || ''}
                </div>`
            ).join('') || '<div style="font-size:12px;color:var(--tinta-suave);margin-top:4px;">Sin resultados</div>';
        });
});
function selMedCliente(id, nombre) {
    document.getElementById('clienteIdMed').value = id;
    document.getElementById('clienteSelMed').textContent = 'Seleccionado: ' + nombre;
    document.getElementById('resultadosClienteMed').innerHTML = '';
    document.getElementById('buscarClienteMed').value = nombre;
}
</script>
{% endblock %}