/* ============================================================
   Calypsos Web Prototype — root app
   Two scrollable columns showing the Calypsos product page in
   Monolith and Standard registers, side-by-side. Tweaks let you
   focus a single system or compare them live.
   ============================================================ */

const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle } = window;
const { MonolithPrototype, StandardPrototype } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "view": "mono",
  "syncScroll": false,
  "showLabels": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const leftRef = useRef(null);
  const rightRef = useRef(null);
  const syncingRef = useRef(false);

  // Sync scroll between columns when enabled
  useEffect(() => {
    if (!tweaks.syncScroll) return;
    const L = leftRef.current;
    const R = rightRef.current;
    if (!L || !R) return;

    const onScroll = (src, dst) => () => {
      if (syncingRef.current) return;
      syncingRef.current = true;
      // sync as a fraction (heights differ slightly)
      const f = src.scrollTop / Math.max(1, src.scrollHeight - src.clientHeight);
      dst.scrollTop = f * (dst.scrollHeight - dst.clientHeight);
      requestAnimationFrame(() => { syncingRef.current = false; });
    };
    const onL = onScroll(L, R);
    const onR = onScroll(R, L);
    L.addEventListener('scroll', onL, { passive: true });
    R.addEventListener('scroll', onR, { passive: true });
    return () => {
      L.removeEventListener('scroll', onL);
      R.removeEventListener('scroll', onR);
    };
  }, [tweaks.syncScroll, tweaks.view]);

  // When view changes, scroll both back to top
  useEffect(() => {
    if (leftRef.current) leftRef.current.scrollTop = 0;
    if (rightRef.current) rightRef.current.scrollTop = 0;
  }, [tweaks.view]);

  const showMono = tweaks.view === 'split' || tweaks.view === 'mono';
  const showStd  = tweaks.view === 'split' || tweaks.view === 'std';

  return (
    <div className="app">
      <div className="topbar">
        <div className="left">
          <a href="/" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 14px', borderRadius: 999,
            border: '1px solid rgba(255,255,255,0.18)',
            color: 'rgba(255,255,255,0.7)', textDecoration: 'none',
            fontSize: 12, fontWeight: 500, marginRight: 12,
            transition: 'all 0.2s',
          }} onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; e.currentTarget.style.color = '#fff'; }}
             onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'rgba(255,255,255,0.7)'; }}>
            ← Deck
          </a>
          <span className="dot" />
          <span>Vessel · Calypsos web prototype</span>
        </div>
        <div className="switcher">
          {[
            { v: 'mono',  label: '01 · Monolith' },
            { v: 'std',   label: '04 · Standard' },
            { v: 'split', label: 'Compare' },
          ].map(opt => (
            <button
              key={opt.v}
              className={tweaks.view === opt.v ? 'on' : ''}
              onClick={() => setTweak('view', opt.v)}
            >{opt.label}</button>
          ))}
        </div>
        <div className="right">
          <span>v0.1 · 2026.05.21</span>
        </div>
      </div>

      <div className="stage">
        <div ref={leftRef} className={`col ${!showMono ? 'hidden' : ''}`} data-mono-col>
          {tweaks.showLabels && (
            <div className="col-label">
              <span className="pill" style={{ background: 'rgba(246,244,239,0.78)', color: '#1a1714', border: '1px solid #d9d4ca' }}>
                <span style={{ width: 6, height: 6, background: '#c46818', display: 'inline-block' }} /> 01 · Monolith
              </span>
              <span className="pill" style={{ background: 'rgba(246,244,239,0.78)', color: '#8e887d', border: '1px solid #d9d4ca' }}>
                Calypsos · product page
              </span>
            </div>
          )}
          <MonolithPrototype />
        </div>

        <div ref={rightRef} className={`col ${!showStd ? 'hidden' : ''}`} data-std-col style={{ background: '#efe9dc' }}>
          {tweaks.showLabels && (
            <div className="col-label">
              <span className="pill" style={{ background: 'rgba(239,233,220,0.82)', color: '#1a2436', border: '1px solid #c8c1ad' }}>
                <span style={{ width: 6, height: 6, background: '#a14a2a', display: 'inline-block' }} /> 04 · Standard
              </span>
              <span className="pill" style={{ background: 'rgba(239,233,220,0.82)', color: '#7a7568', border: '1px solid #c8c1ad' }}>
                Calypsos · programme page
              </span>
            </div>
          )}
          <StandardPrototype />
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout">
          <TweakRadio
            label="View"
            value={tweaks.view}
            onChange={(v) => setTweak('view', v)}
            options={[
              { value: 'split', label: 'Split' },
              { value: 'mono',  label: 'Monolith' },
              { value: 'std',   label: 'Standard' },
            ]}
          />
          <TweakToggle
            label="Sync scroll"
            value={tweaks.syncScroll}
            onChange={(v) => setTweak('syncScroll', v)}
          />
          <TweakToggle
            label="Show system labels"
            value={tweaks.showLabels}
            onChange={(v) => setTweak('showLabels', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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