// app.jsx — Main App with simple in-page routing

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "forest",
  "density": "regular",
  "typeMix": "mixed",
  "avatarStyle": "monogram",
  "dark": false
}/*EDITMODE-END*/;

const PALETTES = {
  forest:   { accent: '#1F3A36', accent2: '#2A5048', tint: '#DDE3DC' },
  burgundy: { accent: '#6E2A2A', accent2: '#893838', tint: '#E8D8D2' },
  graphite: { accent: '#2A2A2A', accent2: '#3D3D3D', tint: '#DDDDD6' },
  ochre:    { accent: '#8A6B2A', accent2: '#A6843A', tint: '#EFE2BE' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(parseRoute());
  const [routeArg, setRouteArg] = React.useState(parseArg());

  // navigate helper
  function navigate(r, arg) {
    const newArg = arg && arg.id ? arg.id : null;
    setRoute(r);
    setRouteArg(newArg);
    const hash = newArg ? `${r}/${newArg}` : r;
    window.history.replaceState({}, '', `#${hash}`);
    window.scrollTo(0, 0);
  }

  function parseRoute() {
    const h = (window.location.hash || '').replace('#', '');
    if (!h) return 'landing';
    return h.split('/')[0] || 'landing';
  }
  function parseArg() {
    const h = (window.location.hash || '').replace('#', '');
    const parts = h.split('/');
    return parts[1] || null;
  }

  // Apply tweaks to root
  React.useEffect(() => {
    const root = document.documentElement;
    const p = PALETTES[t.palette] || PALETTES.forest;
    root.style.setProperty('--forest', p.accent);
    root.style.setProperty('--forest-2', p.accent2);
    root.style.setProperty('--forest-tint', p.tint);
    root.setAttribute('data-density', t.density);
    root.setAttribute('data-mode', t.dark ? 'dark' : 'light');
  }, [t.palette, t.density, t.dark]);

  return (
    <div>
      <Header route={route} navigate={navigate} />

      <div data-screen-label={routeLabel(route)}>
        {route === 'landing' && <Landing navigate={navigate} />}
        {route === 'catalog' && <Catalog navigate={navigate} />}
        {route === 'dossier' && <Dossier navigate={navigate} agentId={routeArg || 'jurist'} />}
        {route === 'chat' && <ChatScreen navigate={navigate} agentId={routeArg || 'jurist'} />}
        {route === 'pricing' && <Pricing navigate={navigate} />}
      </div>

      {route !== 'chat' && <Footer />}

      <TweaksPanel>
        <TweakSection label="Палитра" />
        <TweakColor
          label="Акцент"
          value={(PALETTES[t.palette] || PALETTES.forest).accent}
          options={Object.values(PALETTES).map((p) => p.accent)}
          onChange={(v) => {
            const found = Object.entries(PALETTES).find(([k, p]) => p.accent === v);
            if (found) setTweak('palette', found[0]);
          }}
        />
        <TweakToggle
          label="Тёмная тема"
          value={t.dark}
          onChange={(v) => setTweak('dark', v)}
        />

        <TweakSection label="Композиция" />
        <TweakRadio
          label="Плотность"
          value={t.density}
          options={['regular', 'compact']}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Навигация" />
        <TweakButton label="К лендингу" onClick={() => navigate('landing')} />
        <TweakButton label="Картотека" onClick={() => navigate('catalog')} />
        <TweakButton label="Досье № 01" onClick={() => navigate('dossier', { id: 'jurist' })} />
        <TweakButton label="Кабинет" onClick={() => navigate('chat')} />
        <TweakButton label="Условия" onClick={() => navigate('pricing')} />
      </TweaksPanel>
    </div>
  );
}

function routeLabel(r) {
  const labels = {
    landing: '01 Лендинг',
    catalog: '02 Картотека',
    dossier: '03 Досье агента',
    chat: '04 Кабинет / Чат',
    pricing: '05 Условия найма',
  };
  return labels[r] || r;
}

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