import prisma from "@/lib/prisma";
import Link from "next/link";
import Image from "next/image";
import { photoUrl } from "@/lib/media";

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

export const metadata = {
  title: "Photos",
  description: "Browse photos from escorts on AdultWorld.",
  alternates: { canonical: `${baseUrl}/photos` },
  twitter: {
    card: "summary_large_image",
    title: "Photos | AdultWorld",
    description: "Browse photos from escorts on AdultWorld.",
  },
};

export const revalidate = 300;

export default async function PhotosPage() {
  const photos = await prisma.photo.findMany({
    where: { private: false, user: { is: {} } },
    include: {
      user: { select: { id: true, id_aw: true, username: true } },
    },
    orderBy: { created_at: "desc" },
    take: 60,
  });

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Public Photos</h1>

      <p className="text-text-muted">
        Browse public photos from verified escorts across the globe. Each photo is from a verified profile, ensuring authenticity and quality. Click any photo to visit the escort&apos;s full profile.
      </p>

      <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
        {photos.map((photo) => (
          <Link
            key={photo.id}
            href={`/view/${photo.user?.id_aw}`}
            className="group relative aspect-square bg-surface-light rounded-lg overflow-hidden"
          >
            <Image
              src={photoUrl(photo.photo, photo.user?.id_aw)}
              alt={photo.user?.username ? `Photo by ${photo.user.username}` : "Escort photo"}
              fill
              sizes="(max-width:768px) 33vw, (max-width:1024px) 25vw, 16vw"
              className="object-cover group-hover:scale-105 transition-transform"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2">
              <p className="text-white text-sm truncate">
                {photo.user?.username}
              </p>
            </div>
          </Link>
        ))}
      </div>

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