@php
    $input = 'w-full rounded-xl border border-edge bg-ink px-3.5 py-2.5 text-sm text-slate-100 placeholder:text-slate-500 focus:border-brand focus:ring-2 focus:ring-brand/30';
    $label = 'mb-1.5 block text-sm font-medium text-slate-300';
    $roleLabel = ['super_admin' => 'Super Administrator', 'staff' => 'Staff', 'customer' => 'Customer'][$user->role] ?? $user->role;
@endphp

<div>
    {{-- Breadcrumb + header --}}
    <nav class="mb-2 flex items-center gap-1.5 text-xs text-slate-500">
        <a href="{{ route('admin.dashboard') }}" wire:navigate class="hover:text-slate-300">Dashboard</a>
        <x-lucide-chevron-right class="h-3.5 w-3.5" />
        <span class="text-slate-300">Profile</span>
    </nav>
    <x-admin.page-head title="Admin Profile" subtitle="Manage your personal information, account security and preferences." />

    {{-- ============ Profile banner ============ --}}
    <div class="relative mb-6 overflow-hidden rounded-2xl border border-edge bg-gradient-to-br from-brand/15 via-card to-card p-6">
        <div class="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-brand/20 blur-[90px]"></div>
        <div class="relative grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_auto]">
            {{-- identity --}}
            <div class="flex items-center gap-5">
                <div class="relative shrink-0" x-data="{ up: false }">
                    @if ($user->avatarUrl())
                        <img src="{{ $user->avatarUrl() }}" alt="avatar" class="h-24 w-24 rounded-full object-cover ring-4 ring-brand/20">
                    @else
                        <span class="grid h-24 w-24 place-items-center rounded-full bg-gradient-to-br from-brand to-accent2 text-2xl font-bold text-white ring-4 ring-brand/20">{{ strtoupper(substr($user->name ?: $user->email, 0, 1)) }}</span>
                    @endif
                    <span class="absolute bottom-1.5 right-1.5 h-4 w-4 rounded-full bg-green-400 ring-2 ring-card"></span>
                    <label class="absolute -bottom-1 left-1/2 -translate-x-1/2 cursor-pointer rounded-full bg-brand px-2.5 py-1 text-[10px] font-semibold text-white hover:bg-brand-700">
                        <span wire:loading.remove wire:target="avatar">Change</span>
                        <span wire:loading wire:target="avatar">…</span>
                        <input type="file" wire:model="avatar" accept="image/png,image/jpeg,image/webp" class="sr-only">
                    </label>
                </div>
                <div>
                    <div class="flex flex-wrap items-center gap-2.5">
                        <h2 class="text-xl font-bold text-white">{{ $user->name }}</h2>
                        <span class="admin-chip bg-brand/20 text-brand-500">{{ $roleLabel }}</span>
                    </div>
                    <div class="mt-0.5 text-sm text-slate-400">{{ $user->email }}</div>
                    <div class="mt-3 flex flex-wrap gap-x-5 gap-y-1.5 text-xs text-slate-400">
                        <span class="inline-flex items-center gap-1.5"><x-lucide-calendar class="h-3.5 w-3.5" /> Joined {{ $user->created_at->format('M j, Y') }}</span>
                        <span class="inline-flex items-center gap-1.5"><x-lucide-clock class="h-3.5 w-3.5" /> Last login {{ $user->last_login_at?->diffForHumans() ?? '—' }}</span>
                        @if ($user->location)
                            <span class="inline-flex items-center gap-1.5"><x-lucide-map-pin class="h-3.5 w-3.5" /> {{ $user->location }}</span>
                        @endif
                    </div>
                    @error('avatar') <p class="mt-2 text-xs text-red-400">{{ $message }}</p> @enderror
                    @if ($user->avatarUrl())
                        <button wire:click="removeAvatar" class="mt-2 text-xs text-slate-500 hover:text-red-400">Remove photo</button>
                    @endif
                </div>
            </div>

            {{-- stat cards --}}
            <div class="grid grid-cols-2 gap-3 xl:grid-cols-4 xl:w-[560px]">
                @php($cards = [
                    ['users', '#7c3aed', 'Total Users', number_format($kpis['total_users']), '+12.4%'],
                    ['dollar-sign', '#3b82f6', 'Total Revenue', '$'.number_format($kpis['mrr']), '+18.2%'],
                    ['send', '#22c55e', 'Total Posts', number_format($kpis['posts_today']), '+24.6%'],
                    ['shield-check', '#f59e0b', 'User Role', $roleLabel, 'Full Access'],
                ])
                @foreach ($cards as [$icon, $tint, $lbl, $val, $trend])
                    <div class="rounded-xl border border-edge bg-ink/60 p-3.5 backdrop-blur">
                        <span class="grid h-9 w-9 place-items-center rounded-lg" style="background: {{ $tint }}22; color: {{ $tint }}"><x-dynamic-component :component="'lucide-'.$icon" class="h-4 w-4" /></span>
                        <div class="mt-2 text-[11px] text-slate-500">{{ $lbl }}</div>
                        <div class="text-base font-bold text-white">{{ $val }}</div>
                        <div class="text-[11px] text-green-400">{{ $trend }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- ============ Main grid ============ --}}
    <div class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">

        {{-- LEFT --}}
        <div class="space-y-6">
            {{-- Tabs --}}
            <x-admin.card>
                <div class="mb-5 flex gap-6 border-b border-edge">
                    @foreach (['personal' => 'Personal Information', 'preferences' => 'Preferences', 'notifications' => 'Notification Settings'] as $key => $lbl)
                        <button wire:click="$set('tab', '{{ $key }}')"
                                class="relative -mb-px border-b-2 pb-3 text-sm font-medium transition {{ $tab === $key ? 'border-brand text-white' : 'border-transparent text-slate-400 hover:text-slate-200' }}">{{ $lbl }}</button>
                    @endforeach
                </div>

                {{-- Personal Information --}}
                @if ($tab === 'personal')
                    <form wire:submit="savePersonal" class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <label class="{{ $label }}">Full Name</label>
                            <input wire:model="name" class="{{ $input }}">
                            @error('name') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="{{ $label }}">Username</label>
                            <input wire:model="username" class="{{ $input }}" placeholder="username">
                            @error('username') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="{{ $label }}">Email Address</label>
                            <input wire:model="email" type="email" class="{{ $input }}">
                            @error('email') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="{{ $label }}">Designation</label>
                            <input wire:model="designation" class="{{ $input }}" placeholder="System Administrator">
                        </div>
                        <div>
                            <label class="{{ $label }}">Phone Number</label>
                            <input wire:model="phone" class="{{ $input }}" placeholder="+1 555 000 0000">
                        </div>
                        <div>
                            <label class="{{ $label }}">Location</label>
                            <input wire:model="location" class="{{ $input }}" placeholder="City, Country">
                        </div>
                        <div>
                            <label class="{{ $label }}">Department</label>
                            <input wire:model="department" class="{{ $input }}" placeholder="Administration">
                        </div>
                        <div>
                            <label class="{{ $label }}">Language</label>
                            <select wire:model="language" class="{{ $input }}">
                                <option value="en">English (US)</option>
                                <option value="en-GB">English (UK)</option>
                                <option value="ur">Urdu</option>
                                <option value="ar">Arabic</option>
                                <option value="es">Spanish</option>
                            </select>
                        </div>
                        <div class="sm:col-span-2">
                            <label class="{{ $label }}">Biography</label>
                            <textarea wire:model="bio" rows="3" class="{{ $input }}" placeholder="Tell us about yourself…"></textarea>
                            @error('bio') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2 flex gap-2">
                            <button type="submit" class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">Save Changes</button>
                            <button type="button" wire:click="mount" class="rounded-xl border border-edge px-4 py-2.5 text-sm text-slate-300 hover:bg-raised">Cancel</button>
                        </div>
                    </form>
                @endif

                {{-- Preferences --}}
                @if ($tab === 'preferences')
                    <form wire:submit="savePreferences" class="space-y-5">
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                            <div>
                                <label class="{{ $label }}">Theme</label>
                                <select wire:model="theme" class="{{ $input }}"><option value="dark">Dark</option><option value="light">Light</option><option value="system">System</option></select>
                            </div>
                            <div>
                                <label class="{{ $label }}">Timezone</label>
                                <select wire:model="timezone" class="{{ $input }}">
                                    @foreach (['UTC', 'America/New_York', 'Europe/London', 'Asia/Karachi', 'Asia/Dubai', 'Asia/Kolkata', 'Australia/Sydney'] as $tz)
                                        <option value="{{ $tz }}">{{ $tz }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="{{ $label }}">Language</label>
                                <select wire:model="language" class="{{ $input }}"><option value="en">English (US)</option><option value="ur">Urdu</option><option value="ar">Arabic</option></select>
                            </div>
                            <div>
                                <label class="{{ $label }}">Date Format</label>
                                <select wire:model="date_format" class="{{ $input }}"><option value="MMM DD, YYYY">MMM DD, YYYY</option><option value="DD/MM/YYYY">DD/MM/YYYY</option><option value="MM/DD/YYYY">MM/DD/YYYY</option><option value="YYYY-MM-DD">YYYY-MM-DD</option></select>
                            </div>
                            <div>
                                <label class="{{ $label }}">Time Format</label>
                                <select wire:model="time_format" class="{{ $input }}"><option value="12h">12 hour</option><option value="24h">24 hour</option></select>
                            </div>
                            <div>
                                <label class="{{ $label }}">Dashboard Layout</label>
                                <select wire:model="dashboard_layout" class="{{ $input }}"><option value="default">Default</option><option value="compact">Compact</option></select>
                            </div>
                            <div class="sm:col-span-3">
                                <label class="{{ $label }}">Default Landing Page</label>
                                <select wire:model="default_landing" class="{{ $input }}">
                                    <option value="admin.dashboard">Dashboard</option>
                                    <option value="admin.users">Users</option>
                                    <option value="admin.reports">Reports</option>
                                    <option value="admin.queue">Queue Monitor</option>
                                </select>
                            </div>
                        </div>
                        <div class="divide-y divide-edge rounded-xl border border-edge px-4">
                            <x-admin.toggle model="compact_mode" label="Compact Mode" hint="Denser spacing across the panel." />
                            <x-admin.toggle model="animations" label="Animations" hint="Enable transitions and motion." />
                            <x-admin.toggle model="sidebar_collapsed" label="Sidebar Collapsed" hint="Start with the sidebar collapsed." />
                        </div>
                        <button type="submit" class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">Save Preferences</button>
                    </form>
                @endif

                {{-- Notifications --}}
                @if ($tab === 'notifications')
                    <form wire:submit="saveNotifications" class="space-y-1">
                        <div class="divide-y divide-edge rounded-xl border border-edge px-4">
                            <x-admin.toggle model="notifications.email" label="Email Notifications" hint="Receive account emails." />
                            <x-admin.toggle model="notifications.sms" label="SMS Notifications" hint="Text urgent billing and security alerts to your verified phone." />
                            <x-admin.toggle model="notifications.desktop" label="Desktop Notifications" hint="Native OS notifications." />
                            <x-admin.toggle model="notifications.system_alerts" label="System Alerts" hint="Outages, incidents and status." />
                            <x-admin.toggle model="notifications.security_alerts" label="Security Alerts" hint="Sign-ins and security events." />
                            <x-admin.toggle model="notifications.marketing" label="Marketing Emails" hint="Product news and offers." />
                            <x-admin.toggle model="notifications.browser" label="Browser Notifications" hint="In-browser push." />
                            <x-admin.toggle model="notifications.queue" label="Queue Notifications" hint="Job failures and queue events." />
                            <x-admin.toggle model="notifications.automation" label="Automation Notifications" hint="Automation runs and results." />
                            <x-admin.toggle model="notifications.software_updates" label="Software Update Notifications" hint="New desktop releases." />
                        </div>
                        <button type="submit" class="mt-4 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">Save Settings</button>
                    </form>
                @endif
            </x-admin.card>

            {{-- Active Sessions --}}
            <x-admin.card>
                <div class="mb-4 flex items-center justify-between">
                    <div>
                        <h3 class="text-base font-semibold text-white">Active Sessions</h3>
                        <p class="text-xs text-slate-500">Devices currently signed in to your account.</p>
                    </div>
                    <button wire:click="logoutOtherSessions" wire:confirm="Sign out all other sessions?" class="text-sm font-semibold text-red-400 hover:underline">Logout All</button>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-sm">
                        <thead><tr class="border-b border-edge text-xs uppercase tracking-wide text-slate-500">
                            <th class="pb-2 pr-4 font-medium">Device</th><th class="pb-2 pr-4 font-medium">Browser</th>
                            <th class="pb-2 pr-4 font-medium">IP</th><th class="pb-2 pr-4 font-medium">Last Active</th>
                            <th class="pb-2 pr-4 font-medium">Status</th><th class="pb-2 font-medium text-right">Action</th>
                        </tr></thead>
                        <tbody class="divide-y divide-edge">
                            @foreach ($sessions as $s)
                                <tr class="text-slate-300">
                                    <td class="py-3 pr-4"><div class="font-medium text-white">{{ $s['device'] }} · {{ $s['os'] }}</div></td>
                                    <td class="py-3 pr-4 text-slate-400">{{ $s['browser'] }}</td>
                                    <td class="py-3 pr-4 text-slate-400">{{ $s['ip'] }}</td>
                                    <td class="py-3 pr-4 text-slate-400">{{ $s['last_active'] }}</td>
                                    <td class="py-3 pr-4">
                                        <span class="admin-chip {{ $s['current'] ? 'bg-green-500/15 text-green-400' : 'bg-slate-500/15 text-slate-400' }}">{{ $s['current'] ? 'This device' : 'Active' }}</span>
                                    </td>
                                    <td class="py-3 text-right">
                                        @unless ($s['current'])
                                            <button wire:click="logoutSession('{{ $s['id'] }}')" class="rounded-lg border border-edge px-2.5 py-1 text-xs text-slate-300 hover:bg-raised">Logout</button>
                                        @else
                                            <span class="text-xs text-slate-600">—</span>
                                        @endunless
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </x-admin.card>
        </div>

        {{-- RIGHT --}}
        <div class="space-y-6">
            {{-- Security --}}
            <x-admin.card>
                <div class="mb-4 flex items-center gap-2"><x-lucide-shield-check class="h-5 w-5 text-brand-500" /><h3 class="text-base font-semibold text-white">Security Information</h3></div>
                <div class="space-y-4 text-sm">
                    <div class="flex items-center justify-between">
                        <span class="text-slate-400">Password</span>
                        <button wire:click="$set('showPassword', true)" class="rounded-lg border border-edge px-3 py-1.5 text-xs text-slate-200 hover:bg-raised">Change Password</button>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-slate-400">Two-Factor Authentication</span>
                        <button wire:click="toggleTwoFactor" class="admin-chip {{ $two_factor_enabled ? 'bg-green-500/15 text-green-400' : 'bg-slate-500/15 text-slate-400' }}">{{ $two_factor_enabled ? 'Enabled' : 'Disabled' }}</button>
                    </div>
                    <div class="flex items-center justify-between"><span class="text-slate-400">API Tokens</span><span class="text-slate-200">{{ $apiTokens }} active</span></div>
                    <div class="flex items-center justify-between"><span class="text-slate-400">Last Password Change</span><span class="text-slate-200">{{ $user->last_password_changed_at?->format('M j, Y') ?? 'Never' }}</span></div>
                    <div class="flex items-center justify-between"><span class="text-slate-400">Login Notifications</span><span class="admin-chip {{ ($notifications['security_alerts'] ?? false) ? 'bg-green-500/15 text-green-400' : 'bg-slate-500/15 text-slate-400' }}">{{ ($notifications['security_alerts'] ?? false) ? 'Enabled' : 'Disabled' }}</span></div>
                    <div>
                        <div class="mb-1.5 flex items-center justify-between"><span class="text-slate-400">Security Score</span><span class="font-semibold text-white">{{ $securityScore }}%</span></div>
                        <div class="h-2 overflow-hidden rounded-full bg-raised"><div class="h-full rounded-full bg-gradient-to-r from-brand to-green-400" style="width: {{ $securityScore }}%"></div></div>
                    </div>
                </div>
            </x-admin.card>

            {{-- Recent Activity --}}
            <x-admin.card>
                <div class="mb-3 flex items-center justify-between"><h3 class="text-base font-semibold text-white">Recent Activity</h3><a href="{{ route('admin.activity') }}" wire:navigate class="text-xs font-semibold text-brand-500 hover:underline">View All</a></div>
                <div class="space-y-3">
                    @forelse ($activity as $log)
                        <div class="flex items-start gap-3">
                            <span class="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-raised text-slate-400"><x-lucide-activity class="h-4 w-4" /></span>
                            <div class="min-w-0 flex-1"><div class="text-[13px] font-medium capitalize text-slate-200">{{ $log->description ?? str_replace(['.', '_'], ' ', $log->action) }}</div><div class="text-xs text-slate-500">{{ $log->created_at->diffForHumans() }}</div></div>
                        </div>
                    @empty
                        <div class="py-6 text-center text-sm text-slate-500">No recent activity.</div>
                    @endforelse
                </div>
            </x-admin.card>

            {{-- Account Information --}}
            <x-admin.card title="Account Information">
                <div class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
                    <div><div class="text-xs text-slate-500">Admin ID</div><div class="text-slate-200">#{{ $user->id }}</div></div>
                    <div><div class="text-xs text-slate-500">Role</div><div class="capitalize text-slate-200">{{ str_replace('_', ' ', $user->role) }}</div></div>
                    <div><div class="text-xs text-slate-500">Created</div><div class="text-slate-200">{{ $user->created_at->format('M j, Y') }}</div></div>
                    <div><div class="text-xs text-slate-500">Last Updated</div><div class="text-slate-200">{{ $user->updated_at->diffForHumans() }}</div></div>
                    <div><div class="text-xs text-slate-500">Account Status</div><span class="admin-chip bg-green-500/15 text-green-400">{{ ucfirst($user->status) }}</span></div>
                    <div><div class="text-xs text-slate-500">Email Verified</div><span class="admin-chip {{ $user->email_verified_at ? 'bg-green-500/15 text-green-400' : 'bg-amber-500/15 text-amber-400' }}">{{ $user->email_verified_at ? 'Verified' : 'Pending' }}</span></div>
                </div>
            </x-admin.card>
        </div>
    </div>

    {{-- ============ Password modal ============ --}}
    @if ($showPassword)
        <div class="fixed inset-0 z-50 grid place-items-center bg-black/60 p-4"
             x-data="{ show:false, pw:'', get score(){ let s=0; if(this.pw.length>=8)s++; if(/[A-Z]/.test(this.pw))s++; if(/[0-9]/.test(this.pw))s++; if(/[^A-Za-z0-9]/.test(this.pw))s++; return s; },
                       gen(){ const c='ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%'; let p=''; for(let i=0;i<16;i++)p+=c[Math.floor(Math.random()*c.length)]; this.pw=p; $wire.set('password',p); $wire.set('password_confirmation',p); } }"
             @keydown.escape.window="$wire.set('showPassword', false)">
            <div class="w-full max-w-md rounded-2xl border border-edge bg-card p-5 shadow-card">
                <h3 class="text-base font-semibold text-white">Change Password</h3>
                <form wire:submit="updatePassword" class="mt-4 space-y-4">
                    <div>
                        <label class="{{ $label }}">Current Password</label>
                        <input wire:model="current_password" type="password" class="{{ $input }}">
                        @error('current_password') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <div class="mb-1.5 flex items-center justify-between">
                            <label class="text-sm font-medium text-slate-300">New Password</label>
                            <button type="button" @click="gen()" class="text-xs text-brand-500 hover:underline">Generate strong</button>
                        </div>
                        <div class="relative">
                            <input wire:model="password" x-model="pw" :type="show ? 'text' : 'password'" class="{{ $input }} pr-10">
                            <button type="button" @click="show = !show" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300">
                                <x-lucide-eye x-show="!show" class="h-4 w-4" /><x-lucide-eye-off x-show="show" x-cloak class="h-4 w-4" />
                            </button>
                        </div>
                        {{-- strength meter --}}
                        <div class="mt-2 flex gap-1">
                            <template x-for="i in 4"><span class="h-1 flex-1 rounded-full" :class="score >= i ? (score<=1 ? 'bg-red-500' : score===2 ? 'bg-amber-500' : score===3 ? 'bg-blue-500' : 'bg-green-500') : 'bg-edge'"></span></template>
                        </div>
                        <p class="mt-1 text-xs text-slate-500" x-text="['Too weak','Weak','Fair','Good','Strong'][score]"></p>
                        @error('password') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="{{ $label }}">Confirm New Password</label>
                        <input wire:model="password_confirmation" :type="show ? 'text' : 'password'" class="{{ $input }}">
                    </div>
                    <div class="flex justify-end gap-2 pt-1">
                        <button type="button" wire:click="$set('showPassword', false)" class="rounded-xl border border-edge px-4 py-2 text-sm text-slate-300 hover:bg-raised">Cancel</button>
                        <button type="submit" class="rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Update Password</button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>