@php
    $user = auth()->user();
    $name = $user?->name ?? '—';
    $email = $user?->email ?? '—';

    $sections = [
        ['key' => 'profile',       'label' => 'Profil',           'icon' => 'user-circle'],
        ['key' => 'language',      'label' => 'Sprache & Region', 'icon' => 'language'],
        ['key' => 'security',      'label' => 'Sicherheit',       'icon' => 'shield-check'],
        ['key' => 'notifications', 'label' => 'Benachrichtigungen','icon' => 'bell'],
        ['key' => 'danger',        'label' => 'Gefahrenzone',     'icon' => 'exclamation-triangle'],
    ];
@endphp

<div class="flex flex-col gap-6">

    <header>
        <div class="text-[11px] uppercase tracking-[0.14em] text-ink-3 font-semibold mb-1.5">Konto</div>
        <h1 class="text-[28px] leading-tight font-extrabold tracking-tight text-ink-1">Einstellungen</h1>
        <p class="text-sm text-ink-2 mt-2 max-w-xl leading-relaxed">Verwalte dein Profil, Sprache, Sicherheit und Benachrichtigungen.</p>
    </header>

    <div class="grid grid-cols-[200px_1fr] gap-6">

        {{-- Section Sub-Nav (server-rendered active state, no Alpine flicker) --}}
        <nav class="flex flex-col gap-1" wire:key="settings-subnav">
            @foreach($sections as $s)
                @php
                    $isActive = $section === $s['key'];
                    $cls = 'flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm cursor-pointer transition-all border focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base text-left';
                    $cls .= $isActive
                        ? ' bg-bg-soft text-ink-1 font-semibold shadow-sm border-line'
                        : ' text-ink-2 hover:bg-bg-soft border-transparent';
                @endphp
                <button
                    type="button"
                    wire:click="setSection('{{ $s['key'] }}')"
                    class="{{ $cls }}"
                    data-testid="settings-nav-{{ $s['key'] }}"
                    @if($isActive) aria-current="page" @endif
                >
                    <x-dynamic-component :component="'heroicon-o-' . $s['icon']" class="w-4 h-4 shrink-0" />
                    <span>{{ $s['label'] }}</span>
                </button>
            @endforeach
        </nav>

        {{-- Sections (server-renders only the active one, no Alpine flicker) --}}
        <div class="flex flex-col gap-5" wire:key="settings-section-{{ $section }}">

            @if($section === 'profile')
                <x-card class="shadow-sm" data-section="profile">
                    <h2 class="font-bold text-base text-ink-1 mb-4">Profil</h2>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-ink-2 mb-1.5">Name</label>
                            <input type="text" value="{{ $name }}" class="w-full px-3.5 py-2.5 bg-bg-soft border border-line rounded-lg text-sm text-ink-1 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-ink-2 mb-1.5">E-Mail-Adresse</label>
                            <input type="text" value="{{ $email }}" class="w-full px-3.5 py-2.5 bg-bg-soft border border-line rounded-lg text-sm text-ink-1 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-xs font-semibold text-ink-2 mb-1.5">Über mich</label>
                            <textarea rows="3" placeholder="Erzähl etwas über dich…" class="w-full px-3.5 py-2.5 bg-bg-soft border border-line rounded-lg text-sm text-ink-1 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
                        </div>
                    </div>
                    <div class="flex justify-end gap-2 mt-5 pt-4 border-t border-line">
                        <x-btn>Abbrechen</x-btn>
                        <x-btn variant="primary">Speichern</x-btn>
                    </div>
                </x-card>
            @endif

            @if($section === 'language')
                <x-card class="shadow-sm" data-section="language">
                    <h2 class="font-bold text-base text-ink-1 mb-4">Sprache & Region</h2>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-ink-2 mb-1.5">Sprache</label>
                            <select class="w-full px-3.5 py-2.5 bg-bg-soft border border-line rounded-lg text-sm text-ink-1 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <option>Deutsch</option>
                                <option>English</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-ink-2 mb-1.5">Zeitzone</label>
                            <select class="w-full px-3.5 py-2.5 bg-bg-soft border border-line rounded-lg text-sm text-ink-1 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <option>Europa/Wien (UTC+1)</option>
                                <option>Europa/Berlin (UTC+1)</option>
                                <option>Europa/Zürich (UTC+1)</option>
                            </select>
                        </div>
                    </div>
                    <div class="flex justify-end gap-2 mt-5 pt-4 border-t border-line">
                        <x-btn variant="primary">Speichern</x-btn>
                    </div>
                </x-card>
            @endif

            @if($section === 'security')
                <x-card class="shadow-sm" data-section="security">
                    <h2 class="font-bold text-base text-ink-1 mb-4">Sicherheit</h2>
                    <div class="flex flex-col gap-4" x-data="{ showPw: false, showNewPw: false }">
                        <div>
                            <label class="block text-xs font-semibold text-ink-2 mb-1.5">Aktuelles Passwort</label>
                            <div class="relative">
                                <input type="password" x-bind:type="showPw ? 'text' : 'password'" class="w-full px-3.5 py-2.5 pr-10 bg-bg-soft border border-line rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <button type="button" @click="showPw = !showPw" class="absolute right-3 top-1/2 -translate-y-1/2 text-ink-3 hover:text-ink-1 transition-colors" aria-label="Passwort anzeigen">
                                    <span x-show="!showPw"><x-heroicon-o-eye class="w-4 h-4" /></span>
                                    <span x-show="showPw" x-cloak><x-heroicon-o-eye-slash class="w-4 h-4" /></span>
                                </button>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-ink-2 mb-1.5">Neues Passwort</label>
                            <div class="relative">
                                <input type="password" x-bind:type="showNewPw ? 'text' : 'password'" class="w-full px-3.5 py-2.5 pr-10 bg-bg-soft border border-line rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <button type="button" @click="showNewPw = !showNewPw" class="absolute right-3 top-1/2 -translate-y-1/2 text-ink-3 hover:text-ink-1 transition-colors" aria-label="Passwort anzeigen">
                                    <span x-show="!showNewPw"><x-heroicon-o-eye class="w-4 h-4" /></span>
                                    <span x-show="showNewPw" x-cloak><x-heroicon-o-eye-slash class="w-4 h-4" /></span>
                                </button>
                            </div>
                        </div>
                        <div class="flex justify-end gap-2 pt-4 border-t border-line">
                            <x-btn variant="primary">Passwort ändern</x-btn>
                        </div>
                    </div>

                    <div class="mt-6 pt-5 border-t border-line">
                        <button
                            type="button"
                            wire:click="$dispatch('openModal', { component: 'settings.modals.logout-all' })"
                            class="inline-flex items-center gap-2 text-sm text-danger hover:underline font-semibold cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-danger focus-visible:ring-offset-2 rounded"
                            data-testid="logout-all-trigger"
                        >
                            <x-heroicon-o-arrow-left-on-rectangle class="w-4 h-4" />
                            Auf allen Geräten abmelden
                        </button>
                    </div>
                </x-card>
            @endif

            @if($section === 'notifications')
                <x-card class="shadow-sm" data-section="notifications">
                    <h2 class="font-bold text-base text-ink-1 mb-4">Benachrichtigungen</h2>
                    <div class="flex flex-col gap-4">
                        @php
                            $notifOpts = [
                                ['key' => 'reminders',  'label' => 'Tägliche Erinnerungen', 'desc' => 'Erinnert dich bei offenen Aufgaben.',     'enabled' => true],
                                ['key' => 'streak',     'label' => 'Streak-Warnungen',       'desc' => 'Bevor deine Lernserie verloren geht.',    'enabled' => true],
                                ['key' => 'teacher',    'label' => 'Lehrer-Nachrichten',     'desc' => 'Direkte Nachrichten von Lehrkräften.',    'enabled' => true],
                                ['key' => 'newsletter', 'label' => 'Lernschiff-Newsletter',  'desc' => 'Tipps, neue Features und Aktionen.',      'enabled' => false],
                            ];
                        @endphp
                        @foreach($notifOpts as $opt)
                            <div class="flex items-start justify-between gap-4 py-2" x-data="{ enabled: {{ $opt['enabled'] ? 'true' : 'false' }} }">
                                <div>
                                    <div class="font-semibold text-sm text-ink-1">{{ $opt['label'] }}</div>
                                    <div class="text-xs text-ink-3 mt-0.5">{{ $opt['desc'] }}</div>
                                </div>
                                <button type="button" @click="enabled = !enabled" :aria-pressed="enabled"
                                        :class="enabled ? 'bg-primary' : 'bg-line-strong'"
                                        class="relative shrink-0 inline-flex h-5 w-9 items-center rounded-full transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
                                    <span :class="enabled ? 'translate-x-4' : 'translate-x-0.5'" class="inline-block h-4 w-4 transform rounded-full bg-bg-soft shadow transition-transform"></span>
                                </button>
                            </div>
                        @endforeach
                    </div>
                    <div class="flex justify-end gap-2 mt-5 pt-4 border-t border-line">
                        <x-btn variant="primary">Speichern</x-btn>
                    </div>
                </x-card>
            @endif

            @if($section === 'danger')
                <x-card class="shadow-sm border-danger/30" data-section="danger">
                    <h2 class="font-bold text-base text-danger mb-1">Gefahrenzone</h2>
                    <p class="text-xs text-ink-3 mb-5">Diese Aktionen können nicht rückgängig gemacht werden.</p>

                    <div class="flex justify-between items-center py-3 border-t border-line">
                        <div>
                            <div class="font-semibold text-sm text-ink-1">Fortschritt zurücksetzen</div>
                            <div class="text-xs text-ink-3 mt-0.5">Alle Punkte, Streaks und Lektionen werden gelöscht.</div>
                        </div>
                        <x-btn>Zurücksetzen</x-btn>
                    </div>

                    <div class="flex justify-between items-center py-3 border-t border-line">
                        <div>
                            <div class="font-semibold text-sm text-danger">Konto löschen</div>
                            <div class="text-xs text-ink-3 mt-0.5">Alle Daten unwiderruflich löschen.</div>
                        </div>
                        <button
                            type="button"
                            wire:click="$dispatch('openModal', { component: 'settings.modals.delete' })"
                            class="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg bg-danger text-white text-sm font-semibold hover:opacity-90 cursor-pointer transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-danger focus-visible:ring-offset-2"
                            data-testid="delete-trigger"
                        >
                            <x-heroicon-o-trash class="w-4 h-4" />
                            Konto löschen
                        </button>
                    </div>
                </x-card>
            @endif

        </div>
    </div>

</div>