@props([
    'name',
    'options' => [],
    'value' => null,
    'placeholder' => 'Pilih...',
    'multiple' => false,
    'search' => false,
    'errorsBag' => null,
    'showErrorSpace' => true,

    // NEW
    'type' => 'default',
])

@php
    $oldValue = old($name);

    if ($oldValue === null) {
        $oldValue = $value ?? ($multiple ? [] : null);
    }

    // ✅ Normalize selected values (0-safe)
    if ($multiple) {
        $selectedValues = collect(
            is_array($oldValue)
                ? $oldValue
                : ($oldValue !== null ? explode(',', (string) $oldValue) : [])
        )
        ->map(fn ($v) => (string) $v)
        ->filter(fn ($v) => $v !== null && $v !== ''); // 🔥 tidak buang "0"
    } else {
        $selectedValues = collect([(string) $oldValue])
            ->filter(fn ($v) => $v !== null && $v !== ''); // 🔥 tidak buang "0"
    }

    // error handling
    $bag = $errorsBag ?? $errors ?? session('errors');
    $hasError = $bag && $bag->has($name);

    // normalize options (punyamu sudah bagus, biarkan)
    if ($options instanceof \Illuminate\Support\Collection) {
        $options = $options->mapWithKeys(function ($item, $key) {
            if (is_array($item)) {
                $value = $item['id'] ?? $key;
                $label = $item['name'] ?? $value;
            } elseif (is_object($item)) {
                $value = $item->id ?? $key;
                $label = $item->name ?? $value;
            } else {
                $value = $key;
                $label = $item;
            }

            return [(string) $value => $label];
        })->toArray();
    } elseif (is_array($options)) {
        $normalized = [];

        foreach ($options as $key => $item) {
            if (is_array($item)) {
                $value = (string) ($item['id'] ?? $key);
                $label = $item['name'] ?? $value;
            } elseif (is_object($item)) {
                $value = (string) ($item->id ?? $key);
                $label = $item->name ?? $value;
            } else {
                $value = (string) $key;
                $label = $item;
            }

            $normalized[$value] = $label;
        }

        $options = $normalized;
    }
@endphp

<div class="fluent-input-wrapper">
    <div {{ $attributes->merge([
            'class' => 'fluent-select ' . ($hasError ? 'is-invalid' : '')
        ]) }}
        data-placeholder="{{ $placeholder }}"
        data-multiple="{{ $multiple ? 'true' : 'false' }}"
        data-search="{{ is_bool($search) ? ($search ? 'true' : 'false') : $search }}"
        data-type="{{ $type }}">

        {{-- CONTROL --}}
        <button type="button"
                class="fluent-select__control"
                aria-haspopup="listbox"
                aria-expanded="false"
                aria-labelledby="{{ $name }}_label"
                {{ $disabled ?? false ? 'disabled' : '' }}>

            {{-- VALUE --}}
            <span class="fluent-select__value"
                data-type="{{ $type }}">
                {{-- JS akan render isi ini --}}
            </span>

            {{-- CHEVRON --}}
            <span class="fluent-select__chevron">
                <x-fluent-icon name="chevron_down" size="sm" />
            </span>
        </button>

        {{-- DROPDOWN --}}
        <div id="{{ $name }}" class="fluent-select__dropdown">

            @if ($search !== false && $search !== 'false')
                <div class="fluent-select__search">
                    <input type="text"
                        id="{{ '__'.$name }}_fake"
                        placeholder="Cari..."
                        autocomplete="off"
                        disabled />
                </div>
            @endif

            {{-- OPTIONS --}}
            <ul class="fluent-select__options" role="listbox">
                @foreach ($options as $key => $label)
                    <li data-value="{{ $key }}"
                        class="{{ $selectedValues->contains((string)$key) ? 'selected' : '' }}">

                        @if ($type === 'icon')
                            <span class="fluent-select__icon">
                                <img src="/assets/icon/fluent/{{ $label }}"
                                    width="18"
                                    height="18"
                                    alt="">
                            </span>

                            {{-- IMPORTANT: JS yang akan render label bersih --}}
                            <span class="fluent-select__text"
                                data-label="{{ $label }}">
                                {{ str_replace('_20_regular.svg', '', $label) }}
                            </span>
                        @else
                            <span class="fluent-select__text">
                                {{ $label }}
                            </span>
                        @endif

                    </li>
                @endforeach
            </ul>
        </div>

        {{-- HIDDEN INPUT --}}
        <input type="hidden"
            id="selected__{{ $name }}"
            name="{{ $name }}{{ $multiple ? '[]' : '' }}"
            value="{{ $multiple 
                    ? $selectedValues->implode(',') 
                    : ($selectedValues->first() !== null ? (string) $selectedValues->first() : '') }}">

    </div>

    {{-- FLUENT ERROR MESSAGE --}}
    @if($showErrorSpace)
        <div class="fluent-input-error">
            @if($hasError)
                @foreach($bag->get($name) as $message)
                    <div class="fluent-input-error-item">
                        <x-fluent-icon name="warning" class="text-danger" size="sm" />
                        <span>{{ $message }}</span>
                    </div>
                @endforeach
            @endif
        </div>
    @endif

</div>