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 = {
  title: "Videos",
  description: "Watch videos from verified escorts and content creators on AdultWorld.",
  alternates: { canonical: `${baseUrl}/videos` },
  twitter: {
    card: "summary_large_image",
    title: "Videos | AdultWorld",
    description: "Watch videos from verified escorts and content creators on AdultWorld.",
  },
};

export const revalidate = 300;

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

  const itemListLd = videos.length === 0 ? null : {
    "@context": "https://schema.org",
    "@type": "ItemList",
    name: "Public Videos",
    numberOfItems: videos.length,
    itemListElement: videos.map((v, idx) => ({
      "@type": "ListItem",
      position: idx + 1,
      item: {
        "@type": "VideoObject",
        name: v.name,
        uploadDate: v.created_at?.toISOString(),
        ...(v.user?.username && {
          author: { "@type": "Person", name: v.user.username, url: `${baseUrl}/view/${v.user.id_aw}` },
        }),
      },
    })),
  };

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

      <p className="text-text-muted">
        Watch videos from verified escorts on AdultWorld. Discover introduction clips, behind-the-scenes content, and exclusive video collections. Some premium videos require credits to access.
      </p>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {videos.map((video) => (
          <Link
            key={video.id}
            href={`/view/${video.user?.id_aw ?? video.user?.id ?? ""}`}
            className="bg-surface rounded-lg overflow-hidden hover:ring-1 hover:ring-primary transition-all group block"
          >
            <div className="aspect-video bg-surface-light relative flex items-center justify-center">
              <svg className="w-12 h-12 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              {/* Play overlay */}
              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30">
                <svg className="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </div>
            </div>
            <div className="p-3">
              <p className="font-semibold truncate">{video.name}</p>
              <div className="flex items-center justify-between mt-1">
                <span className="text-text-muted text-sm truncate">
                  {video.user?.username}
                </span>
                <p className="text-text-muted text-sm shrink-0">
                  {video.credits ? `${video.credits} credits` : "Free"}
                </p>
              </div>
            </div>
          </Link>
        ))}
      </div>

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