import type { Metadata } from "next";
import prisma from "@/lib/prisma";
import Link from "next/link";

const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "https://www.adultworld.ai";

export const metadata: Metadata = {
  title: "Erotica",
  description: "Browse erotic stories and written content from verified escorts and creators on AdultWorld.",
  alternates: { canonical: `${baseUrl}/erotica` },
  openGraph: {
    title: "Erotica | AdultWorld",
    description: "Browse erotic stories and written content from verified escorts and creators.",
    url: `${baseUrl}/erotica`,
  },
  twitter: {
    card: "summary",
    title: "Erotica | AdultWorld",
    description: "Browse erotic stories and written content from verified escorts and creators.",
  },
};

export default async function EroticaListingPage() {
  const stories = await prisma.erotica.findMany({
    where: { private: false, user: { is: {} } },
    include: {
      user: { select: { id: true, id_aw: true, username: true, profile_photo: true } },
    },
    orderBy: { created_at: "desc" },
    take: 24,
  });

  const collectionLd = stories.length === 0 ? null : {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    name: "Erotica — Stories on AdultWorld",
    url: `${baseUrl}/erotica`,
    mainEntity: {
      "@type": "ItemList",
      numberOfItems: stories.length,
      itemListElement: stories.map((s, idx) => ({
        "@type": "ListItem",
        position: idx + 1,
        url: `${baseUrl}/erotica/show/${s.id}`,
        name: s.title,
      })),
    },
  };

  return (
    <div className="space-y-6">
      {collectionLd && (
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionLd) }} />
      )}
      <h1 className="text-2xl font-bold">Erotica</h1>

      {/* Intro Section */}
      <section className="bg-surface rounded-lg p-6">
        <div className="text-sm text-text-muted space-y-2">
          <p>
            Welcome to the Erotica section &mdash; a collection of erotic stories and creative writing from verified escorts and community members on AdultWorld.
            Browse steamy fiction, fantasy scenarios, and intimate narratives crafted by our talented contributors.
          </p>
          <p>
            <strong className="text-text">Submit your own:</strong> If you&apos;re a registered escort or creator, you can publish your own stories from your dashboard.
            Stories can be offered for free or behind a credit paywall &mdash; it&apos;s up to you.
          </p>
          <p>
            <strong className="text-text">Please note:</strong> All content is fictional and intended for adults aged 18 and over.
            AdultWorld does not verify the factual accuracy of stories. Read responsibly and respect the authors&apos; creative work.
          </p>
        </div>
      </section>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {stories.map((story) => (
          <Link
            key={story.id}
            href={`/erotica/show/${story.id}`}
            className="bg-surface rounded-lg p-5 hover:ring-1 hover:ring-primary transition-all block"
          >
            <p className="font-semibold text-lg">{story.title}</p>
            {story.content && (
              <p className="text-text-muted mt-2 text-sm line-clamp-4">
                {story.content.slice(0, 200)}
              </p>
            )}
            <div className="flex items-center justify-between mt-4 text-text-muted text-sm">
              <Link
                href={`/view/${story.user?.id_aw}`}
                className="hover:text-primary transition-colors"
              >
                {story.user?.username}
              </Link>
              <span>{new Date(story.created_at).toLocaleDateString()}</span>
            </div>
            {story.credits > 0 ? (
              <span className="inline-block mt-2 bg-primary/20 text-primary text-xs px-2 py-0.5 rounded">
                {story.credits} credits
              </span>
            ) : (
              <span className="inline-block mt-2 text-green-400 text-xs">Free to read</span>
            )}
          </Link>
        ))}
      </div>

      {stories.length === 0 && (
        <div className="text-center py-16 text-text-muted">
          <p className="text-lg">No erotica stories yet</p>
        </div>
      )}
    </div>
  );
}