@php
    $user = auth()->user();
    $isInternal = $user->hasAnyRole(['admin', 'operator', 'kepala_desa']);
@endphp

@if($isInternal)
<x-admin-layout title="Pengaturan Akun">
@else
<x-warga-layout title="Pengaturan Akun">
@endif

    <div class="max-w-xl mx-auto space-y-6">
        <x-card title="Informasi Akun">
            <div class="flex items-center gap-4">
                <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-white text-2xl font-bold">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
                <div>
                    <p class="font-bold text-lg text-slate-800 dark:text-white">{{ $user->name }}</p>
                    <p class="text-sm text-slate-400">
                        @if($user->email)
                            {{ $user->email }}
                        @else
                            NIK: {{ $user->resident?->nik ?? '-' }} &middot; {{ $user->phone ?? '-' }}
                        @endif
                    </p>
                    <x-badge color="teal" class="mt-1">{{ ucfirst(str_replace('_', ' ', $user->roles->first()?->name ?? '-')) }}</x-badge>
                </div>
            </div>
        </x-card>

        <x-card title="Ubah Kata Sandi" subtitle="Pastikan menggunakan kata sandi yang kuat dan tidak digunakan di tempat lain.">
            <form method="POST" action="{{ route('password.update') }}" class="space-y-4">
                @csrf
                @method('PUT')

                <div>
                    <x-input-label for="current_password">Kata Sandi Saat Ini</x-input-label>
                    <x-text-input id="current_password" name="current_password" type="password" autocomplete="current-password" />
                    <x-input-error :messages="$errors->updatePassword->get('current_password')" />
                </div>

                <div>
                    <x-input-label for="password">Kata Sandi Baru</x-input-label>
                    <x-text-input id="password" name="password" type="password" autocomplete="new-password" />
                    <x-input-error :messages="$errors->updatePassword->get('password')" />
                </div>

                <div>
                    <x-input-label for="password_confirmation">Konfirmasi Kata Sandi Baru</x-input-label>
                    <x-text-input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" />
                    <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" />
                </div>

                <x-button type="submit">Simpan Kata Sandi</x-button>
            </form>
        </x-card>

        @unless($isInternal)
            <x-card title="PIN Kiosk" subtitle="Dipakai untuk masuk lewat layar mandiri di kantor desa - cukup scan KTP lalu ketik PIN ini, tanpa perlu ketik NIK & kata sandi lengkap.">
                @if($user->pin_set_at)
                    <div class="flex items-center gap-2 text-sm text-green-600 mb-4">
                        <x-icon name="check-circle" class="w-4 h-4" />
                        PIN sudah aktif sejak {{ $user->pin_set_at->translatedFormat('d M Y') }}
                    </div>
                @else
                    <div class="flex items-center gap-2 text-sm text-amber-600 mb-4">
                        <x-icon name="alert-triangle" class="w-4 h-4" />
                        Anda belum mengatur PIN kiosk
                    </div>
                @endif

                <form method="POST" action="{{ route('warga.pin.update') }}" class="space-y-4">
                    @csrf
                    @method('PUT')

                    <div>
                        <x-input-label for="pin_current_password">Kata Sandi Akun Saat Ini</x-input-label>
                        <x-text-input id="pin_current_password" name="current_password" type="password" autocomplete="current-password" />
                        <x-input-error :messages="$errors->updatePin->get('current_password')" />
                    </div>

                    <div>
                        <x-input-label for="pin">PIN Baru (6 digit angka)</x-input-label>
                        <x-text-input id="pin" name="pin" type="password" inputmode="numeric" maxlength="6" autocomplete="off" placeholder="mis. 483920" />
                        <x-input-error :messages="$errors->updatePin->get('pin')" />
                    </div>

                    <div>
                        <x-input-label for="pin_confirmation">Konfirmasi PIN Baru</x-input-label>
                        <x-text-input id="pin_confirmation" name="pin_confirmation" type="password" inputmode="numeric" maxlength="6" autocomplete="off" />
                    </div>

                    <div class="flex items-center gap-3">
                        <x-button type="submit">{{ $user->pin_set_at ? 'Ubah PIN' : 'Aktifkan PIN' }}</x-button>
                        @if($user->pin_set_at)
                            <button type="button" onclick="document.getElementById('form-nonaktifkan-pin').classList.toggle('hidden')" class="text-sm text-red-500 hover:underline">Nonaktifkan PIN</button>
                        @endif
                    </div>
                </form>

                @if($user->pin_set_at)
                    <form id="form-nonaktifkan-pin" method="POST" action="{{ route('warga.pin.destroy') }}" class="hidden mt-4 pt-4 border-t border-slate-100 dark:border-slate-700 space-y-3">
                        @csrf
                        @method('DELETE')
                        <x-input-label for="destroy_current_password">Konfirmasi Kata Sandi untuk Menonaktifkan PIN</x-input-label>
                        <x-text-input id="destroy_current_password" name="current_password" type="password" autocomplete="current-password" />
                        <x-button type="submit" variant="secondary" class="text-red-600">Ya, Nonaktifkan PIN</x-button>
                    </form>
                @endif
            </x-card>
        @endunless
    </div>

@if($isInternal)
</x-admin-layout>
@else
</x-warga-layout>
@endif