@extends('layouts.mobile')

@section('title', 'Lote')
@section('back', route('catalogue') . '#lotes')
@section('back-history', '1')
@section('app-eyebrow', 'Lote')
@section('app-title', 'Seguimiento')

@section('content')
<div class="fm-pad fm-stack" x-data="asistente('{{ $batchId }}')" x-init="load()">

    <template x-if="loading"><div class="fm-skel" style="height:160px;"></div></template>
    <template x-if="error"><div class="fm-empty">No pudimos cargar el lote. <a href="{{ route('plan') }}" class="fm-btn--ghost">Volver</a></div></template>

    <template x-if="b">
        <div class="fm-stack">
            {{-- Header ring --}}
            <div style="display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:4px 0;">
                <span class="fm-ring" :style="ringStyle()">
                    <span style="text-align:center;"><span style="font-size:30px;" x-text="b.progress + '%'"></span><br><span style="font-size:11px;color:var(--text-muted);" x-text="'día ' + b.current_day"></span></span>
                </span>

                {{-- Nombre con rename inline (como en la web) --}}
                <template x-if="!renaming">
                    <button @click="startRename()" style="display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:0;max-width:100%;" aria-label="Renombrar lote">
                        <span class="fm-title" style="font-size:22px;min-width:0;overflow:hidden;text-overflow:ellipsis;" x-text="b.name"></span>
                        <i class="fa-solid fa-pen" style="flex-shrink:0;font-size:13px;color:var(--ink-300);"></i>
                    </button>
                </template>
                <template x-if="renaming">
                    <div class="fm-stack" style="gap:8px;width:100%;max-width:300px;">
                        <input class="fm-input" id="fmRenameInput" x-model="renameVal" maxlength="100" @keydown.enter="saveRename()" @keydown.escape="renaming = false" x-ref="renameInput">
                        <div style="display:flex;gap:8px;">
                            <button class="fm-btn fm-btn--soft" style="flex:0 0 auto;padding:10px 14px;" @click="renaming = false">Cancelar</button>
                            <button class="fm-btn fm-btn--gold" style="flex:1;padding:10px 14px;" @click="saveRename()" :disabled="busy || !renameVal.trim()">Guardar</button>
                        </div>
                        <p x-show="renameError" x-cloak x-text="renameError" style="margin:0;color:var(--rust-500);font:500 12px var(--font-sans);"></p>
                    </div>
                </template>

                {{-- Estado + salto al paso activo: el chip "Paso N" baja a la vista del
                     paso en curso (mismo anchor que scrollToActiveStep tras completar). --}}
                <div class="fm-row" style="gap:8px;justify-content:center;flex-wrap:wrap;">
                    <span class="fm-pill" :class="'fm-pill--' + b.status" x-text="statusLabel(b.status)"></span>
                    <template x-if="b.status === 'active' && activeStep">
                        <button type="button" @click="scrollToActiveStep()"
                                style="border:none;cursor:pointer;border-radius:999px;padding:3px 12px;background:var(--gold-100);color:var(--gold-700);font:700 12px var(--font-sans);display:inline-flex;align-items:center;gap:6px;">
                            <span x-text="'Paso ' + activeStep.step_number"></span>
                            <i class="fa-solid fa-arrow-down-long" style="font-size:11px;"></i>
                        </button>
                    </template>
                </div>

                {{-- Los datos de la tanda a un vistazo: CUÁNDO empezó (con hora si es
                     un fermento de horas — un kéfir montado a las 21:00 no es el de
                     las 8:00), CUÁNTA se preparó (el paso 1 enseña los ingredientes
                     totales, pero no decía si eran para 3 L o para 10) y de qué receta. --}}
                <template x-if="b.status !== 'draft'">
                    <div class="fm-row" style="gap:6px;justify-content:center;flex-wrap:wrap;margin-top:2px;">
                        <span class="fm-badge fm-badge--neutral" style="gap:5px;"><i class="fa-regular fa-circle-play"></i><span x-text="inicioTexto"></span></span>
                        <template x-if="b.target_yield">
                            <span class="fm-badge fm-badge--neutral" style="gap:5px;"><i class="fa-solid fa-jar"></i><span x-text="cantidadTexto"></span></span>
                        </template>
                        <template x-if="b.recipe">
                            <a :href="'/lotes/' + id + '/bitacora'" class="fm-badge fm-badge--neutral" style="gap:5px;text-decoration:none;"><i class="fa-solid fa-scroll"></i><span x-text="b.recipe.name"></span></a>
                        </template>
                    </div>
                </template>
            </div>

            {{-- La predicción del motor: la ventana [lo,hi] como portada de la tanda
                 viva. Es la específica de ESTA tanda (contra la horquilla general de la
                 guía), por eso gana la portada. La guía queda en los rangos de los pasos. --}}
            <template x-if="b.forecast && b.en_f1">
                <div class="fm-card" style="border:1px solid var(--green-200);background:var(--green-050);">
                    <div class="fm-row" style="gap:10px;align-items:flex-start;">
                        <span class="fm-glyph" style="width:34px;height:34px;flex-shrink:0;border-radius:11px;background:var(--green-600);color:#fff;"><i class="fa-solid fa-wand-magic-sparkles" style="font-size:13px;"></i></span>
                        <div style="flex:1;min-width:0;">
                            <div class="fm-eyebrow" style="color:var(--green-700);margin-bottom:3px;">Predicción</div>
                            <div class="fm-title" style="font-size:16px;" x-text="ventanaTexto"></div>
                            {{-- El consejo vigente, derivado de la ventana contra hoy (se regenera). --}}
                            <div x-show="b.forecast.consejo" x-cloak style="margin-top:8px;padding-top:8px;border-top:1px solid var(--green-200);">
                                <p style="margin:0;font:600 13.5px/1.5 var(--font-sans);"
                                   :style="{ color: b.forecast.urgencia === 'urgente' ? 'var(--rust-500)' : (b.forecast.urgencia === 'listo' ? 'var(--green-700)' : 'var(--text-secondary)') }"
                                   x-text="b.forecast.consejo"></p>
                                <div class="fm-muted" style="font-size:11.5px;margin-top:3px;" x-show="b.forecast.origen === 'cata'" x-cloak>Ajustada por tu última cata.</div>
                                {{-- El consejo y la ACCIÓN juntos: si puede cortar, el gesto está aquí
                                     mismo (lo que separa un mentor de un cartel). --}}
                                <template x-if="(b.forecast.urgencia === 'listo' || b.forecast.urgencia === 'urgente') && b.en_f1">
                                    <a :href="'/lotes/' + id + '/cortar'" class="fm-btn fm-btn--gold fm-btn--block" style="margin-top:10px;"><i class="fa-solid fa-scissors"></i> Cortar y preparar la 2F</a>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            {{-- En seguimiento (paso >1): el log arriba. Pasado el montaje, lo que
                 haces cada día es catar y medir, no avanzar pasos. --}}
            <template x-if="enSeguimiento">
                @include('mobile.partials._quicklog')
            </template>

            {{-- La bitácora vive en su propia página (puede crecer): aquí solo el
                 acceso, bajo los botones de medir. SIEMPRE visible — esconderla
                 sin registros hacía creer que no existía (correctura 10-ago), y
                 la página ya trae su estado vacío. Igual que en el resumen. --}}
            <a :href="'/lotes/' + id + '/bitacora'" class="fm-card fm-card--tap fm-row" style="text-decoration:none;">
                <span class="fm-glyph" style="width:38px;height:38px;border-radius:12px;background:var(--paper-2);color:var(--ink-500);flex-shrink:0;"><i class="fa-solid fa-book"></i></span>
                <div style="flex:1;min-width:0;">
                    <div class="fm-title" style="font-size:15px;">Bitácora</div>
                    <div class="fm-muted" style="font-size:12.5px;margin-top:2px;" x-text="(b.daily_logs && b.daily_logs.length) ? (b.daily_logs.length + ' día' + (b.daily_logs.length > 1 ? 's' : '') + ' con registro') : 'Medidas y notas del día a día'"></div>
                </div>
                <i class="fa-solid fa-chevron-right" style="color:var(--text-muted);flex-shrink:0;"></i>
            </a>

            {{-- El acceso al corte vive en la portada de predicción (aparece cuando la
                 tanda está lista, por ventana o por cata) — consejo y acción juntos. --}}

            {{-- Ingredientes generales: los de la receta que no van ligados a un paso concreto --}}
            <template x-if="generalIngredients.length">
                <div>
                    <div class="fm-sectitle"><span>Ingredientes</span><span class="fm-badge fm-badge--neutral" x-show="b.target_yield" x-text="'para ' + cantidadTexto"></span></div>
                    <div class="fm-card fm-stack" style="gap:6px;">
                        <template x-for="i in generalIngredients" :key="i.id">
                            <div class="fm-row" style="justify-content:space-between;gap:10px;">
                                <span style="font-size:13.5px;color:var(--text-primary);" x-text="i.name"></span>
                                <span class="fm-data" style="font-size:13px;font-weight:700;color:var(--green-700);flex-shrink:0;" x-text="i.display"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </template>

            {{-- Pasos --}}
            <div>
                <div class="fm-sectitle"><span>Pasos</span></div>
                <div class="fm-stack" style="gap:10px;">
                    <template x-for="s in b.steps" :key="s.id">
                        <div class="fm-card" :id="'paso-' + s.step_number" style="scroll-margin-top:10px;"
                             :style="s.status === 'active' ? { borderColor: 'var(--gold-400)' } : (s.status === 'completed' ? { background: 'var(--paper-1)' } : {})">
                            <div class="fm-row" style="align-items:flex-start;gap:12px;"
                                 :style="s.status === 'completed' && ingredientsForStep(s.id).length ? { cursor: 'pointer' } : {}"
                                 @click="s.status === 'completed' && ingredientsForStep(s.id).length && toggleStep(s.id)">
                                <span class="fm-data" :style="numStyle(s)">
                                    <template x-if="s.status === 'completed'"><i class="fa-solid fa-check"></i></template>
                                    <template x-if="s.status !== 'completed'"><span x-text="s.step_number"></span></template>
                                </span>
                                <div style="flex:1;min-width:0;">
                                    <div class="fm-title" style="font-size:16px;" x-text="s.title"></div>
                                    <div class="fm-muted fm-data" style="font-size:11px;margin-top:2px;" x-show="s.min_day !== null" x-text="dayRange(s)"></div>
                                    {{-- Cuándo se hizo, con hora: en un fermento de horas es el dato. --}}
                                    <div class="fm-muted fm-data" style="font-size:11px;margin-top:2px;color:var(--green-700);" x-show="s.status === 'completed' && s.completed_at" x-text="'Hecho ' + fmtCuando(s.completed_at, true)"></div>

                                    <template x-if="ingredientsForStep(s.id).length && stepOpen(s)">
                                        <div class="fm-stack" style="gap:4px;margin-top:10px;background:var(--paper-1);border-radius:var(--radius-md);padding:10px 12px;">
                                            <div class="fm-muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.04em;" x-show="b.target_yield" x-text="'Para ' + cantidadTexto"></div>
                                            <template x-for="i in ingredientsForStep(s.id)" :key="i.id">
                                                <div class="fm-row" style="justify-content:space-between;gap:10px;">
                                                    <span style="font-size:13px;color:var(--text-primary);" x-text="i.name"></span>
                                                    <span class="fm-data" style="font-size:12.5px;font-weight:700;color:var(--green-700);flex-shrink:0;" x-text="i.display"></span>
                                                </div>
                                            </template>
                                        </div>
                                    </template>

                                    <template x-if="s.status === 'active'">
                                        <div style="margin-top:8px;">
                                            <div class="fm-muted" style="font-size:13.5px;line-height:1.5;" x-text="s.description"></div>

                                            {{-- Los consejos del paso, escritos para este
                                                 momento exacto de la guía. Sólo en el paso
                                                 activo, como en el panel: un consejo de
                                                 «prepara el té» no pinta nada cuando ya
                                                 estás embotellando. --}}
                                            {{-- Los consejos, DE UNO EN UNO: siete seguidos no se leen. Como
                                                 mucho tres por paso (al azar si hay más) y se pasa al siguiente
                                                 con un swipe o con las flechas. Misma forma que en el panel
                                                 (`stepcard__hint`): bombilla + título en negrita. --}}
                                            <template x-if="pistasDe(s).length">
                                                <div style="margin-top:12px;" @touchstart.passive="swipeStart($event)" @touchend.passive="swipeEnd($event, s)">
                                                    <template x-for="(h, hi) in pistasDe(s)" :key="hi">
                                                        <div x-show="pistaIdx(s) === hi" class="fm-row" style="align-items:flex-start;gap:8px;background:var(--paper-1);border-left:3px solid var(--gold-400);border-radius:var(--radius-md);padding:10px 12px;">
                                                            <i class="fa-solid fa-lightbulb" style="color:var(--gold-400);font-size:13px;flex-shrink:0;margin-top:2px;"></i>
                                                            <span class="fm-muted" style="font-size:13px;line-height:1.5;flex:1;min-width:0;">
                                                                <template x-if="h.title"><strong style="color:var(--text-primary);" x-text="h.title + '. '"></strong></template>
                                                                <span x-text="h.content"></span>
                                                            </span>
                                                        </div>
                                                    </template>
                                                    <template x-if="pistasDe(s).length > 1">
                                                        <div class="fm-row" style="justify-content:space-between;align-items:center;margin-top:6px;">
                                                            <button type="button" @click="pistaMover(s, -1)" aria-label="Consejo anterior" style="border:none;background:none;cursor:pointer;color:var(--ink-400);padding:4px 8px;"><i class="fa-solid fa-chevron-left"></i></button>
                                                            <div style="display:flex;gap:5px;align-items:center;">
                                                                <template x-for="(h, di) in pistasDe(s)" :key="'d' + di">
                                                                    <span style="width:6px;height:6px;border-radius:50%;" :style="{ background: pistaIdx(s) === di ? 'var(--gold-500)' : 'var(--paper-3)' }"></span>
                                                                </template>
                                                                <span class="fm-muted" style="font-size:11px;margin-left:4px;" x-text="(pistaIdx(s) + 1) + '/' + pistasDe(s).length"></span>
                                                            </div>
                                                            <button type="button" @click="pistaMover(s, 1)" aria-label="Siguiente consejo" style="border:none;background:none;cursor:pointer;color:var(--ink-400);padding:4px 8px;"><i class="fa-solid fa-chevron-right"></i></button>
                                                        </div>
                                                    </template>
                                                </div>
                                            </template>
                                            <div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;">
                                                <button class="fm-btn fm-btn--gold" :style="'padding:11px 16px;' + (s.min_day !== null && b.current_day < s.min_day ? 'opacity:0.55;' : '')" @click="advance(s)" :disabled="busy"><i class="fa-solid fa-check"></i> Completar paso</button>
                                                <template x-if="s.is_optional"><button class="fm-btn fm-btn--soft" style="padding:11px 16px;" @click="skip()" :disabled="busy">Saltar</button></template>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                                {{-- Chevron de plegado: solo en pasos completados con detalle. --}}
                                <template x-if="s.status === 'completed' && ingredientsForStep(s.id).length">
                                    <i class="fa-solid" :class="expanded[s.id] ? 'fa-chevron-up' : 'fa-chevron-down'" style="color:var(--ink-400);font-size:13px;flex-shrink:0;margin-top:3px;"></i>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Quick log al pie: solo en el montaje (paso 1); en seguimiento sube arriba. --}}
            <template x-if="b.status === 'active' && !enSeguimiento">
                <div>
                    <div class="fm-sectitle"><span>Añadir log de hoy</span></div>
                    <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>
            </template>

            {{-- Otras acciones --}}
            <template x-if="b.status === 'active' || b.status === 'paused'">
                <div class="fm-stack" style="gap:8px;">
                    <div class="fm-sectitle"><span>Otras acciones</span></div>
                    <template x-if="b.status === 'active'"><button class="fm-btn fm-btn--soft fm-btn--block" :disabled="busy" @click="pause()"><i class="fa-solid fa-pause"></i> Pausar lote</button></template>
                    <template x-if="b.status === 'paused'"><button class="fm-btn fm-btn--soft fm-btn--block" :disabled="busy" @click="resume()"><i class="fa-solid fa-play"></i> Reanudar lote</button></template>
                    <button class="fm-btn fm-btn--block" style="background:transparent;color:var(--rust-500);" :disabled="busy" @click="discard()"><i class="fa-solid fa-xmark"></i> Descartar lote</button>
                    <p x-show="actionError" x-cloak x-text="actionError" style="margin:0;color:var(--rust-500);font:500 13px/1.4 var(--font-sans);text-align:center;"></p>
                </div>
            </template>
        </div>
    </template>

    {{-- Flecha "subir": sticky al final del flujo — flota a la derecha durante
         el scroll y, al llegar abajo del todo, se asienta en su propia fila
         DEBAJO de "Descartar lote" (no lo tapa ni roba su tap). --}}
    <button x-show="showTop" x-cloak @click="toTop()" aria-label="Subir arriba"
            style="position:sticky;bottom:14px;margin:10px 0 0 auto;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:var(--green-700);color:#fff;box-shadow:var(--shadow-lg);z-index:30;padding:0;line-height:44px;text-align:center;">
        <i class="fa-solid fa-arrow-up" style="font-size:16px;"></i>
    </button>
