// Root app — owns route, vertical, persona, tweaks state.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 268,
  "density": "regular",
  "showWizardOnLoad": false,
  "verticalPack": "procurement",
  "persona": "analyst"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState('home');
  const [wizardOpen, setWizardOpen] = React.useState(t.showWizardOnLoad);

  // Apply accent hue
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', `oklch(0.52 0.15 ${t.accentHue})`);
    root.style.setProperty('--accent-soft', `oklch(0.96 0.025 ${t.accentHue})`);
    root.style.setProperty('--accent-ink', `oklch(0.42 0.16 ${t.accentHue})`);
  }, [t.accentHue]);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-density', t.density);
  }, [t.density]);

  const openWizard = () => setWizardOpen(true);
  const closeWizard = () => setWizardOpen(false);

  return (
    <div style={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
      <Sidebar
        route={route} setRoute={setRoute}
        persona={t.persona} setPersona={(p) => setTweak('persona', p)}
        vertical={t.verticalPack} setVertical={(v) => setTweak('verticalPack', v)}
        onNewConn={openWizard}
      />
      <main style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <TopBar vertical={t.verticalPack} route={route} />
        <div style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>
          {route === 'home' &&
            <ScreenHome key={t.verticalPack + t.persona}
              vertical={t.verticalPack} persona={t.persona}
              setRoute={setRoute} openWizard={openWizard} />}
          {route === 'chat' &&
            <ScreenChat key={t.verticalPack} vertical={t.verticalPack} />}
          {route === 'integrations' &&
            <ScreenMarketplace openWizard={openWizard} />}
          {route === 'sso' && <ScreenSSO />}
        </div>
      </main>

      {wizardOpen && <ScreenWizard onClose={closeWizard} />}

      <TweaksPanel title="NalarX tweaks">
        <TweakSection label="Workspace" />
        <TweakSelect label="Vertical" value={t.verticalPack}
          options={[
            { value: 'procurement', label: 'Procurement' },
            { value: 'fraud', label: 'Fraud detection' },
            { value: 'compliance', label: 'Compliance & audit' },
            { value: 'hr', label: 'People ops' },
          ]}
          onChange={(v) => setTweak('verticalPack', v)} />
        <TweakRadio label="Persona" value={t.persona}
          options={['analyst', 'admin']}
          onChange={(v) => setTweak('persona', v)} />

        <TweakSection label="Look & feel" />
        <TweakSlider label="Accent hue" value={t.accentHue}
          min={0} max={360} step={1} unit="°"
          onChange={(v) => setTweak('accentHue', v)} />
        <TweakRadio label="Density" value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Demo" />
        <TweakButton label="Open setup wizard" onClick={openWizard} />
      </TweaksPanel>
    </div>
  );
}

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