{{--
    ShiftBridge Select Component
    
    Usage:
    <x-ui.select name="country" :options="$countries" />
    <x-ui.select name="country" label="Country" :options="$countries" />
    <x-ui.select name="country" :options="$countries" placeholder="Select a country" />
    <x-ui.select name="country" :options="$countries" icon="map-pin" />
    <x-ui.select name="status" :options="$statuses" helper="Current user status" />
    <x-ui.select name="status" :options="$statuses" error="Please select a status" />
    <x-ui.select name="tags" :options="$tags" multiple />
    <x-ui.select name="tags" :options="$tags" searchable />
    <x-ui.select name="country" :options="$countries" size="sm" />
    <x-ui.select name="country" :options="$countries" size="lg" />
    <x-ui.select name="country" :options="$countries" disabled />
    <x-ui.select name="country" :options="$countries" clearable />
    
    Props:
    - name: string (required)
    - options: array (required) - format: [['value' => 'us', 'label' => 'United States', 'disabled' => false, 'icon' => 'flag']]
    - label: string
    - placeholder: string
    - value: string|array (for multiple)
    - helper: string
    - error: string
    - state: string (default, error, success)
    - size: string (sm, md, lg)
    - disabled: boolean
    - required: boolean
    - multiple: boolean
    - searchable: boolean
    - clearable: boolean
    - icon: string (Lucide icon name)
    - iconPosition: string (left, right)
    - id: string (defaults to name)
--}}

@props([
    'name' => null,
    'options' => [],
    'label' => null,
    'placeholder' => 'Select an option',
    'value' => null,
    'helper' => null,
    'error' => null,
    'state' => 'default',
    'size' => 'md',
    'disabled' => false,
    'required' => false,
    'multiple' => false,
    'searchable' => false,
    'clearable' => false,
    'icon' => null,
    'iconPosition' => 'left',
    'id' => null,
])

@php
// Auto-detect error state from $error prop or $errors bag
$hasError = $error || ($name && $errors && $errors->has($name));
if ($hasError) {
    $state = 'error';
}

// ID defaults to name
$inputId = $id ?? $name;

// Handle value as array for multiple select
$selectedValues = $multiple && !is_array($value) ? ($value ? [$value] : []) : ($value ?? []);
if (!is_array($selectedValues)) {
    $selectedValues = [$selectedValues];
}

// Normalize options to consistent format
$normalizedOptions = [];
foreach ($options as $key => $option) {
    if (is_array($option)) {
        $normalizedOptions[] = [
            'value' => $option['value'] ?? $option['id'] ?? $key,
            'label' => $option['label'] ?? $option['name'] ?? $option['text'] ?? '',
            'disabled' => $option['disabled'] ?? false,
            'icon' => $option['icon'] ?? null,
        ];
    } else {
        $normalizedOptions[] = [
            'value' => $key,
            'label' => $option,
            'disabled' => false,
            'icon' => null,
        ];
    }
}

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

// State classes
$stateClasses = match($state) {
    'error' => 'border-red-500 focus:border-red-500 focus:ring-red-500/20 bg-white text-red-900',
    'success' => 'border-green-500 focus:border-green-500 focus:ring-green-500/20 bg-white text-green-900',
    default => 'border-[var(--sb-border)] focus:border-[var(--sb-primary)] focus:ring-[var(--sb-primary)]/20 bg-white text-[var(--sb-text-primary)]',
};

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

// Icon padding adjustment
$iconPadding = match($size) {
    'sm' => $iconPosition === 'left' ? 'pl-8' : 'pr-8',
    'md' => $iconPosition === 'left' ? 'pl-10' : 'pr-10',
    'lg' => $iconPosition === 'left' ? 'pl-11' : 'pr-11',
    default => $iconPosition === 'left' ? 'pl-10' : 'pr-10',
};

// Icon positioning classes
$iconPositionClasses = match($size) {
    'sm' => $iconPosition === 'left' ? 'left-2.5' : 'right-2.5',
    'md' => $iconPosition === 'left' ? 'left-3' : 'right-3',
    'lg' => $iconPosition === 'left' ? 'left-3.5' : 'right-3.5',
    default => $iconPosition === 'left' ? 'left-3' : 'right-3',
};

// Base select classes
$selectClasses = implode(' ', [
    'block w-full rounded-md transition-all duration-150',
    'border focus:outline-none focus:ring-2 appearance-none',
    'disabled:opacity-60 disabled:cursor-not-allowed disabled:bg-slate-100',
    $sizeClasses,
    $stateClasses,
    $icon ? $iconPadding : '',
]);

// Label classes
$labelClasses = 'block text-sm font-medium text-[var(--sb-text-secondary)] mb-1.5';

