@extends('layouts.nova')

@push('head')
    <meta name="robots" content="{{ $page_robots ?? 'index,follow' }}">
@endpush

@section('content')
<div class="container-fluid legacy-page">
    <div class="pt-0">
        <div class="mx-auto w-full">
            <div class="relative min-h-[calc(100vh-64px)]">
                <main class="w-full">
                    <x-nova-page-header
                        section="Creator"
                        title="My Stories"
                        icon="fa-pen-nib"
                        :breadcrumbs="collect([
                            (object) ['name' => 'Creator', 'url' => route('creator.stories.index')],
                            (object) ['name' => 'My Stories', 'url' => route('creator.stories.index')],
                        ])"
                        description="Drafts, published stories, and archived work in one creator dashboard."
                        actionsClass="lg:pt-8"
                    >
                        <x-slot name="actions">
                            <a href="{{ route('creator.stories.create') }}"
                               class="inline-flex items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition-colors hover:bg-white/[0.08] hover:text-white">
                                <i class="fa-solid fa-pen text-xs"></i>
                                Write Story
                            </a>
                        </x-slot>
                    </x-nova-page-header>

                    <section class="px-6 pb-16 pt-8 md:px-10">
                        <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                            <div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
                                <p class="text-xs uppercase tracking-widest text-white/35">Drafts</p>
                                <p class="mt-2 text-2xl font-semibold text-white">{{ number_format($drafts->count()) }}</p>
                            </div>
                            <div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4">
                                <p class="text-xs uppercase tracking-widest text-white/35">Published</p>
                                <p class="mt-2 text-2xl font-semibold text-white">{{ number_format($publishedStories->count()) }}</p>
                            </div>
                            <div class="rounded-xl border border-white/[0.08] bg-white/[0.03] p-4 sm:col-span-2 xl:col-span-1">
                                <p class="text-xs uppercase tracking-widest text-white/35">Archived</p>
                                <p class="mt-2 text-2xl font-semibold text-white">{{ number_format($archivedStories->count()) }}</p>
                            </div>
                        </div>

                        <div class="space-y-8">
    <section class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-5 shadow-lg">
        <h3 class="mb-4 text-base font-semibold text-white">Drafts</h3>
        @if($drafts->isEmpty())
            <p class="text-sm text-gray-400">No drafts yet.</p>
        @else
            <div class="grid gap-3 md:grid-cols-2">
                @foreach($drafts as $story)
                    <article class="rounded-xl border border-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
                        <div class="flex items-start justify-between gap-3">
                            <h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
                            <span class="rounded-full border border-white/[0.08] px-2 py-1 text-xs uppercase tracking-wide text-white/55">{{ str_replace('_', ' ', $story->status) }}</span>
                        </div>
                        <p class="mt-2 text-xs text-gray-400">Last edited {{ optional($story->updated_at)->diffForHumans() }}</p>
                        @if($story->rejected_reason)
                            <p class="mt-2 rounded-lg border border-rose-500/30 bg-rose-500/10 p-2 text-xs text-rose-200">Rejected: {{ \Illuminate\Support\Str::limit($story->rejected_reason, 180) }}</p>
                        @endif
                        <div class="mt-3 flex flex-wrap gap-3 text-xs">
                            <a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="text-sky-300 hover:text-sky-200">Edit</a>
                            <a href="{{ route('creator.stories.preview', ['story' => $story->id]) }}" class="text-gray-300 hover:text-white">Preview</a>
                            <form method="POST" action="{{ route('creator.stories.submit-review', ['story' => $story->id]) }}">
                                @csrf
                                <button class="text-amber-300 hover:text-amber-200">Submit Review</button>
                            </form>
                        </div>
                    </article>
                @endforeach
            </div>
        @endif
    </section>

    <section class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-5 shadow-lg">
        <h3 class="mb-4 text-base font-semibold text-white">Published Stories</h3>
        @if($publishedStories->isEmpty())
            <p class="text-sm text-gray-400">No published stories yet.</p>
        @else
            <div class="grid gap-3 md:grid-cols-2">
                @foreach($publishedStories as $story)
                    <article class="rounded-xl border border-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
                        <div class="flex items-start justify-between gap-3">
                            <h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
                            <span class="rounded-full border border-emerald-500/40 px-2 py-1 text-xs uppercase tracking-wide text-emerald-200">{{ str_replace('_', ' ', $story->status) }}</span>
                        </div>
                        <p class="mt-2 text-xs text-gray-400">{{ number_format((int) $story->views) }} views · {{ number_format((int) $story->likes_count) }} likes</p>
                        <div class="mt-3 flex flex-wrap gap-3 text-xs">
                            <a href="{{ route('stories.show', ['slug' => $story->slug]) }}" class="text-sky-300 hover:text-sky-200">View</a>
                            <a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="text-gray-300 hover:text-white">Edit</a>
                            <a href="{{ route('creator.stories.analytics', ['story' => $story->id]) }}" class="text-violet-300 hover:text-violet-200">Analytics</a>
                        </div>
                    </article>
                @endforeach
            </div>
        @endif
    </section>

    <section class="rounded-xl border border-white/[0.06] bg-white/[0.02] p-5 shadow-lg">
        <h3 class="mb-4 text-base font-semibold text-white">Archived Stories</h3>
        @if($archivedStories->isEmpty())
            <p class="text-sm text-gray-400">No archived stories.</p>
        @else
            <div class="grid gap-3 md:grid-cols-2">
                @foreach($archivedStories as $story)
                    <article class="rounded-xl border border-white/[0.06] bg-black/20 p-4 transition hover:bg-white/[0.03]">
                        <h4 class="text-sm font-semibold text-white">{{ $story->title }}</h4>
                        <p class="mt-2 text-xs text-gray-400">Archived {{ optional($story->updated_at)->diffForHumans() }}</p>
                        <div class="mt-3 flex flex-wrap gap-3 text-xs">
                            <a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="text-sky-300 hover:text-sky-200">Open</a>
                        </div>
                    </article>
                @endforeach
            </div>
        @endif
    </section>
</div>
                    </section>
                </main>
            </div>
        </div>
    </div>
</div>
@endsection