{{--
    ShiftBridge Tabs Component
    
    Usage:
    <x-ui.tabs :tabs="$tabs" active="tab1">
        <x-slot:panel-tab1>
            <p>Content for tab 1</p>
        </x-slot:panel-tab1>
        <x-slot:panel-tab2>
            <p>Content for tab 2</p>
        </x-slot:panel-tab2>
    </x-ui.tabs>
    
    <x-ui.tabs :tabs="$tabs" vertical>
        <x-slot:panel-tab1>
            <p>Vertical tab content</p>
        </x-slot:panel-tab1>
    </x-ui.tabs>
    
    <x-ui.tabs :tabs="$tabs" variant="pills">
        <x-slot:panel-tab1>
            <p>Pills style tabs</p>
        </x-slot:panel-tab1>
    </x-ui.tabs>
    
    <x-ui.tabs :tabs="$tabs" variant="underline">
        <x-slot:panel-tab1>
            <p>Underline style tabs</p>
        </x-slot:panel-tab1>
    </x-ui.tabs>
    
    <x-ui.tabs :tabs="$tabs" full-width>
        <x-slot:panel-tab1>
            <p>Full width tabs</p>
        </x-slot:panel-tab1>
    </x-ui.tabs>
    
    Props:
    - tabs: array (required) - [['id' => 'tab1', 'label' => 'Tab 1', 'icon' => 'home', 'disabled' => false, 'badge' => 'New']]
    - active: string (default active tab ID)
    - variant: string (default, pills, underline, cards)
    - vertical: boolean (vertical layout)
    - fullWidth: boolean (tabs take full width)
    - size: string (sm, md, lg)
    - id: string (tabs container ID)
--}}

@props([
    'tabs' => [],
    'active' => null,
    'variant' => 'default',
    'vertical' => false,
    'fullWidth' => false,
    'size' => 'md',
    'id' => null,
])

@php
// Generate unique ID
$tabsId = $id ?? 'tabs-' . uniqid();

// Normalize tabs
$normalizedTabs = [];
foreach ($tabs as $key => $tab) {
    if (is_string($tab)) {
        $normalizedTabs[] = [
            'id' => is_string($key) ? $key : 'tab-' . $key,
            'label' => $tab,
            'icon' => null,
            'disabled' => false,
            'badge' => null,
        ];
    } else {
        $normalizedTabs[] = [
            'id' => $tab['id'] ?? $key,
            'label' => $tab['label'] ?? '',
            'icon' => $tab['icon'] ?? null,
            'disabled' => $tab['disabled'] ?? false,
            'badge' => $tab['badge'] ?? null,
        ];
    }
}

// Set default active tab
$activeTab = $active ?? ($normalizedTabs[0]['id'] ?? null);

// Size classes
$tabPadding = match($size) {
    'sm' => 'px-3 py-1.5 text-sm',
    'md' => 'px-4 py-2.5 text-sm',
    'lg' => 'px-5 py-3 text-base',
    default => 'px-4 py-2.5 text-sm',
};

$iconSize = match($size) {
    'sm' => 'w-4 h-4',
    'md' => 'w-4 h-4',
    'lg' => 'w-5 h-5',
    default => 'w-4 h-4',
};

// Variant classes for tabs
$getTabClasses = function($tab, $isActive, $variant, $tabPadding, $fullWidth) {
    $baseClasses = 'inline-flex items-center gap-2 font-medium transition-all duration-150 whitespace-nowrap';
    
    if ($fullWidth) {
        $baseClasses .= ' flex-1 justify-center';
    }
    
    $stateClasses = '';
    
    if ($tab['disabled']) {
        $stateClasses = 'opacity-50 cursor-not-allowed text-[var(--sb-text-secondary)]';
    } elseif ($variant === 'pills') {
        $stateClasses = $isActive 
            ? 'bg-[var(--sb-primary)] text-white rounded-md shadow-sm' 
            : 'text-[var(--sb-text-secondary)] hover:text-[var(--sb-text-primary)] hover:bg-slate-100 rounded-md';
    } elseif ($variant === 'underline') {
        $stateClasses = $isActive 
            ? 'text-[var(--sb-primary)] border-b-2 border-[var(--sb-primary)] -mb-px' 
            : 'text-[var(--sb-text-secondary)] hover:text-[var(--sb-text-primary)] border-b-2 border-transparent hover:border-[var(--sb-border)] -mb-px';
    } elseif ($variant === 'cards') {
        $stateClasses = $isActive 
            ? 'bg-white text-[var(--sb-primary)] border-t-2 border-x border-[var(--sb-border)] rounded-t-md -mb-px z-10' 
            : 'text-[var(--sb-text-secondary)] hover:text-[var(--sb-text-primary)] border-b border-[var(--sb-border)] hover:bg-slate-50';
    } else {
        // Default variant
        $stateClasses = $isActive 
            ? 'bg-[var(--sb-card-header-bg)] text-[var(--sb-primary)] border border-[var(--sb-border)] border-b-transparent rounded-t-md -mb-px z-10' 
            : 'text-[var(--sb-text-secondary)] hover:text-[var(--sb-text-primary)] hover:bg-[var(--sb-card-header-bg)] border border-transparent border-b-[var(--sb-border)] rounded-t-md -mb-px';
    }
    
    return implode(' ', [$baseClasses, $tabPadding, $stateClasses]);
};

