// Tryovi -- App: prototype flow + canvas overview + tweaks
// =============================================================================

const { useState: useS, useEffect: useE, useRef: useR } = React;

function KioskFlow({ startAt = 'welcome', onChange }) {
  const [step, setStep] = useS(startAt);
  const [category, setCategory] = useS('women');
  const [garment, setGarment] = useS(null);

  useE(() => { onChange && onChange(step); }, [step]);
  useE(() => { setStep(startAt); }, [startAt]);

  const go = (s) => setStep(s);

  let content;
  switch (step) {
    case 'welcome':    content = <ScreenWelcome onStart={() => go('palm')} />; break;
    case 'palm':       content = <ScreenPalm onContinue={() => go('capture')} />; break;
    case 'capture':    content = <ScreenCapture onCapture={() => go('captured')} />; break;
    case 'captured':   content = <ScreenCaptured onContinue={() => go('category')} onRetake={() => go('capture')} />; break;
    case 'category':   content = <ScreenCategory onPick={(c) => { setCategory(c); go('garments'); }} />; break;
    case 'garments':   content = <ScreenGarments category={category} onPick={(g) => { setGarment(g); go('processing'); }} onBack={() => go('category')} />; break;
    case 'processing': content = <ScreenProcessing garment={garment} onDone={() => go('result')} />; break;
    case 'result':     content = <ScreenResult garment={garment} onShare={() => go('share')} onTryAnother={() => go('garments')} onRestart={() => go('welcome')} />; break;
    case 'share':      content = <ScreenShare garment={garment} onDone={() => go('welcome')} />; break;
    default: content = <ScreenWelcome onStart={() => go('palm')} />;
  }
  return content;
}

// Kiosk physical bezel wrapper -- vertical floor-standing frame
function KioskBezel({ children, scale = 1, label, showBezel = true }) {
  if (!showBezel) {
    return <div style={{ transform: 'scale(' + scale + ')', transformOrigin: 'top left', width: 1080 * scale, height: 1920 * scale }}>
      <div style={{ width: 1080, height: 1920 }}>{children}</div>
    </div>;
  }
  return (
    <div style={{
      transform: 'scale(' + scale + ')',
      transformOrigin: 'top left',
      width: (1080 + 80) * scale,
      height: (1920 + 80) * scale,
    }}>
      <div style={{
        width: 1080 + 80, height: 1920 + 80,
        background: '#0d0d0d',
        borderRadius: 32,
        padding: 40,
        boxShadow: '0 40px 80px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.04)',
        position: 'relative',
      }}>
        {/* Camera notch */}
        <div style={{
          position: 'absolute', top: 16, left: '50%', transform: 'translateX(-50%)',
          width: 220, height: 16, background: '#1a1a1a', borderRadius: 999,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
        }}>
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#0a0a0a', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.15)' }} />
          <div style={{ width: 4, height: 4, borderRadius: '50%', background: 'rgba(255,255,255,0.15)' }} />
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#0a0a0a', boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.15)' }} />
        </div>
        {/* Bottom brand */}
        <div style={{ position: 'absolute', bottom: 12, left: '50%', transform: 'translateX(-50%)', color: 'rgba(255,255,255,0.25)', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.2em' }}>
          TRYOVI
        </div>
        <div style={{ width: 1080, height: 1920, overflow: 'hidden', borderRadius: 8, position: 'relative' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

// =============================================================================
// PROTOTYPE MODE -- single kiosk, full screen
// =============================================================================
function PrototypeMode({ tweaks }) {
  const containerRef = useR(null);
  const [scale, setScale] = useS(1);

  useE(() => {
    function fit() {
      const el = containerRef.current;
      if (!el) return;
      const w = el.clientWidth;
      const h = el.clientHeight;
      const bezelW = tweaks.showBezel ? 1160 : 1080;
      const bezelH = tweaks.showBezel ? 2000 : 1920;
      const s = Math.min(w / bezelW, h / bezelH) * 0.94;
      setScale(s);
    }
    fit();
    window.addEventListener('resize', fit);
    return () => window.removeEventListener('resize', fit);
  }, [tweaks.showBezel]);

  return (
    <div style={{ width: '100vw', height: '100vh', background: '#1a1a1a', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
      <div ref={containerRef} style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <KioskBezel scale={scale} showBezel={tweaks.showBezel}>
          <KioskFlow />
        </KioskBezel>
      </div>
    </div>
  );
}

// =============================================================================
// CANVAS MODE -- all screens side by side
// =============================================================================
function CanvasMode() {
  const noop = () => {};
  // Render each screen directly with no-op handlers so countdowns/timers
  // can't auto-advance the static preview.
  const screens = [
    { id: 'welcome',    label: '01 · Welcome / Attract', el: <ScreenWelcome onStart={noop} /> },
    { id: 'palm',       label: '02 · Palm to start',     el: <ScreenPalm onContinue={noop} /> },
    { id: 'capture',    label: '03 · Live capture',      el: <ScreenCapture onCapture={noop} /> },
    { id: 'captured',   label: '04 · Photo confirm',     el: <ScreenCaptured onContinue={noop} onRetake={noop} /> },
    { id: 'category',   label: '05 · Category',          el: <ScreenCategory onPick={noop} /> },
    { id: 'garments',   label: '06 · Garment grid',      el: <ScreenGarments category="women" onPick={noop} onBack={noop} /> },
    { id: 'processing', label: '07 · Generating',        el: <ScreenProcessing garment={GARMENTS_WOMEN[0]} onDone={noop} /> },
    { id: 'result',     label: '08 · Result reveal',     el: <ScreenResult garment={GARMENTS_WOMEN[0]} onShare={noop} onTryAnother={noop} onRestart={noop} /> },
    { id: 'share',      label: '09 · Save & share',      el: <ScreenShare garment={GARMENTS_WOMEN[0]} onDone={noop} /> },
  ];

  return (
    <DesignCanvas>
      <DCSection id="flow" title="Tryovi · 9-screen kiosk flow">
        {screens.map(s => (
          <DCArtboard key={s.id} id={s.id} label={s.label} width={1080} height={1920}>
            {s.el}
          </DCArtboard>
        ))}
      </DCSection>
    </DesignCanvas>
  );
}

// =============================================================================
// TWEAKS WRAPPER
// =============================================================================
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "prototype",
  "showBezel": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);

  return (
    <>
      {t.mode === 'prototype'
        ? <PrototypeMode tweaks={t} />
        : <CanvasMode />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="View">
          <TweakRadio
            label="Mode"
            value={t.mode}
            options={[
              { value: 'canvas', label: 'Canvas' },
              { value: 'prototype', label: 'Prototype' },
            ]}
            onChange={v => setTweak('mode', v)}
          />
          <TweakToggle
            label="Show kiosk bezel"
            value={t.showBezel}
            onChange={v => setTweak('showBezel', v)}
          />
        </TweakSection>
        <TweakSection label="Tip">
          <div style={{ fontSize: 12, opacity: 0.7, lineHeight: 1.5 }}>
            In <b>Canvas mode</b>, click any artboard to open it fullscreen.
            In <b>Prototype mode</b>, tap through buttons or use the top step bar.
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);