@extends('layouts.mobile')

@section('title', 'Formular')
@section('back', route('catalogue'))
@section('app-eyebrow', 'Formular')
@section('app-title', 'Cómo la quieres')

@section('content')
<div class="fm-pad fm-stack" x-data="formular()" x-init="load()">

    <template x-if="loading"><div class="fm-skel" style="height:180px;"></div></template>

    {{-- ─────────── FASE 1 · RECOGER ─────────── --}}
    <template x-if="!loading && fase === 'perfil'">
        <div class="fm-stack">
            <div>
                <div class="fm-title" style="font-size:15px;" x-text="recipe.name"></div>
                <div class="fm-muted" style="font-size:12.5px;">Viene como la probaste. Déjala así, o ajusta cuánto de ácida la quieres — la fruta y lo demás no cambian.</div>
            </div>

            {{-- Como está probada: el estado inicial, ya marcado (§4). El usuario llegó
                 buscando ESTA receta; formular se ejecuta sin tocar nada. --}}
            <button type="button" class="fm-card" style="text-align:left;width:100%;border:2px solid transparent;"
                    :style="perfilId === null ? { borderColor: 'var(--gold-500)' } : {}"
                    @click="elegirProbada()">
                <div class="fm-title" style="font-size:14.5px;">Como está probada</div>
                <div class="fm-muted" style="font-size:12.5px;margin-top:3px;line-height:1.45;">El punto con el que se hace esta receta.</div>
            </button>

            <div class="fm-muted" style="font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;margin-top:2px;">O ajústala</div>

            {{-- Cartas destacadas --}}
            <div class="fm-stack" style="gap:10px;">
                <template x-for="c in destacadas" :key="c.id">
                    <button type="button" class="fm-card" style="text-align:left;width:100%;border:2px solid transparent;"
                            :style="perfilId === c.id ? { borderColor: 'var(--gold-500)' } : {}"
                            @click="elegir(c)">
                        <div class="fm-title" style="font-size:14.5px;text-transform:capitalize;" x-text="c.id"></div>
                        <div class="fm-muted" style="font-size:12.5px;margin-top:3px;line-height:1.45;" x-text="c.frase"></div>
                    </button>
                </template>
            </div>

            {{-- Otras formas (plegadas) --}}
            <template x-if="otras.length">
                <div>
                    <button type="button" class="fm-btn fm-btn--ghost fm-btn--block" @click="verOtras = !verOtras">
                        <span x-text="verOtras ? 'Menos formas' : 'Otras formas de hacerla'"></span>
                    </button>
                    <div class="fm-stack" style="gap:10px;margin-top:10px;" x-show="verOtras" x-cloak>
                        <template x-for="c in otras" :key="c.id">
                            <button type="button" class="fm-card" style="text-align:left;width:100%;border:2px solid transparent;"
                                    :style="perfilId === c.id ? { borderColor: 'var(--gold-500)' } : {}"
                                    @click="elegir(c)">
                                <div class="fm-title" style="font-size:14.5px;text-transform:capitalize;" x-text="c.id"></div>
                                <div class="fm-muted" style="font-size:12.5px;margin-top:3px;line-height:1.45;" x-text="c.frase"></div>
                            </button>
                        </template>
                    </div>
                </div>
            </template>

            {{-- Volumen --}}
            <template x-if="recipe.base_yield">
                <div>
                    <span class="fm-label">Cuánta vas a hacer (<span x-text="recipe.base_yield.unit"></span>)</span>
                    <input class="fm-input fm-data" type="number" inputmode="decimal" x-model="volumen" :placeholder="recipe.base_yield.value">
                </div>
            </template>

            {{-- Proxy de temperatura --}}
            <div class="fm-stack" style="gap:10px;">
                <div>
                    <span class="fm-label">¿Dónde va a fermentar?</span>
                    <div class="fm-stack" style="gap:6px;">
                        <template x-for="s in sitios" :key="s.v">
                            <button type="button" class="fm-chip" style="justify-content:flex-start;"
                                    :style="sitio === s.v ? { background:'var(--green-050)', borderColor:'var(--green-500)' } : {}"
                                    @click="sitio = s.v" x-text="s.label"></button>
                        </template>
                    </div>
                </div>

                <template x-if="sitio === 'exacta'">
                    <div>
                        <span class="fm-label">Temperatura (°C)</span>
                        <input class="fm-input fm-data" type="number" inputmode="decimal" x-model="tempExacta" placeholder="23">
                    </div>
                </template>

                <template x-if="sitio && sitio !== 'exacta'">
                    <div>
                        <span class="fm-label">¿Cómo notas ese sitio estos días?</span>
                        <div class="fm-stack" style="gap:6px;">
                            <template x-for="p in percepciones" :key="p.v">
                                <button type="button" class="fm-chip" style="justify-content:flex-start;"
                                        :style="percepcion === p.v ? { background:'var(--green-050)', borderColor:'var(--green-500)' } : {}"
                                        @click="percepcion = p.v" x-text="p.label"></button>
                            </template>
                        </div>
                    </div>
                </template>
            </div>

            <p x-show="error" x-cloak x-text="error" style="margin:0;color:var(--rust-500);font:500 13px/1.4 var(--font-sans);"></p>

            <button class="fm-btn fm-btn--gold fm-btn--block" :disabled="!puedeFormular || busy" @click="formular()">
                <i class="fa-solid fa-wand-magic-sparkles"></i>
                <span x-text="busy ? 'Formulando…' : 'Ver la fórmula'"></span>
            </button>
            <p x-show="!puedeFormular && !busy" x-cloak class="fm-muted" style="font-size:12px;margin:-2px 0 0;text-align:center;" x-text="pistaContexto"></p>
        </div>
    </template>

    {{-- ─────────── FASE 2 · LA FÓRMULA ─────────── --}}
    <template x-if="fase === 'formula'">
        <div class="fm-stack">

            {{-- Lo que necesitas --}}
            <template x-if="formula">
            <div class="fm-card">
                <div class="fm-eyebrow">Lo que necesitas</div>
                <template x-for="(grupo, paso) in cantidadesPorPaso" :key="paso">
                    <div style="margin-top:8px;">
                        <div class="fm-muted" style="font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;" x-text="paso === 'f1' ? 'Para empezar' : 'Al embotellar'"></div>
                        <template x-for="c in grupo" :key="c.rol">
                            <div class="fm-row" style="justify-content:space-between;padding:5px 0;">
                                <span style="font-size:13.5px;" x-text="c.nombre || c.rol"></span>
                                <span class="fm-data" style="font-weight:600;"><span x-text="c.cantidad"></span> <span x-text="c.unidad"></span></span>
                            </div>
                        </template>
                    </div>
                </template>
                <template x-if="arranque">
                    <div class="fm-muted" style="font-size:12px;margin-top:8px;line-height:1.45;">
                        Necesitas <b><span x-text="arranque.cantidad"></span> <span x-text="arranque.unidad"></span></b> de kombucha ya hecha para arrancar. Si no tienes, consíguela antes de empezar — no se puede sin ella.
                    </div>
                </template>
            </div>
            </template>

            {{-- Cómo va a ir --}}
            <template x-if="formula">
            <div class="fm-card">
                <div class="fm-eyebrow">Cómo va a ir</div>
                <div style="font-size:13.5px;margin-top:6px;line-height:1.5;">
                    Estará lista <b x-text="ventanaTexto(formula.ventanas.f1)"></b>.
                    <template x-if="formula.ventanas.cierre">
                        <span>Después, la segunda fermentación en botella <b x-text="ventanaTexto(formula.ventanas.cierre)"></b>.</span>
                    </template>
                </div>
                <div class="fm-row" style="gap:14px;margin-top:8px;flex-wrap:wrap;">
                    <span class="fm-muted" style="font-size:12.5px;">Burbuja <b x-text="formula.lo_que_pasa.burbuja"></b></span>
                    <span class="fm-muted" style="font-size:12.5px;">pH ~<b x-text="fmt(formula.lo_que_pasa.ph_al_corte)"></b></span>
                </div>
                <button type="button" class="fm-btn fm-btn--ghost" style="margin-top:8px;font-size:12px;" @click="verPlano = !verPlano">
                    <span x-text="verPlano ? 'Ocultar el plano' : 'Ver el plano'"></span>
                </button>
                <div x-show="verPlano" x-cloak class="fm-muted" style="font-size:12px;margin-top:6px;line-height:1.6;">
                    Volúmenes de CO₂: <span x-text="fmt(formula.lo_que_pasa.volumenes_co2)"></span> ·
                    Presión objetivo: <span x-text="fmt(formula.lo_que_pasa.presion_objetivo_bar)"></span> bar ·
                    Alcohol estimado: <span x-text="fmt(formula.lo_que_pasa.abv_estimado)"></span> %
                </div>
            </div>
            </template>

            {{-- Ojo con esto --}}
            <template x-if="formula && (formula.avisos.length || formula.trueques.length)">
                <div class="fm-card">
                    <div class="fm-eyebrow">Ojo con esto</div>
                    <template x-for="(a, i) in formula.avisos" :key="'a'+i">
                        <div class="fm-row" style="align-items:flex-start;gap:8px;margin-top:8px;">
                            <i class="fa-solid" :class="a.severidad === 'duro' ? 'fa-triangle-exclamation' : 'fa-circle-info'"
                               :style="{ color: a.severidad === 'duro' ? 'var(--rust-500)' : 'var(--gold-600)', marginTop:'2px' }"></i>
                            <span style="font-size:13px;line-height:1.5;" x-text="a.mensaje"></span>
                        </div>
                    </template>
                    <template x-for="(t, i) in formula.trueques" :key="'t'+i">
                        <div class="fm-row" style="align-items:flex-start;gap:8px;margin-top:8px;">
                            <i class="fa-solid fa-seedling" style="color:var(--green-500);margin-top:2px;"></i>
                            <span style="font-size:13px;line-height:1.5;color:var(--green-800,#2f5233);" x-text="t.mensaje"></span>
                        </div>
                    </template>
                </div>
            </template>

            {{-- Aviso de desfasado (borrador viejo reabierto) --}}
            <template x-if="desfasado">
                <div class="fm-card" style="background:var(--gold-100);border:none;">
                    <div class="fm-row" style="align-items:flex-start;gap:8px;">
                        <i class="fa-solid fa-clock-rotate-left" style="color:var(--gold-600);margin-top:2px;"></i>
                        <span style="font-size:12.5px;line-height:1.5;">Esta fórmula lleva un tiempo guardada: se calculó con la temperatura de otro momento. Puedes arrancarla igual, pero si ahora hace otro tiempo saldrá algo distinta.</span>
                    </div>
                </div>
            </template>

            {{-- Arrancar --}}
            <div class="fm-card fm-stack" style="gap:10px;">
                <div class="fm-eyebrow">Cuándo empiezas</div>
                {{-- «Ahora» o el momento EXACTO (fecha y hora): quien apunta la tanda un
                     rato después de montarla pone la hora real — en un fermento de
                     horas, las 8:00 y las 21:00 no son el mismo día. --}}
                <div class="fm-row" style="gap:6px;">
                    <button type="button" class="fm-chip" :style="cuando === 'hoy' ? { background:'var(--green-050)', borderColor:'var(--green-500)' } : {}" @click="cuando = 'hoy'">Ahora</button>
                    <button type="button" class="fm-chip" :style="cuando === 'fecha' ? { background:'var(--green-050)', borderColor:'var(--green-500)' } : {}" @click="elegirMomento()">Otro momento</button>
                </div>
                <template x-if="cuando === 'fecha'">
                    <div>
                        <input class="fm-input" type="datetime-local" x-model="fecha">
                        <p class="fm-muted" style="font-size:11.5px;margin:4px 0 0;">La fecha y la hora a la que la montaste (o montarás).</p>
                    </div>
                </template>
                <p class="fm-muted" style="font-size:11.5px;margin:0;" x-text="esBorradorReabierto ? 'Guardada sin empezar. Arráncala cuando tengas todo.' : 'Se guarda sin empezar; puedes arrancarla cuando tengas todo.'"></p>
                <div class="fm-row" style="gap:8px;">
                    <template x-if="esBorradorReabierto">
                        <button class="fm-btn fm-btn--block" style="flex:1;color:var(--rust-500);" :disabled="busy" @click="descartar()">Descartar</button>
                    </template>
                    <template x-if="!esBorradorReabierto">
                        <button class="fm-btn fm-btn--block" style="flex:1;" @click="volver()">Cambiar</button>
                    </template>
                    <button class="fm-btn fm-btn--gold fm-btn--block" style="flex:2;" :disabled="busy" @click="arrancar()">
                        <span x-text="busy ? 'Arrancando…' : 'Arrancar'"></span>
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function formular() {
    return {
        loading: true, busy: false, error: '', fase: 'perfil',
        slug: new URLSearchParams(location.search).get('recipe') || '',
        batchId: new URLSearchParams(location.search).get('batch') || '',
        recipe: {}, cartas: [],
        perfilId: null, perfil: null, perfilProbado: null,   // null = «como está probada»
        volumen: '', sitio: '', percepcion: '', tempExacta: '',
        verOtras: false, verPlano: false,
        batch: null, formula: null, cuando: 'hoy', fecha: '',
        sitios: [
            { v: 'cocina',  label: 'En la cocina o el salón' },
            { v: 'armario', label: 'En un armario o despensa (fresco y estable)' },
            { v: 'exacta',  label: 'Sé la temperatura exacta' },
        ],
        percepciones: [
            { v: 'fresco',   label: 'Fresco — hay que abrigarse' },
            { v: 'templado', label: 'Templado — a gusto en manga corta' },
            { v: 'calido',   label: 'Cálido — se agradece el ventilador' },
        ],
        get destacadas() { return this.cartas.filter(c => c.destacado); },
        get otras() { return this.cartas.filter(c => !c.destacado); },
        get cantidadesPorPaso() {
            const g = {};
            (this.formula?.cantidades || []).forEach(c => { (g[c.paso] ||= []).push(c); });
            return g;
        },
        get arranque() { return (this.formula?.cantidades || []).find(c => c.rol === 'arranque'); },
        get esBorradorReabierto() { return !!this.batchId; },
        get desfasado() { return !!(this.batch && this.batch.stale_draft); },
        get puedeFormular() {
            // SIN exigir carta: el perfil probado es el estado inicial, así que
            // formular se ejecuta sin tocar nada (§4). Solo hace falta el contexto.
            if (!this.sitio) return false;
            if (this.sitio === 'exacta') return !!this.tempExacta;
            return !!this.percepcion;
        },
        get pistaContexto() {
            // Por qué «Ver la fórmula» no está listo: el botón deshabilitado sin
            // decir qué falta «no da nada» y desconcierta.
            if (!this.sitio) return 'Antes: elige dónde va a fermentar.';
            if (this.sitio === 'exacta' && !this.tempExacta) return 'Antes: escribe la temperatura.';
            if (this.sitio !== 'exacta' && !this.percepcion) return 'Antes: elige cómo notas el sitio.';
            return '';
        },
        async load() {
            if (!window.fmRequireAuth(location.pathname + location.search)) { this.loading = false; return; }
            // Reabrir un borrador: se salta las cartas, carga la fórmula congelada.
            if (this.batchId) { await this.cargarBorrador(); this.loading = false; return; }
            try {
                const r = await window.FermentyAPI.recipeFormular(this.slug);
                this.recipe = r.recipe; this.cartas = r.cartas;
                // El punto probado es el estado inicial. perfil arranca como una COPIA
                // de él; las cartas pisan solo los ejes, dejando saborizante+dosis.
                this.perfilProbado = this.recipe.perfil_defecto || {};
                this.perfil = Object.assign({}, this.perfilProbado);
                this.perfilId = null;
            } catch (e) {
                this.error = 'Esta receta todavía no usa el formulador.';
            }
            this.loading = false;
        },
        async cargarBorrador() {
            try {
                const b = await window.FermentyAPI.batch(this.batchId);
                this.batch = b.data || b;
                this.recipe = { name: this.batch.name };
                this.fase = 'formula';   // ya se puede Descartar/Arrancar, pase lo que pase con la fórmula
                // La fórmula es aparte: si falla (JS viejo, red), no deja el borrador atascado.
                try {
                    const f = await window.FermentyAPI.batchFormula(this.batchId);
                    this.formula = f.formula;
                } catch (e) { this.formula = null; }
            } catch (e) {
                this.error = 'No se pudo cargar este borrador.';
            }
        },
        elegir(c) {
            // La carta pisa los campos del perfil y RESPETA saborizante y dosis, que
            // son la 2F y vienen de la receta: cambiar cuánto de ácida la quieres no
            // debe quitarte la cereza (§4). El quinto campo que anticipaba el comentario
            // viejo ya llegó — el kéfir manda azúcar y horas en vez de cuatro ejes—, así
            // que la regla deja de ser una lista y pasa a ser «todo menos la 2F».
            this.perfilId = c.id;
            for (const [k, v] of Object.entries(c.perfil)) {
                if (k === 'saborizante' || k === 'dosis') continue;
                this.perfil[k] = v;
            }
        },
        elegirProbada() {
            // Vuelve al punto probado: reinicia los cuatro ejes desde la copia.
            this.perfilId = null;
            this.perfil = Object.assign({}, this.perfilProbado);
        },
        contexto() {
            if (this.sitio === 'exacta') return { sitio: 'exacta', temp_exacta: parseFloat(this.tempExacta) };
            return { sitio: this.sitio, percepcion: this.percepcion };
        },
        async formular() {
            this.busy = true; this.error = '';
            try {
                const payload = {
                    name: this.recipe.name,
                    recipe_id: this.recipe.id,
                    perfil: this.perfil,
                    contexto: this.contexto(),
                };
                if (this.volumen) payload.target_yield_value = parseFloat(this.volumen);
                const res = await window.FermentyAPI.formular(payload);
                this.batch = res.data.data || res.data;
                this.formula = res.formula;
                this.fase = 'formula';
                window.scrollTo(0, 0);
            } catch (e) {
                this.error = (e.data && e.data.message) || 'No se pudo formular.';
            }
            this.busy = false;
        },
        volver() { this.fase = 'perfil'; window.scrollTo(0, 0); },
        // «Ahora» en formato datetime-local (hora local, sin zona), para el valor inicial y el máximo.
        ahoraLocal() {
            const d = new Date(); d.setSeconds(0, 0);
            const p = n => String(n).padStart(2, '0');
            return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + 'T' + p(d.getHours()) + ':' + p(d.getMinutes());
        },
        elegirMomento() { this.cuando = 'fecha'; if (!this.fecha) this.fecha = this.ahoraLocal(); },
        async arrancar() {
            this.busy = true; this.error = '';
            try {
                // El instante exacto viaja como ISO (UTC); el servidor lo ancla al minuto.
                // Si está en el futuro (montar mañana), se manda la FECHA: arranca ese día.
                let payload = {};
                if (this.cuando === 'fecha' && this.fecha) {
                    const d = new Date(this.fecha);
                    payload = d.getTime() > Date.now() + 5 * 60000 ? { start_date: this.fecha.slice(0, 10) } : { start_at: d.toISOString() };
                }
                await window.FermentyAPI.arrancar(this.batch.id, payload);
                window.location = '/lotes/' + this.batch.id;
            } catch (e) {
                this.error = (e.data && e.data.message) || 'No se pudo arrancar.';
                this.busy = false;
            }
        },
        async descartar() {
            if (!confirm('¿Descartar este borrador? La fórmula se perderá.')) return;
            this.busy = true; this.error = '';
            try {
                await window.FermentyAPI.discard(this.batchId, 'Borrador descartado');
                window.location = '/recetas';
            } catch (e) {
                this.error = (e.data && e.data.message) || 'No se pudo descartar.';
                this.busy = false;
            }
        },
        fmt(n) { return (n === null || n === undefined) ? '' : String(n).replace('.', ','); },
        ventanaTexto(v) {
            if (!v) return '';
            const [a, b] = v.valor;
            const u = v.unidad === 'horas' ? 'horas' : 'días';
            return a === b ? `en ${this.fmt(a)} ${u}` : `entre ${this.fmt(a)} y ${this.fmt(b)} ${u}`;
        },
    };
}
</script>
@endpush