<div
    x-data="{
        notify(e) {
            // Notifikasi toast sederhana via Alpine
        }
    }"
    x-on:notify.window="$dispatch('toast', $event.detail)"
>

    <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-800">Profil Saya</h1>
        <p class="text-sm text-slate-500 mt-0.5">Kelola informasi akun dan keamanan.</p>
    </div>

    <div class="max-w-2xl space-y-6">

        {{-- ── Info Akun ─────────────────────────────────────────────── --}}
        <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">

            {{-- Avatar + nama --}}
            <div class="flex items-center gap-4 px-6 py-5 bg-gradient-to-r from-orange-50 to-white border-b border-slate-100">
                <div class="w-14 h-14 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
                    <span class="text-2xl font-bold text-orange-600">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </span>
                </div>
                <div>
                    <p class="font-bold text-slate-800 text-lg">{{ $user->name }}</p>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {{ $user->hasRole('super_admin') ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700' }}">
                            {{ $user->hasRole('super_admin') ? 'Super Admin' : 'Admin' }}
                        </span>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {{ $user->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $user->is_active ? 'Aktif' : 'Nonaktif' }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- Tab --}}
            <div class="flex border-b border-slate-100">
                <button
                    type="button"
                    wire:click="$set('activeTab', 'profile')"
                    @class([
                        'px-5 py-3 text-sm font-medium border-b-2 transition-colors',
                        'border-orange-500 text-orange-600' => $activeTab === 'profile',
                        'border-transparent text-slate-500 hover:text-slate-700' => $activeTab !== 'profile',
                    ])
                >
                    Informasi Akun
                </button>
                <button
                    type="button"
                    wire:click="$set('activeTab', 'password')"
                    @class([
                        'px-5 py-3 text-sm font-medium border-b-2 transition-colors',
                        'border-orange-500 text-orange-600' => $activeTab === 'password',
                        'border-transparent text-slate-500 hover:text-slate-700' => $activeTab !== 'password',
                    ])
                >
                    Ganti Password
                </button>
            </div>

            {{-- Tab: Profil --}}
            @if ($activeTab === 'profile')
                <form wire:submit.prevent="saveProfile" class="px-6 py-5 space-y-4">

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
                        <input wire:model="name" type="text" placeholder="Masukkan nama lengkap"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                        @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Nomor HP</label>
                        <input wire:model="phone" type="tel" placeholder="08xxxxxxxxxx"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                        <p class="mt-1 text-xs text-slate-400">Digunakan untuk login jika email tidak tersedia.</p>
                        @error('phone') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Email</label>
                        <input wire:model="email" type="email" placeholder="admin@titipinbabe.com"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                        @error('email') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div class="pt-2 flex items-center justify-between">
                        <p class="text-xs text-slate-400">
                            Bergabung {{ $user->created_at->translatedFormat('d F Y') }}
                        </p>
                        <button type="submit"
                            class="px-4 py-2 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600"
                            wire:loading.attr="disabled" wire:target="saveProfile">
                            <span wire:loading.remove wire:target="saveProfile">Simpan Perubahan</span>
                            <span wire:loading wire:target="saveProfile">Menyimpan...</span>
                        </button>
                    </div>

                </form>
            @endif

            {{-- Tab: Password --}}
            @if ($activeTab === 'password')
                <form wire:submit.prevent="savePassword" class="px-6 py-5 space-y-4">

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Password Saat Ini <span class="text-red-500">*</span></label>
                        <input wire:model="current_password" type="password" placeholder="Masukkan password saat ini"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                        @error('current_password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Password Baru <span class="text-red-500">*</span></label>
                        <input wire:model="new_password" type="password" placeholder="Minimal 8 karakter"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                        @error('new_password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Konfirmasi Password Baru <span class="text-red-500">*</span></label>
                        <input wire:model="confirm_password" type="password" placeholder="Ketik ulang password baru"
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
                        @error('confirm_password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div class="pt-2 flex justify-end">
                        <button type="submit"
                            class="px-4 py-2 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600"
                            wire:loading.attr="disabled">
                            <span wire:loading.remove wire:target="savePassword">Ganti Password</span>
                            <span wire:loading wire:target="savePassword">Menyimpan...</span>
                        </button>
                    </div>

                </form>
            @endif

        </div>

        {{-- ── Info Role & Permission ─────────────────────────────────── --}}
        <div class="bg-white rounded-xl border border-slate-200 px-6 py-5">
            <h3 class="font-semibold text-slate-800 mb-3">Role & Hak Akses</h3>
            <div class="flex flex-wrap gap-2">
                @foreach ($user->getAllPermissions() as $permission)
                    <span class="inline-block px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded font-mono">
                        {{ $permission->name }}
                    </span>
                @endforeach
                @if ($user->getAllPermissions()->isEmpty())
                    <p class="text-sm text-slate-400">Tidak ada permission spesifik.</p>
                @endif
            </div>
        </div>

    </div>

    {{-- ── Toast Notification (Alpine) ────────────────────────────── --}}
    <div
        x-data="{ toasts: [] }"
        x-on:notify.window="toasts.push($event.detail); setTimeout(() => toasts.shift(), 3500)"
        class="fixed bottom-5 right-5 z-50 space-y-2 pointer-events-none"
    >
        <template x-for="(toast, i) in toasts" :key="i">
            <div
                x-show="true"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-2"
                x-transition:enter-end="opacity-100 translate-y-0"
                class="flex items-center gap-3 bg-white border border-slate-200 shadow-lg rounded-xl px-4 py-3 text-sm pointer-events-auto min-w-64"
            >
                <svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <span x-text="toast.message" class="text-slate-700"></span>
            </div>
        </template>
    </div>

</div>
