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

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


    {{-- STATS --}}
    @if($stats && $stats->total > 0)
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            @foreach([
                ['label' => t('tasks.total'),    'value' => $stats->total,  'icon' => 'squares-2x2',  'color' => 'text-gray-600',  'bg' => 'bg-gray-100'],
                ['label' => t('tasks.open'),     'value' => $stats->open,   'icon' => 'clock',         'color' => 'text-amber-600', 'bg' => 'bg-amber-50'],
                ['label' => t('tasks.today'),    'value' => $stats->today,  'icon' => 'sun',           'color' => 'text-indigo-600','bg' => 'bg-indigo-50'],
                ['label' => t('tasks.done'),     'value' => $stats->done,   'icon' => 'check-circle',  'color' => 'text-green-600', 'bg' => 'bg-green-50'],
            ] as $stat)
                <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 {{ $stat['bg'] }} flex items-center justify-center shrink-0">
                        @if($stat['icon'] === 'squares-2x2') <x-heroicon-o-squares-2x2 class="w-4 h-4 {{ $stat['color'] }}"/>
                        @elseif($stat['icon'] === 'clock')   <x-heroicon-o-clock class="w-4 h-4 {{ $stat['color'] }}"/>
                        @elseif($stat['icon'] === 'sun')     <x-heroicon-o-sun class="w-4 h-4 {{ $stat['color'] }}"/>
                        @else                                <x-heroicon-o-check-circle class="w-4 h-4 {{ $stat['color'] }}"/>
                        @endif
                    </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>
                </div>
            @endforeach
        </div>
    @endif


    {{-- SUCHE + STATUSFILTER --}}
    <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('tasks.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'),           'indigo'],
                ['pending'    , t('tasks.open'),           'amber'],
                ['in_progress', t('tasks.in_progress'),  'blue'],
                ['today'      , t('tasks.due_today'),    'red'],
                ['done'       , t('tasks.done'),        'green'],
            ] as [$key, $label, $col])
                @php
                    $active = $filterStatus === $key;
                    $cls = $active
                        ? "bg-{$col}-600 text-white border-{$col}-600"
                        : "bg-white text-gray-500 border-gray-200 hover:border-gray-300 hover:text-gray-700";
                    if ($col === 'indigo' && !$active) $cls = 'bg-white text-gray-500 border-gray-200 hover:border-gray-300 hover:text-gray-700';
                    if ($col === 'indigo' && $active)  $cls = 'bg-indigo-600 text-white border-indigo-600';
                @endphp
                <button wire:click="$set('filterStatus', '{{ $key }}')"
                        class="px-2.5 py-1.5 rounded-lg text-xs font-medium border transition-all {{ $cls }}">
                    {{ $label }}
                </button>
            @endforeach
        </div>
    </div>


    {{-- FORMULAR --}}
    @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('tasks.edit') : t('tasks.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="taskTitle"
                   type="text"
                   placeholder="{{ t('tasks.describe') }}"
                   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">
            @error('taskTitle') <p class="text-xs text-red-500">{{ $message }}</p> @enderror

            <textarea wire:model="description"
                      rows="2"
                      placeholder="{{ t('tasks.description_optional') }}"
                      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>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">{{ t('tasks.priority') }}</label>
                    <div class="flex gap-2">
                        @foreach([
                            ['key' => 'low',    'label' => t('tasks.priority_low'),    'active' => 'bg-green-500 text-white border-green-500', 'inactive' => 'bg-green-50 text-green-600 border-green-200'],
                            ['key' => 'medium', 'label' => t('tasks.priority_medium'), 'active' => 'bg-amber-500 text-white border-amber-500',  'inactive' => 'bg-amber-50 text-amber-600 border-amber-200'],
                            ['key' => 'high',   'label' => t('tasks.priority_high'),   'active' => 'bg-red-500 text-white border-red-500',      'inactive' => 'bg-red-50 text-red-600 border-red-200'],
                        ] as $p)
                        <button wire:click="$set('priority', '{{ $p['key'] }}')"
                                type="button"
                                class="flex-1 py-2 text-xs font-medium rounded-xl border transition
                                    {{ $priority === $p['key'] ? $p['active'] : $p['inactive'] }}">
                            {{ $p['label'] }}
                        </button>
                        @endforeach
                    </div>
                </div>
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">{{ t('tasks.due_at') }}</label>
                    <input wire:model="due_at"
                           type="date"
                           class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-400">
                </div>
            </div>

            {{-- Reminder Section --}}
            <div class="space-y-2">
                <label class="text-xs text-gray-500 block">{{ t('tasks.reminder') }}</label>

                @if($reminderAt)
                    <div class="flex items-center gap-2 bg-indigo-50 rounded-xl px-3 py-2">
                        <x-heroicon-o-bell-alert class="w-4 h-4 text-indigo-500 shrink-0"/>
                        <span class="flex-1 text-sm text-indigo-700 font-medium">
                            {{ \Carbon\Carbon::createFromFormat('Y-m-d\TH:i', $reminderAt, auth()->user()->timezone ?? 'Europe/Vienna')->format('d.m.Y H:i') }} Uhr
                        </span>
                        <button wire:click="clearReminder" type="button" class="text-indigo-300 hover:text-indigo-500 transition">
                            <x-heroicon-o-x-mark class="w-4 h-4"/>
                        </button>
                    </div>
                @endif

                <div class="flex flex-wrap gap-2">
                    <button wire:click="setReminderQuick(30)" type="button"
                            class="px-3 py-1.5 text-xs font-medium rounded-full bg-gray-100 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition">
                        {{ t('tasks.reminder_30min') }}
                    </button>
                    <button wire:click="setReminderQuick(60)" type="button"
                            class="px-3 py-1.5 text-xs font-medium rounded-full bg-gray-100 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition">
                        {{ t('tasks.reminder_1h') }}
                    </button>
                    <button wire:click="setReminderQuick(120)" type="button"
                            class="px-3 py-1.5 text-xs font-medium rounded-full bg-gray-100 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition">
                        {{ t('tasks.reminder_2h') }}
                    </button>
                    <button wire:click="setReminderTomorrow" type="button"
                            class="px-3 py-1.5 text-xs font-medium rounded-full bg-gray-100 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition">
                        {{ t('tasks.reminder_tomorrow') }}
                    </button>
                </div>

                <div x-data="{ show: false }">
                    <button @click="show = !show" type="button"
                            class="flex items-center gap-1.5 text-xs text-gray-500 hover:text-indigo-600 transition">
                        <x-heroicon-o-clock class="w-4 h-4"/>
                        {{ t('tasks.reminder_custom') }}
                    </button>
                    <div x-show="show" x-collapse class="mt-2">
                        <input type="datetime-local"
                               wire:model="reminderAt"
                               min="{{ now()->format('Y-m-d\TH:i') }}"
                               class="text-sm border border-gray-200 rounded-xl px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-indigo-500"/>
                    </div>
                </div>

                @error('reminderAt')
                    <div class="flex items-center gap-2 bg-red-50 rounded-xl px-3 py-2">
                        <x-heroicon-o-exclamation-circle class="w-4 h-4 text-red-500 shrink-0"/>
                        <p class="text-xs text-red-600 flex-1">
                            {{ $message }}
                            @if(auth()->user()->subscription?->plan?->plan_key === 'free' || !auth()->user()->subscription)
                                <a href="{{ route('plans.index') }}" class="underline ml-1">{{ t('tasks.limit_upgrade') }}</a>
                            @endif
                        </p>
                    </div>
                @enderror

                @if(auth()->user()->subscription?->plan?->plan_key === 'free' || !auth()->user()->subscription)
                    <p class="text-xs text-gray-400">{{ t('tasks.reminder_limit_info') }}</p>
                @endif
            </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


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

    @else

        {{-- ── Offene Aufgaben ── --}}
        @if($openTasks->isNotEmpty())
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm divide-y divide-gray-50">
                @foreach($openTasks as $task)
                    @php $p = $task->priorityClasses(); @endphp

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

                        <button wire:click="toggleDone('{{ $task->id }}')"
                                class="mt-0.5 shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors
                                    border-gray-300 hover:border-green-400">
                        </button>

                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <p class="text-sm font-medium text-gray-800">{{ $task->title }}</p>
                                    @if($task->description)
                                        <p class="text-xs text-gray-400 mt-0.5 truncate">{{ $task->description }}</p>
                                    @endif
                                </div>

                                <div class="flex items-center gap-2 shrink-0">
                                    @if($task->due_at)
                                        <span class="text-[11px] whitespace-nowrap
                                            {{ $task->isOverdue() ? 'text-red-500 font-medium' : 'text-gray-400' }}">
                                            {{ $task->due_at->format('d.m.Y') }}
                                            @if($task->isOverdue()) (!!) @endif
                                        </span>
                                    @endif
                                    <button wire:click="openEdit('{{ $task->id }}')"
                                            class="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-gray-500 transition-all">
                                        <x-heroicon-o-pencil class="w-3.5 h-3.5"/>
                                    </button>
                                    <button wire:click="delete('{{ $task->id }}')"
                                            wire:confirm="{{ t('tasks.confirm_delete') }}"
                                            class="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all">
                                        <x-heroicon-o-x-mark class="w-3.5 h-3.5"/>
                                    </button>
                                </div>
                            </div>

                            <div class="flex items-center gap-2 mt-1.5">
                                <span class="flex items-center gap-1 text-[10px] font-medium {{ $p['badge'] }} px-1.5 py-0.5 rounded-md">
                                    <span class="w-1.5 h-1.5 rounded-full {{ $p['dot'] }}"></span>
                                    {{ $task->priorityLabel() }}
                                </span>
                                @if($task->status === 'in_progress')
                                    <span class="text-[10px] font-medium bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded-md">
                                        {{ t('tasks.in_progress') }}
                                    </span>
                                @endif
                                @if($task->reminder_at && !$task->reminder_sent && $task->reminder_at->isFuture())
                                    <span class="inline-flex items-center gap-1 text-[10px] font-medium text-indigo-500 bg-indigo-50 px-1.5 py-0.5 rounded-md">
                                        <x-heroicon-o-bell-alert class="w-3 h-3"/>
                                        {{ $task->reminder_at->setTimezone(auth()->user()->timezone ?? 'Europe/Vienna')->format('d.m. H:i') }}
                                    </span>
                                @endif
                                @if($task->status === 'pending')
                                    <button wire:click="setStatus('{{ $task->id }}', 'in_progress')"
                                            class="text-[10px] text-gray-400 hover:text-blue-600 opacity-0 group-hover:opacity-100 transition-all">
                                        {{ t('tasks.to_in_progress') }}
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        {{-- ── Erledigte Aufgaben (eigene Section) ── --}}
        @if($doneTasks->isNotEmpty())
            <div x-data="{ showDone: false }">
                <button @click="showDone = !showDone"
                        class="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-600 transition-colors py-2">
                    <x-heroicon-o-chevron-right class="w-3.5 h-3.5 transition-transform" x-bind:class="showDone && 'rotate-90'"/>
                    <x-heroicon-o-check-circle class="w-4 h-4 text-green-400"/>
                    <span class="font-medium">{{ t('tasks.done') }} ({{ $doneTasks->count() }})</span>
                </button>

                <div x-show="showDone" x-collapse>
                    <div class="bg-white border border-gray-100 rounded-xl shadow-sm divide-y divide-gray-50">
                        @foreach($doneTasks as $task)
                            <div class="flex items-start gap-3 px-5 py-4 group hover:bg-gray-50/50 transition-colors opacity-60"
                                 wire:key="task-{{ $task->id }}">

                                <button wire:click="toggleDone('{{ $task->id }}')"
                                        class="mt-0.5 shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors
                                            bg-green-500 border-green-500 hover:bg-green-400 hover:border-green-400">
                                    <x-heroicon-s-check class="w-3 h-3 text-white"/>
                                </button>

                                <div class="flex-1 min-w-0">
                                    <div class="flex items-start justify-between gap-2">
                                        <p class="text-sm font-medium text-gray-400 line-through">{{ $task->title }}</p>
                                        <div class="flex items-center gap-2 shrink-0">
                                            @if($task->completed_at)
                                                <span class="text-[11px] text-gray-300">
                                                    {{ $task->completed_at->format('d.m.Y') }}
                                                </span>
                                            @endif
                                            <button wire:click="delete('{{ $task->id }}')"
                                                    wire:confirm="{{ t('tasks.confirm_delete') }}"
                                                    class="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-all">
                                                <x-heroicon-o-x-mark class="w-3.5 h-3.5"/>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

    @endif

</div>
