// app.jsx — Atlas main shell

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "density": "regular",
  "accent": "#1e63ff",
  "typePair": "editorial",
  "novelViz": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ['#1e63ff', '#0a0a0a', '#0091ff', '#0c4dd1'];
const TYPE_PAIRS = [
  { v: 'editorial', l: 'Editorial · Instrument + Geist' },
  { v: 'technical', l: 'Technical · Geist Mono · Geist' },
];

const NAV = [
  { id: 'adoption',    n: '01', label: 'Adoption',           sub: 'executive overview' },
  { id: 'workflows',   n: '02', label: 'Workflow intel.',    sub: 'sequence patterns' },
  { id: 'tools',       n: '03', label: 'Tool effectiveness', sub: 'comparison engine' },
  { id: 'efficiency',  n: '04', label: 'Efficiency & ROI',   sub: 'composite KPI' },
];

function Sidebar({ active, onNav }) {
  return (
    <aside className="sb">
      <div className="sb-brand">
        <span className="mark">Atlas</span>
        <span className="sb-tagline">v0.4 · pilot</span>
      </div>
      <div className="sb-section">Intelligence</div>
      {NAV.map(item => (
        <div key={item.id} className="sb-item" data-active={active === item.id ? 'true' : undefined} onClick={() => onNav(item.id)}>
          <div>
            <div>{item.label}</div>
            <div className="mono" style={{fontSize:10.5, color:'var(--ink-4)', letterSpacing:'.04em', marginTop:2}}>{item.sub}</div>
          </div>
          <span className="num">{item.n}</span>
        </div>
      ))}
      <div className="sb-section" style={{marginTop:18}}>Governance</div>
      {[
        { l: 'Audit log',       n: 'L1' },
        { l: 'Approved models', n: 'L2' },
        { l: 'Shadow AI',       n: 'L3' },
        { l: 'Policy',          n: 'L4' },
      ].map(it => (
        <div key={it.l} className="sb-item">
          <span style={{color:'var(--ink-3)'}}>{it.l}</span>
          <span className="num">{it.n}</span>
        </div>
      ))}
      <div className="sb-foot">
        <span><span className="dot" />all sources live</span>
        <span>SG</span>
      </div>
    </aside>
  );
}

function TopBar({ active, range, setRange, segment, setSegment }) {
  const item = NAV.find(n => n.id === active) || NAV[0];
  return (
    <div className="tb">
      <div className="tb-l">
        <div className="tb-crumbs">
          <span>Atlas</span>
          <span className="sep">/</span>
          <span>Intelligence</span>
          <span className="sep">/</span>
          <span style={{color:'var(--ink)'}}>{item.label}</span>
        </div>
      </div>
      <div className="tb-r">
        <span className="note" style={{marginRight:8}}>cohort</span>
        <Seg value={segment} options={[
          {v:'org', l:'Org'},
          {v:'eng', l:'Engineering'},
          {v:'apac',l:'APAC'},
        ]} onChange={setSegment} />
        <span className="note" style={{margin:'0 4px 0 12px'}}>range</span>
        <Seg value={range} options={[
          {v:'7d', l:'7d'},
          {v:'30d',l:'30d'},
          {v:'90d',l:'90d'},
          {v:'ytd',l:'YTD'},
        ]} onChange={setRange} />
        <button className="chip" style={{marginLeft:8}}>Export <span className="k">⌘E</span></button>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState('adoption');
  const [range, setRange] = React.useState('30d');
  const [segment, setSegment] = React.useState('org');

  // Apply tokens
  React.useEffect(() => {
    const root = document.documentElement;
    root.dataset.theme = t.dark ? 'dark' : 'light';
    root.dataset.density = t.density;
    root.style.setProperty('--accent', t.accent);
    // recompute soft / line variants from accent (simple approach: hex w/ opacity)
    const hex = t.accent.replace('#','');
    const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16);
    root.style.setProperty('--accent-soft', `rgba(${r},${g},${b},0.10)`);
    root.style.setProperty('--accent-line', `rgba(${r},${g},${b},0.35)`);
    if (t.typePair === 'technical') {
      root.style.setProperty('--serif', '"Geist Mono", ui-monospace, monospace');
    } else {
      root.style.setProperty('--serif', '"Instrument Serif", "Iowan Old Style", "Palatino", Georgia, serif');
    }
  }, [t]);

  const Screens = {
    adoption: ScreenAdoption,
    workflows: ScreenWorkflows,
    tools: ScreenTools,
    efficiency: ScreenEfficiency,
  };
  const Screen = Screens[active] || ScreenAdoption;

  return (
    <div className="app" data-screen-label={`0${NAV.findIndex(n=>n.id===active)+1} ${NAV.find(n=>n.id===active).label}`}>
      <Sidebar active={active} onNav={setActive} />
      <main>
        <TopBar active={active} range={range} setRange={setRange} segment={segment} setSegment={setSegment} />
        <Screen filters={{ range, segment }} />
      </main>

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={t.dark} onChange={v => setTweak('dark', v)} />
        <TweakColor label="Accent" value={t.accent} options={ACCENT_OPTIONS} onChange={v => setTweak('accent', v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density} options={['compact','regular','comfortable']} onChange={v => setTweak('density', v)} />
        <TweakSection label="Type" />
        <TweakSelect label="Pair" value={t.typePair} options={TYPE_PAIRS.map(p => ({value:p.v, label:p.l}))} onChange={v => setTweak('typePair', v)} />
        <TweakSection label="Workflow viz" />
        <TweakToggle label="Novel strands" value={t.novelViz} onChange={v => setTweak('novelViz', v)} />
      </TweaksPanel>
    </div>
  );
}

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