{{--
    Stepper / Progress Steps Component
    Props:
      $steps   – array of step label strings
      $current – current step index (1-based)
      $variant – horizontal|vertical (default: horizontal)
--}}
@props([
    'steps'   => [],
    'current' => 1,
    'variant' => 'horizontal',
])

@php $total = count($steps); @endphp

<div
    x-data="stepper({{ $total }})"
    x-init="step = {{ $current }}"
>
    {{-- Step indicators --}}
    <ol @class([
        'flex'                              => $variant === 'horizontal',
        'flex-col space-y-4'                => $variant === 'vertical',
        'items-center justify-between w-full' => $variant === 'horizontal',
    ]) aria-label="Steps">
        @foreach($steps as $index => $label)
            @php $stepNum = $index + 1; @endphp
            <li @class([
                'flex items-center'                                                    => true,
                'flex-1 after:content-[\'\'] after:flex-1 after:h-0.5 after:mx-3 after:border-t-2' => $variant === 'horizontal' && !$loop->last,
                'after:border-primary-600 dark:after:border-primary-400'               => $variant === 'horizontal' && !$loop->last && $stepNum < $current,
                'after:border-surface-200 dark:after:border-surface-700'               => $variant === 'horizontal' && !$loop->last && $stepNum >= $current,
                'gap-3'                                                                => $variant === 'vertical',
            ])>
                <span class="flex items-center gap-3">
                    {{-- Circle --}}
                    <span
                        :class="{
                            'bg-primary-600 text-white border-primary-600': {{ $stepNum }} < step || {{ $stepNum }} === step,
                            'border-surface-300 text-surface-500 dark:border-surface-600 dark:text-surface-400': {{ $stepNum }} > step,
                        }"
                        class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full
                               border-2 text-sm font-semibold transition-all duration-200"
                    >
                        <template x-if="{{ $stepNum }} < step">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                            </svg>
                        </template>
                        <template x-if="{{ $stepNum }} >= step">
                            <span>{{ $stepNum }}</span>
                        </template>
                    </span>

                    {{-- Label --}}
                    <span
                        :class="{{ $stepNum }} <= step ? 'text-primary-700 dark:text-primary-400 font-semibold' : 'text-surface-500 dark:text-surface-400'"
                        class="hidden sm:block text-sm transition-colors duration-200"
                    >{{ $label }}</span>
                </span>
            </li>
        @endforeach
    </ol>

    {{-- Slot: step panels keyed by x-show="step === N" --}}
    <div class="mt-6">{{ $slot }}</div>

    {{-- Default navigation --}}
    @if(isset($navigation))
        {{ $navigation }}
    @else
        <div class="flex items-center justify-between mt-6">
            <x-buttons.secondary @click="prev()" x-show="step > 1">Previous</x-buttons.secondary>
            <x-buttons.primary @click="next()" x-show="step < {{ $total }}">Next</x-buttons.primary>
            <x-buttons.primary type="submit" x-show="step === {{ $total }}">Submit</x-buttons.primary>
        </div>
    @endif
</div>