import type { Metadata } from "next";
import { urlForSanityImage } from "@/lib/sanity/client";
import { getShowroomContent } from "@/lib/sanity/queries";
import { ShowroomGallery } from "./showroom-gallery";

const SVG_MIME_TYPE = "image/svg+xml";

function resolveShowroomAssetUrl({
  image,
  imageAssetUrl,
  imageMimeType,
  svgUrl,
  fallbackUrl,
}: {
  image?: unknown;
  imageAssetUrl?: string | null;
  imageMimeType?: string | null;
  svgUrl?: string | null;
  fallbackUrl?: string | null;
}) {
  if (imageMimeType === SVG_MIME_TYPE) {
    return imageAssetUrl || svgUrl || fallbackUrl || null;
  }

  return (image ? urlForSanityImage(image) : null) || imageAssetUrl || svgUrl || fallbackUrl || null;
}

export const metadata: Metadata = {
  title: "Showroom",
  description: "Une selection d'images pour presenter l'univers et les realisations Stylunique.",
  alternates: {
    canonical: "/showroom",
  },
};

export default async function ShowroomPage() {
  const showroom = await getShowroomContent();
  const title = showroom?.title || "L'univers Stylunique en images";
  const eyebrow = showroom?.eyebrow || "Showroom";
  const intro =
    showroom?.intro || "Ajoutez ici les photos du showroom et organisez leur affichage directement depuis Sanity.";
  const activeSlots = showroom?.slots?.filter((slot) => slot.isActive !== false) || [];
  const slots = activeSlots.length
    ? activeSlots
    : Array.from({ length: 6 }).map((_, index) => ({
        _key: `placeholder-${index}`,
        title: `Emplacement ${index + 1}`,
        description: "Zone reservee pour une photo du showroom.",
        layout: "portrait" as const,
        alt: `Emplacement ${index + 1}`,
        coverImage: undefined,
        coverImageAssetUrl: null,
        coverImageMimeType: null,
        coverSvgUrl: null,
        coverImageUrl: null,
        gallery: [],
      }));
  const gallerySlots = slots.map((slot) => ({
    _key: slot._key,
    title: slot.title,
    description: slot.description,
    layout: slot.layout,
    alt: slot.alt,
    coverImageUrl: resolveShowroomAssetUrl({
      image: slot.coverImage,
      imageAssetUrl: slot.coverImageAssetUrl,
      imageMimeType: slot.coverImageMimeType,
      svgUrl: slot.coverSvgUrl,
      fallbackUrl: slot.coverImageUrl,
    }),
    gallery:
      slot.gallery?.map((image) => ({
        _key: image._key,
        url: resolveShowroomAssetUrl({
          image: image.image,
          imageAssetUrl: image.imageAssetUrl,
          imageMimeType: image.imageMimeType,
          svgUrl: image.svgUrl,
          fallbackUrl: image.url,
        }),
        alt: image.alt || slot.alt || slot.title,
      })) || [],
  }));

  return (
    <div className="space-y-8 pb-6">
      <section className="relative overflow-hidden rounded-[2rem] border border-[#ffdede] bg-[linear-gradient(140deg,#fff8f8_0%,#ffeaea_55%,#ffdede_100%)] px-6 py-10 md:px-10 md:py-12">
        <div className="pointer-events-none absolute -right-16 top-0 h-48 w-48 rounded-full bg-[#ffffff90] blur-3xl" />
        <div className="pointer-events-none absolute -left-10 bottom-0 h-40 w-40 rounded-full bg-[#f4b7b750] blur-3xl" />
        <div className="max-w-3xl space-y-4">
          <p className="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--accent-3)]">{eyebrow}</p>
          <h1 className="font-serif text-5xl text-[var(--foreground)] md:text-6xl">{title}</h1>
          <p className="max-w-2xl text-base leading-relaxed text-[var(--muted)]">{intro}</p>
        </div>
      </section>

      <ShowroomGallery slots={gallerySlots} />
    </div>
  );
}