// app.jsx — root composition

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#8B5A3C",
  "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 [customStart, setCustomStart] = React.useState(null);
  const [customEnd, setCustomEnd]     = React.useState(null);
  const [granularity, setGranularity] = React.useState('daily');

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

  const ctx = { range, granularity, customStart, customEnd };
  const Tab = { overview: OverviewTab, meta: MetaTab, google: GoogleTab, creative: CreativeTab }[tab];

  const setRangeOrCustom = (id, start, end) => {
    if (id === 'custom') {
      setCustomStart(start); setCustomEnd(end); setRange('custom');
    } else {
      setRange(id); setCustomStart(null); setCustomEnd(null);
    }
  };

  return (
    <div className="app">
      <Sidebar active={tab} onChange={setTab}/>
      <div className="main" data-screen-label={tab}>
        <Topbar tab={tab} range={range} setRange={setRangeOrCustom}
                customStart={customStart} customEnd={customEnd} ctx={ctx}/>
        <TabBar granularity={granularity} setGranularity={setGranularity}/>
        <Tab ctx={ctx}/>
      </div>
      <TweaksPanel>
        <TweakSection label="Theme"/>
        <TweakColor label="Accent color" value={t.accent} onChange={(v) => setTweak('accent', v)}/>
        <TweakSection label="Display"/>
        <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(() => {
    SriSriData.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 Sri Sri Plywoods data…</div>;
  return <App/>;
}

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