@extends('layouts.mobile')

@section('title', 'Fermentos')
@section('app-eyebrow', 'Catálogo de fermentos')
@section('app-title', 'Fermentos')

{{-- Tabs: Mis lotes (acceso rápido a lo que está en marcha) · Fermentos
     gratuitos · Premium. Tarjetas espejo del /fermentos web. --}}
@section('content')
<div class="fm-pad fm-stack" x-data="fermentosScreen()" x-init="load()">

    {{-- Tabs --}}
    <div class="fm-seg">
        <button :class="tab === 'lotes' && 'on'" @click="tab = 'lotes'; _userSwitched = true">Mis lotes</button>
        <button :class="tab === 'free' && 'on'" @click="tab = 'free'; _userSwitched = true">Gratuitos</button>
        <button :class="tab === 'premium' && 'on'" @click="tab = 'premium'; _userSwitched = true">Premium</button>
    </div>

    <template x-if="loading">
        <div class="fm-stack" style="gap:12px;">
            <div class="fm-skel" style="height:18px;width:40%;"></div>
            <div class="fm-skel" style="height:210px;"></div>
            <div class="fm-skel" style="height:210px;"></div>
        </div>
    </template>

    <template x-if="error">
        <div class="fm-empty">No pudimos cargar el catálogo. <button class="fm-btn--ghost" @click="load()">Reintentar</button></div>
    </template>

    {{-- ── Mis lotes ── --}}
    <template x-if="!loading && tab === 'lotes'">
        <div class="fm-stack">
            <template x-if="!authed">
                <div class="fm-card fm-stack" style="gap:12px;">
                    <span class="fm-glyph" style="width:46px;height:46px;border-radius:14px;"><i class="fa-solid fa-jar"></i></span>
                    <div class="fm-h2">Tus lotes, aquí</div>
                    <div class="fm-muted" style="font-size:14px;line-height:1.5;">Crea una cuenta para iniciar fermentos y verlos en marcha en esta pestaña.</div>
                    <button class="fm-btn fm-btn--gold fm-btn--block" onclick="fmRequireAuth('{{ route('catalogue') }}', 'register')">Crear cuenta o entrar</button>
                </div>
            </template>

            <template x-if="authed">
                <div class="fm-stack" style="gap:10px;">
                    {{-- Sin empezar: fórmulas guardadas esperando a que las arranques. --}}
                    <template x-if="borradores.length">
                        <div class="fm-stack" style="gap:8px;">
                            <div class="fm-eyebrow">Sin empezar</div>
                            <template x-for="b in borradores" :key="b.id">
                                <a :href="'/formular?batch=' + b.id" class="fm-card fm-row fm-card--tap" style="text-decoration:none;">
                                    <span class="fm-ring" style="background:var(--gold-100);color:var(--gold-700);"><i class="fa-solid fa-flask"></i></span>
                                    <div style="flex:1;min-width:0;">
                                        <div class="fm-title" style="font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" x-text="b.name"></div>
                                        <div class="fm-muted" style="font-size:12px;margin-top:3px;" x-text="b.stale_draft ? 'Fórmula guardada · desfasada' : 'Fórmula guardada, lista para arrancar'"></div>
                                    </div>
                                    <i class="fa-solid fa-chevron-right" style="color:var(--text-muted);"></i>
                                </a>
                            </template>
                        </div>
                    </template>

                    <div class="fm-seg" x-show="batchesLoaded && batches.length">
                        <button :class="statusFilter === 'active' && 'on'" @click="statusFilter = 'active'">Activos</button>
                        <button :class="statusFilter === 'completed' && 'on'" @click="statusFilter = 'completed'">Completados</button>
                    </div>

                    <template x-for="b in shownBatches" :key="b.id">
                        <a :href="isFinished(b) ? ('/lotes/' + b.id + '/resumen') : ('/lotes/' + b.id)" class="fm-card fm-row fm-card--tap" style="text-decoration:none;">
                            <template x-if="isFinished(b) && b.cover_photo_url">
                                <span style="width:52px;height:52px;border-radius:14px;flex-shrink:0;background-size:cover;background-position:center;" :style="{ backgroundImage: 'url(' + JSON.stringify(b.cover_photo_url) + ')' }"></span>
                            </template>
                            <template x-if="!(isFinished(b) && b.cover_photo_url)">
                                <span class="fm-ring" :style="ringStyle(b)"><span x-text="(b.progress || 0) + '%'"></span></span>
                            </template>
                            <div style="flex:1;min-width:0;">
                                <div class="fm-title" style="font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" x-text="b.name"></div>
                                <template x-if="!isFinished(b)">
                                    <div class="fm-muted" style="font-size:12.5px;margin-top:3px;" x-text="'Día ' + b.current_day + (b.total_days ? '/' + b.total_days : '') + ' · ' + (b.ferment_type ? b.ferment_type.name : '')"></div>
                                </template>
                                <template x-if="isFinished(b)">
                                    {{-- Con la receta base: en una terminada es lo primero que se pregunta («¿cuál era?»). --}}
                                    <div class="fm-muted" style="font-size:12.5px;margin-top:3px;" x-text="'Terminado el ' + formatDate(b.actual_end_date) + (b.recipe ? ' · ' + b.recipe.name : (b.ferment_type ? ' · ' + b.ferment_type.name : ''))"></div>
                                </template>
                                <template x-if="isFinished(b) && b.flavor_result?.rating">
                                    <div style="margin-top:4px;color:var(--gold-600);font-size:12px;">
                                        <template x-for="n in 5" :key="n"><i class="fa-solid fa-star" :style="n > b.flavor_result.rating && 'opacity:.25;'"></i></template>
                                    </div>
                                </template>
                                <template x-if="isFinished(b) && b.flavor_result?.overall_comment">
                                    <div class="fm-muted" style="font-size:12px;margin-top:3px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" x-text="'“' + b.flavor_result.overall_comment + '”'"></div>
                                </template>
                            </div>
                            <span class="fm-pill" :class="'fm-pill--' + b.status" x-text="statusLabel(b.status)"></span>
                        </a>
                    </template>
                    <template x-if="batchesLoaded && shownBatches.length === 0">
                        <div class="fm-stack" style="gap:10px;">
                            <div class="fm-empty" style="padding:16px 12px;" x-text="batches.length ? 'Nada por aquí todavía.' : 'Aún no tienes lotes en marcha.'"></div>
                            <button class="fm-btn fm-btn--green fm-btn--block" @click="tab = 'free'; _userSwitched = true"><i class="fa-solid fa-book-open"></i> Explorar recetas</button>
                        </div>
                    </template>
                    <a href="{{ route('batch.create') }}" class="fm-btn fm-btn--soft fm-btn--block"><i class="fa-solid fa-plus"></i> Nuevo lote</a>
                </div>
            </template>
        </div>
    </template>

    {{-- ── Catálogo (Gratuitos / Premium) ── --}}
    <template x-if="!loading && !error && (tab === 'free' || tab === 'premium')">
        <div class="fm-stack">
            <input type="search" class="fm-input" placeholder="Buscar recetas" x-model="q">
            {{-- Filtro por clasificación: los cuatro estantes del paso 1. Barato con
                 ocho, imprescindible con cincuenta. --}}
            <div class="fm-row" style="gap:6px;flex-wrap:wrap;">
                <button type="button"
                        style="border:1.5px solid var(--border-default);border-radius:999px;padding:6px 14px;font:600 12.5px var(--font-sans);background:var(--surface-card);color:var(--text-secondary);cursor:pointer;white-space:nowrap;"
                        :style="clasFilter === '' ? { borderColor:'var(--green-500)', background:'var(--green-050)', color:'var(--green-700)' } : {}"
                        @click="clasFilter = ''">Todas</button>
                <template x-for="c in clasificaciones" :key="c.slug">
                    <button type="button"
                            style="border:1.5px solid var(--border-default);border-radius:999px;padding:6px 14px;font:600 12.5px var(--font-sans);background:var(--surface-card);color:var(--text-secondary);cursor:pointer;white-space:nowrap;"
                            :style="clasFilter === c.slug ? { borderColor:'var(--green-500)', background:'var(--green-050)', color:'var(--green-700)' } : {}"
                            @click="clasFilter = c.slug" x-text="c.name"></button>
                </template>
            </div>
            <div class="fm-cards">
                <template x-for="r in recetasFiltradas" :key="r.slug">
                    @include('mobile.partials._recipe-card')
                </template>
                <template x-if="recetasFiltradas.length === 0"><div class="fm-empty">Sin resultados.</div></template>
            </div>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function fermentosScreen() {
    // Memoria de navegación: al volver de una receta, un resumen o los completados,
    // la pantalla recuerda EN QUÉ pestaña y filtro estabas. Prioridad: hash explícito
    // (#lotes/#premium, deep-links desde Perfil) > memoria de sesión > defecto. Se lee
    // SÍNCRONO aquí para que la pestaña correcta salga ya en el primer render, sin el
    // salto de "Gratuitos" a "Mis lotes" que parpadeaba al cargar los lotes.
    const _hash = location.hash.slice(1);
    const _mem = (k, d) => { try { return sessionStorage.getItem(k) || d; } catch (e) { return d; } };
    // #lotes-activos / #lotes-completados: deep-links desde las estadísticas del
    // perfil — abren "Mis lotes" ya con la píldora del filtro correspondiente.
    const _hashTab = _hash.startsWith('lotes') ? 'lotes' : _hash;
    const _tab = ['lotes', 'premium', 'free'].includes(_hashTab) ? _hashTab : _mem('fm_cat_tab', 'free');
    return {
        authed: window.fmAuthed(),
        loading: true, error: false, q: '', ferments: [],
        groups: [], clasFilter: '',   // catálogo recipe-first + filtro por clasificación
        batches: [], batchesLoaded: false,
        statusFilter: _hash === 'lotes-completados' ? 'completed'
            : (_hash === 'lotes-activos' ? 'active' : _mem('fm_cat_status', 'active')),
        tab: _tab,
        // Con la pestaña ya resuelta (hash o memoria) no dejamos que el auto-salto a
        // "lotes" la pise: ese salto tras cargar los lotes era el parpadeo.
        _userSwitched: _tab !== 'free' || !!_hash,
        async load() {
            // Recordar la navegación en cuanto cambie, para que "volver" acierte.
            this.$watch('tab', v => { try { sessionStorage.setItem('fm_cat_tab', v); } catch (e) {} });
            this.$watch('statusFilter', v => { try { sessionStorage.setItem('fm_cat_status', v); } catch (e) {} });
            this.loading = true; this.error = false;
            try { this.groups = (await window.FermentyAPI.recipes()).groups || []; }
            catch (e) { this.error = true; }
            this.loading = false;
            if (this.authed) this.loadBatches();
        },
        async loadBatches() {
            try {
                this.batches = (await window.FermentyAPI.batches()).data || [];
                const inMarcha = this.batches.filter(b => ['active', 'paused'].includes(b.status));
                // Con lotes en marcha, la pestaña por defecto es "Mis lotes" (solo en la
                // primera visita: si venías con hash o memoria, _userSwitched lo frena).
                if (inMarcha.length && this.tab === 'free' && !this._userSwitched) this.tab = 'lotes';
                // Píldora por defecto: "Activos" salvo que no haya ninguno en marcha —
                // pero sin pisar el filtro recordado de una visita anterior.
                let _recordado = false; try { _recordado = !!sessionStorage.getItem('fm_cat_status'); } catch (e) {}
                if (!inMarcha.length && this.batches.some(b => b.status === 'completed') && !_recordado) this.statusFilter = 'completed';
            } catch (e) {}
            this.batchesLoaded = true;
        },
        // "Completados" es solo lo que se terminó con éxito — los descartados no
        // aportan nada que revisar y quedan fuera de Mis lotes.
        isFinished(b) { return b.status === 'completed'; },
        get shownBatches() {
            if (this.statusFilter === 'completed') {
                return this.batches.filter(b => b.status === 'completed')
                    .slice()
                    .sort((a, b) => new Date(b.actual_end_date || 0) - new Date(a.actual_end_date || 0));
            }
            return this.batches.filter(b => ['active', 'paused'].includes(b.status));
        },
        // Sin empezar: formuladas pero no arrancadas. Su propia sección, no mezcladas
        // con las activas (una intención, no una fermentación).
        get borradores() { return this.batches.filter(b => b.status === 'draft'); },
        difficulty(d) { return ({ easy: 'Fácil', medium: 'Medio', hard: 'Avanzado' })[d] || d || 'Fácil'; },
        statusLabel(s) { return ({ draft: 'Sin empezar', active: 'Activo', ready: 'Listo', paused: 'Pausa', completed: 'Hecho', discarded: 'Descartado' })[s] || s; },
        formatDate(d) { return d ? new Date(d).toLocaleDateString('es-ES', { day: 'numeric', month: 'short', year: 'numeric' }) : ''; },
        ringStyle(b) {
            const color = b.ferment_type?.category?.color || 'var(--gold-500)';
            return `--sz:52px;--thick:5px;--pct:${b.progress || 0};--tone:${color};`;
        },
        // El catálogo lista RECETAS (ocho nombres de fermento no son contenido; las
        // variaciones sí), aplanadas de los grupos que ya vienen por clasificación.
        get recetas() {
            const out = [];
            (this.groups || []).forEach(g => (g.recipes || []).forEach(r =>
                out.push(Object.assign({ _clas: g.name, _clasSlug: g.slug, _color: g.color }, r))));
            return out;
        },
        esPremium(r) { return r.ferment && r.ferment.plan_required === 'premium'; },
        get clasificaciones() {
            const m = new Map();
            this.recetas.forEach(r => { if (this.tab === 'premium' ? this.esPremium(r) : !this.esPremium(r)) m.set(r._clasSlug, r._clas); });
            return Array.from(m, ([slug, name]) => ({ slug, name }));
        },
        get recetasFiltradas() {
            const q = this.q.trim().toLowerCase();
            return this.recetas.filter(r => {
                if (this.tab === 'premium' ? !this.esPremium(r) : this.esPremium(r)) return false;
                if (this.clasFilter && r._clasSlug !== this.clasFilter) return false;
                if (q && !((r.name + ' ' + (r.ferment ? r.ferment.name : '') + ' ' + (r.description || '')).toLowerCase().includes(q))) return false;
                return true;
            });
        },
        // Qué es, derivado del perfil: suave/media/ácida (por acidez) + afrutada.
        saborDe(r) {
            const p = r.perfil || {}; const eq = p.equilibrio;
            let s = (eq == null) ? '' : (eq < 0.4 ? 'Suave' : (eq < 0.7 ? 'Equilibrada' : 'Ácida'));
            if (p.saborizante) s += (s ? ' y afrutada' : 'Afrutada');
            return s;
        },
    };
}
</script>
@endpush