{{--
    ShiftBridge Table Component
    
    Usage:
    <x-ui.table :headers="$headers" :rows="$rows" />
    
    <x-ui.table :headers="$headers" :rows="$rows" striped />
    
    <x-ui.table :headers="$headers" :rows="$rows" hover />
    
    <x-ui.table :headers="$headers" :rows="$rows" compact />
    
    <x-ui.table :headers="$headers" :rows="$rows" :selectable="true" />
    
    <x-ui.table :headers="$headers" :rows="$rows" loading />
    
    <x-ui.table :headers="$headers" :rows="$rows">
        <x-slot:empty>
            No data available
        </x-slot:empty>
    </x-ui.table>
    
    <x-ui.table :headers="$headers" :rows="$rows">
        <x-slot:pagination>
            {{ $rows->links() }}
        </x-slot:pagination>
    </x-ui.table>
    
    Props:
    - headers: array (required) - [['key' => 'name', 'label' => 'Name', 'sortable' => true, 'width' => '200px']]
    - rows: array/Collection (required) - data rows
    - selectable: boolean (enable row selection)
    - selected: array - selected row IDs
    - striped: boolean (striped rows)
    - hover: boolean (hover effect)
    - compact: boolean (compact/dense layout)
    - loading: boolean (show loading overlay)
    - empty: string (empty state message)
    - id: string (table ID)
--}}

@props([
    'headers' => [],
    'rows' => [],
    'selectable' => false,
    'selected' => [],
    'striped' => false,
    'hover' => true,
    'compact' => false,
    'loading' => false,
    'empty' => 'No data available',
    'id' => null,
])

@php
// Generate table ID
$tableId = $id ?? 'table-' . uniqid();

// Normalize headers
$normalizedHeaders = [];
foreach ($headers as $key => $header) {
    if (is_string($header)) {
        $normalizedHeaders[] = [
            'key' => $key,
            'label' => $header,
            'sortable' => false,
            'width' => null,
            'align' => 'left',
        ];
    } else {
        $normalizedHeaders[] = [
            'key' => $header['key'] ?? $key,
            'label' => $header['label'] ?? '',
            'sortable' => $header['sortable'] ?? false,
            'width' => $header['width'] ?? null,
            'align' => $header['align'] ?? 'left',
        ];
    }
}

// Row classes
$rowClasses = '';
if ($striped) {
    $rowClasses .= '[&_tr:nth-child(even)]:bg-slate-50/50 ';
}
if ($hover) {
    $rowClasses .= '[&_tr:hover]:bg-[var(--sb-primary)]/5 ';
}

// Cell padding
$cellPadding = $compact ? 'px-3 py-2' : 'px-4 py-3';

// Alignment classes
$alignClasses = [
    'left' => 'text-left',
    'center' => 'text-center',
    'right' => 'text-right',
];
@endphp

