// Main app shell

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

const readSession = () => {
  try {
    const raw = localStorage.getItem('yumyum-admin-session') || sessionStorage.getItem('yumyum-admin-session');
    return raw ? JSON.parse(raw) : null;
  } catch { return null; }
};

const App = () => {
  const [session, setSession] = React.useState(readSession);
  const [route, setRoute] = React.useState('dashboard');
  const [t, setTweak] = (window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]))(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
  }, [t.theme]);

  const logout = () => {
    localStorage.removeItem('yumyum-admin-session');
    sessionStorage.removeItem('yumyum-admin-session');
    setSession(null);
  };

  if (!session) {
    return <Login onLogin={setSession}/>;
  }

  const Page = {
    dashboard: Dashboard,
    businesses: Businesses,
    stores: Stores,
    approvals: Approvals,
    orders: Orders,
    settlements: Settlements,
    members: Members,
    reviews: Reviews,
    admins: Admins,
    'svc-categories': ServiceCategories,
    'svc-banners': ServiceBanners,
    'svc-policies': ServicePolicies,
  }[route] || Dashboard;

  const Tweaks = window.TweaksPanel ? (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Theme">
        <window.TweakRadio label="Theme" value={t.theme} options={[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]} onChange={v => setTweak('theme', v)}/>
      </window.TweakSection>
    </window.TweaksPanel>
  ) : null;

  return (
    <div className="app">
      <Sidebar route={route} setRoute={setRoute}/>
      <main className="main">
        <Topbar route={route} session={session} onLogout={logout}/>
        <Page/>
      </main>
      {Tweaks}
    </div>
  );
};

// helpers
function hexToRgb(h) {
  h = h.replace('#','');
  if (h.length === 3) h = h.split('').map(c => c+c).join('');
  const n = parseInt(h, 16);
  return [(n>>16)&255, (n>>8)&255, n&255];
}
function rgbToHex(r,g,b) { return '#' + [r,g,b].map(v => Math.max(0,Math.min(255,Math.round(v))).toString(16).padStart(2,'0')).join(''); }
function shade(hex, pct) {
  const [r,g,b] = hexToRgb(hex);
  const f = (1 + pct/100);
  return rgbToHex(r*f, g*f, b*f);
}
function tint(hex, amt) {
  const [r,g,b] = hexToRgb(hex);
  return rgbToHex(r + (255-r)*amt, g + (255-g)*amt, b + (255-b)*amt);
}

// helpers no longer needed but kept for potential future tweaks
function noop(){}

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