@php
    $colors = ['facebook' => '#1877f2', 'instagram' => '#d62976', 'tiktok' => '#22d3ee', 'youtube' => '#ef4444', 'linkedin' => '#0a66c2', 'threads' => '#a855f7'];
@endphp
<div>
    <x-admin.page-head title="Connected Accounts" subtitle="Social accounts connected across all customer desktops (from reported usage)." />

    <div class="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
        @foreach ($platforms as $key => $label)
            <div class="admin-card p-4 text-center">
                <span class="mx-auto grid h-10 w-10 place-items-center rounded-xl text-[11px] font-bold text-white" style="background: {{ $colors[$key] }}">{{ strtoupper(substr($label, 0, 2)) }}</span>
                <div class="mt-2 text-xl font-bold text-white">{{ number_format($totals[$key]) }}</div>
                <div class="text-[11px] text-slate-500">{{ $label }}</div>
            </div>
        @endforeach
    </div>

    <x-admin.card title="Accounts by Customer">
        <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">Customer</th>
                    <th class="pb-2 pr-4 font-medium">Connected platforms</th>
                    <th class="pb-2 pr-4 font-medium">Total</th>
                    <th class="pb-2 pr-4 font-medium">Last reported</th>
                    <th class="pb-2 font-medium"></th>
                </tr></thead>
                <tbody class="divide-y divide-edge">
                    @forelse ($rows as $r)
                        @php($acc = is_array($r->accounts) ? $r->accounts : (json_decode($r->accounts, true) ?: []))
                        <tr class="text-slate-300">
                            <td class="py-3 pr-4">
                                <div class="flex items-center gap-3">
                                    <span class="grid h-9 w-9 place-items-center rounded-full bg-gradient-to-br from-brand to-accent2 text-xs font-bold text-white">{{ strtoupper(substr($r->name ?: $r->email, 0, 1)) }}</span>
                                    <div class="min-w-0"><div class="truncate font-medium text-white">{{ $r->name }}</div><div class="truncate text-xs text-slate-500">{{ $r->email }}</div></div>
                                </div>
                            </td>
                            <td class="py-3 pr-4">
                                <div class="flex flex-wrap gap-1.5">
                                    @forelse ($acc as $p => $n)
                                        @if ($n > 0)
                                            <span class="admin-chip text-white" style="background: {{ ($colors[$p] ?? '#64748b') }}33; color: {{ $colors[$p] ?? '#94a1b8' }}">{{ ucfirst($p) }} · {{ $n }}</span>
                                        @endif
                                    @empty
                                        <span class="text-xs text-slate-500">none</span>
                                    @endforelse
                                </div>
                            </td>
                            <td class="py-3 pr-4 font-semibold text-white">{{ array_sum($acc) }}</td>
                            <td class="py-3 pr-4 text-slate-400">{{ $r->reported_at ? \Carbon\Carbon::parse($r->reported_at)->diffForHumans() : '—' }}</td>
                            <td class="py-3 text-right">
                                <button wire:click="showAccounts({{ $r->id }})"
                                        class="inline-flex items-center gap-1.5 rounded-lg border border-edge px-3 py-1.5 text-xs font-medium text-slate-300 hover:bg-raised hover:text-white">
                                    <x-lucide-eye class="h-3.5 w-3.5" /> Show accounts
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="py-8 text-center text-slate-500">No connected accounts reported yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $rows->links('pagination.dark') }}</div>
    </x-admin.card>

    {{-- Linked accounts detail modal --}}
    @if ($viewingUser)
        {{-- NOTE: use only the inline parenthesised php directive in this file;
             a block form here would mis-pair with the inline calls above and
             swallow the table during compilation. --}}
        @php($accountColors = \App\Services\UserDashboardMetrics::PLATFORM_META)
        @php($statusChip = ['connected' => 'bg-green-500/15 text-green-400', 'token_expired' => 'bg-amber-500/15 text-amber-400', 'error' => 'bg-red-500/15 text-red-400', 'disabled' => 'bg-slate-500/15 text-slate-400'])
        @php($reportedTotal = is_array($viewingUser->usage?->accounts) ? array_sum($viewingUser->usage->accounts) : 0)
        <div class="fixed inset-0 z-50 overflow-y-auto bg-black/60 p-4 backdrop-blur-sm" x-data @keydown.escape.window="$wire.set('viewingId', null)">
            <div class="mx-auto my-8 w-full max-w-2xl rounded-2xl border border-edge bg-card shadow-card">
                <div class="flex items-center justify-between border-b border-edge px-6 py-4">
                    <div class="flex items-center gap-3">
                        <span class="grid h-10 w-10 place-items-center rounded-full bg-gradient-to-br from-brand to-accent2 text-sm font-bold text-white">{{ strtoupper(mb_substr($viewingUser->name ?? $viewingUser->email, 0, 1)) }}</span>
                        <div>
                            <h3 class="text-base font-semibold text-white">Linked accounts — {{ $viewingUser->name ?? $viewingUser->email }}</h3>
                            <p class="text-xs text-slate-500">{{ $viewingUser->email }} · {{ $viewingUser->socialAccounts->count() }} synced {{ \Illuminate\Support\Str::plural('account', $viewingUser->socialAccounts->count()) }}</p>
                        </div>
                    </div>
                    <button wire:click="$set('viewingId', null)" class="rounded-lg p-1.5 text-slate-400 hover:bg-raised hover:text-white"><x-lucide-x class="h-5 w-5" /></button>
                </div>

                <div class="max-h-[65vh] overflow-y-auto">
                    @forelse ($viewingUser->socialAccounts as $a)
                        @php([$pLabel, $pColor, $pShort] = $accountColors[$a->platform] ?? [ucfirst($a->platform), '#64748b', strtoupper(substr($a->platform, 0, 2))])
                        <div class="flex flex-wrap items-center gap-3 border-b border-edge px-6 py-3.5 last:border-b-0">
                            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-[9px] font-bold text-white" style="background: {{ $pColor }}">{{ $pShort }}</span>
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-2">
                                    <span class="truncate text-sm font-semibold text-white">{{ '@'.$a->username }}</span>
                                    <span class="admin-chip {{ $statusChip[$a->status] ?? 'bg-slate-500/15 text-slate-400' }}">{{ str_replace('_', ' ', ucfirst($a->status)) }}</span>
                                </div>
                                <div class="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-slate-500">
                                    <span>{{ $pLabel }}</span>
                                    @if ($a->display_name)<span class="text-slate-700">·</span><span>{{ $a->display_name }}</span>@endif
                                    <span class="text-slate-700">·</span><span>{{ ucfirst($a->role) }}</span>
                                    @if ($a->connected_at)<span class="text-slate-700">·</span><span>connected {{ $a->connected_at->diffForHumans() }}</span>@endif
                                </div>
                            </div>
                            <div class="shrink-0 text-right">
                                <div class="text-[10.5px] uppercase tracking-wider text-slate-600">Account ID</div>
                                <div class="font-mono text-xs text-slate-300">{{ $a->desktop_id }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="px-6 py-10 text-center text-sm text-slate-500">
                            @if ($reportedTotal > 0)
                                This customer's desktop reports <strong class="text-slate-300">{{ $reportedTotal }}</strong> connected {{ \Illuminate\Support\Str::plural('account', $reportedTotal) }},
                                but their app hasn't synced per-account details yet (needs a desktop version that calls <span class="font-mono text-xs">/me/accounts</span>).
                            @else
                                No accounts synced for this customer yet.
                            @endif
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    @endif
</div>