// The Financial Knowledge Graph viewer — just embeds the real D3 viewer.
//
// We intentionally render NO wrapper chrome (no title bar, no stats panel,
// no side rails). The iframe's own UI (search bar, hop control, metrics
// panel, filters, legend) is the single source of truth — anything we
// overlay duplicates it.
//
// Initial focus: a random ticker from a small static list. The graph
// viewer itself fetches the 5-hop subgraph from central and handles
// re-fetching when the user types a new ticker + presses Enter.

// Small static seed list — avoids loading the entire graph just to pick
// a random company. If a ticker isn't on central, the viewer falls
// through to the full graph (so the page still renders something useful).
const SEED_TICKERS = [
  'AAPL', 'MSFT', 'GOOGL', 'AMZN', 'NVDA', 'META', 'TSLA', 'AMD',
  'INTC', 'AVGO', 'QCOM', 'ORCL', 'CRM', 'CSCO', 'TSM',
];

window.Viewer = function Viewer({ navigate }) {
  const base = ((window.__ENV && window.__ENV.CENTRAL_API_URL) || '').replace(/\/$/, '');

  // Pick the random ticker ONCE per mount — re-render shouldn't move it.
  const focus = React.useMemo(
    () => SEED_TICKERS[Math.floor(Math.random() * SEED_TICKERS.length)],
    []
  );

  const iframeSrc = base
    ? base + '/api/v1/viewer.html?' + new URLSearchParams({
        focus,
        hops: '3',
        max_hops: '5',
      }).toString()
    : '';

  return (
    <div style={{
      position: 'fixed',
      top: 'var(--nav-h)',
      left: 0,
      right: 0,
      bottom: 0,
      background: '#0a0a0d',
    }}>
      {iframeSrc ? (
        <iframe
          src={iframeSrc}
          title="Financial Knowledge Graph viewer"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            border: 0, background: '#0a0a0d',
          }}
        />
      ) : (
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--fg-mute)',
        }}>
          CENTRAL_API_URL not configured — see <code style={{margin:'0 6px'}}>env.js</code>
        </div>
      )}
    </div>
  );
};