@php
    // Sticky colours. Kept here as literal class strings, Tailwind only scans
    // resources/views, so a palette held in PHP would be purged from the build.
    $palette = [
        'yellow' => ['note' => 'bg-amber-50 ring-amber-200/80',   'dot' => 'bg-amber-300',  'chip' => 'bg-amber-100 text-amber-800'],
        'pink'   => ['note' => 'bg-rose-50 ring-rose-200/80',     'dot' => 'bg-rose-300',   'chip' => 'bg-rose-100 text-rose-800'],
        'blue'   => ['note' => 'bg-sky-50 ring-sky-200/80',       'dot' => 'bg-sky-300',    'chip' => 'bg-sky-100 text-sky-800'],
        'green'  => ['note' => 'bg-emerald-50 ring-emerald-200/80','dot' => 'bg-emerald-300','chip' => 'bg-emerald-100 text-emerald-800'],
        'slate'  => ['note' => 'bg-slate-50 ring-slate-200',      'dot' => 'bg-slate-300',  'chip' => 'bg-slate-200 text-slate-700'],
    ];
    $swatch = fn (string $key): array => $palette[$key] ?? $palette['yellow'];
@endphp

<div>
    @if ($open)
        {{-- Above the z-50 modals, so notes can be opened from inside an edit modal. --}}
        <div class="fixed inset-0 z-[70] flex justify-end"
             x-data="{ shown: false }"
             x-init="$nextTick(() => shown = true)"
             x-on:keydown.escape.window="$wire.close()">

            <div x-show="shown" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                 class="absolute inset-0 bg-slate-900/40 backdrop-blur-[2px]" wire:click="close"></div>

            <div x-show="shown"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="translate-x-8 opacity-0"
                 x-transition:enter-end="translate-x-0 opacity-100"
                 class="relative flex h-full w-full max-w-md flex-col bg-white shadow-2xl ring-1 ring-slate-200 sm:max-w-lg">

                {{-- Header --}}
                <div class="flex items-start justify-between gap-3 border-b border-slate-100 px-5 py-4">
                    <div class="flex min-w-0 items-start gap-3">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-700">
                            <x-icon name="sticky-note" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0">
                            <h2 class="truncate text-base font-semibold text-slate-900">{{ __('Notes') }}</h2>
                            <p class="truncate text-xs text-slate-400">
                                <span class="font-medium text-slate-500">{{ __($typeLabel) }}</span>
                                @if ($title !== '')
                                    · {{ $title }}
                                @endif
                            </p>
                        </div>
                    </div>
                    <button type="button" wire:click="close" class="rounded-lg p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600">
                        <x-icon name="x-mark" class="h-5 w-5" />
                    </button>
                </div>

                {{-- Composer --}}
                <div class="border-b border-slate-100 bg-slate-50/60 px-5 py-4">
                    <textarea wire:model="body" rows="3"
                              placeholder="{{ $editingId ? __('Edit this note…') : __('Stick a note on this record…') }}"
                              class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="body" class="mt-2" />

                    <div class="mt-3 flex items-center justify-between gap-3">
                        <div class="flex items-center gap-1.5">
                            @foreach ($palette as $key => $classes)
                                <button type="button" wire:click="$set('color', '{{ $key }}')"
                                        title="{{ __(\App\Models\Note::COLORS[$key]) }}"
                                        class="h-6 w-6 rounded-full ring-1 ring-inset ring-slate-900/10 transition {{ $classes['dot'] }} {{ $color === $key ? 'ring-2 ring-slate-500 ring-offset-2' : 'hover:scale-110' }}">
                                    <span class="sr-only">{{ __(\App\Models\Note::COLORS[$key]) }}</span>
                                </button>
                            @endforeach
                        </div>

                        <div class="flex items-center gap-2">
                            @if ($editingId)
                                <x-secondary-button type="button" wire:click="cancelEdit">{{ __('Cancel') }}</x-secondary-button>
                            @endif
                            <x-button type="button" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                                <x-icon :name="$editingId ? 'check' : 'plus'" class="mr-1 h-4 w-4" />
                                {{ $editingId ? __('Save note') : __('Add note') }}
                            </x-button>
                        </div>
                    </div>
                </div>

                {{-- Notes --}}
                <div class="flex-1 overflow-y-auto px-5 py-4">
                    @if ($notes->isEmpty())
                        <x-empty-state icon="sticky-note" :title="__('No notes yet')"
                            :message="__('Anyone on the team can stick a note here, a reminder, a client instruction, a heads-up for whoever picks this up next.')"
                            class="border-0 bg-transparent" />
                    @else
                        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                            @foreach ($notes as $note)
                                @php $s = $swatch($note->color); @endphp
                                <div wire:key="note-{{ $note->id }}"
                                     class="group relative flex flex-col rounded-xl p-3.5 shadow-sm ring-1 transition {{ $s['note'] }} {{ $note->is_pinned ? 'sm:col-span-2' : '' }}">

                                    <div class="flex items-center justify-between gap-2">
                                        <div class="flex min-w-0 items-center gap-2">
                                            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold {{ $s['chip'] }}">{{ $note->authorInitials() }}</span>
                                            <span class="truncate text-xs font-medium text-slate-700">{{ $note->user?->name ?: __('Someone') }}</span>
                                        </div>
                                        @if ($note->is_pinned)
                                            <x-icon name="map-pin" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
                                        @endif
                                    </div>

                                    <p class="mt-2 whitespace-pre-line break-words text-sm leading-relaxed text-slate-700">{{ $note->body }}</p>

                                    <div class="mt-3 flex items-end justify-between gap-2">
                                        <span class="text-[11px] text-slate-400" title="{{ $note->created_at?->format('Y-m-d H:i') }}">
                                            {{ $note->created_at?->diffForHumans() }}
                                        </span>

                                        @if ($this->canManage($note))
                                            <div class="flex items-center gap-1 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100">
                                                <button type="button" wire:click="togglePin({{ $note->id }})"
                                                        title="{{ $note->is_pinned ? __('Unpin') : __('Pin to top') }}"
                                                        class="rounded-md p-1 text-slate-400 transition hover:bg-white/70 hover:text-slate-600">
                                                    <x-icon name="map-pin" class="h-4 w-4" />
                                                </button>
                                                <button type="button" wire:click="edit({{ $note->id }})" title="{{ __('Edit') }}"
                                                        class="rounded-md p-1 text-slate-400 transition hover:bg-white/70 hover:text-indigo-600">
                                                    <x-icon name="pencil-square" class="h-4 w-4" />
                                                </button>
                                                <button type="button" wire:click="delete({{ $note->id }})" wire:confirm="{{ __('Delete this note?') }}" title="{{ __('Delete') }}"
                                                        class="rounded-md p-1 text-slate-400 transition hover:bg-white/70 hover:text-rose-600">
                                                    <x-icon name="trash" class="h-4 w-4" />
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>