const TWEAK_DEFAULTS = { accent: '#D4532A', showRecommendations: true, sector: 'burger' };


function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState('home');
  const [settings, setSettings] = React.useState({});
  const [sectors, setSectors] = React.useState([]);
  const [sectorId, setSectorId] = React.useState(t.sector || 'burger');
  const [selections, setSelections] = React.useState({});
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    Promise.all([api.get('/api/settings'), api.get('/api/sectors')])
      .then(([s, sec]) => {
        setSettings(s);
        setSectors(sec);
        if (s.accent) setTweak('accent', s.accent);
        if (sec.length && !sec.find(x => x.id === sectorId)) setSectorId(sec[0].id);
        setReady(true);
      });
  }, []);

  React.useEffect(() => {
    const accent = settings.accent || t.accent;
    document.documentElement.style.setProperty('--accent', accent);
  }, [t.accent, settings.accent]);

  React.useEffect(() => {
    const handler = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'a') {
        e.preventDefault();
        setRoute('admin');
      }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

  const chooseSector = (id) => {
    setSectorId(id);
    setTweak('sector', id);
    setRoute('builder');
  };

  if (!ready) return <PageLoading />;

  return (
    <>
      {route === 'home' && (
        <Homepage onSelect={chooseSector} accent={t.accent} onAdmin={() => setRoute('admin')} sectors={sectors} settings={settings} />
      )}
      {route === 'builder' && (
        <Builder
          key={sectorId}
          sectorId={sectorId}
          sectors={sectors}
          initialSelections={selections}
          onBack={() => setRoute('home')}
          onFinish={(sels) => { setSelections(sels); setRoute('proforma'); }}
          accent={t.accent}
          showRecs={t.showRecommendations}
        />
      )}
      {route === 'proforma' && (
        <Proforma
          sectorId={sectorId}
          sectors={sectors}
          selections={selections}
          onBack={() => setRoute('home')}
          onEdit={() => setRoute('builder')}
          accent={t.accent}
          settings={settings}
        />
      )}
      {route === 'admin' && (
        <AdminAuthGate onExit={() => setRoute('home')}>
          <Admin onExit={() => setRoute('home')} sectors={sectors} settings={settings} setSettings={setSettings} />
        </AdminAuthGate>
      )}

      {route !== 'admin' && <WhatsAppLauncher accent={t.accent} settings={settings} />}
    </>
  );
}

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