// MarketForge — app shell w/ sidebar, topbar, sub-tabs, header per screen

const SCREEN_KEYS = ['overview', 'role', 'profile', 'dashboard', 'match', 'reveal', 'deal'];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfortable",
  "accent": "#c2410c",
  "showGrid": true,
  "showKnowledgeByDefault": true
}/*EDITMODE-END*/;

function useTweaks() {
  const [tweaks, setTweaks] = React.useState(() => {
    try {
      const stored = JSON.parse(localStorage.getItem('mf-tweaks') || 'null');
      return { ...TWEAK_DEFAULTS, ...(stored || {}) };
    } catch { return TWEAK_DEFAULTS; }
  });
  React.useEffect(() => {
    localStorage.setItem('mf-tweaks', JSON.stringify(tweaks));
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    const hex = tweaks.accent.replace('#', '');
    const r = parseInt(hex.slice(0,2), 16);
    const g = parseInt(hex.slice(2,4), 16);
    const b = parseInt(hex.slice(4,6), 16);
    document.documentElement.style.setProperty('--accent-soft', `rgba(${r},${g},${b},0.18)`);
    document.documentElement.style.setProperty('--accent-ink',
      `rgb(${Math.max(0,r-60)},${Math.max(0,g-30)},${Math.max(0,b-5)})`);
  }, [tweaks]);
  return [tweaks, setTweaks];
}

