@extends('layouts.admin')
@section('title', $post->number)
@section('content')
<x-admin.page
    :title="$post->number"
    :subtitle="ucfirst($post->status).' · '.implode(', ', $post->networks ?? [])"
>
    <x-slot:actions>
        @if($sandbox)
            <span class="admin-btn pointer-events-none">Sandbox mode</span>
        @endif
        <a href="{{ route('admin.social.posts.index') }}" class="admin-btn">Library</a>
        @if(in_array($post->status, ['scheduled', 'approved', 'draft'], true))
            <form method="post" action="{{ route('admin.social.posts.publish', $post) }}">@csrf
                <button class="admin-btn admin-btn-primary" type="submit">Publish now</button>
            </form>
        @endif
    </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="grid gap-5 xl:grid-cols-[minmax(0,1fr)_18rem]">
        <div class="space-y-5">
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                <h2 class="text-sm font-semibold">Body</h2>
                <p class="mt-3 whitespace-pre-wrap text-sm text-[#202223]">{{ $post->body_text }}</p>
            </div>
            @if($post->mediaItems->isNotEmpty())
                <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                    <h2 class="text-sm font-semibold">Media</h2>
                    <div class="mt-3 flex flex-wrap gap-2">
                        @foreach($post->mediaItems as $item)
                            <div class="rounded-lg border border-[var(--color-admin-border)] px-3 py-2 text-xs">
                                {{ $item->type }} · {{ $item->path }}
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                <h2 class="text-sm font-semibold">Publish attempts</h2>
                <ul class="mt-3 space-y-2 text-xs">
                    @forelse($post->publishAttempts as $attempt)
                        <li class="flex justify-between rounded-lg border border-[var(--color-admin-border)] px-3 py-2">
                            <span class="capitalize">{{ $attempt->network }} · {{ $attempt->status }}</span>
                            <span class="text-[#6d7175]">{{ $attempt->native_post_id ?? $attempt->error_message }}</span>
                        </li>
                    @empty
                        <li class="text-[#6d7175]">No attempts yet.</li>
                    @endforelse
                </ul>
            </div>
        </div>
        <aside class="space-y-3">
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-4 shadow-[var(--admin-shadow)] text-sm">
                <div class="text-xs uppercase text-[#6d7175]">Creator</div>
                <div class="mt-1 font-medium">{{ $post->creator?->name ?? '—' }}</div>
                <div class="mt-3 text-xs uppercase text-[#6d7175]">Scheduled</div>
                <div class="mt-1">{{ $post->scheduled_at?->format('M j, Y g:ia') ?? '—' }}</div>
                <div class="mt-3 text-xs uppercase text-[#6d7175]">Published</div>
                <div class="mt-1">{{ $post->published_at?->format('M j, Y g:ia') ?? '—' }}</div>
                @if($post->approval_required)
                    <div class="mt-3 text-xs text-amber-700">Approval required (four-eyes)</div>
                @endif
            </div>
            <form method="post" action="{{ route('admin.social.posts.duplicate', $post) }}">@csrf
                <button class="admin-btn w-full" type="submit">Duplicate as draft</button>
            </form>
        </aside>
    </div>
</x-admin.page>
@endsection