/* shell.jsx — Throughline deck frame: index rail, page chrome, nav, theming, tweaks. */
const { useState, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ground": "graphite",
  "inset": 22,
  "s5Layout": "timeline",
  "readinessLast": true,
  "advisorDiagram": true
}/*EDITMODE-END*/;

const GROUNDS = { graphite: 'Graphite', warm: 'Warm', stone: 'Stone' };

function hashSlideIndex(max) {
  const m = String(window.location.hash || '').match(/slide-(\d+)/);
  if (!m) return null;
  const n = parseInt(m[1], 10);
  if (!Number.isFinite(n)) return null;
  return Math.max(0, Math.min(max - 1, n - 1));
}

function Rail({ current, onGo, slides }) {
  const groups = [];
  slides.forEach((s, i) => {
    const g = groups.find((x) => x.name === s.group);
    if (g) g.items.push({ ...s, i });
    else groups.push({ name: s.group, items: [{ ...s, i }] });
  });
  return (
    <aside className="tl-rail">
      <div className="tl-brand">
        <svg width="26" height="26" viewBox="0 0 44 44" fill="none" style={{ flex: '0 0 auto' }}>
          <rect x="7" y="11" width="24" height="3.4" rx="1.7" fill="var(--rail-fg)" />
          <circle cx="36" cy="12.7" r="3.2" fill="#C2A14E" />
          <rect x="7" y="20.3" width="30" height="3.4" rx="1.7" fill="var(--rail-soft)" />
          <rect x="7" y="29.6" width="19" height="3.4" rx="1.7" fill="var(--rail-soft)" />
        </svg>
        <span className="tl-wordmark">Throughl<i>i</i>ne</span>
      </div>

      <div style={{ marginTop: 26 }}>
        <div className="tl-rail-kicker">Presentation</div>
        <div className="tl-rail-sub">Owners · Buyers · Advisors</div>
        <p className="tl-rail-intro">How the operating knowledge that runs a business becomes a reviewed, transferable asset, and what that is worth to both sides of a deal.</p>
      </div>

      <div className="tl-rail-rule" />

      <nav>
        {groups.map((g) => (
          <div key={g.name}>
            <div className="tl-grouplbl">{g.name}</div>
            <div className="tl-navlist">
              {g.items.map((it) => (
                <button key={it.label} className="tl-navitem" aria-current={it.i === current} onClick={() => onGo(it.i)}>
                  <span className="tl-navnum">{String(it.i + 1).padStart(2, '0')}</span>
                  <span className="tl-navtxt">{it.nav}</span>
                </button>
              ))}
            </div>
          </div>
        ))}
      </nav>

      <div className="tl-rail-foot">Use the arrow keys or the buttons to move through. Product screens are representations while the final UI is in design.</div>
    </aside>
  );
}

function Deck() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const order = React.useMemo(() => {
    const o = [...SLIDES];
    if (t.readinessLast) {
      const ri = o.findIndex((x) => x.nav === 'Readiness');
      if (ri !== -1) { const [r] = o.splice(ri, 1); const ei = o.findIndex((x) => x.nav === 'Evidence Pack'); o.splice(ei + 1, 0, r); }
    }
    return o;
  }, [t.readinessLast]);
  const [current, setCurrent] = useState(() => {
    const fromHash = hashSlideIndex(SLIDES.length);
    if (fromHash !== null) return fromHash;
    const saved = parseInt(localStorage.getItem('tl-deck-slide') || '0', 10);
    return Number.isFinite(saved) && saved >= 0 && saved < SLIDES.length ? saved : 0;
  });

  const go = useCallback((i) => {
    setCurrent((c) => {
      const next = Math.max(0, Math.min(SLIDES.length - 1, i));
      localStorage.setItem('tl-deck-slide', String(next));
      window.history.replaceState(null, '', `#slide-${next + 1}`);
      return next;
    });
  }, []);

  useEffect(() => {
    window.history.replaceState(null, '', `#slide-${current + 1}`);
    const onHash = () => {
      const fromHash = hashSlideIndex(SLIDES.length);
      if (fromHash !== null) {
        setCurrent(fromHash);
        localStorage.setItem('tl-deck-slide', String(fromHash));
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useEffect(() => {
    const onKey = (e) => {
      const tag = (e.target.tagName || '').toLowerCase();
      if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
      if (e.key === 'ArrowRight' || e.key === 'PageDown') { e.preventDefault(); setCurrent((c) => { const n = Math.min(SLIDES.length - 1, c + 1); localStorage.setItem('tl-deck-slide', String(n)); window.history.replaceState(null, '', `#slide-${n + 1}`); return n; }); }
      else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); setCurrent((c) => { const n = Math.max(0, c - 1); localStorage.setItem('tl-deck-slide', String(n)); window.history.replaceState(null, '', `#slide-${n + 1}`); return n; }); }
      else if (e.key === 'Home') { go(0); }
      else if (e.key === 'End') { go(SLIDES.length - 1); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [go]);

  const s = order[current];
  const Comp = s.Comp;
  const num = String(current + 1).padStart(2, '0');
  const pct = ((current + 1) / order.length) * 100;

  return (
    <div className="tl-deck" data-ground={t.ground}>
      <Rail current={current} onGo={go} slides={order} />

      <div className="tl-stagewrap" style={{ padding: `${t.inset}px ${t.inset + 2}px ${t.inset}px 0` }}>
        <div className="tl-stage">
          <header className="tl-pagehead" data-screen-label={`${num} · ${s.label}`}>
            <div className="tl-pagehead-label"><b>{num}</b>&nbsp;&nbsp;{s.label}</div>
            <div className="tl-pagehead-tag">{s.tag}</div>
          </header>

          <div className="tl-pagebody">
            <div key={current} style={{ width: '100%', display: 'flex', justifyContent: 'center', padding: '36px 0' }}>
              <Comp t={t} />
            </div>
          </div>

          <footer className="tl-pagefoot">
            <span className="tl-counter">{num} / {String(order.length).padStart(2, '0')}</span>
            <span className="tl-progress"><span style={{ width: pct + '%' }} /></span>
            <div className="tl-navbtns">
              <button className="tl-btn-secondary" onClick={() => go(current - 1)} disabled={current === 0} style={{ opacity: current === 0 ? 0.45 : 1, cursor: current === 0 ? 'default' : 'pointer' }}>Back</button>
              {current === SLIDES.length - 1
                ? <button className="tl-btn-secondary" style={{ opacity: 0.55, cursor: 'default' }}>End</button>
                : <button className="tl-btn-primary" onClick={() => go(current + 1)}>Next</button>}
            </div>
          </footer>
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Stage ground" />
        <TweakRadio label="Ground" value={t.ground} options={Object.keys(GROUNDS).map((k) => GROUNDS[k].toLowerCase())}
          onChange={(v) => setTweak('ground', v)} />
        <TweakSection label="Framing" />
        <TweakSlider label="Page inset" value={t.inset} min={0} max={44} step={2} unit="px"
          onChange={(v) => setTweak('inset', v)} />
        <TweakSection label="Proposed — under review" />
        <TweakRadio label="Slide 5" value={t.s5Layout} options={['timeline', 'cards']}
          onChange={(v) => setTweak('s5Layout', v)} />
        <TweakToggle label="Readiness after Pack" value={t.readinessLast}
          onChange={(v) => setTweak('readinessLast', v)} />
        <TweakToggle label="Advisor diagram" value={t.advisorDiagram}
          onChange={(v) => setTweak('advisorDiagram', v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<Deck />);