@php
    $statusChip = [
        'connected' => ['Connected', 'text-green-400', 'bg-green-400'],
        'full' => ['At plan limit', 'text-amber-400', 'bg-amber-400'],
        'empty' => ['Not connected', 'text-slate-500', 'bg-slate-600'],
        'locked' => ['Not in your plan', 'text-slate-600', 'bg-slate-700'],
    ];
@endphp

<div class="space-y-5">

    {{-- Title row --}}
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">Platforms</h1>
            <p class="mt-1 text-sm text-slate-400">
                Where your content publishes to.
                @if ($syncedAt) Synced from your desktop app {{ $syncedAt->diffForHumans() }}. @endif
            </p>
        </div>
        <a href="{{ route('user.accounts') }}" wire:navigate
           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-plug class="h-4 w-4" /> Connect account
        </a>
    </div>

    {{-- KPI strip --}}
    <div class="admin-card grid grid-cols-2 divide-y divide-edge lg:grid-cols-4 lg:divide-x lg:divide-y-0">
        <div class="flex items-center gap-3 p-4">
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-green-500/10 text-green-400"><x-lucide-share-2 class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ $connected }}</div><div class="text-[11.5px] text-slate-500">Connected accounts</div></div>
        </div>
        <div class="flex items-center gap-3 p-4">
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-brand/15 text-brand-500"><x-lucide-layers class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ $inUse }} <span class="text-xs font-medium text-slate-500">of {{ $available }}</span></div><div class="text-[11.5px] text-slate-500">Platforms in use</div></div>
        </div>
        <div class="flex items-center gap-3 p-4">
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-blue-500/10 text-blue-400"><x-lucide-plug class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ $free }}</div><div class="text-[11.5px] text-slate-500">Account seats free</div></div>
        </div>
        <div class="flex items-center gap-3 p-4">
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-raised text-slate-400"><x-lucide-monitor-smartphone class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white">{{ $syncedAt?->diffForHumans() ?? 'Not yet' }}</div><div class="text-[11.5px] text-slate-500">Last sync</div></div>
        </div>
    </div>

    {{-- Distribution --}}
    @if ($connected > 0)
        <div class="admin-card p-5">
            <div class="mb-2 flex items-center justify-between">
                <span class="text-xs font-semibold text-slate-300">Account distribution</span>
                <span class="text-xs text-slate-500 tabular-nums">{{ $connected }} {{ \Illuminate\Support\Str::plural('account', $connected) }}</span>
            </div>
            <div class="flex h-2.5 gap-0.5 overflow-hidden rounded-full">
                @foreach ($platforms as $p)
                    @if ($p['connected'] > 0)
                        <div style="width: {{ round($p['connected'] / max(1, $connected) * 100, 1) }}%; background: {{ $p['color'] }}" title="{{ $p['label'] }}: {{ $p['connected'] }}"></div>
                    @endif
                @endforeach
            </div>
            <div class="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-slate-400">
                @foreach ($platforms as $p)
                    @if ($p['connected'] > 0)
                        <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-sm" style="background: {{ $p['color'] }}"></span>{{ $p['label'] }} <span class="text-slate-600 tabular-nums">{{ $p['connected'] }} · {{ $p['share'] }}%</span></span>
                    @endif
                @endforeach
            </div>
        </div>
    @endif

    {{-- Platform cards --}}
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        @foreach ($platforms as $p)
            @php([$sLabel, $sText, $sDot] = $statusChip[$p['status']])
            <div class="admin-card p-5 transition hover:-translate-y-px hover:border-slate-600/40 {{ $p['status'] === 'locked' ? 'opacity-60' : '' }}">
                <div class="flex items-start justify-between">
                    <div class="flex items-center gap-3">
                        <span class="grid h-11 w-11 place-items-center rounded-xl text-xs font-bold text-white" style="background: {{ $p['color'] }}">{{ $p['short'] }}</span>
                        <div>
                            <div class="text-sm font-semibold text-white">{{ $p['label'] }}</div>
                            <span class="inline-flex items-center gap-1.5 text-[11.5px] font-medium {{ $sText }}">
                                <span class="h-1.5 w-1.5 rounded-full {{ $sDot }} {{ $p['status'] === 'connected' ? 'shadow-[0_0_6px] shadow-green-400/60' : '' }}"></span>
                                {{ $sLabel }}
                            </span>
                        </div>
                    </div>
                    <span class="text-lg font-bold text-white tabular-nums">{{ $p['connected'] }}<span class="text-xs font-medium text-slate-500">@if($p['cap'] !== null && $p['cap'] > 0) / {{ $p['cap'] }} @elseif($p['cap'] === null) / ∞ @endif</span></span>
                </div>

                {{-- Capacity --}}
                <div class="mt-4">
                    <div class="h-1.5 overflow-hidden rounded-full bg-raised">
                        @php($pct = $p['cap'] === null ? ($p['connected'] > 0 ? 8 : 0) : ($p['cap'] > 0 ? min(100, round($p['connected'] / $p['cap'] * 100)) : 0))
                        <div class="h-full rounded-full" style="width: {{ $pct }}%; background: {{ $p['status'] === 'full' ? '#f59e0b' : $p['color'] }}"></div>
                    </div>
                    <div class="mt-1.5 flex justify-between text-[10.5px] text-slate-600">
                        <span>
                            @if ($p['status'] === 'locked') Upgrade to unlock
                            @elseif ($p['cap'] === null) Unlimited accounts
                            @elseif ($p['status'] === 'full') All seats used
                            @else {{ $p['cap'] - $p['connected'] }} {{ \Illuminate\Support\Str::plural('seat', $p['cap'] - $p['connected']) }} free
                            @endif
                        </span>
                        @if ($p['connected'] > 0)<span class="tabular-nums">{{ $p['share'] }}% of accounts</span>@endif
                    </div>
                </div>

                <div class="mt-4 flex gap-2">
                    @if ($p['status'] === 'locked')
                        <a href="{{ route('billing') }}" wire:navigate class="flex-1 rounded-lg bg-brand/90 py-1.5 text-center text-xs font-semibold text-white hover:bg-brand-700">Upgrade plan</a>
                    @elseif ($p['status'] === 'full')
                        <a href="{{ route('user.accounts') }}" wire:navigate class="flex-1 rounded-lg border border-edge py-1.5 text-center text-xs font-medium text-slate-300 hover:bg-raised">Manage</a>
                        <a href="{{ route('billing') }}" wire:navigate class="flex-1 rounded-lg border border-amber-500/30 py-1.5 text-center text-xs font-semibold text-amber-400 hover:bg-amber-500/10">Add seats</a>
                    @else
                        <a href="{{ route('user.accounts') }}" wire:navigate class="flex-1 rounded-lg border border-edge py-1.5 text-center text-xs font-medium text-slate-300 hover:bg-raised">Manage</a>
                        <a href="{{ route('user.accounts') }}" wire:navigate class="flex-1 rounded-lg border border-edge py-1.5 text-center text-xs font-medium text-slate-300 hover:bg-raised">Connect</a>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    <p class="text-xs text-slate-600">Accounts are connected in the CC Publisher desktop app and reflected here after each sync.</p>
</div>