// === Main app shell ===

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "density": "comfy",
  "accent": "navy",
  "showAlerts": true
}/*EDITMODE-END*/;

const App = () => {
  const [view, setView] = React.useState({ kind: 'portfolio' });
  const [activeBrand, setActiveBrand] = React.useState(null);
  const [activeVerticalId, setActiveVerticalId] = React.useState(null);
  const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { tweaks: TWEAK_DEFAULTS, setTweak: () => {} };
  const [theme, setTheme] = React.useState('light');

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

  // Open a brand
  const openBrand = (brand) => {
    setActiveBrand(brand);
    const verts = window.VERTICALS[brand.id] || window.VERTICALS_DEFAULT;
    setActiveVerticalId(verts[0].id);
    setView({ kind: 'brand' });
  };

  const openCompetitor = (competitor) => {
    setView({ kind: 'competitor', competitor });
  };

  const goPortfolio = () => {
    setView({ kind: 'portfolio' });
    setActiveBrand(null);
  };

  const goBrand = () => {
    setView({ kind: 'brand' });
  };

  // Crumbs
  const crumbs = [{ label: 'Bloxx', onClick: goPortfolio }];
  if (view.kind === 'portfolio') crumbs.push({ label: 'Portfolio' });
  if (view.kind === 'explorer') crumbs.push({ label: 'Relationship Explorer' });
  if (view.kind === 'workspace') crumbs.push({ label: 'Workspaces' });
  if (activeBrand && view.kind !== 'portfolio') {
    crumbs.push({ label: activeBrand.name, onClick: view.kind !== 'brand' ? goBrand : undefined });
  }
  if (view.kind === 'brand' && activeBrand) {
    const v = (window.VERTICALS[activeBrand.id] || window.VERTICALS_DEFAULT).find(v => v.id === activeVerticalId);
    if (v) crumbs.push({ label: v.name });
  }
  if (view.kind === 'competitor') {
    crumbs.push({ label: view.competitor.name });
  }

  // Verticals for current brand
  const verticals = activeBrand ? (window.VERTICALS[activeBrand.id] || window.VERTICALS_DEFAULT) : null;
  const activeVertical = verticals ? verticals.find(v => v.id === activeVerticalId) : null;

  return (
    <div className="app">
      <Sidebar
        activeBrand={activeBrand}
        setActiveBrand={openBrand}
        onPortfolio={goPortfolio}
        onExplorer={() => setView({ kind: 'explorer' })}
        onWorkspace={() => setView({ kind: 'workspace' })}
        viewKind={view.kind}
      />
      <main className="main">
        <Topbar crumbs={crumbs} theme={theme} setTheme={setTheme}/>
        {view.kind === 'brand' && verticals && (
          <VerticalTabs verticals={verticals} active={activeVerticalId} setActive={setActiveVerticalId}/>
        )}
        {view.kind === 'portfolio' && <PortfolioPage onOpenBrand={openBrand}/>}
        {view.kind === 'brand' && activeBrand && activeVertical && (
          <BrandPage brand={activeBrand} vertical={activeVertical} onOpenCompetitor={openCompetitor}/>
        )}
        {view.kind === 'competitor' && (
          <CompetitorPage competitor={view.competitor} onBack={goBrand}/>
        )}
        {view.kind === 'explorer' && (
          <ExplorerPage onOpenCompetitor={openCompetitor}/>
        )}
        {view.kind === 'workspace' && (
          <WorkspacePage/>
        )}
      </main>

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Display">
            <window.TweakRadio
              label="Theme"
              value={theme}
              onChange={(v) => setTheme(v)}
              options={[{value: 'light', label: 'Light'}, {value: 'dark', label: 'Dark'}]}
            />
          </window.TweakSection>
          <window.TweakSection title="Quick jump">
            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6}}>
              <window.TweakButton onClick={goPortfolio}>Portfolio</window.TweakButton>
              <window.TweakButton onClick={() => openBrand(window.BRANDS[0])}>Admiral · Car</window.TweakButton>
              <window.TweakButton onClick={() => openCompetitor(window.COMPETITORS[0])}>Direct Line</window.TweakButton>
              <window.TweakButton onClick={() => openBrand(window.BRANDS[5])}>Bell</window.TweakButton>
              <window.TweakButton onClick={() => setView({ kind: 'explorer' })}>Explorer</window.TweakButton>
              <window.TweakButton onClick={() => setView({ kind: 'workspace' })}>Workspaces</window.TweakButton>
            </div>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
};

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