import { auth } from '@/lib/auth'
import { redirect } from 'next/navigation'
import { prisma } from '@/lib/prisma'
import Link from 'next/link'

export default async function DashboardPage() {
  const session = await auth()
  if (!session?.user) redirect('/login')

  const stories = await prisma.storyMaster.findMany({
    where: { creatorId: session.user.id },
    orderBy: { updatedAt: 'desc' },
    include: {
      _count: { select: { sceneInstances: true, characters: true } },
    },
  })

  return (
    <div className="min-h-screen">
      {/* Top nav */}
      <header className="border-b border-border px-6 py-4 flex items-center justify-between">
        <h1 className="text-xl font-bold">
          Screen<span className="text-brand-500">burn</span>
        </h1>
        <div className="flex items-center gap-4">
          <span className="text-sm text-muted-foreground">
            {session.user.email}
          </span>
          <Link
            href="/settings"
            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            Settings
          </Link>
        </div>
      </header>

      {/* Content */}
      <main className="max-w-5xl mx-auto px-6 py-10">
        <div className="flex items-center justify-between mb-8">
          <h2 className="text-2xl font-semibold">Your Stories</h2>
          <Link
            href="/story/new"
            className="rounded-md bg-brand-500 px-4 py-2 text-sm font-medium text-white hover:bg-brand-600 transition-colors"
          >
            New Story
          </Link>
        </div>

        {stories.length === 0 ? (
          <div className="rounded-lg border border-dashed border-border p-12 text-center">
            <p className="text-muted-foreground">
              No stories yet. Create your first screenplay to get started.
            </p>
          </div>
        ) : (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {stories.map((story) => (
              <Link
                key={story.id}
                href={`/story/${story.id}`}
                className="group rounded-lg border border-border p-5 hover:border-brand-500/50 hover:shadow-sm transition-all"
              >
                <div className="flex items-start justify-between">
                  <h3 className="font-medium group-hover:text-brand-500 transition-colors">
                    {story.title}
                  </h3>
                  <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
                    {story.format.replace('_', ' ')}
                  </span>
                </div>
                {story.logline && (
                  <p className="mt-2 text-sm text-muted-foreground line-clamp-2">
                    {story.logline}
                  </p>
                )}
                <div className="mt-4 flex gap-4 text-xs text-muted-foreground">
                  <span>{story._count.sceneInstances} scenes</span>
                  <span>{story._count.characters} characters</span>
                  <span className="capitalize">{story.status}</span>
                </div>
              </Link>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}