// ==========================================================================
// App — top-level shell, store provider, route dispatcher.
// ==========================================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "inku"
}/*EDITMODE-END*/;

function AppInner() {
  const { route } = useStore();
  // Briefings is a full-page management surface (Contra-style). Two
  // sub-routes: list at /briefings, detail page at /briefings/<id>.
  // The chat sidebar is suppressed across both.
  if (route.name === 'briefings') {
    return (
      <div style={{ height: '100vh', position: 'relative', zIndex: 1, overflow: 'hidden', display: 'flex' }}>
        {route.briefingId ? <BriefingDetailRoute /> : <BriefingsView />}
      </div>
    );
  }
  const main = route.name === 'agents' ? <AgentsView /> : <ThreadView />;
  return (
    <div style={{ display: 'flex', height: '100vh', position: 'relative', zIndex: 1 }}>
      <LeftRail />
      {main}
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    // Stored "sage" from before rebrand maps to the new "inku" default.
    const palette = tweaks.palette === 'sage' ? 'inku' : (tweaks.palette || 'inku');
    document.documentElement.setAttribute('data-palette', palette);
  }, [tweaks.palette]);

  return (
    <StoreProvider>
      <div className="stage" />
      <AppInner />
      <Toast />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakRadio label="Mood" value={tweaks.palette === 'sage' ? 'inku' : (tweaks.palette || 'inku')} onChange={(v) => setTweak('palette', v)}
            options={[
              { value: 'inku', label: 'Inku' },
              { value: 'neutral', label: 'Neutral' },
              { value: 'inky', label: 'Inky' },
            ]} />
        </TweakSection>
        <TweakSection label="Reset">
          <TweakButton label="Clear local data" onClick={() => {
            if (confirm('Clear all local threads, messages, artifacts, and agents?')) {
              Object.keys(localStorage).filter(k => k.startsWith('inku.')).forEach(k => localStorage.removeItem(k));
              window.location.hash = '#/';
              window.location.reload();
            }
          }} />
        </TweakSection>
      </TweaksPanel>
    </StoreProvider>
  );
}

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