// Helper text classes
$helperClasses = 'mt-1.5 text-xs text-[var(--sb-text-secondary)]';

// Error text classes
$errorClasses = 'mt-1.5 text-xs text-red-600 flex items-center gap-1';

// Chevron icon for dropdown indicator
$chevronIcon = '<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="' . $iconSize . ' text-[var(--sb-text-secondary)]"><polyline points="6 9 12 15 18 9"></polyline></svg>';

// Icon SVG mapping
$iconSvg = match($icon) {
    'search' => '<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="' . $iconSize . '"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
    'map-pin' => '<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="' . $iconSize . '"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>',
    'flag' => '<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="' . $iconSize . '"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></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="' . $iconSize . '"><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>',
    'building' => '<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="' . $iconSize . '"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><path d="M9 22v-4h6v4"></path><path d="M8 6h.01"></path><path d="M16 6h.01"></path><path d="M8 10h.01"></path><path d="M16 10h.01"></path><path d="M8 14h.01"></path><path d="M16 14h.01"></path></svg>',
    'briefcase' => '<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="' . $iconSize . '"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>',
    'layers' => '<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="' . $iconSize . '"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>',
    'tag' => '<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="' . $iconSize . '"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>',
    'filter' => '<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="' . $iconSize . '"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></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="' . $iconSize . '"><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>',
    '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="' . $iconSize . '"><polyline points="20 6 9 17 4 12"></polyline></svg>',
    default => null,
};
@endphp

<div {{ $attributes->merge(['class' => 'w-full']) }}>
    {{-- Label --}}
    @if($label)
        <label for="{{ $inputId }}" class="{{ $labelClasses }}">
            {{ $label }}
            @if($required)
                <span class="text-red-500">*</span>
            @endif
        </label>
    @endif
    
    {{-- Select wrapper --}}
    <div class="relative">
        {{-- Left Icon --}}
        @if($icon && $iconPosition === 'left')
            <div class="absolute inset-y-0 {{ $iconPositionClasses }} flex items-center pointer-events-none text-[var(--sb-text-secondary)]">
                {!! $iconSvg !!}
            </div>
        @endif
        
        {{-- Select element --}}
        <select
            name="{{ $name }}{{ $multiple ? '[]' : '' }}"
            id="{{ $inputId }}"
            @if($disabled) disabled @endif
            @if($required) required @endif
            @if($multiple) multiple @endif
            @if($hasError) aria-invalid="true" aria-describedby="{{ $inputId }}-error" @endif
            class="{{ $selectClasses }}"
        >
            {{-- Placeholder option (not for multiple) --}}
            @if(!$multiple && $placeholder)
                <option value="" disabled {{ empty($selectedValues) ? 'selected' : '' }}>
                    {{ $placeholder }}
                </option>
            @endif
            
            {{-- Empty state if no options --}}
            @if(empty($normalizedOptions))
                <option value="" disabled>No options available</option>
            @else
                {{-- Options --}}
                @foreach($normalizedOptions as $option)
                    @php
                        $isSelected = in_array($option['value'], $selectedValues);
                    @endphp
                    <option 
                        value="{{ $option['value'] }}" 
                        {{ $option['disabled'] ? 'disabled' : '' }}
                        {{ $isSelected ? 'selected' : '' }}
                    >
                        {{ $option['label'] }}
                    </option>
                @endforeach
            @endif
        </select>
        
        {{-- Right Icon --}}
        @if($icon && $iconPosition === 'right')
            <div class="absolute inset-y-0 {{ $iconPositionClasses }} flex items-center pointer-events-none text-[var(--sb-text-secondary)]">
                {!! $iconSvg !!}
            </div>
        @endif
        
        {{-- Dropdown chevron (always visible on right) --}}
        <div class="absolute inset-y-0 right-2 flex items-center pointer-events-none">
            {!! $chevronIcon !!}
        </div>
    </div>
    
    {{-- Helper text --}}
    @if($helper && !$hasError)
        <p class="{{ $helperClasses }}">{{ $helper }}</p>
    @endif
    
    {{-- Error message --}}
    @if($hasError)
        <p class="{{ $errorClasses }}" id="{{ $inputId }}-error">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
            {{ $error ?? ($errors && $name ? $errors->first($name) : '') }}
        </p>
    @endif
    
    {{-- Clearable button (JavaScript enhancement placeholder) --}}
    @if($clearable && !$disabled)
        <button 
            type="button" 
            class="absolute inset-y-0 right-8 flex items-center text-[var(--sb-text-secondary)] hover:text-[var(--sb-text-primary)] transition-colors"
            onclick="document.getElementById('{{ $inputId }}').selectedIndex = 0; document.getElementById('{{ $inputId }}').dispatchEvent(new Event('change'));"
        >
            <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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
    @endif
</div>