{{-- Menu Item Card Component --}}
@props([
    'item' => null,
    'name' => '',
    'price' => 0,
    'priceAlPiatto' => null,
    'description' => '',
    'image' => null,
    'badges' => [],
    'allergens' => [],
    'options' => [],
    'weight' => null,
])

@php
    // Se viene passato un model MenuItem, estrai i dati
    if ($item) {
        $name = $item->name;
        $price = $item->price;
        $priceAlPiatto = $item->price_plate;
        $description = $item->description;
        $image = $item->image;
        $badges = $item->badge_list;
        $allergens = $item->allergens ?? [];
        $options = $item->options ?? [];
        $weight = $item->weight;
        $hasRealImage = $item->has_real_image;
    } else {
        $hasRealImage = $image && !str_contains($image, 'LogoUmami');
    }

    $badgeColors = [
        'GF' => 'bg-green-500 text-white',
        'Vegan' => 'bg-emerald-500 text-white',
        'Vegetariano' => 'bg-lime-500 text-white',
        'Best Seller' => 'bg-umami-accent text-white',
        'Fusion' => 'bg-purple-500 text-white',
        'New' => 'bg-red-500 text-white',
        'Piccante' => 'bg-orange-500 text-white',
    ];
@endphp

<article
    x-data="{ expanded: false }"
    {{ $attributes->merge(['class' => 'bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all group']) }}
>
    {{-- Image Container --}}
    <div class="relative aspect-[4/3] overflow-hidden bg-gray-100">
        @if($hasRealImage)
            <img
                src="{{ $image }}"
                alt="{{ $name }}"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                loading="lazy"
            />
            {{-- Zoom Button --}}
            <button
                @click="$dispatch('open-lightbox', { src: '{{ $image }}', title: '{{ $name }}' })"
                class="absolute top-3 right-3 p-2 bg-white/80 backdrop-blur-sm rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                aria-label="Ingrandisci immagine"
            >
                <svg class="w-5 h-5 text-umami-text" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
                </svg>
            </button>
        @else
            {{-- Placeholder --}}
            <div class="w-full h-full flex items-center justify-center bg-umami-light">
                <img src="/images/header/LogoUmami105px.png" alt="Umami Beer" class="w-24 opacity-20 grayscale" />
            </div>
        @endif

        {{-- Badges Overlay --}}
        @if(count($badges))
        <div class="absolute top-3 left-3 flex flex-wrap gap-1">
            @foreach($badges as $badge)
                @php $badgeColor = $badgeColors[$badge] ?? 'bg-umami-text text-white'; @endphp
                <span class="text-xs font-bold px-2 py-1 rounded-full {{ $badgeColor }}">
                    @if($badge === 'GF')
                        Senza Glutine
                    @else
                        {{ $badge }}
                    @endif
                </span>
            @endforeach
        </div>
        @endif
    </div>

    {{-- Content --}}
    <div class="p-4">
        {{-- Header --}}
        <div class="flex items-start justify-between mb-2 gap-2">
            <h3 class="font-bold text-lg text-umami-dark leading-tight">{{ $name }}</h3>
            <div class="text-right flex-shrink-0">
                <span class="text-lg font-bold text-umami-accent">€{{ number_format($price, 2, ',', '.') }}</span>
                @if($priceAlPiatto)
                    <div class="text-xs text-umami-text">Al piatto: €{{ number_format($priceAlPiatto, 2, ',', '.') }}</div>
                @endif
            </div>
        </div>

        {{-- Weight --}}
        @if($weight)
        <div class="text-xs text-umami-text mb-2">{{ $weight }}</div>
        @endif

        {{-- Description --}}
        <p class="text-sm text-umami-text line-clamp-2 mb-3">
            {{ $description }}
        </p>

        {{-- Options Pills --}}
        @if(count($options))
        <div class="flex flex-wrap gap-2 mb-3">
            @foreach($options as $option)
                <span class="text-xs px-3 py-1 bg-gray-100 text-umami-text rounded-full">
                    {{ $option }}
                </span>
            @endforeach
        </div>
        @endif

        {{-- Expand Button (if allergens) --}}
        @if(count($allergens))
        <button
            @click="expanded = !expanded"
            class="text-sm text-umami-accent hover:text-amber-700 font-medium flex items-center gap-1"
        >
            <span x-text="expanded ? 'Nascondi allergeni' : 'Mostra allergeni'"></span>
            <svg
                class="w-4 h-4 transition-transform duration-200"
                :class="{ 'rotate-180': expanded }"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
            >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
        </button>

        {{-- Expanded Content (Allergens) --}}
        <div
            x-show="expanded"
            x-collapse
            x-cloak
            class="mt-3 pt-3 border-t border-gray-100"
        >
            <div class="flex items-center gap-2 flex-wrap">
                <span class="text-xs text-umami-text">Allergeni:</span>
                @foreach($allergens as $allergen)
                    <img
                        src="/images/icons/allergeni/{{ strtolower($allergen) }}.png"
                        alt="{{ $allergen }}"
                        title="{{ $allergen }}"
                        class="w-12 h-12"
                        loading="lazy"
                    />
                @endforeach
            </div>
        </div>
        @endif
    </div>
</article>