/* global React, ReactDOM, Slide1, Slide2, Slide3, Slide4, Slide5,
   TweaksPanel, useTweaks, TweakSection, TweakSlider, TweakToggle, TweakRadio, TweakNumber */
const { useEffect, useRef, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "autoplay": true,
  "secondsPerSlide": 10,
  "tvClean": false,
  "transitionMs": 600,
  "startAt": 0
}/*EDITMODE-END*/;

const SLIDES = [Slide1, Slide2, Slide3, Slide4, SlideAIOps, Slide5];

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [idx, setIdx] = useState(tweaks.startAt | 0);
  const [progress, setProgress] = useState(0); // 0..1 within current slide
  const [isFullscreen, setIsFullscreen] = useState(false);

  // body class for TV-clean
  useEffect(() => {
    document.body.classList.toggle('tv-clean', !!tweaks.tvClean);
  }, [tweaks.tvClean]);

  // track fullscreen state so the button label stays in sync
  useEffect(() => {
    const onChange = () => setIsFullscreen(!!document.fullscreenElement);
    document.addEventListener('fullscreenchange', onChange);
    return () => document.removeEventListener('fullscreenchange', onChange);
  }, []);

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen?.();
    } else {
      document.exitFullscreen?.();
    }
  };

  // initial + responsive stage scaling (must run after React mounts #stage)
  useEffect(() => {
    fitStage();
    const ro = new ResizeObserver(fitStage);
    ro.observe(document.documentElement);
    return () => ro.disconnect();
  }, []);

  // slide timer + progress
  const startRef = useRef(performance.now());
  useEffect(() => {
    startRef.current = performance.now();
    setProgress(0);
    if (!tweaks.autoplay) return;
    const durMs = Math.max(2000, tweaks.secondsPerSlide * 1000);
    let raf;
    const tick = (t) => {
      const k = Math.min(1, (t - startRef.current) / durMs);
      setProgress(k);
      if (k >= 1) {
        setIdx((i) => (i + 1) % SLIDES.length);
      } else {
        raf = requestAnimationFrame(tick);
      }
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [idx, tweaks.autoplay, tweaks.secondsPerSlide]);

  // keyboard nav (utility, not exposed in TV mode)
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowRight' || e.key === ' ') setIdx((i) => (i + 1) % SLIDES.length);
      if (e.key === 'ArrowLeft') setIdx((i) => (i - 1 + SLIDES.length) % SLIDES.length);
      if (e.key >= '1' && e.key <= '9') setIdx(Math.min(SLIDES.length - 1, parseInt(e.key, 10) - 1));
      if (e.key === 'f' || e.key === 'F') toggleFullscreen();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <>
      {!isFullscreen && (
        <button
          onClick={toggleFullscreen}
          style={{
            position: 'fixed',
            top: 20,
            right: 20,
            zIndex: 2147483647,
            background: '#FFDB0D',
            color: '#101010',
            border: 0,
            borderRadius: 12,
            padding: '16px 24px',
            fontFamily: 'Switzer, sans-serif',
            fontWeight: 700,
            fontSize: 16,
            letterSpacing: '0.05em',
            textTransform: 'uppercase',
            cursor: 'pointer',
            boxShadow: '0 6px 24px rgba(0,0,0,0.5)',
            display: 'flex',
            alignItems: 'center',
            gap: 10,
          }}
        >
          <span style={{fontSize: 22, lineHeight: 1}}>⤢</span> Tela cheia
        </button>
      )}

      <div id="stage-wrap">
        <div id="stage">
          {SLIDES.map((S, i) => <S key={i} active={i === idx} tweak={tweaks} />)}

          {/* slide pips */}
          <div className="pips">
            {SLIDES.map((_, i) => (
              <span key={i} className={"pip" + (i === idx ? " active" : "")} />
            ))}
          </div>

          {/* progress bar */}
          <div className="progress">
            <div className="bar" style={{width: (progress * 100).toFixed(2) + '%'}} />
          </div>
        </div>
      </div>

      <TweaksPanel title="TV Loop · Controles">
        <TweakSection title="Apresentação">
          <button
            onClick={toggleFullscreen}
            style={{
              background: isFullscreen ? '#222' : '#FFDB0D',
              color: isFullscreen ? '#F1F1F1' : '#101010',
              border: 0,
              borderRadius: 8,
              padding: '12px 0',
              width: '100%',
              fontFamily: 'Switzer, sans-serif',
              fontWeight: 600,
              fontSize: 14,
              letterSpacing: '0.05em',
              textTransform: 'uppercase',
              cursor: 'pointer',
            }}
          >
            {isFullscreen ? '⤢ Sair da tela cheia (F)' : '⤢ Tela cheia (F)'}
          </button>
        </TweakSection>
        <TweakSection title="Reprodução">
          <TweakToggle
            label="Autoplay"
            value={tweaks.autoplay}
            onChange={(v) => setTweak('autoplay', v)}
          />
          <TweakSlider
            label="Segundos por slide"
            value={tweaks.secondsPerSlide}
            min={4} max={20} step={1}
            onChange={(v) => setTweak('secondsPerSlide', v)}
            suffix="s"
          />
          <TweakToggle
            label="Modo TV limpo (sem pips/barra)"
            value={tweaks.tvClean}
            onChange={(v) => setTweak('tvClean', v)}
          />
        </TweakSection>
        <TweakSection title="Navegação manual">
          <div style={{display:'grid', gridTemplateColumns:`repeat(${SLIDES.length}, 1fr)`, gap:6}}>
            {SLIDES.map((_, i) => (
              <button key={i}
                onClick={() => setIdx(i)}
                style={{
                  background: i === idx ? '#FFDB0D' : '#222',
                  color: i === idx ? '#101010' : '#F1F1F1',
                  border: 0,
                  borderRadius: 8,
                  padding: '10px 0',
                  fontFamily: 'Switzer, sans-serif',
                  fontWeight: 600,
                  fontSize: 14,
                  cursor: 'pointer',
                }}
              >{i + 1}</button>
            ))}
          </div>
          <div style={{fontSize:11, color:'#999', marginTop:8, lineHeight:1.4, fontFamily:'Switzer, sans-serif'}}>
            Atalhos: ← → navegar · 1–{SLIDES.length} pular · espaço avança · F tela cheia
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// fit-to-viewport scaling for the 1920x1080 stage
function fitStage() {
  const stage = document.getElementById('stage');
  if (!stage) return;
  const W = window.innerWidth, H = window.innerHeight;
  const scale = Math.min(W / 1920, H / 1080);
  stage.style.transform = `translate(-50%, -50%) scale(${scale})`;
}
window.addEventListener('resize', fitStage);
document.addEventListener('DOMContentLoaded', fitStage);

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
// initial fit after first paint
requestAnimationFrame(fitStage);