{{-- Añadir log de hoy: la CATA (acción principal en seguimiento — el 90% cata a
     paladar) y las medidas/nota. Cualquiera despierta al mentor; la cata mueve la
     ventana. Se coloca ARRIBA en seguimiento porque pasado el montaje eso es lo que de
     verdad haces cada día. --}}
<div>
    <div class="fm-sectitle"><span>Añadir log de hoy</span></div>

    {{-- La cata: la acción principal en F1. Libre para todos (a paladar). Tras cortar
         (en 2F) se oculta —el acompañamiento diario de la 2F va aparte. Y no se
         propone hasta medio camino (progreso ≥50%): recién montada la tanda no
         hay nada que catar, sería invitar a abrir el tarro antes de tiempo. --}}
    <template x-if="b.en_f1 && (b.progress || 0) >= 50">
    <div>
    <button class="fm-card fm-card--tap fm-row" style="width:100%;text-align:left;margin-bottom:8px;" @click="openCata()">
        <span class="fm-glyph" style="width:38px;height:38px;border-radius:12px;background:var(--green-600);color:#fff;flex-shrink:0;"><i class="fa-solid fa-wine-glass"></i></span>
        <div style="flex:1;min-width:0;">
            <div class="fm-title" style="font-size:15px;">Catar</div>
            <div class="fm-muted" style="font-size:12px;margin-top:2px;">¿Cómo la notas hoy? El paladar es el juez.</div>
        </div>
        <i class="fa-solid fa-chevron-right" style="color:var(--text-muted);flex-shrink:0;"></i>
    </button>

    {{-- El formulario de cata: tres respuestas + pH opcional (Premium). --}}
    <template x-if="cata">
        <div class="fm-card fm-stack" style="gap:12px;margin-bottom:10px;">
            <div class="fm-eyebrow">¿Cómo la notas?</div>
            {{-- Los botones salen del modelo (b.catas): fuente única, no cableados. El
                 tono viene del efecto (lista = verde, se pasa = rojo). --}}
            <div style="display:flex;gap:8px;">
                <template x-for="c in (b.catas || [])" :key="c.codigo">
                    <button class="fm-btn" style="flex:1;padding:12px 4px;"
                            :class="c.tono === 'listo' ? 'fm-btn--green' : 'fm-btn--soft'"
                            :style="c.tono === 'urge' ? { color: 'var(--rust-500)' } : {}"
                            @click="enviarCata(c.codigo)" :disabled="busy" x-text="c.frase"></button>
                </template>
            </div>
            {{-- pH plegado, solo Premium (mide el 10%; su número calibra el bucle 2). --}}
            <template x-if="user && user.is_premium">
                <div class="fm-stack" style="gap:8px;">
                    <button type="button" @click="cata.phOpen = !cata.phOpen" style="background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0;">
                        <span class="fm-muted" style="font-size:13px;">¿Mediste el pH? (opcional)</span>
                        <i class="fa-solid" :class="cata.phOpen ? 'fa-chevron-up' : 'fa-chevron-down'" style="color:var(--ink-400);font-size:12px;"></i>
                    </button>
                    <template x-if="cata.phOpen">
                        <input class="fm-input fm-data" type="number" inputmode="decimal" step="0.1" min="0" max="14" x-model="cata.ph" placeholder="pH, p. ej. 3,2">
                    </template>
                </div>
            </template>
            <button class="fm-btn--ghost" style="text-align:center;" @click="cata=null">Cancelar</button>
            <p x-show="logError" x-cloak x-text="logError" style="margin:0;color:var(--rust-500);font:500 12px var(--font-sans);"></p>
        </div>
    </template>

    {{-- La respuesta del mentor a la cata (efímera: se muestra ahora, no se guarda). --}}
    <template x-if="mentorMsg">
        <div class="fm-card" style="margin-bottom:10px;" :style="{ borderLeft: '3px solid ' + (mentorMsg.urgencia === 'urgente' ? 'var(--rust-500)' : 'var(--green-600)') }">
            <div class="fm-eyebrow" style="margin-bottom:4px;" :style="{ color: mentorMsg.urgencia === 'urgente' ? 'var(--rust-500)' : 'var(--green-700)' }">El mentor</div>
            <p style="margin:0;font:500 14px/1.55 var(--font-sans);color:var(--text-primary);" x-text="mentorMsg.mensaje"></p>
        </div>
    </template>
    </div>
    </template>

    {{-- El despertador: «avísame para volver a catar». Tras catar, la decisión suele
         ser «mañana» o «en 12 h» (kéfir): un aviso a la hora que el usuario elige,
         que suena en la campana de la app y por correo. Uno por lote; el nuevo
         sustituye al pendiente. Se abre solo tras una cata sin aviso puesto.
         SOLO PREMIUM (decisión 2026-08-29): al plan gratuito no se le enseña. --}}
    <template x-if="b.status === 'active' && user && user.is_premium">
    <div class="fm-card fm-stack" style="gap:10px;margin-bottom:10px;" :style="recordatorio ? { borderColor: 'var(--gold-400)' } : {}">
        <div class="fm-row" style="justify-content:space-between;align-items:center;gap:8px;">
            <div class="fm-row" style="gap:10px;min-width:0;">
                <span class="fm-glyph" style="width:34px;height:34px;flex-shrink:0;border-radius:11px;background:var(--gold-100);color:var(--gold-700);"><i class="fa-regular fa-bell"></i></span>
                <div style="min-width:0;">
                    <div class="fm-title" style="font-size:14.5px;">Avísame para catar</div>
                    <div class="fm-muted" style="font-size:12px;margin-top:1px;" x-text="recordatorio ? ('Programado: ' + fmtCuando(recordatorio.scheduled_at, true)) : 'Un aviso a la hora que elijas.'"></div>
                </div>
            </div>
            <template x-if="recordatorio"><button type="button" class="fm-btn--ghost" style="font-size:12.5px;color:var(--rust-500);flex-shrink:0;" @click="quitarAviso()" :disabled="busy">Quitar</button></template>
            <template x-if="!recordatorio"><button type="button" class="fm-btn--ghost" style="font-size:12.5px;flex-shrink:0;" @click="avisoOpen = !avisoOpen" x-text="avisoOpen ? 'Cerrar' : 'Elegir'"></button></template>
        </div>
        <template x-if="avisoOpen && !recordatorio">
            <div class="fm-stack" style="gap:8px;">
                <div style="display:flex;gap:6px;flex-wrap:wrap;">
                    <template x-for="o in opcionesAviso" :key="o.h">
                        <button type="button" class="fm-chip" style="flex:1 1 40%;min-height:38px;font-size:13.5px;padding:8px 10px;" @click="programarAviso({ en_horas: o.h })" :disabled="busy" x-text="o.label"></button>
                    </template>
                </div>
                <div class="fm-row" style="gap:8px;">
                    <input class="fm-input" type="datetime-local" x-model="avisoAt" style="flex:1;min-width:0;" aria-label="Elegir fecha y hora">
                    <button type="button" class="fm-btn fm-btn--gold" style="padding:10px 14px;flex:0 0 auto;" @click="programarAvisoAt()" :disabled="busy || !avisoAt">Avisar</button>
                </div>
                <p x-show="avisoError" x-cloak x-text="avisoError" style="margin:0;color:var(--rust-500);font:500 12px var(--font-sans);"></p>
            </div>
        </template>
        <p x-show="avisoError && !avisoOpen" x-cloak x-text="avisoError" style="margin:0;color:var(--rust-500);font:500 12px var(--font-sans);"></p>
    </div>
    </template>

    {{-- Nota y medidas: el otro registro del día (también en 2F). --}}
    <div style="display:flex;gap:8px;">
        <template x-for="c in chips" :key="c.type">
            <button class="fm-card fm-card--tap" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;" @click="openLog(c)">
                <span class="fm-glyph" :style="'width:34px;height:34px;border-radius:12px;background:' + c.bg + ';color:' + c.tone"><i class="fa-solid" :class="c.icon"></i></span>
                <span style="font:600 12px var(--font-sans);color:var(--text-secondary);" x-text="c.label"></span>
            </button>
        </template>
    </div>
    <template x-if="log">
        <div class="fm-card fm-stack" style="gap:10px;margin-top:10px;">
            <div class="fm-eyebrow" x-text="'Registrar · ' + log.label"></div>
            <template x-if="log.type !== 'note'"><input class="fm-input fm-data" type="number" inputmode="decimal" x-model="log.value" :placeholder="log.unit || '0'"></template>
            <template x-if="log.type === 'note'"><textarea class="fm-input" rows="2" x-model="log.notes" placeholder="Huele fresco-ácido, burbujas finas…"></textarea></template>
            <div style="display:flex;gap:8px;">
                <button class="fm-btn fm-btn--soft" style="flex:0 0 auto;" @click="log=null">Cancelar</button>
                <button class="fm-btn fm-btn--gold" style="flex:1;" @click="saveLog()" :disabled="busy">Guardar</button>
            </div>
            <p x-show="logError" x-cloak x-text="logError" style="margin:0;color:var(--rust-500);font:500 12px var(--font-sans);"></p>
        </div>
    </template>
</div>