@extends('layouts.mobile')

@section('title', 'Bitácora')
{{-- Se llega desde la tanda en curso (asistente) o desde una completada
     (resumen). El origen viene en ?from para que "volver" acierte. --}}
@section('back', request('from') === 'resumen' ? route('batch.summary', $batchId) : route('batch.show', $batchId))
@section('app-eyebrow', 'Registro del lote')
@section('app-title', 'Bitácora')

@section('content')
<div class="fm-pad fm-stack" x-data="loteBitacora('{{ $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 la bitácora. <button class="fm-btn--ghost" @click="load()">Reintentar</button></div></template>

    <template x-if="b">
        <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;" x-text="[b.ferment_type ? b.ferment_type.name : '', b.recipe ? 'Receta: ' + b.recipe.name : ''].filter(Boolean).join(' · ')"></div>
                <div class="fm-row" style="gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px;">
                    <span class="fm-badge fm-badge--neutral" style="gap:5px;" x-show="b.started_at || b.start_date"><i class="fa-regular fa-circle-play"></i><span x-text="'Inicio ' + fmtCuando(b.started_at || b.start_date, !!b.es_rapido)"></span></span>
                    <span class="fm-badge fm-badge--neutral" style="gap:5px;" x-show="b.target_yield"><i class="fa-solid fa-jar"></i><span x-text="cantidadTexto"></span></span>
                </div>
            </div>

            {{-- Receta e ingredientes, plegados: a un vistazo cuál fue la receta base y
                 qué se echó (las cantidades congeladas al crear la tanda, ya escaladas).
                 Sobre todo en una terminada: sin esto era imposible saberlo desde aquí. --}}
            <template x-if="b.recipe || (b.ingredients && b.ingredients.length)">
                <div>
                    <button type="button" class="fm-card fm-card--tap fm-row" style="width:100%;text-align:left;" @click="verReceta = !verReceta" :aria-expanded="verReceta ? 'true' : 'false'">
                        <span class="fm-glyph" style="width:38px;height:38px;border-radius:12px;background:var(--green-050);color:var(--green-700);flex-shrink:0;"><i class="fa-solid fa-scroll"></i></span>
                        <div style="flex:1;min-width:0;">
                            <div class="fm-title" style="font-size:15px;">Receta e ingredientes</div>
                            <div class="fm-muted" style="font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" x-text="recetaResumen"></div>
                        </div>
                        <i class="fa-solid" :class="verReceta ? 'fa-chevron-up' : 'fa-chevron-down'" style="color:var(--text-muted);flex-shrink:0;"></i>
                    </button>
                    <div x-show="verReceta" x-cloak class="fm-card fm-stack" style="gap:12px;margin-top:8px;">
                        <template x-if="b.recipe">
                            <div>
                                <div class="fm-eyebrow">Receta base</div>
                                <div class="fm-title" style="font-size:15px;margin-top:2px;" x-text="b.recipe.name + (b.recipe.is_official ? ' · Clásica' : '')"></div>
                                <p class="fm-muted" style="font-size:12.5px;line-height:1.5;margin:4px 0 0;" x-show="b.recipe.description" x-text="b.recipe.description"></p>
                                <a :href="'/recetas/' + b.recipe.slug" class="fm-btn--ghost" style="display:inline-block;font-size:12.5px;margin-top:6px;">Ver la receta →</a>
                            </div>
                        </template>
                        <template x-for="g in gruposIngredientes" :key="g.titulo">
                            <div>
                                <div class="fm-eyebrow" x-text="g.titulo"></div>
                                <div class="fm-stack" style="gap:5px;margin-top:6px;">
                                    <template x-for="i in g.items" :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>
                        <template x-if="!gruposIngredientes.length">
                            <div class="fm-muted" style="font-size:13px;">Esta tanda no guardó ingredientes.</div>
                        </template>
                    </div>
                </div>
            </template>

            {{-- ABV estimado: sale solo cuando hay °Bx inicial y final (el
                 azúcar consumido delata el alcohol). Misma fórmula que la
                 calculadora de alcohol del Lab. --}}
            <template x-if="b.abv_estimate !== null && b.abv_estimate !== undefined">
                <div class="fm-card fm-row" style="background:var(--green-050);border:none;">
                    <span class="fm-glyph" style="width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.7);color:var(--green-700);flex-shrink:0;"><i class="fa-solid fa-percent"></i></span>
                    <div style="flex:1;min-width:0;">
                        <div class="fm-title" style="font-size:15px;color:var(--green-900);">ABV estimado ≈ <span class="fm-data" x-text="String(b.abv_estimate).replace('.', ',')"></span> %</div>
                        <div style="font-size:12px;color:var(--green-700);margin-top:2px;">Calculado con tu °Bx inicial y final.</div>
                    </div>
                </div>
            </template>

            @include('mobile.partials._bitacora')

            {{-- Vacío: aún no hay nada registrado. --}}
            <template x-if="!b.daily_logs || !b.daily_logs.length">
                <div class="fm-empty" style="padding:24px 16px;text-align:center;">
                    Aún no has registrado medidas ni notas.<br>
                    <span class="fm-muted" style="font-size:13px;">Añádelas desde el lote con «Añadir log de hoy».</span>
                </div>
            </template>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function loteBitacora(id) {
    return {
        id, loading: true, error: false, b: null, verReceta: false,
        async load() {
            this.loading = true; this.error = false;
            try { this.b = (await window.FermentyAPI.batch(this.id)).data; }
            catch (e) { this.error = true; }
            this.loading = false;
        },
        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;
        },
        get cantidadTexto() {
            const y = this.b?.target_yield; if (!y) return '';
            return y.value.toLocaleString('es-ES', { maximumFractionDigits: 2 }) + ' ' + (y.unit || '');
        },
        get recetaResumen() {
            const n = (this.b?.ingredients || []).length;
            return [this.b?.recipe?.name, this.cantidadTexto, n ? n + ' ingrediente' + (n > 1 ? 's' : '') : ''].filter(Boolean).join(' · ');
        },
        // Los ingredientes congelados, agrupados: generales primero, luego por paso.
        get gruposIngredientes() {
            const ings = this.b?.ingredients || [];
            const grupos = [];
            const generales = ings.filter(i => !i.batch_step_id);
            if (generales.length) grupos.push({ titulo: 'Ingredientes', items: generales });
            const porPaso = {};
            ings.filter(i => i.batch_step_id).forEach(i => { (porPaso[i.step_title || 'Paso'] ||= []).push(i); });
            Object.entries(porPaso).forEach(([titulo, items]) => grupos.push({ titulo, items }));
            return grupos;
        },
    };
}
</script>
@endpush