@extends('layouts.mobile')

@section('title', 'Cortar la F1')
@section('back', route('batch.show', $batchId))
@section('app-eyebrow', 'Retirar el cultivo')
@section('app-title', 'Cortar y preparar la 2F')

{{-- El corte de la F1: el momento en que se retira el cultivo, se decide el saborizante
     de la 2F y se recalcula con el residual del día REAL. Preview (sin escribir) →
     confirmar (congela + evento). --}}
@section('content')
<div class="fm-pad fm-stack" x-data="loteCortar('{{ $batchId }}')" x-init="load()">

    <template x-if="loading"><div class="fm-skel" style="height:200px;"></div></template>
    <template x-if="error"><div class="fm-empty">No pudimos cargar la tanda. <a href="{{ route('catalogue') }}#lotes" class="fm-btn--ghost">Volver</a></div></template>

    <template x-if="b && !b.en_f1">
        <div class="fm-empty" style="padding:24px 16px;text-align:center;">
            Esta tanda ya se cortó.<br>
            <a :href="'/lotes/' + id + '/resumen'" class="fm-btn--ghost">Ver la tanda</a>
        </div>
    </template>

    <template x-if="b && b.en_f1">
        <div class="fm-stack">
            <div style="text-align:center;">
                <div class="fm-title" style="font-size:20px;" x-text="b.name"></div>
                <div class="fm-muted" style="font-size:13px;margin-top:4px;">Al cortar, retiras el cultivo y preparas la segunda fermentación.</div>
            </div>

            {{-- ¿Qué día es hoy? El motor sabe el día de tanda; por defecto, hoy. --}}
            <div>
                <label class="fm-label">¿Qué día cortas?</label>
                <div class="fm-row" style="gap:10px;align-items:center;">
                    <input class="fm-input fm-data" type="number" inputmode="numeric" min="1" x-model.number="dia" style="max-width:110px;">
                    <span class="fm-muted" style="font-size:13px;">día de la tanda</span>
                </div>
            </div>

            {{-- El saborizante de la 2F: preseleccionado el que planeó la receta; cambiable. --}}
            <div>
                <label class="fm-label">¿Qué le echas a la 2F?</label>
                <div class="fm-stack" style="gap:8px;">
                    <template x-for="s in saborizantes" :key="s.slug">
                        <button type="button" @click="elegirSabor(s)"
                                class="fm-card fm-row" style="cursor:pointer;text-align:left;"
                                :style="saborizante === s.slug ? { borderColor: 'var(--green-500)', background: 'var(--green-050)' } : {}">
                            <span style="flex:1;min-width:0;">
                                <span class="fm-title" style="font-size:14.5px;" x-text="s.name"></span>
                                <span class="fm-muted" style="font-size:12px;display:block;margin-top:2px;" x-text="'~' + s.dosis + ' g/L de referencia'"></span>
                            </span>
                            <i class="fa-solid fa-check" x-show="saborizante === s.slug" style="color:var(--green-600);"></i>
                        </button>
                    </template>
                    <template x-if="saborizante">
                        <div class="fm-row" style="gap:10px;align-items:center;">
                            <input class="fm-input fm-data" type="number" inputmode="decimal" min="0" x-model.number="dosis" style="max-width:110px;">
                            <span class="fm-muted" style="font-size:13px;">g por litro</span>
                        </div>
                    </template>
                </div>
            </div>

            {{-- El pH, plegado: el 90% marca el día y confía en el paladar. Solo el que
                 mide lo abre — y su número calibra (residual medido, no predicho). --}}
            <div class="fm-card">
                <button type="button" @click="phOpen = !phOpen" style="background:none;border:none;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0;">
                    <span class="fm-title" style="font-size:14.5px;">¿Mediste el pH?</span>
                    <i class="fa-solid" :class="phOpen ? 'fa-chevron-up' : 'fa-chevron-down'" style="color:var(--ink-400);font-size:13px;"></i>
                </button>
                <template x-if="phOpen">
                    <div style="margin-top:12px;">
                        <div class="fm-row" style="gap:10px;align-items:center;">
                            <input class="fm-input fm-data" type="number" inputmode="decimal" step="0.1" min="0" max="14" x-model.number="ph" placeholder="3,2" style="max-width:110px;">
                            <span class="fm-muted" style="font-size:13px;">pH medido</span>
                        </div>
                        <div class="fm-muted" style="font-size:12px;margin-top:8px;line-height:1.5;">Si lo mides, afino la 2F con el dato real — y me sirve para acertar más contigo la próxima vez. Si no, lo calculo por el día de corte.</div>
                    </div>
                </template>
            </div>

            <button class="fm-btn fm-btn--soft fm-btn--block" @click="verPreview()" :disabled="!puedeVer || busy">
                <span x-text="busy && !preview ? 'Calculando…' : 'Ver la 2F recalculada'"></span>
            </button>

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

            {{-- La 2F recalculada, con la voz de siempre. --}}
            <template x-if="preview">
                <div class="fm-stack" style="gap:12px;" x-ref="preview">
                    <div class="fm-sectitle"><span>Tu segunda fermentación</span></div>

                    {{-- Cuánto saborizante pesar --}}
                    <template x-for="c in cierreLineas" :key="c.ingrediente">
                        <div class="fm-card fm-row" style="justify-content:space-between;">
                            <span class="fm-title" style="font-size:15px;" x-text="c.nombre"></span>
                            <span class="fm-data" style="font-weight:700;color:var(--green-700);" x-text="c.cantidad + ' ' + c.unidad"></span>
                        </div>
                    </template>

                    {{-- La ventana de la 2F (la manda el ingrediente, no la temperatura) --}}
                    <template x-if="preview.ventanas && preview.ventanas.cierre">
                        <div class="fm-card">
                            <div class="fm-eyebrow" style="margin-bottom:6px;">Cuándo estará</div>
                            <div class="fm-data" style="font-size:16px;font-weight:700;" x-text="ventanaTexto"></div>
                            <div class="fm-muted" style="font-size:12.5px;margin-top:6px;line-height:1.5;">Abre la botella cada día para purgar: es tu sensor y tu seguridad a la vez. En la 2F, pasarse es vidrio roto, no vinagre.</div>
                        </div>
                    </template>

                    {{-- Avisos y trueques, ya redactados por la capa de voz --}}
                    <template x-for="(a, i) in preview.avisos" :key="'a'+i">
                        <div class="fm-card" :style="{ borderLeft: '3px solid ' + (a.severidad === 'alta' ? 'var(--rust-500)' : 'var(--gold-500)') }">
                            <p style="margin:0;font:500 13.5px/1.55 var(--font-sans);color:var(--text-primary);" x-text="a.mensaje"></p>
                        </div>
                    </template>
                    <template x-for="(t, i) in preview.trueques" :key="'t'+i">
                        <div class="fm-card" style="background:var(--paper-1);">
                            <p style="margin:0;font:500 13px/1.55 var(--font-sans);color:var(--text-secondary);" x-text="t.mensaje"></p>
                        </div>
                    </template>

                    <button class="fm-btn fm-btn--gold fm-btn--block" @click="confirmar()" :disabled="busy">
                        <span x-text="busy ? 'Cortando…' : 'Cortar y guardar la 2F'"></span>
                    </button>
                    <p x-show="confirmError" x-cloak style="margin:0;color:var(--rust-500);font:500 13px var(--font-sans);" x-text="confirmError"></p>
                </div>
            </template>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function loteCortar(id) {
    return {
        id, loading: true, error: false, busy: false,
        b: null, saborizantes: [],
        dia: 1, saborizante: null, dosis: 0, ph: null, phOpen: false,
        preview: null, avisoError: '', confirmError: '',
        async load() {
            if (!window.fmRequireAuth(location.pathname)) { this.loading = false; return; }
            try {
                this.b = (await window.FermentyAPI.batch(this.id)).data;
                this.saborizantes = (await window.FermentyAPI.saborizantes()).data || [];
                this.dia = this.b.current_day || 1;
                // Preseleccionar la intención de 2F planeada al formular.
                const plan = this.b.plan_2f || {};
                this.saborizante = plan.saborizante || null;
                this.dosis = plan.dosis || (this.saborActual()?.dosis ?? 0);
            } catch (e) { this.error = true; }
            this.loading = false;
        },
        saborActual() { return this.saborizantes.find(s => s.slug === this.saborizante) || null; },
        // Cambiar de saborizante trae su dosis de referencia (como el autofill del editor).
        elegirSabor(s) { this.saborizante = s.slug; this.dosis = s.dosis; this.preview = null; },
        get puedeVer() { return this.dia >= 1 && !!this.saborizante && this.dosis > 0; },
        get cierreLineas() { return (this.preview?.cantidades || []).filter(c => c.paso === 'cierre' && c.ingrediente); },
        get ventanaTexto() {
            const v = this.preview?.ventanas?.cierre; if (!v) return '';
            const [lo, hi] = v.valor;
            return (lo === hi) ? (lo + ' ' + v.unidad) : (lo + '–' + hi + ' ' + v.unidad);
        },
        payload() {
            const p = { dia_corte: this.dia, saborizante: this.saborizante, dosis: this.dosis };
            if (this.ph !== null && this.ph !== '') p.ph_medido = this.ph;
            return p;
        },
        async verPreview() {
            this.busy = true; this.avisoError = ''; this.preview = null;
            try {
                this.preview = (await window.FermentyAPI.cortarPreview(this.id, this.payload())).formula;
                // Llevar la vista a la 2F recalculada (aparece abajo).
                this.$nextTick(() => this.$refs.preview && this.$refs.preview.scrollIntoView({ behavior: 'smooth', block: 'start' }));
            }
            catch (e) { this.avisoError = (e.data && e.data.message) || 'No se pudo calcular la 2F.'; }
            this.busy = false;
        },
        async confirmar() {
            this.busy = true; this.confirmError = '';
            try {
                await window.FermentyAPI.cortar(this.id, this.payload());
                window.location = '/lotes/' + this.id;
            } catch (e) {
                this.confirmError = (e.data && e.data.message) || 'No se pudo cortar la tanda.';
                this.busy = false;
            }
        },
    };
}
</script>
@endpush