// Container classes
$containerClasses = $vertical 
    ? 'flex gap-4' 
    : 'flex flex-col';

$listClasses = $vertical 
    ? 'flex flex-col gap-1 min-w-[200px]' 
    : 'flex border-b border-[var(--sb-border)]' . ($fullWidth ? ' w-full' : '');

$contentClasses = $vertical 
    ? 'flex-1' 
    : 'mt-0';

// Icon mapping
$iconSvg = function($icon, $size) {
    return match($icon) {
        'home' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>',
        'user' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>',
        'settings' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>',
        'bell' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>',
        'shield' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>',
        'mail' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>',
        'file' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>',
        'grid' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>',
        'list' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>',
        'star' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>',
        'heart' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>',
        'calendar' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>',
        'clock' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>',
        'check' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="' . $size . '"><polyline points="20 6 9 17 4 12"></polyline></svg>',
        default => null,
    };
};
@endphp

<div class="{{ $containerClasses }}" id="{{ $tabsId }}">
    {{-- Tab List --}}
    <div class="{{ $listClasses }}" role="tablist">
        @foreach($normalizedTabs as $tab)
            @php
                $isActive = $activeTab === $tab['id'];
                $tabClasses = $getTabClasses($tab, $isActive, $variant, $tabPadding, $fullWidth);
            @endphp
            
            <button
                type="button"
                role="tab"
                id="{{ $tabsId }}-tab-{{ $tab['id'] }}"
                aria-selected="{{ $isActive ? 'true' : 'false' }}"
                aria-controls="{{ $tabsId }}-panel-{{ $tab['id'] }}"
                class="{{ $tabClasses }}"
                {{ $tab['disabled'] ? 'disabled' : '' }}
                @if(!$tab['disabled'])
                    onclick="
                        // Hide all panels
                        document.querySelectorAll('#{{ $tabsId }} [role=tabpanel]').forEach(p => p.classList.add('hidden'));
                        document.querySelectorAll('#{{ $tabsId }} [role=tab]').forEach(t => {
                            t.setAttribute('aria-selected', 'false');
                            t.classList.remove('bg-[var(--sb-primary)]', 'text-white', 'bg-[var(--sb-card-header-bg)]', 'text-[var(--sb-primary)]', 'border-t-2', 'border-x');
                            @if($variant === 'pills')
                                t.classList.add('text-[var(--sb-text-secondary)]');
                            @elseif($variant === 'underline')
                                t.classList.remove('border-b-2', 'border-[var(--sb-primary)]', '-mb-px');
                                t.classList.add('border-b-2', 'border-transparent', '-mb-px');
                            @elseif($variant === 'cards' || $variant === 'default')
                                t.classList.remove('bg-white', 'border-b-transparent', 'z-10');
                                t.classList.add('border-b', 'border-[var(--sb-border)]');
                            @endif
                        });
                        
                        // Show active panel
                        document.getElementById('{{ $tabsId }}-panel-{{ $tab['id'] }}').classList.remove('hidden');
                        
                        // Update active tab styling
                        this.setAttribute('aria-selected', 'true');
                        @if($variant === 'pills')
                            this.classList.remove('text-[var(--sb-text-secondary)]', 'hover:bg-slate-100');
                            this.classList.add('bg-[var(--sb-primary)]', 'text-white');
                        @elseif($variant === 'underline')
                            this.classList.remove('border-b-2', 'border-transparent');
                            this.classList.add('border-b-2', 'border-[var(--sb-primary)]');
                        @elseif($variant === 'cards')
                            this.classList.remove('border-b');
                            this.classList.add('bg-white', 'text-[var(--sb-primary)]', 'border-t-2', 'border-x', 'border-[var(--sb-border)]', '-mb-px', 'z-10');
                        @else
                            this.classList.remove('border-b-[var(--sb-border)]');
                            this.classList.add('bg-[var(--sb-card-header-bg)]', 'text-[var(--sb-primary)]', 'border-b-transparent', 'z-10');
                        @endif
                    "
                @endif
            >
                @if($tab['icon'])
                    {!! $iconSvg($tab['icon'], $iconSize) !!}
                @endif
                
                <span>{{ $tab['label'] }}</span>
                
                @if($tab['badge'])
                    <x-ui.badge size="sm" variant="primary">{{ $tab['badge'] }}</x-ui.badge>
                @endif
            </button>
        @endforeach
    </div>
    
    {{-- Tab Panels --}}
    <div class="{{ $contentClasses }}">
        @foreach($normalizedTabs as $tab)
            @php
                $isActive = $activeTab === $tab['id'];
                $panelId = $tabsId . '-panel-' . $tab['id'];
            @endphp
            
            <div
                role="tabpanel"
                id="{{ $panelId }}"
                aria-labelledby="{{ $tabsId }}-tab-{{ $tab['id'] }}"
                class="{{ $isActive ? '' : 'hidden' }} {{ $vertical ? '' : ($variant === 'cards' || $variant === 'default' ? 'bg-white border border-[var(--sb-border)] border-t-0 rounded-b-md p-4' : 'pt-4') }}"
            >
                {{ ${'panel' . $tab['id']} ?? '' }}
            </div>
        @endforeach
    </div>
</div>