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

    {{-- SLIDE-IN PANEL --}}
    <div x-cloak
         x-show="$wire.panelOpen"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-40 flex justify-end">

        {{-- Backdrop --}}
        <div class="absolute inset-0 bg-black/30 backdrop-blur-sm"
             wire:click="closePanel"></div>

        {{-- Panel --}}
        <div x-show="$wire.panelOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="translate-x-full"
             x-transition:enter-end="translate-x-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="translate-x-0"
             x-transition:leave-end="translate-x-full"
             class="relative w-full max-w-md bg-white shadow-2xl flex flex-col z-10">

            {{-- Panel Header --}}
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
                <h3 class="text-base font-semibold text-gray-800">
                    {{ $editId ? t('contacts.edit') : t('contacts.new') }}
                </h3>
                <button wire:click="closePanel"
                        class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                    <x-heroicon-o-x-mark class="w-5 h-5"/>
                </button>
            </div>

            {{-- Formular --}}
            <div class="flex-1 overflow-y-auto px-6 py-5 space-y-4">

                {{-- Name --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">
                        {{ t('contacts.name') }} <span class="text-red-400">*</span>
                    </label>
                    <input wire:model="name"
                           type="text"
                           placeholder="{{ t('contacts.name_placeholder') }}"
                           class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
                    @error('name') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- E-Mail --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('contacts.email') }}</label>
                    <div class="relative">
                        <x-heroicon-o-envelope class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"/>
                        <input wire:model="email"
                               type="email"
                               placeholder="{{ t('contacts.email_placeholder') }}"
                               class="w-full pl-9 border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
                    </div>
                    @error('email') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Telefon --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('contacts.phone') }}</label>
                    <div class="relative">
                        <x-heroicon-o-phone class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"/>
                        <input wire:model="phone"
                               type="text"
                               placeholder="{{ t('contacts.phone_placeholder') }}"
                               class="w-full pl-9 border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
                    </div>
                </div>

                {{-- Typ --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('contacts.category') }}</label>
                    <div class="grid grid-cols-2 gap-2">
                        @foreach(['privat' => t('contacts.cat_private'), 'arbeit' => t('contacts.cat_work'), 'kunde' => t('contacts.cat_customer'), 'sonstiges' => t('contacts.cat_other')] as $key => $label)
                            <button wire:click="$set('type', '{{ $key }}')"
                                    type="button"
                                    class="py-2 text-xs font-medium rounded-lg border transition-all
                                        {{ $type === $key
                                            ? 'bg-indigo-600 text-white border-indigo-600'
                                            : 'bg-white text-gray-500 border-gray-200 hover:border-gray-300 hover:text-gray-700' }}">
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>
                </div>

                {{-- Geburtstag --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">
                        {{ t('contacts.birthday') }}
                    </label>
                    <div class="relative">
                        <x-heroicon-o-cake class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"/>
                        <input wire:model="birthday"
                               type="date"
                               class="w-full pl-9 border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 text-gray-700">
                    </div>
                    @error('birthday') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Notizen --}}
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1.5">{{ t('contacts.notes') }}</label>
                    <textarea wire:model="notes"
                              rows="4"
                              placeholder="{{ t('contacts.notes_placeholder') }}"
                              class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400 resize-none"></textarea>
                </div>

            </div>

            {{-- Panel Footer --}}
            <div class="px-6 py-4 border-t border-gray-100 flex gap-3">
                <button wire:click="closePanel"
                        class="flex-1 py-2.5 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                    {{ t('common.cancel') }}
                </button>
                <button wire:click="save"
                        class="flex-1 py-2.5 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>
    </div>


    {{-- HEADER --}}
    <div class="flex items-start justify-between">
        <div>
            <h2 class="text-xl font-semibold text-gray-800">{{ t('contacts.title') }}</h2>
            <p class="text-sm text-gray-500 mt-1">{{ t('contacts.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('contacts.new') }}
        </button>
    </div>


    {{-- STATS --}}
    @if($stats && $stats->total > 0)
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            @foreach([
                ['label' => t('common.total'),    'value' => $stats->total,     'color' => 'text-gray-600',   'bg' => 'bg-gray-100',    'filter' => ''],
                ['label' => t('contacts.cat_private'),    'value' => $stats->privat,    'color' => 'text-blue-600',   'bg' => 'bg-blue-50',     'filter' => 'privat'],
                ['label' => t('contacts.cat_work'),    'value' => $stats->arbeit,    'color' => 'text-indigo-600', 'bg' => 'bg-indigo-50',   'filter' => 'arbeit'],
                ['label' => t('contacts.customers'),    'value' => $stats->kunde,     'color' => 'text-green-600',  'bg' => 'bg-green-50',    'filter' => 'kunde'],
            ] as $stat)
                <button wire:click="$set('filterType', '{{ $stat['filter'] }}')"
                        class="bg-white border rounded-xl px-4 py-3.5 flex items-center gap-3 shadow-sm text-left transition-all
                            {{ $filterType === $stat['filter'] ? 'border-indigo-300 ring-1 ring-indigo-200' : 'border-gray-100 hover:border-gray-200' }}">
                    <div class="w-8 h-8 rounded-lg {{ $stat['bg'] }} flex items-center justify-center shrink-0">
                        <x-heroicon-o-user class="w-4 h-4 {{ $stat['color'] }}"/>
                    </div>
                    <div>
                        <p class="text-lg font-semibold text-gray-800 leading-none">{{ number_format($stat['value']) }}</p>
                        <p class="text-xs text-gray-400 mt-0.5">{{ $stat['label'] }}</p>
                    </div>
                </button>
            @endforeach
        </div>
    @endif


    {{-- SUCHE + FILTER --}}
    <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('contacts.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>

        <div class="flex flex-wrap gap-1.5 shrink-0">
            @foreach(['' => t('common.all'), 'privat' => t('contacts.cat_private'), 'arbeit' => t('contacts.cat_work'), 'kunde' => t('contacts.cat_customer'), 'sonstiges' => t('contacts.cat_other')] as $key => $label)
                <button wire:click="$set('filterType', '{{ $key }}')"
                        class="px-2.5 py-1.5 rounded-lg text-xs font-medium border transition-all
                            {{ $filterType === $key
                                ? 'bg-indigo-600 text-white border-indigo-600'
                                : 'bg-white text-gray-500 border-gray-200 hover:border-gray-300 hover:text-gray-700' }}">
                    {{ $label }}
                </button>
            @endforeach
        </div>

    </div>


    {{-- KONTAKTLISTE --}}
    @if($contacts->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-users class="w-6 h-6 text-gray-400"/>
            </div>
            <p class="text-sm font-medium text-gray-600">{{ t('contacts.no_contacts') }}</p>
            @if($search || $filterType)
                <button wire:click="$set('search', ''); $set('filterType', '')"
                        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('contacts.create_first') }}</button>
            @endif
        </div>

    @else

        <div class="bg-white border border-gray-100 rounded-xl shadow-sm divide-y divide-gray-50">
            @foreach($contacts as $contact)
                @php $c = $contact->typeClasses(); @endphp

                <div class="flex items-center gap-4 px-5 py-4 group hover:bg-gray-50/50 transition-colors"
                     wire:key="contact-{{ $contact->id }}">

                    {{-- Avatar --}}
                    <div class="w-10 h-10 rounded-full {{ $c['avatar'] }} flex items-center justify-center text-sm font-bold shrink-0">
                        {{ $contact->initials() }}
                    </div>

                    {{-- Info --}}
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <p class="text-sm font-semibold text-gray-800">{{ $contact->name }}</p>
                            @if($contact->type)
                                <span class="text-[10px] font-medium {{ $c['bg'] }} {{ $c['text'] }} px-1.5 py-0.5 rounded-md">
                                    {{ $contact->typeLabel() }}
                                </span>
                            @endif
                        </div>

                        <div class="flex items-center gap-3 mt-0.5">
                            @if($contact->email)
                                <span class="flex items-center gap-1 text-xs text-gray-400">
                                    <x-heroicon-o-envelope class="w-3 h-3"/>
                                    {{ $contact->email }}
                                </span>
                            @endif
                            @if($contact->phone)
                                <span class="flex items-center gap-1 text-xs text-gray-400">
                                    <x-heroicon-o-phone class="w-3 h-3"/>
                                    {{ $contact->phone }}
                                </span>
                            @endif
                        </div>

                        <div class="flex items-center gap-3 mt-0.5">
                            @if($contact->birthday)
                                <span class="flex items-center gap-1 text-xs text-gray-400">
                                    <x-heroicon-o-cake class="w-3 h-3"/>
                                    {{ $contact->birthday->format('d.m.Y') }}
                                </span>
                            @endif
                            @if($contact->notes)
                                <span class="text-xs text-gray-400 truncate max-w-xs">{{ $contact->notes }}</span>
                            @endif
                        </div>
                    </div>

                    {{-- Datum --}}
                    <span class="text-[11px] text-gray-300 shrink-0 hidden md:block">
                        {{ $contact->created_at->diffForHumans() }}
                    </span>

                    {{-- Aktionen (hover) --}}
                    <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
                        <button wire:click="openEdit('{{ $contact->id }}')"
                                class="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors"
                                title="{{ t('common.edit') }}">
                            <x-heroicon-o-pencil class="w-4 h-4"/>
                        </button>
                        <button wire:click="delete('{{ $contact->id }}')"
                                wire:confirm="{{ t('contacts.confirm_delete', ['name' => $contact->name]) }}"
                                class="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                                title="{{ t('common.delete') }}">
                            <x-heroicon-o-trash class="w-4 h-4"/>
                        </button>
                    </div>

                </div>
            @endforeach
        </div>

        {{-- PAGINATION --}}
        @if($contacts->hasPages())
            <div class="flex items-center justify-between text-sm text-gray-500 pt-2">
                <span class="text-xs">
                    {{ $contacts->firstItem() }}–{{ $contacts->lastItem() }} {{ t('contacts.of_total', ['total' => $contacts->total()]) }}
                </span>
                <div class="flex gap-1">
                    @if($contacts->onFirstPage())
                        <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">‹</span>
                    @else
                        <button wire:click="previousPage"
                                class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">‹</button>
                    @endif

                    @foreach($contacts->getUrlRange(max(1, $contacts->currentPage() - 2), min($contacts->lastPage(), $contacts->currentPage() + 2)) as $page => $url)
                        <button wire:click="gotoPage({{ $page }})"
                                class="px-3 py-1.5 rounded-lg border text-xs transition-colors
                                    {{ $page === $contacts->currentPage()
                                        ? 'bg-indigo-600 text-white border-indigo-600'
                                        : 'border-gray-200 text-gray-600 hover:bg-gray-50' }}">
                            {{ $page }}
                        </button>
                    @endforeach

                    @if($contacts->hasMorePages())
                        <button wire:click="nextPage"
                                class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">›</button>
                    @else
                        <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">›</span>
                    @endif
                </div>
            </div>
        @endif

    @endif

</div>
