"use client";

import { useMemo, useState } from "react";
import Image from "next/image";

type ProductGalleryImage = {
  url?: string;
  alt?: string;
};

type Props = {
  title: string;
  images: ProductGalleryImage[];
  externalImageUrl?: string | null;
  helperOverlayImageUrl?: string | null;
  helperOverlayAlt?: string;
  onClearHelperOverlay?: () => void;
};

export function ProductImageGallery({
  title,
  images,
  externalImageUrl,
  helperOverlayImageUrl,
  helperOverlayAlt,
  onClearHelperOverlay,
}: Props) {
  const galleryImages = useMemo(() => {
    const seen = new Set<string>();
    const normalized: Array<{ url: string; alt: string }> = [];

    for (const image of images) {
      const url = (image.url || "").trim();
      if (!url || seen.has(url)) {
        continue;
      }

      seen.add(url);
      normalized.push({
        url,
        alt: (image.alt || "").trim() || title,
      });
    }

    return normalized;
  }, [images, title]);

  const [selectedImageUrl, setSelectedImageUrl] = useState<string>("");

  const activeImageUrl = selectedImageUrl || externalImageUrl || galleryImages[0]?.url || "";
  const activeAlt =
    galleryImages.find((image) => image.url === activeImageUrl)?.alt ||
    title;

  return (
    <div className="space-y-4">
      <div className="relative aspect-square overflow-hidden rounded-[1.9rem] border border-[var(--line)] bg-[#ffe7e7] shadow-[0_18px_34px_rgba(49,18,18,0.14)]">
        {activeImageUrl ? (
          <Image
            src={activeImageUrl}
            alt={activeAlt}
            fill
            sizes="(max-width: 768px) 100vw, 55vw"
            className="object-cover"
            loading="lazy"
            unoptimized
          />
        ) : (
          <div className="h-full w-full bg-gradient-to-br from-[#ffb7b7] to-[#f55050]" />
        )}

        {helperOverlayImageUrl ? (
          <div className="pointer-events-none absolute inset-0 bg-black/5">
            <Image
              src={helperOverlayImageUrl}
              alt={helperOverlayAlt || "Aide de positionnement"}
              fill
              sizes="(max-width: 768px) 100vw, 55vw"
              className="object-cover"
              loading="lazy"
              unoptimized
            />
          </div>
        ) : null}

        {helperOverlayImageUrl && onClearHelperOverlay ? (
          <button
            type="button"
            onClick={onClearHelperOverlay}
            className="absolute right-3 top-3 rounded-full border border-white/80 bg-black/55 px-3 py-1 text-xs font-medium text-white backdrop-blur"
          >
            Masquer l'aide
          </button>
        ) : null}
      </div>

      {galleryImages.length > 1 ? (
        <div className="grid grid-cols-4 gap-3 sm:grid-cols-5">
          {galleryImages.map((image) => {
            const isActive = image.url === activeImageUrl;
            return (
              <button
                key={image.url}
                type="button"
                onClick={() => setSelectedImageUrl(image.url)}
                className={`relative aspect-square overflow-hidden rounded-2xl border bg-white transition ${
                  isActive
                    ? "border-[var(--accent)] shadow-[0_0_0_1px_var(--accent)]"
                    : "border-[var(--line)] hover:border-[var(--accent-3)]"
                }`}
              >
                <Image src={image.url} alt={image.alt} fill sizes="120px" className="object-cover" loading="lazy" unoptimized />
              </button>
            );
          })}
        </div>
      ) : null}
    </div>
  );
}