@extends('layouts.app')

@section('content')
<div class="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>
            <h1 class="text-2xl font-black text-white">Scheduled Publications</h1>
            <p class="text-xs text-slate-400 mt-1">Status and execution queue for all scheduled video broadcasts.</p>
        </div>

        <a href="{{ route('posts.create') }}" class="btn-primary text-xs">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            <span>+ Compose Post</span>
        </a>
    </div>

    @if($posts->isEmpty())
        <div class="studio-card p-12 text-center">
            <div class="w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center mx-auto text-slate-500 mb-3">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <p class="text-sm font-semibold text-slate-300">No scheduled posts found</p>
            <p class="text-xs text-slate-500 mt-1">Compose a post to schedule your rendered video across connected accounts.</p>
            <div class="mt-4">
                <a href="{{ route('posts.create') }}" class="btn-primary text-xs">+ Compose Post</a>
            </div>
        </div>
    @else
        <div class="studio-card overflow-hidden">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-900 border-b border-slate-800 text-slate-400 font-mono text-[11px]">
                    <tr>
                        <th class="p-4">Post Title</th>
                        <th class="p-4">Platforms</th>
                        <th class="p-4">Scheduled (EAT)</th>
                        <th class="p-4">Status</th>
                        <th class="p-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/80">
                    @foreach($posts as $post)
                        <tr class="hover:bg-slate-900/40 transition">
                            <td class="p-4 font-semibold text-slate-100">
                                <a href="{{ route('posts.show', $post) }}" class="hover:text-amber-400">
                                    {{ $post->title }}
                                </a>
                            </td>
                            <td class="p-4">
                                <div class="flex items-center gap-1.5 flex-wrap">
                                    @foreach($post->platformSettings as $ps)
                                        <span class="text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-slate-800 text-slate-300 border border-slate-700">
                                            {{ $ps->platform }}
                                        </span>
                                    @endforeach
                                </div>
                            </td>
                            <td class="p-4 font-mono text-slate-300">
                                {{ $post->scheduled_at->format('M d, Y - H:i') }}
                            </td>
                            <td class="p-4">
                                <span class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold uppercase
                                    {{ $post->status === 'published' ? 'bg-emerald-950/80 text-emerald-400 border border-emerald-500/30' : ($post->status === 'failed' ? 'bg-rose-950/80 text-rose-400 border border-rose-500/30' : 'badge-amber') }}">
                                    {{ $post->status }}
                                </span>
                            </td>
                            <td class="p-4 text-right">
                                <a href="{{ route('posts.show', $post) }}" class="text-xs text-amber-400 hover:underline">
                                    Inspect &rarr;
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            {{ $posts->links() }}
        </div>
    @endif

</div>
@endsection