@props([
    'label' => 'Badge colour',
    'model',
    'options' => [],
])

@php
    $currentValue = data_get($this, $model, 'gray');
    $currentHex = \Modules\Helpdesk\Support\Color::css($currentValue);
    $currentText = \Modules\Helpdesk\Support\Color::text($currentValue);
    $currentLabel = \Modules\Helpdesk\Support\Color::label($currentValue);
@endphp

<div {{ $attributes->class('rounded-xl border border-zinc-200 bg-white p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50') }}>
    <div class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
        <div class="min-w-0 space-y-2">
            <label for="colour-select-{{ md5($model) }}" class="block text-xs font-bold uppercase tracking-wide text-zinc-600 dark:text-zinc-300">
                {{ $label }}
            </label>

            <div class="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
                <select
                    id="colour-select-{{ md5($model) }}"
                    wire:model.live="{{ $model }}"
                    class="h-9 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm font-semibold text-zinc-900 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
                >
                    @foreach ($options as $key => $option)
                        <option value="{{ $key }}" style="color: {{ $option['hex'] }};">
                            ● {{ $option['name'] }} — {{ $option['hex'] }}
                        </option>
                    @endforeach
                </select>

                <span
                    class="inline-flex h-9 min-w-28 items-center justify-center rounded-lg px-3 text-xs font-bold shadow-sm ring-1 ring-zinc-900/10 dark:ring-white/10"
                    style="background-color: {{ $currentHex }}; color: {{ $currentText }};"
                >
                    {{ $currentLabel }}
                </span>
            </div>

            <div class="flex flex-wrap items-center gap-1.5" aria-label="Available Helpdesk colours">
                @foreach ($options as $key => $option)
                    <button
                        type="button"
                        wire:click="$set('{{ $model }}', '{{ $key }}')"
                        title="{{ $option['name'] }} {{ $option['hex'] }}"
                        class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-white/80 shadow-sm ring-1 ring-zinc-900/10 transition hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500/40 dark:ring-white/15"
                        style="background-color: {{ $option['hex'] }}"
                    >
                        <span class="sr-only">Use {{ $option['name'] }}</span>
                    </button>
                @endforeach
            </div>
        </div>

        <div class="grid grid-cols-[2.75rem_minmax(0,11rem)] items-center gap-2 lg:justify-end">
            <label class="sr-only" for="custom-colour-picker">Choose a custom hex colour</label>
            <input
                id="custom-colour-picker"
                type="color"
                value="{{ $currentHex }}"
                wire:change="$set('{{ $model }}', $event.target.value)"
                class="h-9 w-11 cursor-pointer rounded-lg border border-zinc-300 bg-white p-1 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
                aria-label="Choose a custom hex colour"
            />

            <label class="sr-only" for="custom-colour-text">Custom hex colour</label>
            <input
                id="custom-colour-text"
                type="text"
                wire:model.live.debounce.500ms="{{ $model }}"
                class="h-9 w-full rounded-lg border border-zinc-300 bg-white px-3 text-xs font-semibold text-zinc-900 placeholder:text-zinc-400 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500"
                placeholder="#ffffff"
                aria-label="Custom hex colour"
            />
        </div>
    </div>
</div>