@props([
    'product',
    'campaign' => null,
    'showProgress' => true,
    'showRemaining' => true,
    'size' => 'default', // 'small', 'default', 'large'
])

@php
    $availability = $product->availability_info ?? null;

    // If availability info isn't set, calculate it
if (!$availability && $campaign) {
    $pivot = $product->pivot ?? $campaign->products()->where('product_id', $product->id)->first()?->pivot;
    if ($pivot) {
        $availability = [
            'is_available' =>
                $pivot->is_active &&
                ($pivot->quantity_limit === null || $pivot->quantity_donated < $pivot->quantity_limit),
            'is_active' => $pivot->is_active,
            'has_limit' => $pivot->quantity_limit !== null,
            'quantity_limit' => $pivot->quantity_limit,
            'quantity_donated' => $pivot->quantity_donated,
            'remaining_quantity' => $pivot->quantity_limit
                ? max(0, $pivot->quantity_limit - $pivot->quantity_donated)
                : null,
            'limit_reached' => $pivot->quantity_limit && $pivot->quantity_donated >= $pivot->quantity_limit,
            'progress_percentage' => $pivot->quantity_limit
                ? min(100, ($pivot->quantity_donated / $pivot->quantity_limit) * 100)
                : 0,
        ];
    }
}

// Size classes
$sizeClasses = [
    'small' => [
        'text' => 'text-xs',
        'badge' => 'px-1.5 py-0.5 text-xs',
        'progress' => 'h-1',
        'spacing' => 'space-y-1',
    ],
    'default' => [
        'text' => 'text-sm',
        'badge' => 'px-2 py-1 text-xs',
        'progress' => 'h-2',
        'spacing' => 'space-y-2',
    ],
    'large' => [
        'text' => 'text-base',
        'badge' => 'px-3 py-1 text-sm',
        'progress' => 'h-3',
        'spacing' => 'space-y-3',
    ],
];

$classes = $sizeClasses[$size] ?? $sizeClasses['default'];
@endphp

@if ($availability)
    <div class="product-availability {{ $classes['spacing'] }}">
        {{-- Availability Status Badge --}}
        <div class="flex items-center gap-2">
            @if ($availability['is_available'])
                <span
                    class="inline-flex items-center {{ $classes['badge'] }} font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200">
                    <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                            clip-rule="evenodd"></path>
                    </svg>
                    Available
                </span>
            @elseif($availability['limit_reached'])
                <span
                    class="inline-flex items-center {{ $classes['badge'] }} font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200">
                    <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                            clip-rule="evenodd"></path>
                    </svg>
                    Goal Reached
                </span>
            @else
                <span
                    class="inline-flex items-center {{ $classes['badge'] }} font-medium rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                    <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                            clip-rule="evenodd"></path>
                    </svg>
                    Unavailable
                </span>
            @endif
        </div>

        {{-- Quantity Information --}}
        @if ($availability['has_limit'] && $showRemaining)
            <div class="{{ $classes['text'] }} text-gray-600 dark:text-gray-400">
                @if ($availability['is_available'])
                    <span class="font-medium">{{ $availability['remaining_quantity'] }}</span> of
                    <span class="font-medium">{{ $availability['quantity_limit'] }}</span> needed
                @else
                    <span class="font-medium">{{ $availability['quantity_donated'] }}</span> of
                    <span class="font-medium">{{ $availability['quantity_limit'] }}</span> donated
                @endif
            </div>
        @elseif(!$availability['has_limit'])
            <div class="{{ $classes['text'] }} text-gray-500 dark:text-gray-400">
                No limit set
            </div>
        @endif

        {{-- Progress Bar --}}
        @if ($availability['has_limit'] && $showProgress)
            <div class="progress-container">
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full {{ $classes['progress'] }}">
                    <div class="rounded-full {{ $classes['progress'] }} transition-all duration-300 {{ $availability['limit_reached'] ? 'bg-red-600' : 'bg-green-600' }}"
                        style="width: {{ $availability['progress_percentage'] }}%">
                    </div>
                </div>
                @if ($size !== 'small')
                    <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
                        <span>{{ $availability['quantity_donated'] }}</span>
                        <span>{{ number_format($availability['progress_percentage'], 1) }}%</span>
                        <span>{{ $availability['quantity_limit'] }}</span>
                    </div>
                @endif
            </div>
        @endif

        {{-- Goal Reached Message --}}
        @if ($availability['limit_reached'])
            <div class="{{ $classes['text'] }} text-red-600 dark:text-red-400 font-medium">
                🎉 Donation goal reached! Thank you!
            </div>
        @endif
    </div>
@endif