@extends('layouts.mobile')

@section('title', 'Nuevo lote')
@section('back', route('catalogue'))
@section('app-eyebrow', 'Nuevo lote')
@section('app-title', 'Empezar')

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

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

    <template x-if="!loading">
        <div class="fm-stack">
            {{-- Receta elegida / selector --}}
            <div>
                <span class="fm-label">Receta</span>
                <select class="fm-input" x-model="form.recipe_slug" @change="onRecipe()">
                    <option value="">Elige una receta…</option>
                    <template x-for="r in recipes" :key="r.slug">
                        <option :value="r.slug" x-text="r.name + ' · ' + r.ferment.name"></option>
                    </template>
                </select>
            </div>

            <template x-if="recipe">
                <div class="fm-card fm-row">
                    <div style="width:56px;height:56px;border-radius:14px;background:var(--green-050);background-size:cover;background-position:center;flex-shrink:0;" :style="recipe.cover_image ? { backgroundImage: 'url(' + JSON.stringify(recipe.cover_image) + ')' } : {}"></div>
                    <div style="flex:1;">
                        <div class="fm-title" style="font-size:15px;" x-text="recipe.name"></div>
                        <div class="fm-muted" style="font-size:12.5px;margin-top:2px;" x-text="recipe.ferment.duration_days + ' días · ' + recipe.ferment.name"></div>
                    </div>
                </div>
            </template>

            {{-- Nombre y cantidad: solo el flujo legacy. Con motor, el nombre es
                 automático y el volumen se pide en el formulador. El nombre es
                 opcional: la sugerencia viaja como placeholder y el API la
                 aplica si se envía vacío — nada que borrar antes de escribir. --}}
            <div x-show="!usaMotor">
                <span class="fm-label">¿Cómo lo llamas? <span style="font-weight:400;color:var(--text-muted);">(opcional)</span></span>
                <input class="fm-input" id="fmBatchName" x-model="form.name" :placeholder="recipe ? 'Mi ' + recipe.name : 'p. ej. Kimchi de otoño'">
            </div>

            <template x-if="recipe && recipe.base_yield && !usaMotor">
                <div>
                    <span class="fm-label">Cantidad (<span x-text="recipe.base_yield.unit"></span>)</span>
                    <input class="fm-input fm-data" type="number" inputmode="decimal" x-model="form.target_yield_value" :placeholder="recipe.base_yield.value">
                </div>
            </template>

            <template x-if="usaMotor">
                <p class="fm-muted" style="font-size:12.5px;margin:0;line-height:1.45;">Esta receta la formula el mentor: eliges cómo la quieres y te dice qué pesar.</p>
            </template>

            {{-- Cuándo empiezas (flujo legacy; con motor lo pide el formulador): «ahora»
                 o el momento exacto, con hora — quien apunta la tanda un rato después
                 de montarla pone la hora real. --}}
            <div x-show="!usaMotor && recipe">
                <span class="fm-label">¿Cuándo la montaste?</span>
                <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'">
                    <input class="fm-input" type="datetime-local" x-model="fecha" style="margin-top:8px;">
                </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="busy || !form.recipe_slug"
                    @click="start()"><i class="fa-solid fa-wand-magic-sparkles"></i> <span x-text="busy ? 'Creando…' : (usaMotor ? 'Formular con el mentor' : 'Empezar lote')"></span></button>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function newBatch() {
    return {
        loading: true, busy: false, error: '',
        recipes: [], recipe: null,
        form: { recipe_slug: '', name: '', target_yield_value: '' },
        cuando: 'hoy', fecha: '',
        get usaMotor() { return !!(this.recipe && this.recipe.ferment && this.recipe.ferment.usa_motor); },
        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 load() {
            if (!window.fmRequireAuth(location.pathname + location.search)) { this.loading = false; return; }
            try {
                this.recipes = ((await window.FermentyAPI.recipes()).groups || []).flatMap(g => g.recipes);
            } catch (e) {}
            const pre = new URLSearchParams(location.search).get('recipe');
            if (pre) { this.form.recipe_slug = pre; await this.onRecipe(); }
            this.loading = false;
            // Con la receta ya elegida (?recipe=), lo único que queda es el
            // nombre: foco directo para escribir sin tocar nada más.
            this.focusName();
        },
        async onRecipe() {
            this.recipe = null;
            if (!this.form.recipe_slug) return;
            try {
                this.recipe = (await window.FermentyAPI.recipe(this.form.recipe_slug)).data;
            } catch (e) {}
            this.focusName();
        },
        // El input vive tras un template x-if (loading): puede no estar en el
        // DOM todavía cuando se decide enfocar — de ahí el nextTick+setTimeout.
        focusName() {
            if (this.loading || !this.recipe || this.usaMotor) return;
            this.$nextTick(() => setTimeout(() => {
                const el = document.getElementById('fmBatchName');
                if (el) el.focus();
            }, 0));
        },
        async start() {
            // Con ficha, esta pantalla no crea: cede al formulador del mentor.
            if (this.usaMotor) {
                window.location = '/formular?recipe=' + encodeURIComponent(this.form.recipe_slug);
                return;
            }
            this.busy = true; this.error = '';
            try {
                const payload = { recipe_id: this.recipe.id };
                if (this.form.name.trim()) payload.name = this.form.name.trim();
                if (this.form.target_yield_value) payload.target_yield_value = parseFloat(this.form.target_yield_value);
                // El instante exacto como ISO (UTC); si es futuro, solo la fecha.
                if (this.cuando === 'fecha' && this.fecha) {
                    const d = new Date(this.fecha);
                    if (d.getTime() > Date.now() + 5 * 60000) payload.start_date = this.fecha.slice(0, 10);
                    else payload.start_at = d.toISOString();
                }
                const b = await window.FermentyAPI.createBatch(payload);
                window.location = '/lotes/' + (b.data ? b.data.id : b.id);
            } catch (e) {
                this.error = (e.data && e.data.message) || 'No se pudo crear el lote.';
                this.busy = false;
            }
        },
    };
}
</script>
@endpush