function TweaksPanel({ tweaks, setTweaks, visible, onClose }) {
  if (!visible) return null;
  const update = (patch) => {
    setTweaks(t => ({ ...t, ...patch }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };
  return (
    <div className="tweaks-panel">
      <div className="hd">
        <h4>Tweaks</h4>
        <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', color:'var(--ink-3)', fontSize: 14 }}>×</button>
      </div>
      <div className="bd">
        <div className="row">
          <label>Accent</label>
          <div className="seg">
            {[['#c2410c','Amber'],['#0f5f4e','Jade'],['#1f4b6b','Steel'],['#7a2d5a','Plum']].map(([c,n]) => (
              <button key={c} className={tweaks.accent === c ? 'on' : ''} onClick={() => update({ accent: c })}
                style={{ display:'flex', alignItems:'center', gap:6, justifyContent:'center' }}>
                <span style={{ width:10, height:10, background:c, display:'inline-block' }} />{n}
              </button>
            ))}
          </div>
        </div>
        <div className="row">
          <label>Density</label>
          <div className="seg">
            {['compact','comfortable','spacious'].map(d => (
              <button key={d} className={tweaks.density === d ? 'on' : ''} onClick={() => update({ density: d })}>{d}</button>
            ))}
          </div>
        </div>
        <div className="row">
          <div className={`toggle ${tweaks.showGrid ? 'on' : ''}`} onClick={() => update({ showGrid: !tweaks.showGrid })}>
            <span>Blueprint grid</span><div className="sw" />
          </div>
        </div>
        <div className="row">
          <div className={`toggle ${tweaks.showKnowledgeByDefault ? 'on' : ''}`} onClick={() => update({ showKnowledgeByDefault: !tweaks.showKnowledgeByDefault })}>
            <span>KnowledgeSlot default</span><div className="sw" />
          </div>
        </div>
      </div>
    </div>
  );
}

const USERS = {
  shop:      { initials: 'JM', name: 'Joana Mendes',   role: 'Ops lead · Ardent Precision' },
  buyer:     { initials: 'LP', name: 'Lena Park',      role: 'Procurement · Helios Aero' },
  inspector: { initials: 'DV', name: 'Dmitri Volkov',  role: 'Metrology lead · Meridian' },
};

// --- Per-screen header + tabs metadata ------
const HEADERS = {
  0: { title: 'Overview',  sub: 'Market-wide twin state as of 08:12 UTC-5 — live simulation frame.',
       tabs: [{ key:'summary', label:'SUMMARY'}, { key:'topology', label:'MARKET TOPOLOGY'}, { key:'pipeline', label:'PIPELINE'}] },
  1: { title: 'Role selection', sub: 'You are a participant. Pick the side of the market you are entering.',
       tabs: null },
  2: { title: (role) => PROFILES[role].name,
       sub: (role) => `${PROFILES[role].role} · ${PROFILES[role].callsign} · ${PROFILES[role].location}`,
       tabs: [
         { key:'capabilities', label:'CAPABILITIES' },
         { key:'equipment',    label:'EQUIPMENT',     count: 6 },
         { key:'certs',        label:'CERTIFICATIONS',count: 6 },
         { key:'knowledge',    label:'KNOWLEDGESLOT', count: 2 },
         { key:'audit',        label:'AUDIT',         count: 8 },
       ] },
  3: { title: 'Dashboard', sub: 'Bidirectional match pipeline — scored across your active twin positions.',
       tabs: [
         { key:'pipeline',   label:'PIPELINE', count: 6 },
         { key:'candidates', label:'ALL CANDIDATES', count: 14 },
         { key:'feed',       label:'EVENT FEED · LIVE' },
       ] },
  4: { title: 'Match report', sub: 'MF-2026-04-0412 · bidirectional evaluation · confidentiality preserved',
       tabs: [
         { key:'compare',    label:'COMPARISON' },
         { key:'provenance', label:'PROVENANCE' },
         { key:'ledger',     label:'MATCH LEDGER', count: 8 },
       ] },
  5: { title: 'Identity reveal', sub: 'Mutual opt-in required — neither side is revealed without the other.',
       tabs: null },
  6: { title: (role) => DEALS[role].title, sub: 'Deal assembly · approvals, clauses, pricing, facilitators',
       tabs: [
         { key:'brief',     label:'BRIEF' },
         { key:'clauses',   label:'CLAUSES', count: 10 },
         { key:'approvals', label:'APPROVALS', count: 5 },
         { key:'risk',      label:'RISK REGISTER', count: 5 },
       ] },
};

// --- App --------------------------------------------------------------

function App() {
  const [tweaks, setTweaks] = useTweaks();
  const [tweaksVisible, setTweaksVisible] = React.useState(false);
  const [notifOpen, setNotifOpen] = React.useState(false);
  const [stage, setStage] = React.useState(() => {
    const s = localStorage.getItem('mf-stage') || 'landing';
    // legacy value from earlier build
    return s === 'login' ? 'landing' : s;
  });
  const [screen, setScreen] = React.useState(() => {
    const s = parseInt(localStorage.getItem('mf-screen') || '0', 10);
    return isNaN(s) ? 0 : s;
  });
  const [role, setRole] = React.useState(() => localStorage.getItem('mf-role') || 'shop');
  const [ksOn, setKsOn] = React.useState(tweaks.showKnowledgeByDefault);
  const [subTab, setSubTab] = React.useState({});
  const setTab = (k) => setSubTab(s => ({ ...s, [screen]: k }));
  const activeTab = subTab[screen] || (HEADERS[screen].tabs ? HEADERS[screen].tabs[0].key : null);

  React.useEffect(() => { localStorage.setItem('mf-screen', String(screen)); }, [screen]);
  React.useEffect(() => { localStorage.setItem('mf-role', role); }, [role]);
  React.useEffect(() => { localStorage.setItem('mf-stage', stage); }, [stage]);

  React.useEffect(() => {
    const onMsg = (e) => {
      const t = e.data && e.data.type;
      if (t === '__activate_edit_mode') setTweaksVisible(true);
      if (t === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Keyboard shortcuts (only inside the app stage)
  React.useEffect(() => {
    if (stage !== 'app') return;
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      if (e.key === 'ArrowRight' || e.key === 'j') setScreen(s => Math.min(6, s + 1));
      if (e.key === 'ArrowLeft' || e.key === 'k') setScreen(s => Math.max(0, s - 1));
      if (e.key >= '1' && e.key <= '7') setScreen(parseInt(e.key, 10) - 1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [stage]);

  const go = (n) => setScreen(Math.max(0, Math.min(6, n)));
  const logout = () => { setStage('landing'); setScreen(0); };
  const restart = logout;
  const switchRole = (r) => { setRole(r); setScreen(0); };

  // Pre-app stages
  if (stage === 'landing') {
    return <LandingPage
      onTryDemo={() => setStage('pick')}
    />;
  }
  if (stage === 'pick') {
    return <PersonaPick
      onBack={() => setStage('landing')}
      onPick={(r) => { setRole(r); setScreen(0); setStage('app'); }}
    />;
  }

  const densityPad = { compact: 0.9, comfortable: 1, spacious: 1.1 }[tweaks.density] || 1;
  const screenProps = { role, ksOn, onToggleKS: () => setKsOn(k => !k) };
  const user = USERS[role];

  // Compose current screen
  const currentScreen = (() => {
    switch (screen) {
      case 0: return <Screen1_Landing onNext={() => go(1)} activeTab={activeTab} />;
      case 1: return <Screen2_Role role={role} onSelect={setRole} onNext={() => go(2)} />;
      case 2: return <Screen3_Profile {...screenProps} activeTab={activeTab} onNext={() => go(3)} />;
      case 3: return <Screen4_Dashboard {...screenProps} activeTab={activeTab} onOpenMatch={() => go(4)} />;
      case 4: return <Screen5_Match {...screenProps} activeTab={activeTab} onNext={() => go(5)} />;
      case 5: return <Screen6_Reveal role={role} onNext={() => go(6)} />;
      case 6: return <Screen7_Deal role={role} activeTab={activeTab} onRestart={restart} />;
      default: return null;
    }
  })();

  const hdr = HEADERS[screen];
  const title = typeof hdr.title === 'function' ? hdr.title(role) : hdr.title;
  const sub   = typeof hdr.sub   === 'function' ? hdr.sub(role)   : hdr.sub;

  return (
    <div className="mf-viewport">
      <div className="mf-window-wrap">
        <ChromeWindow
          tabs={[
            { title: 'MarketForge — Digital Twin' },
            { title: 'Cosolvent · matching console' },
            { title: 'KnowledgeSlot editor' },
            { title: 'IAQG OASIS · AS9100 registry' },
          ]}
          activeIndex={0}
          url={`https://twin.marketforge.sim/w/ardent/${SCREEN_KEYS[screen]}?sid=SIM-4F82A`}
          width="100%"
          height={940}
        >
          <div className={`mf-app ${tweaks.showGrid ? 'mf-grid-bg' : ''}`}
            style={{ fontSize: `${densityPad}em` }}
            onClick={() => { if (notifOpen) setNotifOpen(false); }}
            data-screen-label={`${String(screen + 1).padStart(2, '0')} ${typeof title === 'string' ? title : 'Screen'}`}
          >
            <TopBar role={role} screen={screen} user={user} notifOpen={notifOpen} setNotifOpen={setNotifOpen} />

            <Sidebar screen={screen} onGo={go} role={role} user={user} onSwitchRole={switchRole} onLogout={logout} />

            <main className="mf-main">
              {/* Header */}
              <div className="mf-main-head">
                <div className="row1">
                  <div>
                    <div className="mono-lbl" style={{ marginBottom: 6, color: 'var(--accent)' }}>
                      § {String(screen + 1).padStart(2, '0')} · {SCREEN_KEYS[screen].toUpperCase()}
                    </div>
                    <h1>{title}</h1>
                    <div className="sub">{sub}</div>
                  </div>
                  <div className="actions">
                    {screen === 2 && (
                      <>
                        <button className="mf-btn sm ghost">Export profile</button>
                        <button className="mf-btn sm">View public twin</button>
                      </>
                    )}
                    {screen === 3 && (
                      <>
                        <button className="mf-btn sm ghost">Filters</button>
                        <button className="mf-btn sm ghost">Re-run match</button>
                        <button className="mf-btn sm primary">Open top match →</button>
                      </>
                    )}
                    {screen === 4 && (
                      <>
                        <button className="mf-btn sm ghost">Download report (PDF)</button>
                        <button className="mf-btn sm ghost">Share internally</button>
                        <button className="mf-btn sm primary">Request reveal →</button>
                      </>
                    )}
                    {screen === 6 && (
                      <>
                        <button className="mf-btn sm ghost">Redline</button>
                        <button className="mf-btn sm ghost">Download</button>
                        <button className="mf-btn sm primary">Countersign</button>
                      </>
                    )}
                  </div>
                </div>

                {hdr.tabs && <Tabs tabs={hdr.tabs} active={activeTab} onChange={setTab} />}
              </div>

              {/* Screen body */}
              <div className="mf-screen" key={`${screen}-${activeTab}`}>
                {currentScreen}
              </div>

              {/* Footer status bar */}
              <div className="mf-foot">
                <span className="dot" />
                <span>TWIN LIVE</span>
                <span className="sep">|</span>
                <span>SIM-4F82A</span>
                <span className="sep">|</span>
                <span>{PROFILES[role].callsign} · {user.name}</span>
                <span className="sep">|</span>
                <span>12,478 entities</span>
                <span className="sep">|</span>
                <span>Δ 342</span>
                <span className="spacer" />
                <span className="shortcut"><span className="kbd">←</span><span className="kbd">→</span> navigate</span>
                <span className="sep">|</span>
                <span className="shortcut"><span className="kbd">1</span>–<span className="kbd">7</span> jump</span>
                <span className="sep">|</span>
                <span className="shortcut"><span className="kbd">⌘K</span> search</span>
                <span className="sep">|</span>
                <span onClick={restart} style={{ cursor:'pointer' }}>↺ restart</span>
              </div>
            </main>

            {notifOpen && <NotifPopover onClose={() => setNotifOpen(false)} />}
          </div>
        </ChromeWindow>
      </div>

      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={tweaksVisible} onClose={() => setTweaksVisible(false)} />
    </div>
  );
}

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