@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';
    $lbl = 'mb-1.5 block text-sm font-medium text-slate-300';
    $statusChip = ['active' => 'bg-green-500/15 text-green-400', 'suspended' => 'bg-red-500/15 text-red-400', 'pending' => 'bg-amber-500/15 text-amber-400'][$user->status] ?? 'bg-slate-500/15 text-slate-400';
    $roleChip = ['super_admin' => 'bg-brand/15 text-brand-500', 'staff' => 'bg-blue-500/15 text-blue-400'][$user->role] ?? 'bg-slate-500/15 text-slate-400';
    $plan = optional($user->currentSubscription)->plan;
    $tabs = ['overview' => 'Overview', 'account' => 'Account Information', 'subscription' => 'Subscription', 'activity' => 'Activity Log', 'connected' => 'Connected Accounts', 'permissions' => 'Permissions'];
    $platMeta = ['facebook' => ['Facebook', '#1877f2'], 'instagram' => ['Instagram', '#d62976'], 'tiktok' => ['TikTok', '#22d3ee'], 'youtube' => ['YouTube', '#ef4444'], 'linkedin' => ['LinkedIn', '#0a66c2'], 'threads' => ['Threads', '#a855f7']];
    $row = fn ($k, $v) => '<div class="text-xs text-slate-500">'.$k.'</div><div class="text-sm text-slate-200">'.$v.'</div>';
