import Image from "next/image";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

const LAYOUT_STYLES: Record<string, { grid: string; tile: string }> = {
  square: { grid: "grid-cols-2 md:grid-cols-3", tile: "aspect-square" },
  landscape: { grid: "grid-cols-1 md:grid-cols-2", tile: "aspect-video" },
  portrait: { grid: "grid-cols-2 md:grid-cols-4", tile: "aspect-[3/4]" },
};

export default async function GalleryPage() {
  const [images, settings] = await Promise.all([
    prisma.galleryImage.findMany({ orderBy: [{ order: "asc" }, { createdAt: "desc" }] }),
    prisma.settings.findUnique({ where: { id: "singleton" } }),
  ]);

  const layout = LAYOUT_STYLES[settings?.galleryLayout ?? "square"] ?? LAYOUT_STYLES.square;

  return (
    <div>
      <section className="bg-blush px-6 py-20 text-center">
        <p className="text-xs uppercase tracking-wide-plus text-rose-dark">Our Work</p>
        <h1 className="mt-3 font-display text-4xl text-rosewood">Gallery</h1>
        <p className="mx-auto mt-4 max-w-lg text-sm text-ink/70">
          A look at recent cuts, color, and styling from the chair.
        </p>
      </section>

      <section className="px-6 py-16">
        <div className="mx-auto max-w-6xl">
          {images.length === 0 ? (
            <p className="py-12 text-center text-sm text-ink/60">
              No photos yet &mdash; check back soon.
            </p>
          ) : (
            <div className={`grid gap-4 ${layout.grid}`}>
              {images.map((image) => (
                <div
                  key={image.id}
                  className={`relative overflow-hidden rounded-xl bg-blush ${layout.tile}`}
                >
                  <Image
                    src={image.url}
                    alt=""
                    fill
                    sizes="(min-width: 768px) 33vw, 50vw"
                    className="object-cover transition duration-300 hover:scale-105"
                  />
                </div>
              ))}
            </div>
          )}
        </div>
      </section>
    </div>
  );
}
