{{--
    Tabs Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    
    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
    $activeTab = $active ?? ($tabs[0] ?? null);
@endphp

<div 
    x-data="{ activeTab: '{{ $activeTab }}' }"
    {{ $attributes }}
>
    {{-- Tab Navigation --}}
    @if($variant === 'pills')
        <div class="flex flex-wrap gap-1 p-1 bg-background-secondary dark:bg-gray-800 rounded-lg border border-neutral dark:border-gray-700">
    @elseif($variant === 'buttons')
        <div class="flex gap-2">
    @else
        <ul class="flex flex-wrap list-none border-b border-neutral dark:border-gray-700">
    @endif
        @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
            @if($variant === 'pills')
                <button
                    type="button"
                    @click="activeTab = '{{ $tabName }}'"
                    :class="activeTab === '{{ $tabName }}' 
                        ? 'text-primary bg-background dark:bg-gray-700 shadow-sm' 
                        : 'text-secondary dark:text-gray-400 hover:text-primary hover:bg-black/5 dark:hover:bg-white/5'"
                    class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer"
                >
                    @if($tabIcon)
                        <x-dynamic-component :component="$tabIcon" class="size-4" />
                    @endif
                    <span>{{ $tabLabel }}</span>
                    @if($tabBadge)
                        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold text-primary bg-primary/10 rounded-full">{{ $tabBadge }}</span>
                    @endif
                </button>
            @elseif($variant === 'buttons')
                <button
                    type="button"
                    @click="activeTab = '{{ $tabName }}'"
                    :class="activeTab === '{{ $tabName }}' 
                        ? 'text-white bg-primary border-primary' 
                        : 'text-secondary dark:text-gray-400 bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 hover:bg-background-secondary dark:hover:bg-gray-700 hover:border-gray-400'"
                    class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border rounded-lg shadow-sm transition-all duration-200 cursor-pointer"
                >
                    @if($tabIcon)
                        <x-dynamic-component :component="$tabIcon" class="size-4" />
                    @endif
                    <span>{{ $tabLabel }}</span>
                    @if($tabBadge)
                        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold text-primary bg-primary/10 rounded-full">{{ $tabBadge }}</span>
                    @endif
                </button>
            @else
                <li class="-mb-px">
                    <button
                        type="button"
                        @click="activeTab = '{{ $tabName }}'"
                        :class="activeTab === '{{ $tabName }}' 
                            ? 'text-primary bg-background dark:bg-gray-800 border-neutral dark:border-gray-700 border-b-background dark:border-b-gray-800' 
                            : 'text-secondary dark:text-gray-400 border-transparent hover:text-primary hover:border-gray-200 dark:hover:border-gray-600 hover:bg-black/5 dark:hover:bg-white/5'"
                        class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium border border-b-0 rounded-t-lg transition-all duration-150 cursor-pointer"
                    >
                        @if($tabIcon)
                            <x-dynamic-component :component="$tabIcon" class="size-4" />
                        @endif
                        <span>{{ $tabLabel }}</span>
                        @if($tabBadge)
                            <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-semibold text-primary bg-primary/10 rounded-full">{{ $tabBadge }}</span>
                        @endif
                    </button>
                </li>
            @endif
        @endforeach
    @if($variant === 'pills' || $variant === 'buttons')
        </div>
    @else
        </ul>
    @endif
    
    {{-- Tab Panels --}}
    <div class="mt-5">
        {{ $slot }}
    </div>
</div>