// app.jsx — Root composition

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#5B5BF0",
  "dark": false,
  "density": "balanced",
  "showAI": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tab, setTab] = React.useState('overview');
  const [range, setRange] = React.useState('30d');
  const [granularity, setGranularity] = React.useState('daily');
  const [country, setCountry] = React.useState('all');
  const [compare, setCompare] = React.useState('prev');

  // Reset granularity if incompatible with range
  React.useEffect(() => {
    const ok = SilsalData.RANGES[range].buckets[granularity] > 1;
    if (!ok) {
      const fallback = ['daily','weekly','monthly','quarterly'].find(g => SilsalData.RANGES[range].buckets[g] > 1) || 'daily';
      setGranularity(fallback);
    }
  }, [range]);

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

  const ctx = { range, granularity, country, compare };
  const Tab = { overview: OverviewTab, meta: MetaTab, google: GoogleTab, seo: SeoTab, funnel: FunnelTab }[tab];

  return (
    <div className="app">
      <Sidebar active={tab} onChange={setTab}/>
      <div className="main" data-screen-label={tab}>
        <Topbar tab={tab} range={range} setRange={setRange} country={country} setCountry={setCountry} granularity={granularity} setGranularity={setGranularity}/>
        <TabBar tab={tab} onChange={setTab} granularity={granularity} setGranularity={setGranularity} compare={compare} setCompare={setCompare}/>
        <Tab ctx={ctx}/>
      </div>

      <TweaksPanel>
        <TweakSection label="Theme"/>
        <TweakColor label="Accent color" value={t.accent} onChange={(v) => setTweak('accent', v)}/>
        <TweakSection label="Display"/>
        <TweakToggle label="Show AI banner" value={t.showAI} onChange={(v) => setTweak('showAI', v)}/>
        <TweakRadio label="Density" value={t.density} options={['compact','balanced','spacious']} onChange={(v) => setTweak('density', v)}/>
      </TweaksPanel>
    </div>
  );
}

function Boot() {
  const [loaded, setLoaded] = React.useState(false);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    SilsalData.loadReal()
      .then(() => setLoaded(true))
      .catch(e => setError(String(e)));
  }, []);
  if (error) return <div style={{ padding: 40, color: '#ff8b8b' }}>Failed to load data.json — {error}<br/><br/>Run <code>python3 pull_data.py</code> in the dashboard folder.</div>;
  if (!loaded) return <div style={{ padding: 40, color: '#7e7896' }}>Loading Silsal data…</div>;
  return <App/>;
}

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