</div>
@endsection

@push('scripts')
<script>
function asistente(id) {
    return {
        id, loading: true, error: false, busy: false, b: null,
        user: window.fmUser(),
        log: null, logError: '', actionError: '',
        cata: null, mentorMsg: null,   // bucle 1: la cata y la respuesta del mentor
        renaming: false, renameVal: '', renameError: '',
        showTop: false, scroller: null,
        expanded: {},   // pasos completados que el usuario ha desplegado a mano
        pistas: {}, pistaI: {}, swipeX: null,   // consejos elegidos por paso (≤3, al azar) + cuál se ve
        recordatorio: null, avisoOpen: false, avisoAt: '', avisoError: '',   // «avísame para volver a catar»
        chips: [
            { type: 'note', label: 'Nota', icon: 'fa-pen', tone: 'var(--green-600)', bg: 'var(--green-050)' },
            { type: 'ph', label: 'pH', icon: 'fa-droplet', tone: 'var(--lime-600)', bg: 'var(--lime-100)' },
            { type: 'temperature', label: 'Temp', icon: 'fa-temperature-half', tone: 'var(--gold-600)', bg: 'var(--gold-100)', unit: '°C' },
            // «Azúcar» (°Bx) en vez de acidez: en obrador pequeño se mide Brix —
            // con el inicial y el final sale el ABV estimado. La acidez
            // titulable volverá como herramienta Pro/Scale.
            { type: 'brix', label: 'Azúcar', icon: 'fa-cubes-stacked', tone: 'var(--teal-500)', bg: 'var(--teal-100)', unit: '°Bx' },
        ],
        async load() {
            // Flecha "subir": visible a partir de ~300 px de scroll del contenedor.
            this.scroller = this.$el.closest('.fm-screen');
            if (this.scroller) {
                this.scroller.addEventListener('scroll', () => {
                    this.showTop = this.scroller.scrollTop > 300;
                }, { passive: true });
            }
            if (!window.fmRequireAuth(location.pathname)) { this.loading = false; return; }
            try {
                this.b = (await window.FermentyAPI.batch(this.id)).data;
                this.recordatorio = this.b.recordatorio || null;
            }
            catch (e) { this.error = true; }
            this.loading = false;
        },
        toTop() { if (this.scroller) this.scroller.scrollTo({ top: 0, behavior: 'smooth' }); },
        // Fecha (y hora) en local: «28 ago» o «28 ago, 08:15». La API manda UTC.
        fmtCuando(iso, conHora) {
            if (!iso) return '';
            const d = new Date(iso);
            const f = d.toLocaleDateString('es-ES', { day: 'numeric', month: 'short' });
            return conHora ? f + ', ' + d.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' }) : f;
        },
        // El inicio con hora solo en fermentos de horas: en una kombucha de 10 días la hora es ruido.
        get inicioTexto() { return 'Inicio ' + this.fmtCuando(this.b?.started_at || this.b?.start_date, !!this.b?.es_rapido); },
        get cantidadTexto() {
            const y = this.b?.target_yield; if (!y) return '';
            return y.value.toLocaleString('es-ES', { maximumFractionDigits: 2 }) + ' ' + (y.unit || '');
        },
        // Consejos del paso: como mucho TRES, al azar si hay más, elegidos una vez
        // por paso (no cambian al refrescar `b` tras una acción).
        pistasDe(s) {
            if (!this.pistas[s.id]) {
                const all = (s.hints || []).slice();
                if (all.length > 3) {
                    for (let i = all.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [all[i], all[j]] = [all[j], all[i]]; }
                }
                this.pistas[s.id] = all.slice(0, 3);
            }
            return this.pistas[s.id];
        },
        pistaIdx(s) { return this.pistaI[s.id] || 0; },
        pistaMover(s, d) { const n = this.pistasDe(s).length; if (!n) return; this.pistaI[s.id] = ((this.pistaIdx(s) + d) % n + n) % n; },
        swipeStart(e) { this.swipeX = e.changedTouches[0].clientX; },
        swipeEnd(e, s) {
            if (this.swipeX === null) return;
            const dx = e.changedTouches[0].clientX - this.swipeX; this.swipeX = null;
            if (Math.abs(dx) > 40) this.pistaMover(s, dx < 0 ? 1 : -1);
        },
        // El despertador: atajos según el ritmo del fermento (horas en kéfir, días en kombucha).
        get opcionesAviso() {
            return this.b?.es_rapido
                ? [{ h: 4, label: 'En 4 h' }, { h: 8, label: 'En 8 h' }, { h: 12, label: 'En 12 h' }, { h: 24, label: 'Mañana a esta hora' }]
                : [{ h: 12, label: 'En 12 h' }, { h: 24, label: 'Mañana a esta hora' }, { h: 48, label: 'En 2 días' }];
        },
        async programarAviso(payload) {
            this.busy = true; this.avisoError = '';
            try {
                const r = await window.FermentyAPI.recordatorio(this.id, payload);
                this.recordatorio = r.data; this.avisoOpen = false; this.avisoAt = '';
            } catch (e) { this.avisoError = (e.data && (e.data.message || (e.data.errors?.at || [])[0])) || 'No se pudo programar el aviso.'; }
            this.busy = false;
        },
        programarAvisoAt() {
            if (!this.avisoAt) return;
            // datetime-local es hora LOCAL sin zona: se manda como instante ISO (UTC).
            this.programarAviso({ at: new Date(this.avisoAt).toISOString() });
        },
        async quitarAviso() {
            if (!this.recordatorio) return;
            this.busy = true; this.avisoError = '';
            try { await window.FermentyAPI.cancelarRecordatorio(this.id, this.recordatorio.id); this.recordatorio = null; }
            catch (e) { this.avisoError = 'No se pudo quitar el aviso.'; }
            this.busy = false;
        },
        // Ingredientes ya escalados al tamaño de lote elegido (BatchService los
        // congela en la creación); agrupados por el paso al que pertenecen.
        get generalIngredients() { return (this.b?.ingredients || []).filter(i => !i.batch_step_id); },
        // En seguimiento = activa y pasado el montaje (el paso 1 ya está hecho o
        // saltado). Ahí el log sube arriba: lo diario es catar y medir.
        get enSeguimiento() {
            if (!this.b || this.b.status !== 'active') return false;
            const s1 = (this.b.steps || []).find(s => s.step_number === 1);
            return s1 ? ['completed', 'skipped'].includes(s1.status) : false;
        },
        ingredientsForStep(stepId) { return (this.b?.ingredients || []).filter(i => i.batch_step_id === stepId); },
        get activeStep() { return (this.b?.steps || []).find(s => s.status === 'active') || null; },
        // La ventana del motor en fechas: «Lista sobre el 12–16 ago».
        get ventanaTexto() {
            const f = this.b?.forecast; if (!f || !f.ventana_fechas) return '';
            const fmt = d => new Date(d).toLocaleDateString('es-ES', { day: 'numeric', month: 'short' });
            const [a, z] = f.ventana_fechas;
            return 'Lista sobre el ' + (a === z ? fmt(a) : fmt(a) + ' – ' + fmt(z));
        },
        // Un paso completado nace colapsado (su detalle ya se hizo); se despliega al tocar.
        toggleStep(id) { this.expanded[id] = ! this.expanded[id]; },
        stepOpen(s) { return s.status !== 'completed' || !! this.expanded[s.id]; },
        // Tras completar/saltar, lleva el paso activo nuevo a la vista (evita el scroll manual).
        scrollToActiveStep() {
            const act = (this.b?.steps || []).find(s => s.status === 'active');
            const el = act && document.getElementById('paso-' + act.step_number);
            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        },
        // OJO: :style con string REEMPLAZA el atributo style estático (no fusiona) → el string lleva también la base.
        ringStyle() {
            const color = this.b.ferment_type?.category?.color || 'var(--gold-500)';
            return `--sz:120px;--thick:8px;--pct:${this.b.progress || 0};--tone:${color};`;
        },
        numStyle(s) {
            const base = 'width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;';
            if (s.status === 'completed') return base + 'background:var(--green-050);color:var(--green-700);';
            if (s.status === 'active') return base + 'background:var(--gold-500);color:var(--green-900);';
            return base + 'background:transparent;border:1.5px solid var(--border-default);color:var(--ink-400);';
        },
        dayRange(s) {
            // La ventana horaria del motor manda sobre el día de la plantilla: en un
            // fermento de 48 h, dulce, equilibrado y seco caían todos en «Día 2».
            if (s.min_horas !== null && s.min_horas !== undefined) {
                const h = n => Math.round(n) + ' h';
                return (s.max_horas !== null && Math.round(s.max_horas) !== Math.round(s.min_horas))
                    ? (h(s.min_horas) + '–' + h(s.max_horas)) : h(s.min_horas);
            }
            return (s.max_day !== null && s.max_day !== s.min_day) ? ('Día ' + s.min_day + '–' + s.max_day) : ('Día ' + s.min_day);
        },
        statusLabel(s) { return ({ draft: 'Borrador', active: 'Activo', ready: 'Listo', paused: 'Pausa', completed: 'Hecho', discarded: 'Descartado' })[s] || s; },
        async refresh(promise, focusNext = false) {
            this.busy = true; this.actionError = '';
            try {
                const wasFinished = this.b?.status === 'completed';
                this.b = (await promise).data;
                // Se acaba de completar el último paso → llevar a la evaluación
                // (valoración, nota, perfil de sabor y foto Pro) en vez de dejar
                // al usuario en una pantalla de pasos ya todos hechos.
                if (this.b.status === 'completed' && !wasFinished) {
                    window.location = '/lotes/' + this.id + '/evaluar';
                    return;
                }
                if (focusNext) this.$nextTick(() => this.scrollToActiveStep());
            }
            catch (e) { this.actionError = (e.data && e.data.message) || 'No se pudo completar la acción.'; }
            this.busy = false;
        },
        advance(s) {
            if (s && s.min_day !== null && this.b.current_day < s.min_day) {
                if (!confirm('¿Completar el paso del día ' + s.min_day + ' antes de tiempo?')) return;
            }
            this.refresh(window.FermentyAPI.advance(this.id), true);
        },
        startRename() {
            this.renameError = '';
            this.renameVal = this.b.name;
            this.renaming = true;
            // Foco + selección: escribir reemplaza, tocar edita. El x-ref vive
            // dentro de un template x-if y puede no existir aún tras un solo
            // tick, de ahí el setTimeout y el fallback por id (la revisión de
            // usabilidad cazó el campo pintado sin foco).
            this.$nextTick(() => setTimeout(() => {
                const inp = this.$refs.renameInput || document.getElementById('fmRenameInput');
                if (inp) { inp.focus(); inp.select(); }
            }, 0));
        },
        async saveRename() {
            const name = this.renameVal.trim();
            if (!name || this.busy) return;
            this.busy = true; this.renameError = '';
            try {
                this.b = (await window.FermentyAPI.renameBatch(this.id, name)).data;
                this.renaming = false;
            } catch (e) {
                this.renameError = (e.data && (e.data.message || (e.data.errors?.name || [])[0])) || 'No se pudo renombrar.';
            }
            this.busy = false;
        },
        skip() { this.refresh(window.FermentyAPI.skip(this.id), true); },
        pause() { this.refresh(window.FermentyAPI.pause(this.id)); },
        resume() { this.refresh(window.FermentyAPI.resume(this.id)); },
        discard() { if (confirm('¿Descartar este lote?')) this.refresh(window.FermentyAPI.discard(this.id)); },
        openLog(c) { this.logError = ''; this.log = { type: c.type, label: c.label, unit: c.unit, value: '', notes: '' }; },
        // La cata: dirección a paladar + pH opcional. Despierta al mentor (mueve la
        // ventana) y devuelve consejo efímero; el forecast que vuelve ya está movido.
        openCata() { this.logError = ''; this.mentorMsg = null; this.log = null; this.cata = { ph: '', phOpen: false }; },
        async enviarCata(direccion) {
            this.busy = true; this.logError = '';
            try {
                const p = { direccion };
                if (this.cata.ph !== '' && this.cata.ph != null) p.ph = this.cata.ph;
                const r = await window.FermentyAPI.cata(this.id, p);
                this.b = r.data;            // el pronóstico ya viene movido
                this.mentorMsg = r.mentor;  // consejo efímero, se muestra ahora
                this.cata = null;
                // Catada: el siguiente gesto natural es «avísame cuando toque volver».
                this.recordatorio = r.data.recordatorio || this.recordatorio;
                if (!this.recordatorio && this.user && this.user.is_premium) this.avisoOpen = true;
            } catch (e) { this.logError = (e.data && e.data.message) || 'No se pudo guardar la cata.'; }
            this.busy = false;
        },
        async saveLog() {
            this.busy = true; this.logError = '';
            try {
                const p = { type: this.log.type };
                if (this.log.type === 'note') p.notes = this.log.notes; else p.value = parseFloat(this.log.value);
                const r = await window.FermentyAPI.quickLog(this.id, p);
                this.log = null;
                // La temperatura mueve la ventana: refleja el nuevo pronóstico y el consejo.
                if (r && r.mentor) {
                    this.mentorMsg = r.mentor;
                    this.b = (await window.FermentyAPI.batch(this.id)).data;
                }
            } catch (e) { this.logError = (e.data && e.data.message) || 'No se pudo guardar.'; }
            this.busy = false;
        },
    };
}
</script>
@endpush