// Shared UI atoms

function StatusDot({ status }) {
  return <span className={`dot s-${status}`} />;
}

function PriorityBadge({ priority }) {
  const sym = { high: '▲', medium: '◆', low: '▽' }[priority];
  return (
    <span className={`card-prio ${priority}`} title={`Priority: ${priority}`}>
      <span>{sym}</span>{priority}
    </span>
  );
}

function Swatch({ color, size = 10 }) {
  return <span className="swatch" style={{ background: color, width: size, height: size, borderRadius: 3, display: 'inline-block' }} />;
}

function Sidebar({ active, onNav, projects, currentProject }) {
  const { NAV_ITEMS } = window.ORC_DATA;
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">OR</div>
        <div className="brand-name">Orchestra</div>
        <div className="brand-env">prod</div>
      </div>

      <button className="workspace-switch" type="button">
        <div className="workspace-avatar">Z</div>
        <div className="workspace-meta">
          <span className="workspace-name">Zenix Team</span>
          <span className="workspace-role">org · admin</span>
        </div>
        <Icon name="chevronUpDown" size={14} />
      </button>

      <nav className="nav">
        <div className="nav-section">Workspace</div>
        {NAV_ITEMS.map(item => (
          <button
            key={item.id}
            className={`nav-item ${active === item.id ? 'active' : ''}`}
            onClick={() => onNav(item.id)}
            type="button"
          >
            <Icon name={item.icon} size={15} />
            <span>{item.name}</span>
            {item.badge && <span className="nav-badge">{item.badge}</span>}
          </button>
        ))}

        <div className="nav-section">Projects</div>
        {projects.map(p => (
          <button
            key={p.id}
            className={`nav-item ${currentProject === p.id ? 'active' : ''}`}
            type="button"
            onClick={() => onNav('projects', p.id)}
          >
            <Swatch color={p.color} />
            <span>{p.name}</span>
          </button>
        ))}
      </nav>

      <div className="sidebar-footer">
        <div className="sys-status">
          <span className="sys-status-label">orchestrator</span>
          <span className="sys-status-value"><span className="dot pulse" />healthy</span>
        </div>
        <div className="sys-status">
          <span className="sys-status-label">throughput</span>
          <span className="sys-status-value" style={{color:'var(--c-text-2)'}}>14.2 t/min</span>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ view, project, onProjectClick, onThemeToggle, theme }) {
  const crumbs = {
    board:    ['Workspace', 'Board'],
    projects: ['Workspace', 'Projects', project?.name || 'All'],
    modules:  ['Workspace', 'Modules'],
    agents:   ['Workspace', 'Agents'],
    kb:       ['Workspace', 'Knowledge Base'],
    settings: ['Workspace', 'Settings'],
  }[view] || ['Workspace'];

  return (
    <header className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="crumb-sep">/</span>}
            <span className={i === crumbs.length - 1 ? 'crumb-current' : ''}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-spacer" />

      <button className="project-selector" type="button" onClick={onProjectClick}>
        <Swatch color={project?.color || 'var(--c-text-3)'} size={12} />
        <span>{project?.name || 'All projects'}</span>
        <Icon name="chevron" size={13} />
      </button>

      <label className="search">
        <Icon name="search" size={13} />
        <input placeholder="Search tasks, agents, modules…" />
        <kbd>⌘K</kbd>
      </label>

      <button className="icon-btn" type="button" title="Toggle theme" onClick={onThemeToggle}>
        <Icon name={theme === 'dark' ? 'spark' : 'layers'} size={15} />
      </button>
      <button className="icon-btn" type="button" title="Notifications">
        <Icon name="bell" size={15} />
        <span className="notif-dot" />
      </button>
      <div className="user-avatar" title="kavi.r@zenix.team">KR</div>
    </header>
  );
}

window.StatusDot = StatusDot;
window.PriorityBadge = PriorityBadge;
window.Swatch = Swatch;
window.Sidebar = Sidebar;
window.Topbar = Topbar;