// Root app: hash router, Tweaks panel
const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "slate",
  "density": "default"
}/*EDITMODE-END*/;

function parseHash() {
  const h = window.location.hash.replace(/^#\/?/, '');
  if (!h || h === '') return { name: 'home' };
  const parts = h.split('/');
  if (parts[0] === 'deals' && parts[1]) return { name: 'deal', id: parts[1] };
  if (parts[0] === 'deals') return { name: 'deals' };
  if (parts[0] === 'sponsors' && parts[1]) return { name: 'sponsor', id: parts[1] };
  if (parts[0] === 'sponsors') return { name: 'sponsors' };
  if (parts[0] === 'search') {
    const q = decodeURIComponent(parts[1] || '');
    return { name: 'search', q };
  }
  if (parts[0] === 'activity') return { name: 'activity' };
  if (parts[0] === 'research') return { name: 'research' };
  return { name: 'home' };
}

function routeToHash(r) {
  if (r.name === 'home') return '#/';
  if (r.name === 'deals') return '#/deals';
  if (r.name === 'deal') return `#/deals/${r.id}`;
  if (r.name === 'sponsors') return '#/sponsors';
  if (r.name === 'sponsor') return `#/sponsors/${r.id}`;
  if (r.name === 'search') return `#/search/${encodeURIComponent(r.q)}`;
  if (r.name === 'activity') return '#/activity';
  if (r.name === 'research') return '#/research';
  return '#/';
}

function App() {
  const [route, setRoute] = useS(parseHash());
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useE(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  useE(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.documentElement.setAttribute('data-density', t.density);
  }, [t.theme, t.density]);

  // Scroll to top on route change
  useE(() => { window.scrollTo(0, 0); }, [route.name, route.id]);

  const navigate = (r) => {
    window.location.hash = routeToHash(r);
  };

  let body;
  if (route.name === 'home') body = <HomePage navigate={navigate} />;
  else if (route.name === 'deals') body = <DealsListPage navigate={navigate} />;
  else if (route.name === 'deal') body = <DealDetailPage id={route.id} navigate={navigate} />;
  else if (route.name === 'sponsors') body = <SponsorsListPage navigate={navigate} />;
  else if (route.name === 'sponsor') body = <SponsorDetailPage id={route.id} navigate={navigate} />;
  else if (route.name === 'search') body = <DealsListPage navigate={navigate} initialQuery={route.q} />;
  else if (route.name === 'activity') body = <ActivityPage navigate={navigate} />;
  else if (route.name === 'research') body = <ResearchPage navigate={navigate} />;

  return (
    <div className="app">
      <TopBar route={route} navigate={navigate} />
      <div className="main">{body}</div>
      <div className="footer">
        CREINSIGHTS · PRIVATE REAL ESTATE INTELLIGENCE · DATA AS OF {new Date().toISOString().slice(0, 10).toUpperCase()}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            value={t.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'slate', label: 'Slate' },
              { value: 'terminal', label: 'Terminal' },
              { value: 'paper', label: 'Paper' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            value={t.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'default', label: 'Default' },
              { value: 'cozy', label: 'Cozy' },
            ]}
          />
        </TweakSection>
        <div style={{ padding: '12px 14px', fontSize: 11, color: 'var(--ink-4)', borderTop: '1px solid var(--line)', lineHeight: 1.5 }}>
          <strong style={{ color: 'var(--ink-3)' }}>Slate</strong> · institutional default<br/>
          <strong style={{ color: 'var(--ink-3)' }}>Terminal</strong> · dark Bloomberg-style<br/>
          <strong style={{ color: 'var(--ink-3)' }}>Paper</strong> · editorial/research note
        </div>
      </TweaksPanel>
    </div>
  );
}

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