@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-2 border-b border-slate-800">
        <div>
            <div class="flex items-center gap-3">
                <h1 class="text-2xl font-black text-white">{{ $post->title }}</h1>
                <span class="text-xs font-semibold px-2.5 py-0.5 rounded badge-amber uppercase font-mono">
                    {{ $post->status }}
                </span>
            </div>
            <p class="text-xs text-slate-400 mt-1">Scheduled for: <span class="text-amber-400 font-mono font-medium">{{ $post->scheduled_at->format('M d, Y - H:i') }} (Africa/Nairobi)</span></p>
        </div>

        <div class="flex items-center gap-2">
            @if($post->canBeCancelled())
                <form method="POST" action="{{ route('posts.cancel', $post) }}">
                    @csrf
                    <button type="submit" class="btn-secondary text-xs text-rose-400 border-rose-500/30 hover:bg-rose-950/40">
                        Cancel Publication
                    </button>
                </form>
            @endif

            @if(in_array($post->status, ['failed', 'needs_attention']))
                <form method="POST" action="{{ route('posts.retry', $post) }}">
                    @csrf
                    <button type="submit" class="btn-primary text-xs">
                        Retry Now
                    </button>
                </form>
            @endif
        </div>
    </div>

    @if($post->error_message)
        <div class="p-4 rounded-xl bg-rose-950/40 border border-rose-500/30 text-rose-300 text-xs">
            <span class="font-bold">Execution Error:</span> {{ $post->error_message }}
        </div>
    @endif

    <!-- Video Preview & Caption Details -->
    <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
        <div class="md:col-span-5 studio-card p-4 flex flex-col justify-center">
            @if($post->mediaAsset)
                <div class="w-full bg-black/80 rounded-lg overflow-hidden border border-slate-800">
                    <video src="{{ $post->mediaAsset->getSignedUrl() }}" controls class="w-full max-h-[360px] object-contain"></video>
                </div>
                <div class="mt-2 text-[11px] text-slate-400 font-mono text-center">
                    {{ $post->mediaAsset->title }} ({{ $post->mediaAsset->formatted_size }})
                </div>
            @else
                <div class="text-center py-12 text-xs text-slate-500">No media attached</div>
            @endif
        </div>

        <div class="md:col-span-7 studio-card p-5 space-y-4">
            <h3 class="font-bold text-xs uppercase tracking-wider text-amber-400">Post Details</h3>
            <div class="text-xs text-slate-300 bg-slate-900/80 p-3.5 rounded-lg border border-slate-800 whitespace-pre-wrap font-sans">
                {{ $post->default_caption ?: 'No default caption.' }}
            </div>

            <div class="space-y-1 text-xs text-slate-400 font-mono">
                <div>Retries: {{ $post->retry_count }} / {{ $post->max_retries }}</div>
                <div>Created: {{ $post->created_at->format('Y-m-d H:i') }} EAT</div>
                @if($post->published_at)
                    <div class="text-emerald-400">Published: {{ $post->published_at->format('Y-m-d H:i') }} EAT</div>
                @endif
            </div>
        </div>
    </div>

    <!-- Platform Targets Status -->
    <div class="studio-card p-5 space-y-4">
        <h3 class="font-bold text-sm text-slate-100 flex items-center gap-2">
            <span>Publishing Targets & Results</span>
        </h3>

        <div class="divide-y divide-slate-800">
            @foreach($post->platformSettings as $ps)
                <div class="py-3 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
                    <div>
                        <div class="flex items-center gap-2">
                            <span class="font-bold uppercase text-amber-400 font-mono">{{ $ps->platform }}</span>
                            <span class="text-slate-300 font-medium">&bull; {{ $ps->socialAccount->account_name ?? 'Account' }}</span>
                        </div>
                        @if($ps->published_url)
                            <a href="{{ $ps->published_url }}" target="_blank" class="text-amber-400 hover:underline mt-1 inline-block font-mono text-[11px]">
                                View Live Post &rarr;
                            </a>
                        @endif
                        @if($ps->error_details)
                            <div class="text-rose-400 text-[11px] mt-1">{{ $ps->error_details }}</div>
                        @endif
                    </div>

                    <div class="flex items-center gap-3">
                        <span class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold uppercase
                            {{ $ps->status === 'published' ? 'bg-emerald-950/80 text-emerald-400 border border-emerald-500/30' : ($ps->status === 'failed' ? 'bg-rose-950/80 text-rose-400 border border-rose-500/30' : 'badge-amber') }}">
                            {{ $ps->status }}
                        </span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Publishing Attempts History -->
    @if($post->publishingAttempts->isNotEmpty())
        <div class="studio-card p-5 space-y-3">
            <h3 class="font-bold text-sm text-slate-100">Audit Attempts</h3>
            <div class="divide-y divide-slate-800 text-xs">
                @foreach($post->publishingAttempts as $att)
                    <div class="py-2.5 flex items-center justify-between text-slate-400">
                        <div>
                            <span class="font-mono text-amber-400 uppercase">{{ $att->platform }}</span>
                            <span class="text-[11px] font-mono text-slate-500 ml-2">{{ $att->attempted_at->format('H:i:s') }}</span>
                            @if($att->error_message)
                                <div class="text-[11px] text-rose-400">{{ $att->error_message }}</div>
                            @endif
                        </div>
                        <span class="font-mono text-[11px] {{ $att->is_success ? 'text-emerald-400' : 'text-rose-400' }}">
                            {{ $att->is_success ? 'SUCCESS' : 'FAILED' }}
                        </span>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

</div>
@endsection