window.GDD = window.GDD || {};

const GDD = window.GDD;

const PAGE_TITLES = {
  'overview': 'Overview',
  'architecture': 'Architecture',
  'techstack': 'Tech Stack',
  'backend': 'Backend Model',
  'agents': 'Agent Lifecycle & Scheduling',
  'gameplay': 'Gameplay Loop',
  'roadmap': 'Roadmap',
  'risks': 'Risks & Questions',
  'demo-starmap': 'Star Map',
  'demo-movement': 'Ship Movement',
  'demo-combat': 'Combat System',
  'demo-market': 'Market Interface',
};

function TopBar({ collapsed, currentPage, onToggle }) {
  const isDemo = currentPage.startsWith('demo-');
  const section = isDemo ? 'Demos' : 'Docs';
  const title = PAGE_TITLES[currentPage] || currentPage;

  return (
    <div className="topbar">
      <button className="topbar-toggle" onClick={onToggle}>
        {collapsed ? '→' : '←'}
      </button>
      <div className="topbar-breadcrumb">
        <span className="bc-root">GDD</span>
        <span className="bc-sep">/</span>
        <span>{section}</span>
        <span className="bc-sep">/</span>
        <span className="bc-current">{title}</span>
      </div>
      <div className="topbar-status">
        <span><span className="status-dot online"></span> Connected</span>
        <span style={{ color: 'var(--accent)' }}>●</span>
        <span>Prototype v0.1.0</span>
      </div>
    </div>
  );
}

GDD.TopBar = TopBar;