@extends('layouts.mobile')

@section('title', 'Receta')
@section('back', route('catalogue'))
@section('app-eyebrow', 'Receta')
@section('app-title', 'Receta')

@section('content')
<div x-data="recetaScreen('{{ $slug }}')" x-init="load()">

    <template x-if="loading"><div class="fm-pad"><div class="fm-skel" style="height:180px;"></div></div></template>
    <template x-if="error"><div class="fm-empty">No encontramos esta receta. <a href="{{ route('catalogue') }}" class="fm-btn--ghost">Volver</a></div></template>

    <template x-if="r">
        <div>
            <div style="height:200px;background:var(--green-050);background-size:cover;background-position:center;" :style="r.cover_image ? { backgroundImage: 'url(' + JSON.stringify(r.cover_image) + ')' } : {}"></div>

            <div class="fm-pad fm-stack" style="padding-top:16px;">
                <div>
                    <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                        <template x-if="r.category"><span class="fm-badge" :style="'color:' + r.category.color + ';background:color-mix(in srgb,' + r.category.color + ' 12%, var(--paper-0))'" x-text="r.category.name"></span></template>
                        <span class="fm-badge fm-badge--neutral" x-text="r.ferment.duration_days + ' días'"></span>
                        <template x-if="r.is_official"><span class="fm-badge fm-badge--green">Oficial</span></template>
                    </div>
                    <h1 class="fm-title" style="font-size:24px;margin:12px 0 0;" x-text="r.name"></h1>
                    <p class="fm-muted" style="font-size:14px;line-height:1.55;margin:8px 0 0;" x-text="r.description"></p>
                    {{-- Enlace al pilar (racimo, 9.3): «¿qué es la kombucha?» abre la
                         web —prosa editorial/SEO—, no se duplica en la app. --}}
                    <a :href="pilarUrl" target="_blank" rel="noopener"
                       style="font-size:12.5px;text-decoration:none;color:var(--green-700);display:inline-flex;align-items:center;gap:5px;margin-top:10px;">
                        <i class="fa-solid fa-circle-info"></i>
                        <span>¿Qué es <span x-text="r.ferment ? r.ferment.name : 'este fermento'"></span>?</span>
                        <i class="fa-solid fa-arrow-up-right-from-square" style="font-size:9px;opacity:.7;"></i>
                    </a>
                </div>

                {{-- Lista completa antes de los pasos: hace falta saber qué comprar/tener
                     a mano antes de empezar, no ir descubriéndolo paso a paso. --}}
                <template x-if="r.all_ingredients && r.all_ingredients.length">
                    <div class="fm-card">
                        <div class="fm-sectitle" style="margin-bottom:4px;"><span>Ingredientes</span>
                            <template x-if="r.base_yield"><span class="fm-badge fm-badge--gold" x-text="r.base_yield.value + ' ' + r.base_yield.unit"></span></template>
                        </div>
                        <p class="fm-muted" style="font-size:12px;margin:0 0 10px;">Ten todo esto a mano antes de empezar.</p>
                        <ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;">
                            <template x-for="i in r.all_ingredients" :key="i.id">
                                <li style="display:flex;justify-content:space-between;gap:10px;">
                                    <span style="font:500 14px var(--font-sans);color:var(--text-primary);" x-text="i.name + (i.is_optional ? ' (opcional)' : '')"></span>
                                    <span class="fm-data" style="font-size:13px;color:var(--text-secondary);" x-text="i.display"></span>
                                </li>
                            </template>
                        </ul>
                    </div>
                </template>

                <div>
                    <div class="fm-sectitle"><span>Pasos</span></div>
                    <div class="fm-stack" style="gap:10px;">
                        <template x-for="s in r.steps" :key="s.id">
                            <div class="fm-card fm-row" style="align-items:flex-start;gap:12px;">
                                <span class="fm-data" style="width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--green-050);color:var(--green-700);display:flex;align-items:center;justify-content:center;font-size:13px;" x-text="s.step_number"></span>
                                <div style="flex:1;">
                                    <div class="fm-title" style="font-size:15px;" x-text="s.title"></div>
                                    <div class="fm-muted fm-data" style="font-size:11px;margin-top:2px;" x-show="s.min_day !== null" x-text="dayRange(s)"></div>
                                    <div class="fm-muted" style="font-size:13.5px;line-height:1.5;margin-top:6px;" x-text="s.description"></div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

                {{-- ¿Qué necesito? — materiales filtrados por fermento (como la web).
                     Color propio (dorado) para diferenciarla de la lista de
                     ingredientes y de los pasos: es el otro "hazte con esto antes". --}}
                <a :href="matUrl()" class="fm-card fm-card--tap fm-row" style="text-decoration:none;background:var(--gold-100);border:none;">
                    <span class="fm-glyph" style="width:48px;height:48px;border-radius:14px;background:#fff;color:var(--gold-700);"><i class="fa-solid fa-toolbox" style="font-size:19px;"></i></span>
                    <div style="flex:1;min-width:0;">
                        <div class="fm-title" style="font-size:16px;font-weight:700;color:var(--green-900);">Equipo y materiales</div>
                        <div class="fm-muted" style="font-size:12.5px;margin-top:2px;color:var(--gold-700);opacity:.9;">Lo que necesitas tener a mano antes de empezar.</div>
                    </div>
                    <i class="fa-solid fa-chevron-right" style="color:var(--gold-700);font-size:13px;"></i>
                </a>
            </div>

            {{-- CTA fija --}}
            <div style="position:sticky;bottom:0;padding:12px 16px 20px;background:linear-gradient(180deg,transparent,var(--bg-canvas) 30%);">
                <button class="fm-btn fm-btn--gold fm-btn--block" @click="empezar()">
                    <i class="fa-solid" :class="r.ferment && r.ferment.usa_motor ? 'fa-wand-magic-sparkles' : 'fa-play'"></i>
                    <span x-text="r.ferment && r.ferment.usa_motor ? 'Formular con el mentor' : 'Empezar este fermento'"></span>
                </button>
            </div>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function recetaScreen(slug) {
    return {
        slug, loading: true, error: false, r: null,
        async load() {
            try { this.r = (await window.FermentyAPI.recipe(this.slug)).data; }
            catch (e) { this.error = true; }
            this.loading = false;
        },
        // El pilar vive en la web (SEO), no en la app: host actual sin el «app.».
        get pilarUrl() {
            if (!this.r || !this.r.ferment) return '#';
            const web = location.protocol + '//' + location.host.replace(/^app\./, '');
            return web + '/fermentos/' + this.r.ferment.slug;
        },
        dayRange(s) {
            if (s.max_day !== null && s.max_day !== s.min_day) return 'Día ' + s.min_day + '–' + s.max_day;
            return 'Día ' + s.min_day;
        },
        // Mismo mapeo fermento→categoría de materiales que fermentos/show web.
        matUrl() {
            const slug = this.r?.ferment?.slug || '';
            const cat = slug.includes('kombucha') ? 'kombucha'
                : slug.includes('kefir') ? 'kefir'
                : ['kimchi', 'chucrut'].includes(slug) ? 'kimchi'
                : slug.includes('vinagre') ? 'vinagre'
                : null;
            return '{{ route('tools.materiales') }}' + (cat ? '?tipo=' + cat : '');
        },
        empezar() {
            // Guías con ficha → el formulador del mentor; el resto → crear tanda legacy.
            const usaMotor = this.r && this.r.ferment && this.r.ferment.usa_motor;
            const ruta = usaMotor ? '{{ route('batch.formular') }}' : '{{ route('batch.create') }}';
            const next = ruta + '?recipe=' + encodeURIComponent(this.slug);
            if (window.fmRequireAuth(next)) window.location = next;
        },
    };
}
</script>
@endpush