<div class="relative w-full overflow-hidden rounded-lg border border-[var(--sb-border)] bg-white" id="{{ $tableId }}-wrapper">
    {{-- Loading Overlay --}}
    @if($loading)
        <div class="absolute inset-0 bg-white/90 flex items-center justify-center z-20">
            <div class="flex items-center gap-3">
                <svg class="animate-spin h-5 w-5 text-[var(--sb-primary)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="text-sm text-[var(--sb-text-secondary)]">Loading...</span>
            </div>
        </div>
    @endif

    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse" id="{{ $tableId }}">
            {{-- Header --}}
            <thead>
                <tr class="border-b border-[var(--sb-border)] bg-[var(--sb-card-header-bg)]">
                    {{-- Select All Checkbox --}}
                    @if($selectable)
                        <th class="{{ $cellPadding }} w-10">
                            <input 
                                type="checkbox" 
                                class="rounded border-[var(--sb-border)] text-[var(--sb-primary)] focus:ring-[var(--sb-primary)]"
                                onclick="
                                    const table = document.getElementById('{{ $tableId }}');
                                    const checkboxes = table.querySelectorAll('tbody input[type=checkbox]');
                                    checkboxes.forEach(cb => cb.checked = this.checked);
                                "
                            />
                        </th>
                    @endif

                    @foreach($normalizedHeaders as $header)
                        <th 
                            class="{{ $cellPadding }} text-sm font-semibold text-[var(--sb-text-secondary)] {{ $alignClasses[$header['align']] }}"
                            @if($header['width']) style="width: {{ $header['width'] }}" @endif
                        >
                            @if($header['sortable'])
                                <button 
                                    type="button"
                                    class="flex items-center gap-1 hover:text-[var(--sb-primary)] transition-colors group"
                                >
                                    {{ $header['label'] }}
                                    <svg 
                                        xmlns="http://www.w3.org/2000/svg" 
                                        width="14" 
                                        height="14" 
                                        viewBox="0 0 24 24" 
                                        fill="none" 
                                        stroke="currentColor" 
                                        stroke-width="2" 
                                        stroke-linecap="round" 
                                        stroke-linejoin="round"
                                        class="text-[var(--sb-text-secondary)] group-hover:text-[var(--sb-primary)]"
                                    >
                                        <path d="m7 15 5 5 5-5"/>
                                        <path d="m7 9 5-5 5 5"/>
                                    </svg>
                                </button>
                            @else
                                {{ $header['label'] }}
                            @endif
                        </th>
                    @endforeach
                </tr>
            </thead>

            {{-- Body --}}
            <tbody class="divide-y divide-[var(--sb-border)] {{ $rowClasses }}">
                @forelse($rows as $rowIndex => $row)
                    @php
                        $rowId = is_object($row) ? ($row->id ?? $rowIndex) : ($row['id'] ?? $rowIndex);
                        $isSelected = in_array($rowId, $selected);
                    @endphp
                    <tr class="transition-colors {{ $isSelected ? 'bg-[var(--sb-primary)]/5' : 'bg-white' }}">
                        {{-- Row Checkbox --}}
                        @if($selectable)
                            <td class="{{ $cellPadding }}">
                                <input 
                                    type="checkbox" 
                                    name="selected[]" 
                                    value="{{ $rowId }}"
                                    {{ $isSelected ? 'checked' : '' }}
                                    class="rounded border-[var(--sb-border)] text-[var(--sb-primary)] focus:ring-[var(--sb-primary)] row-checkbox"
                                />
                            </td>
                        @endif

                        @foreach($normalizedHeaders as $header)
                            <td class="{{ $cellPadding }} text-sm text-[var(--sb-text-primary)] {{ $alignClasses[$header['align']] }}">
                                @if(isset(${'cell' . $header['key']}))
                                    {{ ${'cell' . $header['key']}($row) }}
                                @else
                                    @php
                                        $value = is_object($row) ? ($row->{$header['key']} ?? '') : ($row[$header['key']] ?? '');
                                    @endphp
                                    {{ $value }}
                                @endif
                            </td>
                        @endforeach
                    </tr>
                @empty
                    <tr>
                        <td 
                            colspan="{{ count($normalizedHeaders) + ($selectable ? 1 : 0) }}"
                            class="{{ $cellPadding }} text-center text-[var(--sb-text-secondary)]"
                        >
                            {{ $emptySlot ?? $empty }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination Slot --}}
    @if(isset($pagination))
        <div class="border-t border-[var(--sb-border)] px-4 py-3 bg-[var(--sb-card-header-bg)]">
            {{ $pagination }}
        </div>
    @endif
</div>

{{-- Selection Script --}}
@if($selectable)
    <script>
        (function() {
            const table = document.getElementById('{{ $tableId }}');
            const headerCheckbox = table.querySelector('thead input[type=checkbox]');
            const rowCheckboxes = table.querySelectorAll('tbody input[type=checkbox]');
            
            // Update header checkbox when row checkboxes change
            rowCheckboxes.forEach(cb => {
                cb.addEventListener('change', () => {
                    const allChecked = Array.from(rowCheckboxes).every(c => c.checked);
                    const someChecked = Array.from(rowCheckboxes).some(c => c.checked);
                    headerCheckbox.checked = allChecked;
                    headerCheckbox.indeterminate = someChecked && !allChecked;
                });
            });
        })();
    </script>
@endif