"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight, ImageIcon, ZoomIn, X } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import { localizeProductImageAlt } from "@/lib/product-i18n";

interface ImageItem {
  id: string;
  url: string;
  alt: string | null;
}

interface ProductGalleryProps {
  images: ImageItem[];
  productName: string;
}

export default function ProductGallery({ images, productName }: ProductGalleryProps) {
  const t = useTranslations("catalog");
  const locale = useLocale();
  const [activeIndex, setActiveIndex] = useState(0);
  const [zoomOpen, setZoomOpen] = useState(false);
  const [failedUrls, setFailedUrls] = useState<Set<string>>(() => new Set());
  const closeButtonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (!zoomOpen) return;
    const previousFocus = document.activeElement as HTMLElement | null;
    closeButtonRef.current?.focus();
    const close = (event: KeyboardEvent) => {
      if (event.key === "Escape") setZoomOpen(false);
    };
    window.addEventListener("keydown", close);
    return () => {
      window.removeEventListener("keydown", close);
      previousFocus?.focus();
    };
  }, [zoomOpen]);

  if (!images?.length) {
    return <ImageFallback label={t("no_image")} />;
  }

  const activeImage = images[activeIndex];
  const activeLabel = t("gallery_image", { product: productName, index: activeIndex + 1 });
  const activeAlt = localizeProductImageAlt(activeImage.alt, activeImage.url, productName, locale);
  const activeFailed = failedUrls.has(activeImage.url);

  const markFailed = (url: string) => {
    setFailedUrls((current) => {
      if (current.has(url)) return current;
      const next = new Set(current);
      next.add(url);
      return next;
    });
  };

  const selectRelative = (direction: -1 | 1) => {
    setActiveIndex((current) => (current + direction + images.length) % images.length);
  };

  const selectFromKeyboard = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
    let target: number | null = null;
    if (event.key === "ArrowRight") target = (index + 1) % images.length;
    if (event.key === "ArrowLeft") target = (index - 1 + images.length) % images.length;
    if (event.key === "Home") target = 0;
    if (event.key === "End") target = images.length - 1;
    if (target === null) return;

    event.preventDefault();
    setActiveIndex(target);
    const tabs = event.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role="tab"]');
    requestAnimationFrame(() => tabs?.[target]?.focus());
  };

  return (
    <div className="flex w-full flex-col gap-4">
      <div id="product-gallery-panel" role="tabpanel" aria-label={activeLabel} className="group relative aspect-[4/3] w-full overflow-hidden rounded-3xl border border-border bg-surface-1 shadow-xl">
        {activeFailed ? (
          <ImageFallback label={t("image_unavailable")} compact />
        ) : (
          <button type="button" onClick={() => setZoomOpen(true)} className="absolute inset-0 cursor-zoom-in" aria-label={t("zoom_image", { product: productName })}>
            <Image src={activeImage.url} alt={activeAlt} fill className="object-contain p-6 transition-transform duration-500 group-hover:scale-[1.025]" sizes="(max-width: 860px) 100vw, 50vw" loading="eager" fetchPriority="high" onError={() => markFailed(activeImage.url)} />
            <span className="absolute bottom-4 right-4 flex min-h-11 items-center gap-2 rounded-full border border-border bg-surface-0/80 px-4 text-[10px] uppercase tracking-[0.16em] text-fg-secondary backdrop-blur-md"><ZoomIn size={14} />{t("zoom")}</span>
          </button>
        )}

        {images.length > 1 ? (
          <>
            <button type="button" onClick={() => selectRelative(-1)} className="absolute left-3 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-surface-0/80 text-fg-primary backdrop-blur-md transition-colors hover:border-ember hover:text-ember" aria-label={t("previous_image")}><ChevronLeft size={18} /></button>
            <button type="button" onClick={() => selectRelative(1)} className="absolute right-3 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-surface-0/80 text-fg-primary backdrop-blur-md transition-colors hover:border-ember hover:text-ember" aria-label={t("next_image")}><ChevronRight size={18} /></button>
          </>
        ) : null}

        <span className="absolute left-4 top-4 z-10 rounded-full border border-border bg-surface-0/80 px-3 py-2 text-[10px] tabular-nums tracking-[0.14em] text-fg-secondary backdrop-blur-md" aria-live="polite">{String(activeIndex + 1).padStart(2, "0")} / {String(images.length).padStart(2, "0")}</span>
      </div>

      {images.length > 1 ? (
        <div role="tablist" aria-label={t("product_gallery")} className="flex items-center gap-3 overflow-x-auto pb-2">
          {images.map((image, index) => {
            const selected = activeIndex === index;
            const label = t("gallery_image", { product: productName, index: index + 1 });
            return (
              <button key={image.id} type="button" role="tab" aria-selected={selected} aria-controls="product-gallery-panel" tabIndex={selected ? 0 : -1} onClick={() => setActiveIndex(index)} onKeyDown={(event) => selectFromKeyboard(event, index)} className="relative h-20 w-20 min-w-20 flex-shrink-0 overflow-hidden rounded-2xl border bg-surface-1 transition-all duration-300" style={{ borderColor: selected ? "var(--ember)" : "var(--border)", boxShadow: selected ? "var(--shadow-ember)" : "none", opacity: selected ? 1 : 0.68 }} aria-label={label}>
                {failedUrls.has(image.url) ? <ImageIcon size={20} className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-fg-muted" /> : <Image src={image.url} alt="" fill className="object-contain p-2" sizes="80px" onError={() => markFailed(image.url)} />}
              </button>
            );
          })}
        </div>
      ) : null}

      {zoomOpen && !activeFailed ? (
        <div role="dialog" aria-modal="true" aria-label={activeLabel} className="fixed inset-0 z-[80] flex items-center justify-center bg-black/92 p-4 backdrop-blur-md" onClick={() => setZoomOpen(false)}>
          <button ref={closeButtonRef} type="button" onClick={() => setZoomOpen(false)} className="absolute right-5 top-5 z-10 flex h-11 w-11 items-center justify-center rounded-full border border-white/15 bg-black/60 text-white" aria-label={t("close_zoom")}><X size={19} /></button>
          <div className="relative h-[min(82vh,56rem)] w-[min(92vw,88rem)]" onClick={(event) => event.stopPropagation()}>
            <Image src={activeImage.url} alt={activeAlt} fill className="object-contain" sizes="92vw" onError={() => markFailed(activeImage.url)} />
          </div>
        </div>
      ) : null}
    </div>
  );
}

function ImageFallback({ label, compact = false }: { label: string; compact?: boolean }) {
  return (
    <div className={`flex w-full flex-col items-center justify-center border border-border bg-surface-1 text-fg-muted ${compact ? "absolute inset-0" : "aspect-[4/3] rounded-3xl"}`}>
      <ImageIcon size={compact ? 32 : 40} className="mb-3 stroke-[1]" />
      <span className="text-xs uppercase tracking-[0.14em]">{label}</span>
    </div>
  );
}