'use client';

import { SmartImage, ImagePlaceholder, type PlaceholderGlyph } from '@/components/ui/smart-image';
import { useCallback, useEffect, useRef, useState } from 'react';
import { ChevronLeft, ChevronRight, Maximize2, X } from 'lucide-react';
import { cn } from '@/lib/format';

export interface GalleryImage {
  url: string;
  caption?: string | null;
  /** cached /img sources (added by the server component) */
  src?: string | null;
  srcSet?: string | null;
  full?: string | null;
}

/**
 * Hero image with a full-screen, swipeable gallery (scroll-snap + keyboard). Images are shown
 * `object-contain` on a neutral surface so cards, watches and boxes keep their proportions.
 */
export function AssetGallery({ images, alt, className, priority = true, glyph = 'box' }: { images: GalleryImage[]; alt: string; className?: string; priority?: boolean; glyph?: PlaceholderGlyph }) {
  const [open, setOpen] = useState(false);
  const [index, setIndex] = useState(0);
  const track = useRef<HTMLDivElement>(null);
  const hero = images[0];

  const go = useCallback(
    (i: number) => {
      const n = images.length;
      const next = ((i % n) + n) % n;
      setIndex(next);
      track.current?.children[next]?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    },
    [images.length],
  );

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setOpen(false);
      if (e.key === 'ArrowRight') go(index + 1);
      if (e.key === 'ArrowLeft') go(index - 1);
    };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, index, go]);

  if (!hero) {
    return (
      <div className={cn('relative flex items-center justify-center overflow-hidden rounded-lg border border-border bg-inset', className)}>
        <ImagePlaceholder label="No image" glyph={glyph} />
      </div>
    );
  }

  return (
    <>
      <button type="button" onClick={() => setOpen(true)} className={cn('group relative block overflow-hidden rounded-lg border border-border bg-inset text-left', className)} aria-label={`Open image gallery for ${alt}`}>
        <SmartImage src={hero.src ?? null} srcSet={hero.srcSet ?? null} sizes="(max-width: 768px) 100vw, 360px" alt={alt} priority={priority} imgClassName="p-2 transition-transform duration-300 group-hover:scale-[1.02]" placeholder={{ label: 'No image', glyph }} />
        <span className="absolute bottom-2 right-2 inline-flex items-center gap-1 rounded-md bg-black/55 px-1.5 py-1 text-[10px] font-medium text-white backdrop-blur-sm">
          <Maximize2 className="h-3 w-3" />
          {images.length > 1 ? `${images.length} photos` : 'View'}
        </span>
      </button>
      {open ? (
        <div className="fixed inset-0 z-[60] flex flex-col bg-black/95 text-white" role="dialog" aria-modal="true" aria-label={`${alt} gallery`}>
          <div className="flex items-center justify-between px-3 pt-[max(env(safe-area-inset-top),0.5rem)] pb-2 text-xs">
            <span className="num text-white/80">
              {index + 1} / {images.length}
            </span>
            <button type="button" onClick={() => setOpen(false)} aria-label="Close gallery" className="inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-white/10">
              <X className="h-5 w-5" />
            </button>
          </div>
          <div
            ref={track}
            className="scrollbar-none flex flex-1 snap-x snap-mandatory overflow-x-auto"
            onScroll={(e) => {
              const el = e.currentTarget;
              const i = Math.round(el.scrollLeft / el.clientWidth);
              if (i !== index) setIndex(i);
            }}
          >
            {images.map((im, i) => (
              <figure key={`${im.url}-${i}`} className="relative flex h-full w-full shrink-0 snap-center items-center justify-center p-2">
                <SmartImage src={im.full ?? im.src ?? null} alt={`${alt} — image ${i + 1}`} priority={i === index} placeholder={{ glyph }} />
                {im.caption ? <figcaption className="absolute bottom-3 left-3 right-3 truncate text-center text-[11px] text-white/70">{im.caption}</figcaption> : null}
              </figure>
            ))}
          </div>
          {images.length > 1 ? (
            <div className="flex items-center justify-center gap-6 px-3 pb-[max(env(safe-area-inset-bottom),0.75rem)] pt-2">
              <button type="button" onClick={() => go(index - 1)} aria-label="Previous image" className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 hover:bg-white/20">
                <ChevronLeft className="h-5 w-5" />
              </button>
              <div className="flex gap-1.5">
                {images.slice(0, 12).map((_, i) => (
                  <span key={i} className={cn('h-1.5 w-1.5 rounded-full', i === index ? 'bg-white' : 'bg-white/30')} />
                ))}
              </div>
              <button type="button" onClick={() => go(index + 1)} aria-label="Next image" className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 hover:bg-white/20">
                <ChevronRight className="h-5 w-5" />
              </button>
            </div>
          ) : (
            <div className="pb-[max(env(safe-area-inset-bottom),0.75rem)]" />
          )}
        </div>
      ) : null}
    </>
  );
}