{{--
    Tabs Component - TailAdmin style
    
    Usage:
    <x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
        <x-proxmox::ui.tab-panel name="Overview">Overview content</x-proxmox::ui.tab-panel>
        <x-proxmox::ui.tab-panel name="Settings">Settings content</x-proxmox::ui.tab-panel>
        <x-proxmox::ui.tab-panel name="Logs">Logs content</x-proxmox::ui.tab-panel>
    </x-proxmox::ui.tabs>
--}}

@props([
    'tabs' => [],
    'active' => null,
    'variant' => 'default',
])

@php
    $variantClasses = [
        'default' => [
            'container' => 'inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-800 dark:bg-gray-800/50',
            'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-theme-sm font-medium transition-all duration-150',
            'active' => 'bg-white text-gray-800 shadow-theme-xs dark:bg-gray-900 dark:text-white/90',
            'inactive' => 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
        ],
        'pills' => [
            'container' => 'inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-gray-800 dark:bg-gray-800/50',
            'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-theme-sm font-medium transition-all duration-150',
            'active' => 'bg-white text-gray-800 shadow-theme-xs dark:bg-gray-900 dark:text-white/90',
            'inactive' => 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300',
        ],
        'buttons' => [
            'container' => 'flex gap-2',
            'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-4 py-2.5 text-theme-sm font-medium transition-colors duration-150',
            'active' => 'bg-brand-500 text-white shadow-theme-xs hover:bg-brand-600',
            'inactive' => 'bg-white text-gray-700 shadow-theme-xs ring-1 ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700',
        ],
    ];
    
    $styles = $variantClasses[$variant] ?? $variantClasses['default'];
    $activeTab = $active ?? ($tabs[0] ?? null);
@endphp

<div 
    x-data="{ activeTab: '{{ $activeTab }}' }"
    {{ $attributes }}
>
    {{-- Tab Navigation --}}
    <div class="{{ $styles['container'] }}">
        @foreach($tabs as $tab)
            @php
                $tabName = is_array($tab) ? ($tab['name'] ?? $tab['label'] ?? '') : $tab;
                $tabLabel = is_array($tab) ? ($tab['label'] ?? $tab['name'] ?? '') : $tab;
                $tabIcon = is_array($tab) ? ($tab['icon'] ?? null) : null;
                $tabBadge = is_array($tab) ? ($tab['badge'] ?? null) : null;
            @endphp
            <button
                type="button"
                @click="activeTab = '{{ $tabName }}'"
                :class="activeTab === '{{ $tabName }}' ? '{{ $styles['active'] }}' : '{{ $styles['inactive'] }}'"
                class="{{ $styles['tab'] }} gap-2"
            >
                @if($tabIcon)
                    <x-dynamic-component :component="$tabIcon" class="size-4" />
                @endif
                <span>{{ $tabLabel }}</span>
                @if($tabBadge)
                    <span class="ml-1.5 rounded-full bg-brand-50 px-2 py-0.5 text-theme-xs font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">
                        {{ $tabBadge }}
                    </span>
                @endif
            </button>
        @endforeach
    </div>
    
    {{-- Tab Panels --}}
    <div class="mt-5">
        {{ $slot }}
    </div>
</div>