@extends('layouts.app')

@section('title', $recipe->name)

@inject('units', 'App\Services\UnitService')
@php
    $cover = $recipe->image_url ?: $recipe->guide->cover_image_url;
    $metaDesc = \Illuminate\Support\Str::limit(strip_tags((string) ($recipe->summary ?: $recipe->description ?: '')), 155) ?: null;
    $yieldValue = $recipe->base_yield_value !== null
        ? rtrim(rtrim(number_format((float) $recipe->base_yield_value, 3, ',', '.'), '0'), ',')
        : null;
@endphp

@section('seo')
    {{-- Receta sombra (copia 1:1 de la guía): noindex + canonical a la ficha del
         fermento para no competir contra el propio pilar (receta.md §0/§2). --}}
    @if($esSombra && $recipe->guide)
        <x-seo :title="$recipe->name" :description="$metaDesc" :image="$cover" type="article"
               :noindex="true" :canonical="route('fermentos.show', $recipe->guide->slug)" />
    @else
        <x-seo :title="$recipe->name" :description="$metaDesc" :image="$cover" type="article"
               :canonical="route('recetas.show', $recipe->slug)" :noindex="true" />
    @endif
@endsection

@section('content')

<div class="row justify-content-center">
    <div class="col-12 col-lg-9">

        <div class="mb-3">
            <a href="{{ route('recetas.index') }}" class="btn-back">← Recetas</a>
        </div>

        {{-- Cabecera --}}
        <div class="fermenty-card mb-4 p-0" style="overflow:hidden;">
            <div style="height:220px;background-size:cover;background-position:center;background-image:url('{{ $cover }}');"></div>
            <div class="p-4">
                <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                    <div>
                        <div class="text-muted" style="font-size:0.82rem;text-transform:uppercase;letter-spacing:.03em;">
                            {{ $recipe->guide->name }}
                        </div>
                        <div class="page-title mb-1">{{ $recipe->name }}</div>
                        <div class="d-flex gap-3 text-muted" style="font-size:0.85rem;">
                            <span>⏱ {{ $recipe->guide->default_duration_days }} días</span>
                            @if($yieldValue)<span>🫙 {{ $yieldValue }} {{ $recipe->base_yield_unit }}</span>@endif
                            <span>🧾 {{ $steps->count() }} pasos</span>
                        </div>
                    </div>
                    <div>
                        @auth
                            @if($canAccess)
                                <a href="{{ route('batches.create', ['recipe' => $recipe->id]) }}"
                                   class="btn btn-fermenty-primary">Empezar esta receta</a>
                            @else
                                <a href="{{ route('suscripcion.show') }}" class="btn btn-fermenty-primary">Disponible con Pro</a>
                            @endif
                        @else
                            <a href="{{ route('register') }}" class="btn btn-fermenty-primary">Registrarse para empezar</a>
                        @endauth
                    </div>
                </div>

                @if($recipe->description)
                    <p class="mt-3 mb-0" style="color:#5a4a38;">{{ $recipe->description }}</p>
                @endif
            </div>
        </div>

        {{-- Ingredientes base: la lista completa (generales + los de cada paso) para
             saber todo lo que hace falta antes de empezar, no ir descubriéndolo
             paso a paso. --}}
        @if($allIngredients->isNotEmpty())
            <div class="fermenty-card mb-4">
                <div class="card-title d-flex justify-content-between align-items-center">
                    <span>Ingredientes</span>
                    @if($yieldValue)
                        <span class="fermenty-badge badge-active" style="font-size:0.75rem;">
                            para {{ $yieldValue }} {{ $recipe->base_yield_unit }}
                        </span>
                    @endif
                </div>
                <div class="text-muted mb-2" style="font-size:0.8rem;">
                    Ten todo esto a mano antes de empezar. Cantidades base; se ajustan a lo que prepares al iniciar el lote.
                </div>

                <ul class="list-unstyled mb-0 mt-2">
                    @foreach($allIngredients as $ing)
                        <li class="d-flex justify-content-between py-1" style="border-bottom:1px dashed #eee;">
                            <span>{{ $ing->ingredient?->name ?? $ing->name }}
                                @if($ing->is_optional)<span class="text-muted" style="font-size:0.76rem;">(opcional)</span>@endif
                            </span>
                            <span style="font-weight:600;white-space:nowrap;">
                                @if($ing->quantity !== null){{ $units->format((float) $ing->quantity, $ing->unit ?? 'unit', $user) }}@endif
                            </span>
                        </li>
                    @endforeach
                </ul>
                @if($stepIngredients->isNotEmpty())
                    <div class="text-muted mt-2" style="font-size:0.78rem;">Los que van en un paso concreto se repiten ahí abajo, junto a las instrucciones.</div>
                @endif
            </div>
        @endif

        {{-- Pasos --}}
        <div class="fermenty-card mb-4">
            <div class="card-title">Paso a paso</div>
            @foreach($steps as $step)
                @php
                    $min = $step->min_day;
                    $max = $step->max_day;
                    $ingsForStep = $stepIngredients->get($step->id, collect());
                    $stepActions = collect($step->actions ?? []);
                @endphp
                <div class="fermenty-step">
                    <div class="step-number">{{ $step->step_number }}</div>
                    <div class="step-body">
                        <div class="step-title">
                            {{ $step->title }}
                            @if($step->is_optional)
                                <span class="fermenty-badge badge-paused ms-1" style="font-size:0.7rem;">opcional</span>
                            @endif
                        </div>
                        @if($min !== null)
                            <div class="text-muted" style="font-size:0.78rem;">
                                Día {{ $min }}@if($max && $max != $min)–{{ $max }}@endif
                            </div>
                        @endif
                        <div class="step-desc mt-1">{{ $step->description }}</div>

                        @if($ingsForStep->isNotEmpty())
                            <div class="mt-2" style="background:#F4F9F1;border:1px solid #D8E8CF;border-radius:10px;padding:10px 12px;">
                                <div style="font-size:0.72rem;font-weight:700;color:#3E6B2E;text-transform:uppercase;">En este paso</div>
                                <ul class="list-unstyled mb-0 mt-1">
                                    @foreach($ingsForStep as $ing)
                                        <li class="d-flex justify-content-between py-1">
                                            <span>{{ $ing->ingredient?->name ?? $ing->name }}</span>
                                            <span style="font-weight:600;white-space:nowrap;">
                                                @if($ing->quantity !== null){{ $units->format((float) $ing->quantity, $ing->unit ?? 'unit', $user) }}@endif
                                            </span>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if($stepActions->count() > 0)
                            <div class="mt-2">
                                @foreach($stepActions as $action)
                                    <div class="step-action">
                                        <span class="step-action-type step-action-{{ $action['action_type'] }}">{{ $action['action_type'] }}</span>
                                        <span>{{ $action['description'] }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- CTA inferior --}}
        <div class="text-center mb-5">
            @auth
                @if($canAccess)
                    <a href="{{ route('batches.create', ['recipe' => $recipe->id]) }}"
                       class="btn btn-fermenty-primary btn-lg">Empezar esta receta</a>
                @else
                    <a href="{{ route('suscripcion.show') }}" class="btn btn-fermenty-primary btn-lg">Disponible con Pro</a>
                @endif
            @else
                <a href="{{ route('register') }}" class="btn btn-fermenty-primary btn-lg">Registrarse para empezar</a>
            @endauth
        </div>

    </div>
</div>

@endsection