@extends('layouts.admin')
@section('title', 'Social command center')
@section('content')
<x-admin.page
    title="Social command center"
    subtitle="Connect accounts, compose, schedule, moderate inbox, and review performance — sandbox-ready ops."
>
    <x-slot:actions>
        @if($sandbox)
            <span class="admin-btn pointer-events-none opacity-90">Sandbox mode</span>
        @endif
        <a href="{{ route('admin.social.accounts.connect') }}" class="admin-btn">
            <i data-lucide="plug" class="h-3.5 w-3.5"></i> Connect
        </a>
        <a href="{{ route('admin.social.composer') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="pen-square" class="h-3.5 w-3.5"></i> Compose
        </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">
        <a href="{{ route('admin.social.accounts.index') }}" class="order-ops-stat">
            <span class="order-ops-stat-label">Healthy accounts</span>
            <span class="order-ops-stat-value">{{ number_format($stats['accounts_healthy']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['accounts_active']) }} active</span>
        </a>
        <a href="{{ route('admin.social.calendar') }}" class="order-ops-stat">
            <span class="order-ops-stat-label">Due today</span>
            <span class="order-ops-stat-value">{{ number_format($stats['due_today']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['posts_scheduled']) }} scheduled</span>
        </a>
        <a href="{{ route('admin.social.approvals.index') }}" class="order-ops-stat">
            <span class="order-ops-stat-label">Approvals</span>
            <span class="order-ops-stat-value">{{ number_format($stats['pending_approvals']) }}</span>
            <span class="order-ops-stat-meta">Four-eyes queue</span>
        </a>
        <a href="{{ route('admin.social.inbox.index') }}" class="order-ops-stat">
            <span class="order-ops-stat-label">Open inbox</span>
            <span class="order-ops-stat-value">{{ number_format($stats['inbox_open']) }}</span>
            <span class="order-ops-stat-meta">{{ number_format($stats['published_week']) }} published this week</span>
        </a>
    </div>

    <div class="mb-6 rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
        <h2 class="text-sm font-semibold text-[#202223]">Operator checklist</h2>
        <p class="mt-1 text-xs text-[#6d7175]">Connect → Compose → Schedule → Publish → Moderate</p>
        <ol class="mt-4 space-y-2">
            @foreach($checklist as $step)
                <li class="flex items-center justify-between gap-3 rounded-lg border border-[var(--color-admin-border)] px-3 py-2.5">
                    <div class="flex items-center gap-2 text-sm">
                        <span class="inline-flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-semibold {{ $step['done'] ? 'bg-emerald-100 text-emerald-800' : 'bg-[#f1f2f4] text-[#6d7175]' }}">
                            {{ $step['done'] ? '✓' : '·' }}
                        </span>
                        <span class="{{ $step['done'] ? 'text-[#6d7175] line-through' : 'text-[#202223]' }}">{{ $step['label'] }}</span>
                    </div>
                    @unless($step['done'])
                        <a href="{{ $step['href'] }}" class="admin-btn text-xs">Open</a>
                    @endunless
                </li>
            @endforeach
        </ol>
    </div>

    <div class="grid gap-5 xl:grid-cols-3">
        <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)] xl:col-span-1">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-sm font-semibold">Due soon</h2>
                <a href="{{ route('admin.social.calendar') }}" class="text-xs text-[#2c6ecb]">Calendar</a>
            </div>
            <ul class="space-y-2 text-sm">
                @forelse($duePosts as $post)
                    <li class="rounded-lg border border-[var(--color-admin-border)] px-3 py-2">
                        <a href="{{ route('admin.social.posts.show', $post) }}" class="font-medium text-[#202223] hover:underline">{{ $post->number }}</a>
                        <div class="text-xs text-[#6d7175]">{{ $post->scheduled_at?->format('M j, g:ia') }} · {{ implode(', ', $post->networks ?? []) }}</div>
                    </li>
                @empty
                    <li class="text-xs text-[#6d7175]">Nothing due in the next day.</li>
                @endforelse
            </ul>
        </div>
        <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-sm font-semibold">Pending approvals</h2>
                <a href="{{ route('admin.social.approvals.index') }}" class="text-xs text-[#2c6ecb]">Queue</a>
            </div>
            <ul class="space-y-2 text-sm">
                @forelse($pendingApprovals as $approval)
                    <li class="rounded-lg border border-[var(--color-admin-border)] px-3 py-2">
                        <div class="font-medium">{{ $approval->post?->number }}</div>
                        <div class="text-xs text-[#6d7175]">{{ \Illuminate\Support\Str::limit($approval->post?->body_text, 60) }}</div>
                    </li>
                @empty
                    <li class="text-xs text-[#6d7175]">No pending approvals.</li>
                @endforelse
            </ul>
        </div>
        <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-sm font-semibold">Open inbox</h2>
                <a href="{{ route('admin.social.inbox.index') }}" class="text-xs text-[#2c6ecb]">Inbox</a>
            </div>
            <ul class="space-y-2 text-sm">
                @forelse($openInbox as $engagement)
                    <li class="rounded-lg border border-[var(--color-admin-border)] px-3 py-2">
                        <div class="font-medium">{{ $engagement->author_handle ?: $engagement->author_name }} · {{ $engagement->network }}</div>
                        <div class="text-xs text-[#6d7175]">{{ \Illuminate\Support\Str::limit($engagement->body, 60) }}</div>
                    </li>
                @empty
                    <li class="text-xs text-[#6d7175]">Inbox clear — pull samples from Inbox.</li>
                @endforelse
            </ul>
        </div>
    </div>
</x-admin.page>
@endsection