@extends('layouts.mobile')

@section('title', 'Resumen del lote')
@section('back', route('catalogue') . '#lotes')
@section('app-eyebrow', 'Lote completado')
@section('app-title', 'Resumen')

{{-- Vista de sólo lectura para un lote ya terminado: foto, valoración,
     perfil de sabor e historial. Sin la lista de pasos (eso vive en
     mobile.asistente, para lotes en marcha). --}}
@section('content')
<div class="fm-pad fm-stack" x-data="loteResumen('{{ $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('catalogue') }}#lotes" class="fm-btn--ghost">Volver</a></div></template>

    <template x-if="b">
        <div class="fm-stack">
            {{-- Foto de portada o glifo de categoría --}}
            <template x-if="b.cover_photo_url">
                <div style="width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);background-size:cover;background-position:center;" :style="{ backgroundImage: 'url(' + JSON.stringify(b.cover_photo_url) + ')' }"></div>
            </template>

            <div style="text-align:center;padding:4px 0;">
                <div class="fm-title" style="font-size:22px;" x-text="b.name"></div>
                {{-- La receta base a un vistazo: en una tanda terminada era imposible
                     saber cuál fue sin entrar en la bitácora. --}}
                <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 : '', b.total_days ? b.total_days + ' días' : ''].filter(Boolean).join(' · ')"></div>
                <span class="fm-pill" :class="'fm-pill--' + b.status" style="margin-top:8px;" x-text="statusLabel(b.status)"></span>
                <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="b.target_yield ? (b.target_yield.value.toLocaleString('es-ES', { maximumFractionDigits: 2 }) + ' ' + (b.target_yield.unit || '')) : ''"></span></span>
                </div>
            </div>

            {{-- Valoración --}}
            <template x-if="b.flavor_result && b.flavor_result.rating">
                <div class="fm-card" style="text-align:center;">
                    <div style="color:var(--gold-600);font-size:22px;">
                        <template x-for="n in 5" :key="n"><i class="fa-solid fa-star" :style="n > b.flavor_result.rating ? { opacity: '0.25' } : {}"></i></template>
                    </div>
                    <div class="fm-data" style="font-size:15px;font-weight:700;margin-top:6px;" x-text="b.flavor_result.rating + '/5'"></div>
                    <p class="fm-muted" style="font-size:13.5px;line-height:1.5;margin:10px 0 0;" x-show="b.flavor_result.overall_comment" x-text="b.flavor_result.overall_comment"></p>
                </div>
            </template>
            <template x-if="b.status === 'completed' && !b.flavor_result">
                <a :href="'/lotes/' + id + '/evaluar'" class="fm-card fm-card--tap fm-row" style="text-decoration:none;background:var(--gold-100);border:none;">
                    <span class="fm-glyph" style="width:44px;height:44px;border-radius:14px;background:#fff;color:var(--gold-700);"><i class="fa-solid fa-star"></i></span>
                    <div style="flex:1;min-width:0;">
                        <div class="fm-title" style="font-size:15px;color:var(--green-900);">Añadir evaluación</div>
                        <div class="fm-muted" style="font-size:12.5px;margin-top:2px;color:var(--gold-700);opacity:.9;">¿Qué tal salió? Aún puedes valorarlo.</div>
                    </div>
                    <i class="fa-solid fa-chevron-right" style="color:var(--gold-700);font-size:13px;"></i>
                </a>
            </template>

            {{-- El cierre del lazo: el mentor explica cómo salió respecto a lo que
                 pediste (§2). Solo en tandas formuladas con el mentor. --}}
            <template x-if="b.cierre">
                <div class="fm-card" style="border-left:3px solid var(--green-600);background:var(--paper-1);">
                    <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-seedling" style="font-size:14px;"></i></span>
                        <div style="flex:1;min-width:0;">
                            <div class="fm-eyebrow" style="color:var(--green-700);margin-bottom:4px;">Cómo salió</div>
                            <p style="margin:0;font:500 14px/1.55 var(--font-sans);color:var(--text-primary);" x-text="b.cierre"></p>
                        </div>
                    </div>
                </div>
            </template>

            {{-- Perfil de sabor --}}
            <template x-if="flavorRows.length">
                <div class="fm-card">
                    <div class="fm-sectitle" style="margin-bottom:10px;"><span>Perfil de sabor</span></div>
                    <div class="fm-stack" style="gap:8px;">
                        <template x-for="row in flavorRows" :key="row.label">
                            <div class="fm-row" style="justify-content:space-between;">
                                <span class="fm-muted" style="font-size:13.5px;" x-text="row.label"></span>
                                <div style="display:flex;gap:4px;">
                                    <template x-for="n in 5" :key="n">
                                        <span style="width:9px;height:9px;border-radius:50%;flex-shrink:0;" :style="{ background: n <= row.value ? 'var(--green-600)' : 'var(--paper-3)' }"></span>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>

            {{-- Bitácora: medidas y notas del día a día, en su propia página. Acceso
                 siempre visible (como en el asistente); ?from=resumen para volver aquí. --}}
            <a :href="'/lotes/' + id + '/bitacora?from=resumen'" 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>

            {{-- Historial --}}
            <template x-if="b.events && b.events.length">
                <div>
                    <div class="fm-sectitle"><span>Historial</span></div>
                    <div class="fm-stack" style="gap:8px;">
                        <template x-for="(e, i) in b.events" :key="i">
                            <div class="fm-listrow">
                                <span style="width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--green-400);"></span>
                                <span style="flex:1;font:500 14px var(--font-sans);color:var(--text-primary);" x-text="e.description"></span>
                                {{-- Con hora: en un kéfir de 48 h, «colado el 28» no dice cuándo. --}}
                                <span class="fm-data" style="font-size:12px;color:var(--text-muted);white-space:nowrap;" x-text="fmtCuando(e.date, true)"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </template>

            <a href="{{ route('catalogue') }}#lotes" class="fm-btn fm-btn--soft fm-btn--block">Volver a mis lotes</a>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function loteResumen(id) {
    return {
        id, loading: true, error: false, b: null,
        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;
        },
        get flavorRows() {
            if (!this.b?.flavor_result) return [];
            const labels = { sourness: 'Acidez', sweetness: 'Dulzor', aroma: 'Aroma', texture: 'Textura', bitterness: 'Amargor', fizziness: 'Efervescencia' };
            return Object.entries(labels)
                .map(([key, label]) => ({ label, value: this.b.flavor_result[key] }))
                .filter(row => row.value);
        },
        statusLabel(s) { return ({ draft: 'Borrador', completed: 'Hecho', discarded: 'Descartado' })[s] || s; },
        formatDate(d) { return d ? new Date(d).toLocaleDateString('es-ES', { day: 'numeric', month: 'short' }) : ''; },
        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;
        },
    };
}
</script>
@endpush