@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" />
        <a href="{{ route('admin.users') }}" wire:navigate class="hover:text-slate-300">Users</a><x-lucide-chevron-right class="h-3.5 w-3.5" />
        <span class="text-slate-300">User Profile</span>
    </nav>
    <x-admin.page-head title="User Profile" subtitle="View and manage user information, subscription, connected accounts, permissions and activity.">
        <button wire:click="openEdit" class="inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700"><x-lucide-pencil class="h-4 w-4" /> Edit User</button>
        <div class="relative" x-data="{ open:false }">
            <button @click="open=!open" class="inline-flex items-center gap-1.5 rounded-xl border border-edge bg-card px-3.5 py-2.5 text-sm text-slate-200 hover:bg-raised">Actions <x-lucide-chevron-down class="h-4 w-4" /></button>
            <div x-show="open" @click.outside="open=false" x-cloak x-transition class="absolute right-0 top-[calc(100%+6px)] z-30 w-52 rounded-xl border border-edge bg-card p-1.5 shadow-card">
                <button wire:click="toggleSuspend" @click="open=false" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-200 hover:bg-raised"><x-lucide-ban class="h-4 w-4" /> {{ $user->isSuspended() ? 'Activate' : 'Suspend' }} User</button>
                <button wire:click="resetPassword" @click="open=false" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-200 hover:bg-raised"><x-lucide-key-round class="h-4 w-4" /> Reset Password</button>
                @unless ($user->isAdmin() || $user->id === auth()->id())
                    <form method="POST" action="{{ route('admin.users.impersonate', $user) }}">@csrf<button class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-200 hover:bg-raised"><x-lucide-log-in class="h-4 w-4" /> Login as User</button></form>
                @endunless
                <a href="{{ route('admin.users.export') }}" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-200 hover:bg-raised"><x-lucide-download class="h-4 w-4" /> Export User Data</a>
                <div class="my-1 h-px bg-edge"></div>
                <button wire:click="deleteUser" wire:confirm="Delete {{ $user->email }}? This cannot be undone." @click="open=false" class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-red-400 hover:bg-raised"><x-lucide-trash-2 class="h-4 w-4" /> Delete User</button>
            </div>
        </div>
    </x-admin.page-head>

    {{-- ===== Banner ===== --}}
    <div class="relative mb-6 overflow-hidden rounded-2xl border border-edge bg-gradient-to-br from-brand/12 via-card to-card p-6">
        <div class="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-brand/15 blur-[90px]"></div>
        <div class="relative grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_auto]">
            <div class="flex items-center gap-5">
                <div class="relative shrink-0">
                    @if ($user->avatarUrl())
                        <img src="{{ $user->avatarUrl() }}" 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 {{ $user->isSuspended() ? 'bg-red-400' : 'bg-green-400' }} ring-2 ring-card"></span>
                </div>
                <div class="min-w-0">
                    <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 {{ $statusChip }}">{{ ucfirst($user->status) }} User</span>
                        <span class="admin-chip capitalize {{ $roleChip }}">{{ str_replace('_', ' ', $user->role) }}</span>
                    </div>
                    <div class="mt-1.5 flex flex-wrap gap-x-5 gap-y-1 text-sm text-slate-400">
                        <span class="inline-flex items-center gap-1.5"><x-lucide-mail class="h-3.5 w-3.5" /> {{ $user->email }}</span>
                        @if ($user->phone)<span class="inline-flex items-center gap-1.5"><x-lucide-phone class="h-3.5 w-3.5" /> {{ $user->phone }}</span>@endif
                        @if ($user->location || $user->country)<span class="inline-flex items-center gap-1.5"><x-lucide-map-pin class="h-3.5 w-3.5" /> {{ $user->location ?: $user->country }}</span>@endif
                    </div>
                    <div class="mt-2 inline-flex items-center gap-2 text-xs text-slate-500" x-data="{ copied:false }">
                        User ID: <code class="text-slate-400">{{ $user->id }}</code>
                        <button @click="navigator.clipboard.writeText('{{ $user->id }}'); copied=true; setTimeout(()=>copied=false,1500)" class="hover:text-slate-300"><x-lucide-copy class="h-3.5 w-3.5" /></button>
                        <span x-show="copied" class="text-green-400">copied</span>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3 xl:grid-cols-4 xl:w-[620px]">
                @php($bannerCards = [
                    ['send', '#7c3aed', 'Total Posts', number_format(optional($user->usage)->posts_month ?? 0), '↑ 18.2%'],
                    ['calendar', '#3b82f6', 'Joined Date', $user->created_at->format('M j, Y'), $user->created_at->diffForHumans()],
                    ['share-2', '#22c55e', 'Total Accounts', number_format($connectedTotal), 'Connected'],
                    ['crown', '#f59e0b', 'User Plan', $plan?->name ?? 'Free', $plan ? 'Active' : '—'],
                ])
                @foreach ($bannerCards as [$icon, $tint, $lbl2, $val, $sub])
                    <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">{{ $lbl2 }}</div>
                        <div class="truncate text-base font-bold text-white">{{ $val }}</div>
                        <div class="text-[11px] text-slate-400">{{ $sub }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    @if ($newPassword)
        <div class="mb-4 flex items-center gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-300">
            <x-lucide-key class="h-4 w-4 shrink-0" /> New password (shown once): <code class="rounded bg-ink px-2 py-0.5 font-mono font-semibold text-white">{{ $newPassword }}</code>
        </div>
    @endif

    {{-- ===== Body: tabs (left) + rail (right) ===== --}}
    <div class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1.55fr)_minmax(0,1fr)]">
        <div class="min-w-0 space-y-6">
            {{-- tabs --}}
            <div class="flex gap-5 overflow-x-auto border-b border-edge">
                @foreach ($tabs as $key => $lbl3)
                    <button wire:click="$set('tab','{{ $key }}')" class="relative -mb-px whitespace-nowrap 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' }}">{{ $lbl3 }}</button>
                @endforeach
            </div>

            {{-- OVERVIEW --}}
            @if ($tab === 'overview')
                <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
                    <x-admin.card title="Account Information">
                        <div class="grid grid-cols-2 gap-x-6 gap-y-3">
                            {!! $row('Full Name', e($user->name)) !!}
                            {!! $row('Username', e($user->username ?: '—')) !!}
                            {!! $row('Email', e($user->email).' '.($user->email_verified_at ? '<span class="admin-chip bg-green-500/15 text-green-400">Verified</span>' : '<span class="admin-chip bg-amber-500/15 text-amber-400">Pending</span>')) !!}
                            {!! $row('Phone', e($user->phone ?: '—')) !!}
                            {!! $row('Country', e($user->country ?: '—')) !!}
                            {!! $row('Timezone', e($user->timezone ?: 'UTC')) !!}
                            {!! $row('Status', '<span class="admin-chip '.$statusChip.'">'.ucfirst($user->status).'</span>') !!}
                            {!! $row('Joined', $user->created_at->format('M j, Y')) !!}
                        </div>
                    </x-admin.card>

                    <x-admin.card title="Subscription Information">
                        <div class="flex items-center gap-3">
                            <span class="grid h-11 w-11 place-items-center rounded-xl bg-brand/15 text-brand-500"><x-lucide-crown class="h-5 w-5" /></span>
                            <div><div class="font-semibold text-white">{{ $plan?->name ?? 'Free Plan' }} @if($plan)<span class="admin-chip bg-green-500/15 text-green-400">Active</span>@endif</div><div class="text-xs text-slate-500">{{ $plan?->features ? '' : 'No active subscription' }}</div></div>
                        </div>
                        <div class="mt-4 space-y-2.5 text-sm">
                            <div class="flex justify-between"><span class="text-slate-400">Plan Price</span><span class="font-semibold text-white">${{ number_format($plan?->price ?? 0, 2) }} / {{ ucfirst($plan?->interval ?? 'mo') }}</span></div>
                            <div class="flex justify-between"><span class="text-slate-400">Started On</span><span class="text-slate-200">{{ optional($user->currentSubscription)->starts_at?->format('M j, Y') ?? '—' }}</span></div>
                            <div class="flex justify-between"><span class="text-slate-400">Renewal Date</span><span class="text-slate-200">{{ optional($user->currentSubscription)->ends_at?->format('M j, Y') ?? '—' }}</span></div>
                            <div class="flex justify-between"><span class="text-slate-400">Accounts Used</span><span class="text-slate-200">{{ $connectedTotal }}</span></div>
                        </div>
                        <button wire:click="$set('tab','subscription')" class="mt-4 w-full rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">View Subscription Details</button>
                    </x-admin.card>
                </div>

                {{-- Quick actions --}}
                <x-admin.card title="Quick Actions">
                    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                        @php($qa = [
                            ['pencil', 'Edit User', "\$wire.openEdit()"],
                            ['key-round', 'Reset Password', "\$wire.resetPassword()"],
                            ['ban', $user->isSuspended() ? 'Activate User' : 'Suspend User', "\$wire.toggleSuspend()"],
                            ['credit-card', 'Change Plan', "\$wire.set('tab','subscription')"],
                            ['scroll-text', 'Activity Log', "\$wire.set('tab','activity')"],
                            ['share-2', 'Connected Accounts', "\$wire.set('tab','connected')"],
                        ])
                        @foreach ($qa as [$icon, $lbl4, $act])
                            <button x-on:click="{{ $act }}" class="flex items-center gap-2.5 rounded-xl border border-edge bg-ink px-3.5 py-3 text-sm text-slate-200 hover:bg-raised"><x-dynamic-component :component="'lucide-'.$icon" class="h-4 w-4 text-brand-500" /> {{ $lbl4 }}</button>
                        @endforeach
                    </div>
                </x-admin.card>

                {{-- Notes --}}
                <x-admin.card title="User Notes">
                    <form wire:submit="addNote" class="mb-4">
                        <textarea wire:model="noteBody" rows="2" class="{{ $input }}" placeholder="Add an internal note about this user…"></textarea>
                        @error('noteBody') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                        <div class="mt-2 flex items-center gap-4">
                            <label class="flex items-center gap-2 text-xs text-slate-400"><input type="checkbox" wire:model="notePinned" class="h-4 w-4 rounded border-edge bg-ink text-brand"> Pinned</label>
                            <label class="flex items-center gap-2 text-xs text-slate-400"><input type="checkbox" wire:model="notePrivate" class="h-4 w-4 rounded border-edge bg-ink text-brand"> Private</label>
                            <div class="flex-1"></div>
                            <button type="submit" class="rounded-lg bg-brand px-3.5 py-1.5 text-sm font-semibold text-white hover:bg-brand-700">Add Note</button>
                        </div>
                    </form>
                    <div class="space-y-3">
                        @forelse ($notes as $note)
                            <div class="rounded-xl border border-edge bg-ink p-3">
                                <div class="text-sm text-slate-200">{{ $note->body }}</div>
                                <div class="mt-2 flex items-center gap-2 text-xs text-slate-500">
                                    @if ($note->is_pinned)<span class="admin-chip bg-amber-500/15 text-amber-400">Pinned</span>@endif
                                    @if ($note->is_private)<span class="admin-chip bg-slate-500/15 text-slate-400">Private</span>@endif
                                    <span>{{ $note->author?->name ?? 'Admin' }} · {{ $note->created_at->diffForHumans() }}</span>
                                    <div class="flex-1"></div>
                                    <button wire:click="togglePin({{ $note->id }})" class="hover:text-slate-300">{{ $note->is_pinned ? 'Unpin' : 'Pin' }}</button>
                                    <button wire:click="deleteNote({{ $note->id }})" class="hover:text-red-400">Delete</button>
                                </div>
                            </div>
                        @empty
                            <div class="py-4 text-center text-sm text-slate-500">No notes yet.</div>
                        @endforelse
                    </div>
                </x-admin.card>

                {{-- Recent activity --}}
                <x-admin.card>
                    <div class="mb-4 flex items-center justify-between"><h3 class="text-base font-semibold text-white">Recent Activity</h3><button wire:click="$set('tab','activity')" class="text-xs font-semibold text-brand-500 hover:underline">View All</button></div>
                    @include('livewire.admin.users._activity-table', ['rows' => $recentActivity])
                </x-admin.card>
            @endif

            {{-- ACCOUNT INFORMATION --}}
            @if ($tab === 'account')
                <x-admin.card title="Account Information">
                    <div class="grid grid-cols-2 gap-x-8 gap-y-4 sm:grid-cols-3">
                        {!! $row('Full Name', e($user->name)) !!}
                        {!! $row('Username', e($user->username ?: '—')) !!}
                        {!! $row('Email Address', e($user->email)) !!}
                        {!! $row('Phone Number', e($user->phone ?: '—')) !!}
                        {!! $row('Date of Birth', $user->date_of_birth?->format('M j, Y') ?? '—') !!}
                        {!! $row('Gender', e($user->gender ?: '—')) !!}
                        {!! $row('Language', e(optional($user->preferences)->language ?: 'en')) !!}
                        {!! $row('Timezone', e($user->timezone ?: 'UTC')) !!}
                        {!! $row('Country', e($user->country ?: '—')) !!}
                        {!! $row('Status', '<span class="admin-chip '.$statusChip.'">'.ucfirst($user->status).'</span>') !!}
                        {!! $row('Email Verified', $user->email_verified_at ? 'Yes' : 'No') !!}
                        {!! $row('Registration Date', $user->created_at->format('M j, Y')) !!}
                        {!! $row('Last Login', $user->last_login_at?->diffForHumans() ?? 'Never') !!}
                        {!! $row('Referral Code', e($user->referral_code ?: '—')) !!}
                        {!! $row('Referral Source', e($user->referral_source ?: '—')) !!}
                    </div>
                </x-admin.card>
            @endif

            {{-- SUBSCRIPTION --}}
            @if ($tab === 'subscription')
                <x-admin.card>
                    <x-slot:action>
                        <div class="flex items-center gap-2">
                            <select wire:model="assignPlanId" class="rounded-xl border border-edge bg-ink py-2 pl-3 pr-8 text-sm text-slate-300"><option value="">Assign a plan…</option>@foreach ($plans as $pl)<option value="{{ $pl->id }}">{{ $pl->name }} (${{ number_format($pl->price, 2) }})</option>@endforeach</select>
                            <button wire:click="assign" class="rounded-xl bg-brand px-3.5 py-2 text-sm font-semibold text-white hover:bg-brand-700">Assign</button>
                        </div>
                    </x-slot:action>
                    <h3 class="mb-4 text-base font-semibold text-white">Subscriptions &amp; Renewal History</h3>
                    @error('assignPlanId') <div class="mb-2 text-xs text-red-400">{{ $message }}</div> @enderror
                    <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">Plan</th><th class="pb-2 pr-4 font-medium">Price</th><th class="pb-2 pr-4 font-medium">Status</th><th class="pb-2 pr-4 font-medium">Started</th><th class="pb-2 pr-4 font-medium">Ends</th><th class="pb-2 font-medium text-right">Action</th></tr></thead>
                            <tbody class="divide-y divide-edge">
                                @forelse ($subscriptions as $sub)
                                    <tr class="text-slate-300">
                                        <td class="py-3 pr-4 font-medium text-white">{{ $sub->plan?->name ?? '—' }}</td>
                                        <td class="py-3 pr-4">${{ number_format($sub->plan?->price ?? 0, 2) }}</td>
                                        <td class="py-3 pr-4"><span class="admin-chip {{ $sub->status === 'active' ? 'bg-green-500/15 text-green-400' : 'bg-slate-500/15 text-slate-400' }}">{{ $sub->status }}</span></td>
                                        <td class="py-3 pr-4 text-slate-400">{{ $sub->starts_at?->format('M j, Y') ?? '—' }}</td>
                                        <td class="py-3 pr-4 text-slate-400">{{ $sub->ends_at?->format('M j, Y') ?? '—' }}</td>
                                        <td class="py-3 text-right">@if ($sub->status === 'active')<button wire:click="cancel({{ $sub->id }})" class="text-xs text-red-400 hover:underline">Cancel</button>@endif</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="py-8 text-center text-slate-500">No subscription history.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 grid grid-cols-2 gap-3 text-sm sm:grid-cols-4">
                        @foreach (['posts_per_day' => 'Daily Posts', 'posts_per_month' => 'Monthly Posts', 'max_scheduled' => 'Scheduled', 'queue_size' => 'Queue'] as $k => $label)
                            <div class="rounded-xl border border-edge bg-ink p-3"><div class="text-xs text-slate-500">{{ $label }}</div><div class="font-semibold text-white">{{ $usage['quotas'][$k]['used'] }} <span class="text-slate-500">/ {{ is_null($usage['quotas'][$k]['limit']) ? '∞' : $usage['quotas'][$k]['limit'] }}</span></div></div>
                        @endforeach
                    </div>
                </x-admin.card>
            @endif

            {{-- ACTIVITY LOG --}}
            @if ($tab === 'activity')
                <x-admin.card title="Activity Log">
                    @include('livewire.admin.users._activity-table', ['rows' => $activity])
                    <div class="mt-4">{{ $activity->links('pagination.dark') }}</div>
                </x-admin.card>
            @endif

            {{-- CONNECTED ACCOUNTS --}}
            @if ($tab === 'connected')
                <x-admin.card title="Connected Accounts">
                    @if ($connectedTotal === 0)
                        <div class="py-8 text-center text-slate-500">No connected accounts reported.</div>
                    @else
                        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                            @foreach ($accountsUsage as $platform => $count)
                                @php([$plabel, $pcolor] = $platMeta[$platform] ?? [ucfirst($platform), '#64748b'])
                                @if ($count > 0)
                                    <div class="flex items-center gap-3 rounded-xl border border-edge bg-ink p-4">
                                        <span class="grid h-11 w-11 place-items-center rounded-xl text-xs font-bold text-white" style="background: {{ $pcolor }}">{{ strtoupper(substr($plabel, 0, 2)) }}</span>
                                        <div class="min-w-0 flex-1"><div class="font-semibold text-white">{{ $plabel }}</div><div class="text-xs text-green-400"><span class="mr-1 inline-block h-1.5 w-1.5 rounded-full bg-green-400"></span>{{ $count }} account(s) connected</div></div>
                                        <span class="admin-chip bg-slate-500/15 text-slate-400">Reported</span>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <p class="mt-3 text-xs text-slate-500">Per-account details (avatar, last sync, posts) live in the user's desktop app; the server sees aggregate counts.</p>
                    @endif
                </x-admin.card>
            @endif

            {{-- PERMISSIONS --}}
            @if ($tab === 'permissions')
                <x-admin.card title="Role &amp; Permissions">
                    <div class="grid grid-cols-2 gap-x-8 gap-y-3">
                        {!! $row('Current Role', '<span class="admin-chip capitalize '.$roleChip.'">'.str_replace('_',' ',$user->role).'</span>') !!}
                        {!! $row('Admin Access', $user->isAdmin() ? 'Yes' : 'No') !!}
                        {!! $row('Desktop Access', $user->isActive() ? 'Yes' : 'Suspended') !!}
                        {!! $row('API Access', $security['tokens'].' token(s)') !!}
                    </div>
                    <div class="mt-4">
                        <div class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Assigned Permissions</div>
                        @php($perms = is_array($user->permissions) ? $user->permissions : [])
                        @if (count($perms))
                            <div class="flex flex-wrap gap-2">@foreach ($perms as $p)<span class="admin-chip bg-brand/15 text-brand-500">{{ $p }}</span>@endforeach</div>
                        @else
                            <p class="text-sm text-slate-500">{{ $user->isSuperAdmin() ? 'Super admin — full unrestricted access.' : 'No granular permissions (standard customer access).' }}</p>
                        @endif
                    </div>
                </x-admin.card>
            @endif
        </div>

        {{-- ===== Right rail ===== --}}
        <div class="space-y-6">
            {{-- Activity summary chart --}}
            <x-admin.card>
                <x-slot:action>
                    <select wire:model.live="chartRange" class="rounded-lg border-edge bg-ink py-1.5 pl-3 pr-8 text-xs text-slate-300"><option value="7">Last 7 Days</option><option value="30">Last 30 Days</option><option value="90">Last 90 Days</option></select>
                </x-slot:action>
                <h3 class="mb-3 text-base font-semibold text-white">User Activity Summary</h3>
                <div class="h-52" wire:ignore><canvas id="userActivityChart"></canvas></div>
                <div class="mt-3 space-y-2 text-sm">
                    <div class="flex items-center justify-between"><span class="flex items-center gap-2 text-slate-400"><span class="h-1.5 w-1.5 rounded-full bg-green-400"></span>Posts Published</span><span class="font-semibold text-white">{{ number_format(optional($user->usage)->posts_month ?? 0) }}</span></div>
                    <div class="flex items-center justify-between"><span class="flex items-center gap-2 text-slate-400"><span class="h-1.5 w-1.5 rounded-full bg-blue-400"></span>Posts Scheduled</span><span class="font-semibold text-white">{{ number_format(optional($user->usage)->scheduled ?? 0) }}</span></div>
                    <div class="flex items-center justify-between"><span class="flex items-center gap-2 text-slate-400"><span class="h-1.5 w-1.5 rounded-full bg-red-400"></span>In Queue</span><span class="font-semibold text-white">{{ number_format(optional($user->usage)->queue ?? 0) }}</span></div>
                </div>
            </x-admin.card>

            {{-- Storage (illustrative) --}}
            <x-admin.card title="Storage Usage">
                <div class="flex items-center gap-5">
                    <div class="relative h-28 w-28 shrink-0">
                        <svg viewBox="0 0 120 120" class="h-28 w-28 -rotate-90"><circle cx="60" cy="60" r="52" fill="none" stroke="var(--tw-none)" style="stroke:#1e2a3f" stroke-width="12" /><circle cx="60" cy="60" r="52" fill="none" stroke="#7c3aed" stroke-width="12" stroke-linecap="round" stroke-dasharray="{{ round(0.62 * 2 * 3.14159 * 52) }} 999" /></svg>
                        <div class="absolute inset-0 grid place-content-center text-center"><div class="text-lg font-bold text-white">62%</div></div>
                    </div>
                    <div class="text-sm"><div class="font-semibold text-white">6.2 GB <span class="text-slate-500">/ 10 GB</span></div><div class="mt-2 space-y-1 text-xs text-slate-400"><div>Videos: <span class="text-slate-200">892</span></div><div>Images: <span class="text-slate-200">353</span></div><div>Files: <span class="text-slate-200">1,245</span></div></div></div>
                </div>
                <p class="mt-3 text-[11px] text-slate-500">Storage figures are illustrative until the desktop reports per-user usage.</p>
            </x-admin.card>

            {{-- Tags --}}
            <x-admin.card title="User Tags">
                <div class="flex flex-wrap gap-2">
                    @forelse ($tags as $t)
                        <span class="admin-chip bg-brand/15 text-brand-500">{{ $t }} <button wire:click="removeTag('{{ $t }}')" class="ml-1 text-brand-500/70 hover:text-red-400">×</button></span>
                    @empty
                        <span class="text-sm text-slate-500">No tags yet.</span>
                    @endforelse
                </div>
                <div class="mt-3 flex flex-wrap gap-1.5">
                    @foreach (\App\Livewire\Admin\Users\Show::TAG_PRESETS as $preset)
                        @unless (in_array($preset, $tags))
                            <button wire:click="addTag('{{ $preset }}')" class="rounded-lg border border-dashed border-edge px-2.5 py-1 text-xs text-slate-400 hover:bg-raised hover:text-slate-200">+ {{ $preset }}</button>
                        @endunless
                    @endforeach
                </div>
            </x-admin.card>

            {{-- Security --}}
            <x-admin.card title="Security Information">
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between"><span class="text-slate-400">Two-Factor</span><span class="admin-chip {{ $security['two_factor'] ? 'bg-green-500/15 text-green-400' : 'bg-slate-500/15 text-slate-400' }}">{{ $security['two_factor'] ? 'Enabled' : 'Disabled' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Password Changed</span><span class="text-slate-200">{{ $security['password_changed']?->format('M j, Y') ?? 'Never' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Active Sessions</span><span class="text-slate-200">{{ $security['sessions'] }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">API Tokens</span><span class="text-slate-200">{{ $security['tokens'] }}</span></div>
                    <div><div class="mb-1.5 flex justify-between"><span class="text-slate-400">Security Score</span><span class="font-semibold text-white">{{ $security['score'] }}%</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: {{ $security['score'] }}%"></div></div></div>
                </div>
            </x-admin.card>
        </div>
    </div>

    {{-- ===== Edit modal ===== --}}
    @if ($showEdit)
        <div class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/60 p-4" @keydown.escape.window="$wire.set('showEdit', false)">
            <div class="w-full max-w-lg rounded-2xl border border-edge bg-card p-5 shadow-card">
                <h3 class="text-base font-semibold text-white">Edit User</h3>
                <form wire:submit="saveProfile" class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div><label class="{{ $lbl }}">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="{{ $lbl }}">Username</label><input wire:model="username" class="{{ $input }}">@error('username')<p class="mt-1 text-xs text-red-400">{{ $message }}</p>@enderror</div>
                    <div><label class="{{ $lbl }}">Email</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="{{ $lbl }}">Phone</label><input wire:model="phone" class="{{ $input }}"></div>
                    <div><label class="{{ $lbl }}">Date of Birth</label><input wire:model="date_of_birth" type="date" class="{{ $input }}"></div>
                    <div><label class="{{ $lbl }}">Gender</label><select wire:model="gender" class="{{ $input }}"><option value="">—</option><option value="Male">Male</option><option value="Female">Female</option><option value="Other">Other</option></select></div>
                    <div><label class="{{ $lbl }}">Country</label><input wire:model="country" class="{{ $input }}"></div>
                    <div><label class="{{ $lbl }}">Timezone</label><input wire:model="timezone" class="{{ $input }}"></div>
                    <div><label class="{{ $lbl }}">Referral Code</label><input wire:model="referral_code" class="{{ $input }}"></div>
                    <div><label class="{{ $lbl }}">Referral Source</label><input wire:model="referral_source" class="{{ $input }}"></div>
                    <div class="sm:col-span-2 flex justify-end gap-2 pt-1">
                        <button type="button" wire:click="$set('showEdit', 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">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    @endif

    @script
    <script>
        function drawUserChart(d) {
            const el = document.getElementById('userActivityChart'); if (!el) return;
            const g = el.getContext('2d').createLinearGradient(0, 0, 0, 200);
            g.addColorStop(0, 'rgba(124,58,237,0.4)'); g.addColorStop(1, 'rgba(124,58,237,0)');
            window.renderChart('userActivityChart', { type: 'line', data: { labels: d.labels, datasets: [{ data: d.values, borderColor: '#7c3aed', backgroundColor: g, fill: true, tension: 0.4, borderWidth: 2, pointRadius: 0 }] },
                options: { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false }, ticks: { maxTicksLimit: 6 } }, y: { grid: { color: 'rgba(36,48,74,0.5)' } } } } });
        }
        drawUserChart(@js($chart));
        $wire.on('chart-range', (e) => drawUserChart((Array.isArray(e) ? e[0] : e)));
    </script>
    @endscript
</div>