@extends('layouts.admin')
@section('title', 'Social accounts')
@section('content')
<x-admin.page
    title="Accounts"
    subtitle="Connected networks, token health, and entitlement matrix. Connect via sandbox OAuth or live when credentials exist."
>
    <x-slot:actions>
        @if($sandbox)
            <span class="admin-btn pointer-events-none">Sandbox mode</span>
        @endif
        <a href="{{ route('admin.social.connectors') }}" class="admin-btn">Capability matrix</a>
        <a href="{{ route('admin.social.accounts.connect') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="plus" class="h-3.5 w-3.5"></i> Connect account
        </a>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Accounts</span>
            <span class="order-ops-stat-value">{{ number_format($stats['total']) }}</span>
            <span class="order-ops-stat-meta">All networks</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Active</span>
            <span class="order-ops-stat-value">{{ number_format($stats['active']) }}</span>
            <span class="order-ops-stat-meta">Ready to publish</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Paused</span>
            <span class="order-ops-stat-value">{{ number_format($stats['paused']) }}</span>
            <span class="order-ops-stat-meta">Schedules held</span>
        </div>
    </div>

    @if($accounts->isEmpty())
        <div class="rounded-xl border border-dashed border-[var(--color-admin-border)] bg-white px-6 py-12 text-center shadow-[var(--admin-shadow)]">
            <h2 class="text-base font-semibold text-[#202223]">Connect your first network</h2>
            <p class="mt-2 text-sm text-[#6d7175]">Facebook → Compose → Schedule → Publish. Sandbox completes OAuth without live app secrets.</p>
            <a href="{{ route('admin.social.accounts.connect') }}" class="admin-btn admin-btn-primary mt-4 inline-flex">Connect Facebook</a>
        </div>
    @else
        <div class="overflow-hidden rounded-xl border border-[var(--color-admin-border)] bg-white shadow-[var(--admin-shadow)]">
            <table class="min-w-full text-sm">
                <thead class="bg-[#fafbfb] text-left text-xs uppercase tracking-wide text-[#6d7175]">
                    <tr>
                        <th class="px-4 py-3">Network</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Health</th>
                        <th>Capabilities</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[var(--color-admin-border)]">
                    @foreach($accounts as $account)
                        <tr>
                            <td class="px-4 py-3 font-medium capitalize">{{ $account->network }}</td>
                            <td>
                                <a href="{{ route('admin.social.accounts.show', $account) }}" class="font-medium text-[#2c6ecb] hover:underline">{{ $account->name }}</a>
                                @if($account->high_risk)
                                    <span class="ml-1 text-[10px] uppercase tracking-wide text-amber-700">High risk</span>
                                @endif
                            </td>
                            <td><x-admin.badge>{{ $account->status }}</x-admin.badge></td>
                            <td>
                                @php $h = $health[$account->id]['status'] ?? '—'; @endphp
                                <span class="{{ ($health[$account->id]['healthy'] ?? false) ? 'text-emerald-700' : 'text-amber-700' }}">{{ $h }}</span>
                            </td>
                            <td class="max-w-xs truncate text-xs text-[#6d7175]">{{ implode(', ', $entitled[$account->id] ?? []) }}</td>
                            <td class="px-4 py-3 text-right">
                                <a href="{{ route('admin.social.accounts.show', $account) }}" class="admin-btn">Manage</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $accounts->links() }}</div>
    @endif
</x-admin.page>
@endsection