@extends('layouts.admin')
@section('title', 'Social approvals')
@section('content')
<x-admin.page
    title="Approvals"
    subtitle="Four-eyes command center. Creators cannot approve their own high-risk posts."
>
    <x-slot:actions>
        @if($sandbox)
            <span class="admin-btn pointer-events-none">Sandbox mode</span>
        @endif
        <a href="{{ route('admin.social.composer') }}" class="admin-btn">Composer</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
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Pending</span>
            <span class="order-ops-stat-value">{{ number_format($stats['pending']) }}</span>
            <span class="order-ops-stat-meta">Needs second set of eyes</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Approved (7d)</span>
            <span class="order-ops-stat-value">{{ number_format($stats['approved_week']) }}</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Rejected (7d)</span>
            <span class="order-ops-stat-value">{{ number_format($stats['rejected_week']) }}</span>
        </div>
    </div>

    <div class="space-y-4">
        @forelse($approvals as $approval)
            @php $post = $approval->post; @endphp
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">{{ $post?->number ?? 'Post #'.$approval->social_post_id }}</div>
                        <div class="mt-1 text-xs text-[#6d7175]">
                            Requested by {{ $approval->requester?->name ?? 'unknown' }}
                            · {{ implode(', ', $post?->networks ?? []) }}
                            · {{ $post?->scheduled_at?->format('M j, g:ia') ?? 'unscheduled' }}
                        </div>
                    </div>
                    <x-admin.badge tone="warning">pending</x-admin.badge>
                </div>
                <p class="mt-3 whitespace-pre-wrap text-sm text-[#202223]">{{ $post?->body_text }}</p>
                @if($post?->mediaItems?->isNotEmpty())
                    <div class="mt-3 flex flex-wrap gap-2">
                        @foreach($post->mediaItems as $item)
                            <span class="rounded bg-[#f1f2f4] px-2 py-1 text-[11px]">{{ $item->type }} · #{{ $item->media_id ?? $item->id }}</span>
                        @endforeach
                    </div>
                @endif
                <p class="mt-3 text-xs text-amber-800">Four-eyes rule: you cannot approve or reject a post you created or requested.</p>
                <div class="mt-4 flex flex-wrap gap-2">
                    <form method="post" action="{{ route('admin.social.approvals.approve', $approval) }}">@csrf
                        <button class="admin-btn admin-btn-primary" type="submit">Approve</button>
                    </form>
                    <form method="post" action="{{ route('admin.social.approvals.reject', $approval) }}" class="inline-flex gap-2">
                        @csrf
                        <input type="text" name="reason" placeholder="Rejection reason" class="rounded-lg border border-[var(--color-admin-border)] px-3 py-1.5 text-sm">
                        <button class="admin-btn" type="submit">Reject</button>
                    </form>
                    @if($post)
                        <a href="{{ route('admin.social.posts.show', $post) }}" class="admin-btn">View post</a>
                    @endif
                </div>
            </div>
        @empty
            <div class="rounded-xl border border-dashed border-[var(--color-admin-border)] bg-white px-6 py-12 text-center text-sm text-[#6d7175]">
                No pending approvals. High-risk accounts route here automatically from the composer.
            </div>
        @endforelse
    </div>
    <div class="mt-4">{{ $approvals->links() }}</div>
</x-admin.page>
@endsection