// Top-level App shell: wires the store + tweaks + active page + global modals.
// Reads window.TWEAK_DEFAULTS (defined inline in index.html so the host's
// EDITMODE-BEGIN/END markers can be rewritten there).
function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const store = useStore();
  const [page, setPage] = React.useState({ name: 'overview' });
  const [modal, setModal] = React.useState(null); // { type: 'addTxn', initial? } | { type: 'txn', txn }

  // Apply theme
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.dark ? 'dark' : 'light');
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-hover', t.accent);
  }, [t.dark, t.accent]);

  React.useEffect(() => {
    document.body.style.fontSize = t.density === 'compact' ? '13px' : t.density === 'comfy' ? '15px' : '14px';
  }, [t.density]);

  // Scroll to top on page change
  const mainRef = React.useRef(null);
  React.useEffect(() => {
    if (mainRef.current) mainRef.current.scrollTop = 0;
    else window.scrollTo(0, 0);
  }, [page]);

  const onOpenTxn = (txn) => setModal({ type: 'txn', txn });
  const onAddTxn = (initial) => setModal({ type: 'addTxn', initial });

  if (store.loading) {
    return <div style={{ padding: 40, fontFamily: 'Inter, sans-serif', color: '#888' }}>Loading…</div>;
  }

  let content;
  if (page.name === 'overview') content = <OverviewPage store={store} onOpenTxn={onOpenTxn} onAddTxn={onAddTxn} onNav={setPage}/>;
  else if (page.name === 'pnl') content = <PnlPage store={store}/>;
  else if (page.name === 'transactions') content = <TransactionsPage store={store} onOpenTxn={onOpenTxn} onAddTxn={onAddTxn}/>;
  else if (page.name === 'needs-review') content = <NeedsReviewPage store={store}/>;
  else if (page.name === 'house') content = <HousePage store={store} houseId={page.houseId} onOpenTxn={onOpenTxn} onAddTxn={onAddTxn}/>;
  else if (page.name === 'connections') content = <ConnectionsPage store={store}/>;
  else if (page.name === 'cleaners') content = <CleanerPortalPage store={store} onNav={setPage}/>;
  else if (page.name === 'portal-settings') content = <PortalSettingsPage store={store} onNav={setPage}/>;
  else if (page.name === 'settings') content = <SettingsPage store={store}/>;
  else content = <div style={{ padding: 40 }}>Not found</div>;

  const houseForTxn = modal?.txn ? store.houses.find(h => h.id === modal.txn.houseId) : null;

  return (
    <div className="app" data-screen-label={`STR · ${page.name}`}>
      <Sidebar
        page={page}
        onNav={setPage}
        houses={store.houses}
        needsReviewCount={store.transactions.filter(t => t.status === 'needs_review').length}
      />
      <main className="main" ref={mainRef}>{content}</main>

      {modal?.type === 'addTxn' && (
        <AddTransactionModal
          houses={store.houses}
          initial={modal.initial}
          onClose={() => setModal(null)}
          onSubmit={(txn) => store.addTransaction(txn)}
        />
      )}
      {modal?.type === 'txn' && houseForTxn && (
        <TransactionDetail txn={modal.txn} house={houseForTxn} onClose={() => setModal(null)}/>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme"/>
        <TweakToggle label="Dark mode" value={t.dark} onChange={v => setTweak('dark', v)}/>
        <TweakColor label="Accent color" value={t.accent} onChange={v => setTweak('accent', v)}/>

        <TweakSection label="Layout"/>
        <TweakRadio label="Density" value={t.density}
                    options={['compact', 'regular', 'comfy']}
                    onChange={v => setTweak('density', v)}/>

        <TweakSection label="Numbers"/>
        <TweakToggle label="Compact ($1.2k)" value={t.compactNumbers}
                     onChange={v => setTweak('compactNumbers', v)}/>

        <TweakSection label="Jump to"/>
        <TweakButton label="Cleaner portal →" onClick={() => setPage({ name: 'cleaners' })}/>
        <TweakButton label="P & L →" onClick={() => setPage({ name: 'pnl' })} secondary/>
        <TweakButton label="Add transaction" onClick={() => onAddTxn()} secondary/>
      </TweaksPanel>
    </div>
  );
}

Object.assign(window, { App });