@php
    $colorOptions = [
        'yellow' => ['bg' => 'bg-amber-400',  'label' => t('notes.color.yellow')],
        'blue'   => ['bg' => 'bg-blue-400',   'label' => t('notes.color.blue')],
        'green'  => ['bg' => 'bg-green-400',  'label' => t('notes.color.green')],
        'pink'   => ['bg' => 'bg-pink-400',   'label' => t('notes.color.pink')],
        'purple' => ['bg' => 'bg-purple-400', 'label' => t('notes.color.purple')],
        'gray'   => ['bg' => 'bg-gray-400',   'label' => t('notes.color.gray')],
    ];
@endphp

<div class="space-y-6">

    {{-- HEADER --}}
    <div class="flex items-start justify-between">
        <div>
            <h2 class="text-xl font-semibold text-gray-800">{{ t('notes.title') }}</h2>
            <p class="text-sm text-gray-500 mt-1">{{ t('notes.subtitle') }}</p>
        </div>
        <button wire:click="openCreate"
                class="flex items-center gap-1.5 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
            <x-heroicon-o-plus class="w-4 h-4"/>
            {{ t('notes.new') }}
        </button>
    </div>


    {{-- STATS --}}
    @if($stats['total'] > 0)
        <div class="grid grid-cols-2 gap-3">
            <div class="bg-white border border-gray-100 rounded-xl px-4 py-3.5 flex items-center gap-3 shadow-sm">
                <div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center shrink-0">
                    <x-heroicon-o-document-text class="w-4 h-4 text-amber-600"/>
                </div>
                <div>
                    <p class="text-lg font-semibold text-gray-800 leading-none">{{ $stats['total'] }}</p>
                    <p class="text-xs text-gray-400 mt-0.5">{{ t('notes.total') }}</p>
                </div>
            </div>
            <div class="bg-white border border-gray-100 rounded-xl px-4 py-3.5 flex items-center gap-3 shadow-sm">
                <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center shrink-0">
                    <x-heroicon-o-map-pin class="w-4 h-4 text-indigo-600"/>
                </div>
                <div>
                    <p class="text-lg font-semibold text-gray-800 leading-none">{{ $stats['pinned'] }}</p>
                    <p class="text-xs text-gray-400 mt-0.5">{{ t('notes.pinned') }}</p>
                </div>
            </div>
        </div>
    @endif


    {{-- SUCHE + FARBFILTER --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-4 flex flex-col sm:flex-row gap-3 items-start sm:items-center">
        <div class="relative flex-1 w-full">
            <x-heroicon-o-magnifying-glass class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"/>
            <input wire:model.live.debounce.300ms="search"
                   type="text"
                   placeholder="{{ t('notes.search') }}"
                   class="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
        </div>

        {{-- Farbfilter --}}
        <div class="flex items-center gap-1.5 shrink-0">
            <button wire:click="$set('filterColor', '')"
                    class="w-6 h-6 rounded-full border-2 transition-all {{ $filterColor === '' ? 'border-indigo-500 bg-indigo-100' : 'border-gray-200 bg-gray-100' }}">
            </button>
            @foreach($colorOptions as $key => $c)
                <button wire:click="$set('filterColor', '{{ $key }}')"
                        class="w-6 h-6 rounded-full {{ $c['bg'] }} border-2 transition-all {{ $filterColor === $key ? 'border-gray-700 scale-110' : 'border-transparent' }}">
                </button>
            @endforeach
        </div>
    </div>


    {{-- FORMULAR (Erstellen / Bearbeiten) --}}
    @if($showForm)
        <div class="bg-white border border-indigo-100 rounded-xl shadow-sm p-5 space-y-4">

            <div class="flex items-center justify-between">
                <p class="text-sm font-semibold text-gray-800">{{ $editId ? t('notes.edit') : t('notes.new') }}</p>
                <button wire:click="closeForm" class="text-gray-400 hover:text-gray-600">
                    <x-heroicon-o-x-mark class="w-5 h-5"/>
                </button>
            </div>

            <input wire:model="title"
                   type="text"
                   placeholder="{{ t('notes.title_placeholder') }}"
                   class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">

            <textarea wire:model="content"
                      rows="4"
                      placeholder="{{ t('notes.content_placeholder') }}"
                      class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400 resize-none"></textarea>

            @error('content') <p class="text-xs text-red-500">{{ $message }}</p> @enderror

            {{-- Farbwahl --}}
            <div class="flex items-center gap-3">
                <span class="text-xs text-gray-400">{{ t('notes.color_label') }}</span>
                <div class="flex gap-1.5">
                    @foreach($colorOptions as $key => $c)
                        <button wire:click="$set('color', '{{ $key }}')"
                                class="w-6 h-6 rounded-full {{ $c['bg'] }} border-2 transition-all {{ $color === $key ? 'border-gray-700 scale-110' : 'border-transparent' }}">
                        </button>
                    @endforeach
                </div>
            </div>

            <div class="flex gap-2 justify-end">
                <button wire:click="closeForm"
                        class="px-4 py-2 text-sm text-gray-500 hover:text-gray-700 border border-gray-200 rounded-lg transition-colors">
                    {{ t('common.cancel') }}
                </button>
                <button wire:click="save"
                        class="px-4 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors">
                    {{ $editId ? t('common.save') : t('common.create') }}
                </button>
            </div>

        </div>
    @endif


    {{-- NOTIZEN GRID --}}
    @if($notes->isEmpty())

        <div class="bg-white border border-gray-100 rounded-xl shadow-sm py-16 flex flex-col items-center gap-3">
            <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                <x-heroicon-o-document-text class="w-6 h-6 text-gray-400"/>
            </div>
            <p class="text-sm font-medium text-gray-600">{{ t('notes.no_notes') }}</p>
            @if($search || $filterColor)
                <button wire:click="$set('search', ''); $set('filterColor', '')"
                        class="text-xs text-indigo-600 hover:underline">{{ t('common.reset_filter') }}</button>
            @else
                <button wire:click="openCreate"
                        class="text-xs text-indigo-600 hover:underline">{{ t('notes.create_first') }}</button>
            @endif
        </div>

    @else

        <div class="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
            @foreach($notes as $note)
                @php $c = $note->colorClasses(); @endphp

                <div class="break-inside-avoid group relative {{ $c['bg'] }} border {{ $c['border'] }} rounded-xl p-4 shadow-sm"
                     wire:key="note-{{ $note->id }}">

                    {{-- Pin-Badge --}}
                    @if($note->pinned)
                        <div class="absolute top-3 right-10">
                            <x-heroicon-s-map-pin class="w-3.5 h-3.5 text-indigo-500"/>
                        </div>
                    @endif

                    {{-- Aktionen --}}
                    <div class="absolute top-2.5 right-2.5 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button wire:click="togglePin('{{ $note->id }}')"
                                class="{{ $note->pinned ? 'text-indigo-500' : 'text-gray-400' }} hover:text-indigo-600 p-1 rounded transition-colors"
                                title="{{ $note->pinned ? t('notes.unpin') : t('notes.pin') }}">
                            <x-heroicon-o-map-pin class="w-3.5 h-3.5"/>
                        </button>
                        <button wire:click="openEdit('{{ $note->id }}')"
                                class="text-gray-400 hover:text-gray-600 p-1 rounded transition-colors">
                            <x-heroicon-o-pencil class="w-3.5 h-3.5"/>
                        </button>
                        <button wire:click="delete('{{ $note->id }}')"
                                wire:confirm="{{ t('notes.confirm_delete') }}"
                                class="text-gray-400 hover:text-red-500 p-1 rounded transition-colors">
                            <x-heroicon-o-trash class="w-3.5 h-3.5"/>
                        </button>
                    </div>

                    {{-- Inhalt --}}
                    @if($note->title)
                        <p class="text-sm font-semibold {{ $c['text'] }} mb-1.5 pr-16">{{ $note->title }}</p>
                    @endif

                    <p class="text-sm {{ $c['text'] }} whitespace-pre-wrap leading-relaxed {{ $note->title ? '' : 'pr-16' }}">{{ $note->content }}</p>

                    <p class="text-[10px] text-gray-400 mt-3">
                        {{ $note->created_at->diffForHumans() }}
                    </p>

                </div>
            @endforeach
        </div>

    @endif

</div>
