/* eslint-disable */
// Photo gallery carousel for article pages.
// Renders a swipeable slideshow with lightbox, prev/next, dots, and auto-advance.

const ArticleGallery = ({ photos = [] }) => {
  if (!photos || photos.length === 0) return null;

  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [lightbox, setLightbox] = React.useState(false);

  // Auto-advance every 5 s when not paused and multiple photos.
  React.useEffect(() => {
    if (photos.length < 2 || paused || lightbox) return;
    const tmr = setTimeout(() => setIdx(i => (i + 1) % photos.length), 5000);
    return () => clearTimeout(tmr);
  }, [idx, photos.length, paused, lightbox]);

  // Keyboard nav for lightbox.
  React.useEffect(() => {
    if (!lightbox) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setLightbox(false);
      if (e.key === 'ArrowLeft')  setIdx(i => (i - 1 + photos.length) % photos.length);
      if (e.key === 'ArrowRight') setIdx(i => (i + 1) % photos.length);
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [lightbox, photos.length]);

  const resolveUrl = (src) => {
    if (!src) return '';
    if (/^https?:\/\//i.test(src) || /^data:/i.test(src)) return src;
    return '/' + src.replace(/^\//, '');
  };

  const prev = (e) => { e && e.stopPropagation(); setIdx(i => (i - 1 + photos.length) % photos.length); };
  const next = (e) => { e && e.stopPropagation(); setIdx(i => (i + 1) % photos.length); };

  return (
    <>
      <div
        className="cbm-gallery"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        <div className="cbm-gallery__track">
          {photos.map((src, i) => (
            <div
              key={i}
              className={'cbm-gallery__slide' + (i === idx ? ' is-active' : '')}
              aria-hidden={i !== idx}
              onClick={() => setLightbox(true)}
            >
              <img
                src={resolveUrl(src)}
                alt={'Foto ' + (i + 1) + ' van ' + photos.length}
                loading={i === 0 ? 'eager' : 'lazy'}
              />
            </div>
          ))}
        </div>

        {photos.length > 1 && (
          <>
            <button className="cbm-gallery__nav cbm-gallery__nav--prev" onClick={prev} aria-label="Vorige foto">‹</button>
            <button className="cbm-gallery__nav cbm-gallery__nav--next" onClick={next} aria-label="Volgende foto">›</button>
            <div className="cbm-gallery__dots">
              {photos.map((_, i) => (
                <button
                  key={i}
                  className={'cbm-gallery__dot' + (i === idx ? ' is-active' : '')}
                  onClick={(e) => { e.stopPropagation(); setIdx(i); }}
                  aria-label={'Foto ' + (i + 1)}
                />
              ))}
            </div>
          </>
        )}

        <div className="cbm-gallery__hint" onClick={() => setLightbox(true)}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M8 3H5a2 2 0 0 0-2 2v3"/>
            <path d="M21 8V5a2 2 0 0 0-2-2h-3"/>
            <path d="M3 16v3a2 2 0 0 0 2 2h3"/>
            <path d="M16 21h3a2 2 0 0 0 2-2v-3"/>
          </svg>
        </div>
      </div>

      {lightbox && (
        <div className="cbm-gallery__lightbox" onClick={() => setLightbox(false)}>
          <button className="cbm-gallery__lightbox-close" onClick={() => setLightbox(false)} aria-label="Sluiten">✕</button>
          {photos.length > 1 && (
            <>
              <button className="cbm-gallery__nav cbm-gallery__nav--prev" onClick={prev} aria-label="Vorige foto">‹</button>
              <button className="cbm-gallery__nav cbm-gallery__nav--next" onClick={next} aria-label="Volgende foto">›</button>
            </>
          )}
          <img
            src={resolveUrl(photos[idx])}
            alt={'Foto ' + (idx + 1) + ' van ' + photos.length}
            onClick={(e) => e.stopPropagation()}
          />
          {photos.length > 1 && (
            <p className="cbm-gallery__lightbox-counter">{idx + 1} / {photos.length}</p>
          )}
        </div>
      )}
    </>
  );
};

Object.assign(window, { ArticleGallery });