"use client";
import { useState } from "react";
import { IconChevron } from "./icons";

export function Gallery({ images, credit }: { images: string[]; credit: string }) {
  const [i, setI] = useState(0); const [bad, setBad] = useState<Set<number>>(new Set());
  const imgs = images.filter((_, k) => !bad.has(k));
  if (!imgs.length) return <div className="aspect-[16/10] md:aspect-[21/9] rounded-card bg-surface-2 grid place-items-center text-ink-3 text-sm">Aucune photo disponible pour cette annonce</div>;
  const cur = Math.min(i, imgs.length - 1);
  return (
    <figure className="relative">
      <div className="aspect-[16/10] md:aspect-[21/9] rounded-card overflow-hidden bg-surface-2 relative">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img key={imgs[cur]} src={imgs[cur]} alt={`Photo ${cur + 1} sur ${imgs.length}`} className="absolute inset-0 w-full h-full object-cover" referrerPolicy="no-referrer" onError={() => setBad((b) => new Set(b).add(images.indexOf(imgs[cur])))} />
        {imgs.length > 1 && (<>
          <button type="button" onClick={() => setI((cur - 1 + imgs.length) % imgs.length)} className="absolute left-3 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/90 shadow rotate-180" aria-label="Photo précédente"><IconChevron /></button>
          <button type="button" onClick={() => setI((cur + 1) % imgs.length)} className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/90 shadow" aria-label="Photo suivante"><IconChevron /></button>
          <span className="absolute bottom-3 right-3 tv-badge bg-black/55 text-white">{cur + 1} / {imgs.length}</span>
        </>)}
      </div>
      <figcaption className="mt-1.5 text-[11px] text-ink-3">Photos : {credit} (affichées depuis le site d'origine, droits réservés à leur propriétaire).</figcaption>
      {imgs.length > 1 && (
        <div className="mt-2 flex gap-2 overflow-x-auto no-scrollbar">
          {imgs.slice(0, 12).map((src, k) => (
            // eslint-disable-next-line @next/next/no-img-element
            <button key={src} type="button" onClick={() => setI(k)} className={`shrink-0 w-20 h-14 rounded-sm overflow-hidden border-2 ${k === cur ? "border-brand" : "border-transparent"}`} aria-label={`Voir la photo ${k + 1}`}><img src={src} alt="" className="w-full h-full object-cover" loading="lazy" referrerPolicy="no-referrer" /></button>
          ))}
        </div>
      )}
    </figure>
  );
}