@extends('layouts.nova')

@section('content')
<div class="mx-auto max-w-6xl px-4 py-8">
    <div class="mb-5 flex items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-semibold text-gray-100">Stories Review Queue</h1>
            <p class="text-sm text-gray-300">Pending creator stories waiting for moderation.</p>
        </div>
        <a href="{{ route('admin.stories.index') }}" class="rounded-lg border border-gray-600 px-3 py-2 text-sm text-gray-200">All stories</a>
    </div>

    <div class="overflow-hidden rounded-xl border border-gray-700 bg-gray-900">
        <table class="min-w-full divide-y divide-gray-700 text-sm">
            <thead class="bg-gray-800 text-gray-300">
                <tr>
                    <th class="px-4 py-3 text-left">Story</th>
                    <th class="px-4 py-3 text-left">Creator</th>
                    <th class="px-4 py-3 text-left">Submitted</th>
                    <th class="px-4 py-3 text-left">Status</th>
                    <th class="px-4 py-3 text-left">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-800 text-gray-200">
                @forelse($stories as $story)
                    <tr>
                        <td class="px-4 py-3">{{ $story->title }}</td>
                        <td class="px-4 py-3">{{ $story->creator?->username ?? 'n/a' }}</td>
                        <td class="px-4 py-3">{{ optional($story->submitted_for_review_at)->diffForHumans() ?? optional($story->updated_at)->diffForHumans() }}</td>
                        <td class="px-4 py-3"><span class="rounded-full border border-amber-500/40 px-2 py-1 text-xs text-amber-200">{{ $story->status }}</span></td>
                        <td class="px-4 py-3">
                            <a href="{{ route('admin.stories.show', ['story' => $story->id]) }}" class="text-sky-300 hover:text-sky-200">Review</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-6 text-center text-gray-400">No stories pending review.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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