// box-viewer.jsx — Photo gallery replacement for the 3D viewer
// Shows the actual high-res cabinet photos with thumbnails + lightbox-style main image.

const { useEffect, useRef, useState } = React;

const THEMES = ['standard', 'nextgen', 'newtheme'];
const THEME_LABELS = { standard: 'Standard', nextgen: 'NextGen', newtheme: 'New' };

// Photo set — angle labels for context
const PHOTOS = [
  { src: 'assets/photos/vt-01.jpg', label: 'Hero · 3/4 view with Quest' },
  { src: 'assets/photos/vt-02.jpg', label: 'Front · buttons + plunger' },
  { src: 'assets/photos/vt-03.jpg', label: 'Three-quarter · left side' },
];

function BoxViewer({ theme = 'standard' /* unused — gallery shows the real cabinet */ }) {
  const [idx, setIdx] = useState(0);
  const [fullscreen, setFullscreen] = useState(false);
  const wrapRef = useRef(null);

  const go = (delta) => setIdx(i => (i + delta + PHOTOS.length) % PHOTOS.length);

  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowLeft') go(-1);
      else if (e.key === 'ArrowRight') go(1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const toggleFs = () => {
    setFullscreen(f => !f);
  };

  useEffect(() => {
    const onKeyEsc = (e) => { if (e.key === 'Escape' && fullscreen) setFullscreen(false); };
    window.addEventListener('keydown', onKeyEsc);
    return () => window.removeEventListener('keydown', onKeyEsc);
  }, [fullscreen]);

  const photo = PHOTOS[idx];

  const wrapStyle = fullscreen
    ? {
        position: 'fixed',
        inset: 0,
        zIndex: 9999,
        display: 'flex',
        flexDirection: 'column',
        background: '#0a0a0c',
      }
    : { position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column' };

  return (
    <div ref={wrapRef} style={wrapStyle}>
      {/* Main image area */}
      <div style={{
        flex: 1,
        position: 'relative',
        background: 'radial-gradient(ellipse at center, #ffffff 0%, #f4f1ea 55%, #ebe6da 100%)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
        minHeight: 0,
      }}>
        <img
          src={photo.src}
          alt={photo.label}
          style={{
            maxWidth: '100%',
            maxHeight: '100%',
            objectFit: 'contain',
            display: 'block',
            userSelect: 'none',
            transition: 'opacity 0.2s',
            filter: 'drop-shadow(0 18px 24px rgba(0,0,0,0.18)) drop-shadow(0 4px 8px rgba(0,0,0,0.10))',
            position: 'relative',
            zIndex: 1,
          }}
          draggable={false}
        />

        {/* Prev / Next arrows */}
        <button
          onClick={() => go(-1)}
          aria-label="Previous"
          style={navBtnStyle('left')}
        >‹</button>
        <button
          onClick={() => go(1)}
          aria-label="Next"
          style={navBtnStyle('right')}
        >›</button>

        {/* Counter pill (no caption) */}
        <div style={{
          position: 'absolute',
          bottom: 14,
          left: '50%',
          transform: 'translateX(-50%)',
          background: 'rgba(255,255,255,0.85)',
          color: '#1a1a1a',
          border: '1px solid rgba(0,0,0,0.08)',
          padding: '4px 12px',
          borderRadius: 999,
          fontFamily: 'var(--font-mono)',
          fontSize: '0.78rem',
          letterSpacing: '0.04em',
          whiteSpace: 'nowrap',
          backdropFilter: 'blur(6px)',
          WebkitBackdropFilter: 'blur(6px)',
          zIndex: 4,
        }}>
          {String(idx + 1).padStart(2, '0')} / {String(PHOTOS.length).padStart(2, '0')}
        </div>

        {/* Fullscreen toggle */}
        <button
          onClick={toggleFs}
          title="Fullscreen"
          style={{
            position: 'absolute',
            top: 12,
            right: 12,
            background: 'rgba(255,255,255,0.85)',
            color: '#1a1a1a',
            border: '1px solid rgba(0,0,0,0.12)',
            borderRadius: 6,
            padding: '4px 10px',
            cursor: 'pointer',
            fontFamily: 'var(--font-hand)',
            fontSize: '0.85rem',
            zIndex: 4,
          }}
        >{fullscreen ? '✕ exit' : '⛶ full'}</button>
      </div>

      {/* Thumbnail strip */}
      <div style={{
        display: 'flex',
        gap: 6,
        padding: '8px 10px',
        background: '#ece8df',
        borderTop: '1px solid #d9d3c4',
        overflowX: 'auto',
        flexShrink: 0,
      }}>
        {PHOTOS.map((p, i) => (
          <button
            key={i}
            onClick={() => setIdx(i)}
            aria-label={p.label}
            style={{
              flex: '0 0 auto',
              width: 72,
              height: 50,
              padding: 0,
              border: i === idx ? '2px solid var(--neon-red)' : '2px solid rgba(0,0,0,0.08)',
              borderRadius: 4,
              cursor: 'pointer',
              background: '#fff',
              overflow: 'hidden',
              opacity: i === idx ? 1 : 0.65,
              transition: 'opacity 0.15s, transform 0.1s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.opacity = 1; }}
            onMouseLeave={(e) => { e.currentTarget.style.opacity = i === idx ? 1 : 0.65; }}
          >
            <img src={p.src} alt={p.label} style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block'
            }}/>
          </button>
        ))}
      </div>
    </div>
  );
}

function navBtnStyle(side) {
  return {
    position: 'absolute',
    top: '50%',
    [side]: 12,
    transform: 'translateY(-50%)',
    width: 42,
    height: 42,
    borderRadius: '50%',
    background: 'rgba(255,255,255,0.85)',
    color: '#1a1a1a',
    border: '1px solid rgba(0,0,0,0.12)',
    zIndex: 5,
    fontSize: '1.7rem',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontFamily: 'serif',
    lineHeight: 1,
    paddingBottom: 3,
  };
}

// Theme picker still used by the Theme Gallery section in the wiki content.
function BoxThemePicker({ value, onChange }) {
  return null; // hidden — theme switching happens in the Theme Gallery section
}

window.BoxViewer = BoxViewer;
window.BoxThemePicker = BoxThemePicker;
window.THEMES = THEMES;
window.THEME_LABELS = THEME_LABELS;