// Main app — Franchise HQ console with page routing

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryRole": "Franchise HQ",
  "density": "comfortable",
  "showRevenueBreakdown": true,
  "showTopProducts": true,
  "showTopServices": true,
  "showMarketing": true
}/*EDITMODE-END*/;

// Network Dashboard — the original page, extracted
const DashboardPage = ({ t, period, setPeriod, locationFilter, setOpenLoc, onOpenCasl }) => {
  const { KPIS_BY_PERIOD, LOCATIONS, ALERTS, MARKETING, REVENUE_BREAKDOWN } = window.FRANCHISE_DATA;
  const k = KPIS_BY_PERIOD[period];
  return (
    <div className="page">
      <PageHeader period={period} setPeriod={setPeriod}/>
      <HeroKpiStrip k={k} period={period}/>
      <AlertRow alerts={ALERTS} onOpenCasl={onOpenCasl}/>
      <Leaderboard locations={LOCATIONS} onOpen={setOpenLoc} locationFilter={locationFilter}/>
      <div className="three-grid">
        {t.showRevenueBreakdown && <RevenueBreakdown data={REVENUE_BREAKDOWN}/>}
        {t.showTopServices && <TopServicesCard/>}
        {t.showTopProducts && <TopProductsCard/>}
      </div>
      {t.showMarketing && <div style={{ marginTop: 16 }}><Marketing campaigns={MARKETING}/></div>}
    </div>
  );
};

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('dashboard');
  const [period, setPeriod] = React.useState('T');
  const [locationFilter, setLocationFilter] = React.useState('all');
  const [openLoc, setOpenLoc] = React.useState(null);
  const [caslOpen, setCaslOpen] = React.useState(false);

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

  // Demo wiring: hero CTA, notifications and global search dispatch these events
  React.useEffect(() => {
    const onNav = (e) => setPage(e.detail);
    const onLoc = (e) => { const l = window.FRANCHISE_DATA.LOCATIONS.find(x => x.id === e.detail); if (l) setOpenLoc(l); };
    const onCaslEvt = () => setCaslOpen(true);
    window.addEventListener('hb:nav', onNav);
    window.addEventListener('hb:openloc', onLoc);
    window.addEventListener('hb:casl', onCaslEvt);
    return () => {
      window.removeEventListener('hb:nav', onNav);
      window.removeEventListener('hb:openloc', onLoc);
      window.removeEventListener('hb:casl', onCaslEvt);
    };
  }, []);

  const { LOCATIONS } = window.FRANCHISE_DATA;
  const onOpenCasl = () => setCaslOpen(true);

  const PAGES = {
    dashboard:   () => <DashboardPage t={t} period={period} setPeriod={setPeriod} locationFilter={locationFilter} setOpenLoc={setOpenLoc} onOpenCasl={onOpenCasl}/>,
    actions:     () => <ActionsPage onOpenLoc={setOpenLoc} onOpenCasl={onOpenCasl}/>,
    catalog:     () => <CatalogPage onOpenLoc={setOpenLoc}/>,
    marketing:   () => <MarketingPage onOpenLoc={setOpenLoc}/>,
    franchisees: () => <FranchiseesPage onOpenLoc={setOpenLoc} onOpenCasl={onOpenCasl}/>,
    customers:   () => <CustomersPage/>,
    reports:     () => <ReportsPage/>,
    team:        () => <TeamPage/>,
    ai:          () => <AIPage onOpenLoc={setOpenLoc} onOpenCasl={onOpenCasl}/>,
    settings:    () => <SettingsPage/>,
  };
  const renderPage = PAGES[page] || PAGES.dashboard;

  return (
    <div className="app" data-density={t.density}>
      <Sidebar page={page} onNav={setPage}/>
      <main className="main">
        <TopBar page={page} role={t.primaryRole} locationFilter={locationFilter} setLocationFilter={setLocationFilter} locations={LOCATIONS}/>
        {renderPage()}
      </main>

      <LocationDetail location={openLoc} onClose={() => setOpenLoc(null)} onOpenCasl={onOpenCasl}/>
      <CaslIncident open={caslOpen} onClose={() => setCaslOpen(false)}/>

      <TweaksPanel>
        <TweakSection label="Role"/>
        <TweakRadio label="Viewer" value={t.primaryRole} options={['Franchise HQ', 'Regional', 'Operator']} onChange={(v) => setTweak('primaryRole', v)}/>
        <TweakSection label="Jump to page"/>
        <TweakSelect label="Page" value={page} options={['dashboard','actions','catalog','marketing','franchisees','customers','reports','team','ai','settings']} onChange={(v) => setPage(v)}/>
        <TweakSection label="Dashboard modules"/>
        <TweakToggle label="Revenue breakdown" value={t.showRevenueBreakdown} onChange={(v) => setTweak('showRevenueBreakdown', v)}/>
        <TweakToggle label="Top services"       value={t.showTopServices}      onChange={(v) => setTweak('showTopServices', v)}/>
        <TweakToggle label="Top products"       value={t.showTopProducts}      onChange={(v) => setTweak('showTopProducts', v)}/>
        <TweakToggle label="Marketing"          value={t.showMarketing}        onChange={(v) => setTweak('showMarketing', v)}/>
        <TweakSection label="Layout"/>
        <TweakRadio label="Density" value={t.density} options={['compact','comfortable']} onChange={(v) => setTweak('density', v)}/>
        <TweakSection label="Try"/>
        <TweakButton label="Open CASL-flagged shop"  onClick={() => setOpenLoc(window.FRANCHISE_DATA.LOCATIONS.find(l => l.flags))}/>
        <TweakButton label="Open CASL incident"      onClick={() => setCaslOpen(true)}/>
      </TweaksPanel>
    </div>
  );
};

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