@php
    $difficultyColors = [
        'easy' => 'bg-green-100 text-green-700',
        'medium' => 'bg-yellow-100 text-yellow-700',
        'high' => 'bg-orange-100 text-orange-700',
        'professional' => 'bg-red-100 text-red-700',
    ];
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ $recipe->name }}
            </h2>
            <div class="flex items-center gap-3 text-sm">
                @can('update', $recipe)
                    <a href="{{ route('recipes.edit', $recipe) }}" class="text-gray-600 hover:text-gray-900">{{ __('Edit') }}</a>
                @endcan
                <a href="{{ route('recipes.index') }}" class="text-gray-600 hover:text-gray-900">{{ __('Back') }}</a>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            @if (session('status'))
                <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-700 rounded-md">
                    {{ session('status') }}
                </div>
            @endif

            <article class="bg-white shadow-sm rounded-2xl overflow-hidden">
                @if ($recipe->media->isNotEmpty())
                    <div class="flex gap-1 h-72 overflow-x-auto snap-x">
                        @foreach ($recipe->media as $media)
                            <img src="{{ $media->url() }}" alt="{{ $media->original_name }}" class="h-72 w-auto min-w-full object-cover snap-center">
                        @endforeach
                    </div>
                @else
                    <div class="h-40 bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center text-gray-400">
                        {{ __('No photos yet') }}
                    </div>
                @endif

                <div class="p-8">
                    <div class="flex flex-wrap items-center gap-2 mb-4">
                        <span class="text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded-full {{ $difficultyColors[$recipe->difficulty] ?? 'bg-gray-100 text-gray-700' }}">
                            {{ __(ucfirst($recipe->difficulty)) }}
                        </span>
                        <span class="text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded-full bg-gray-100 text-gray-600">
                            {{ $recipe->category->name }}
                        </span>
                        @if ($recipe->time)
                            <span class="text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded-full bg-gray-100 text-gray-600">
                                {{ $recipe->time }} {{ $recipe->unit }}
                            </span>
                        @endif
                        @foreach ($recipe->tags as $tag)
                            <span class="text-xs px-2.5 py-1 rounded-full border border-gray-200 text-gray-500">#{{ $tag->name }}</span>
                        @endforeach
                    </div>

                    @if ($recipe->description)
                        <div class="prose prose-sm max-w-none text-gray-600 break-words mb-8">{!! $recipe->description !!}</div>
                    @endif

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                        @if ($recipe->ingredients->isNotEmpty())
                            <div x-data="{ checked: {} }">
                                <h3 class="font-semibold text-gray-900 mb-4 text-lg">
                                    {{ __('Ingredients') }}
                                    <span class="text-sm font-normal text-gray-400" x-text="`(${Object.values(checked).filter(Boolean).length}/{{ $recipe->ingredients->count() }})`"></span>
                                </h3>
                                <ul class="space-y-3">
                                    @foreach ($recipe->ingredients as $ingredient)
                                        <li class="flex items-center gap-3">
                                            <input type="checkbox" @change="checked[{{ $ingredient->id }}] = !checked[{{ $ingredient->id }}]" class="rounded border-gray-300 text-gray-800 shadow-sm focus:ring-gray-800 shrink-0">
                                            @if ($ingredient->media->isNotEmpty())
                                                <img src="{{ $ingredient->media->first()->url() }}" class="h-10 w-10 rounded-full object-cover border shrink-0">
                                            @else
                                                <span class="h-2 w-2 rounded-full bg-gray-300 shrink-0"></span>
                                            @endif
                                            <span class="text-gray-700" :class="checked[{{ $ingredient->id }}] && 'line-through text-gray-400'">
                                                {{ $ingredient->name }}
                                                @if ($ingredient->quantity)
                                                    <span class="text-gray-400">&middot; {{ $ingredient->quantity }}</span>
                                                @endif
                                            </span>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if ($recipe->steps->isNotEmpty())
                            <div x-data="{ checked: {} }">
                                <h3 class="font-semibold text-gray-900 mb-4 text-lg">
                                    {{ __('Steps') }}
                                    <span class="text-sm font-normal text-gray-400" x-text="`(${Object.values(checked).filter(Boolean).length}/{{ $recipe->steps->count() }})`"></span>
                                </h3>
                                <ol class="space-y-5">
                                    @foreach ($recipe->steps as $step)
                                        <li class="flex gap-3">
                                            <input type="checkbox" @change="checked[{{ $step->id }}] = !checked[{{ $step->id }}]" class="mt-1 rounded border-gray-300 text-gray-800 shadow-sm focus:ring-gray-800 shrink-0">
                                            <span class="flex items-center justify-center h-6 w-6 rounded-full bg-gray-800 text-white text-xs font-semibold shrink-0">{{ $loop->iteration }}</span>
                                            <div class="flex-1" :class="checked[{{ $step->id }}] && 'line-through text-gray-400'">
                                                <p class="font-medium text-gray-800">{{ $step->name }}</p>
                                                @if ($step->description)
                                                    <div class="prose prose-sm max-w-none text-gray-500 mt-0.5">{!! $step->description !!}</div>
                                                @endif
                                                @if ($step->media->isNotEmpty())
                                                    <div class="flex gap-2 mt-2">
                                                        @foreach ($step->media as $media)
                                                            <img src="{{ $media->url() }}" class="h-16 w-16 rounded-md object-cover border">
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        </li>
                                    @endforeach
                                </ol>
                            </div>
                        @endif
                    </div>

                    @if ($recipe->notes)
                        <div class="mt-8 pt-6 border-t text-sm text-gray-500">
                            <span class="font-semibold text-gray-700">{{ __('Notes') }}:</span> {{ $recipe->notes }}
                        </div>
                    @endif
                </div>
            </article>
        </div>
    </div>
</x-app-layout>