// shell.jsx — app chrome (Sidebar, Topbar) + shared atoms

// ─── Atoms ───────────────────────────────────────────────────────
function Donut({ value, size = 64, stroke = 6, color, label }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const col = color || window.fitColor(value);
  return (
    <div className="donut" style={{ width: size, height: size }}>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--border)" strokeWidth={stroke} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={col} strokeWidth={stroke}
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - value/100)} />
      </svg>
      <div className="num" style={{ fontSize: size * 0.34 }}>
        {value}{label && <small>{label}</small>}
      </div>
    </div>
  );
}

function ScoreBar({ value, color, width }) {
  const col = color || window.fitColor(value);
  return (
    <div className="scorebar" style={width ? { width } : null}>
      <i style={{ width: `${value}%`, background: col }}></i>
    </div>
  );
}

function SrcDots({ active }) {
  const all = ['SAM', 'PI', 'GE', 'AF', 'US'];
  const set = new Set(active);
  return (
    <div className="srcdots">
      {all.map(k => <div key={k} className={`sd${set.has(k) ? '' : ' off'}`}>{k === 'SAM' ? 'S' : k[0]}</div>)}
    </div>
  );
}

function Badge({ kind = 'muted', children, live }) {
  return <span className={`badge ${kind}${live ? ' live' : ''}`}>{live && <span className="pdot"></span>}{children}</span>;
}

function TierBadge({ tier }) {
  const cls = window.tierClass(tier);
  return <span className={`badge ${cls}`}>{tier}</span>;
}

window.Donut = Donut; window.ScoreBar = ScoreBar; window.SrcDots = SrcDots;
window.Badge = Badge; window.TierBadge = TierBadge;

// ─── Sidebar ─────────────────────────────────────────────────────
const NAV = [
  { group: 'Intelligence', items: [
    { id: 'briefing', label: 'Morning Briefing', icon: 'radar' },
    { id: 'opportunities', label: 'Opportunities', icon: 'layers', count: '1,284' },
  ]},
  { group: 'Capture', items: [
    { id: 'pipeline', label: 'Pipeline', icon: 'columns', count: '23' },
    { id: 'partners', label: 'Partner Discovery', icon: 'users' },
  ]},
  { group: 'Insights', items: [
    { id: 'analytics', label: 'Spend Analytics', icon: 'barChart' },
    { id: 'studio', label: 'Content Studio', icon: 'sparkles' },
  ]},
];

function Sidebar({ view, go }) {
  const Icons = window.Icons;
  const P = window.PROFILE;
  const activeRoot = view === 'detail' ? 'opportunities' : view;
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <img src="assets/stratavex-icon.svg" alt="" />
        <div>
          <div className="wm">PRISM</div>
          <div className="tier">Stratavex Federal BD</div>
        </div>
      </div>
      <div className="sb-scroll">
        {NAV.map(g => (
          <div className="sb-group" key={g.group}>
            <div className="sb-group-label">{g.group}</div>
            {g.items.map(it => {
              const Ic = Icons[it.icon];
              return (
                <button key={it.id} className={`sb-item${activeRoot === it.id ? ' active' : ''}`} onClick={() => go(it.id)}>
                  <Ic />
                  <span>{it.label}</span>
                  {it.count && <span className="sb-count">{it.count}</span>}
                </button>
              );
            })}
          </div>
        ))}
      </div>
      <div className="sb-foot">
        <div className="sb-profile">
          <div className="sb-avatar">{P.initials}</div>
          <div>
            <div className="nm">{P.company}</div>
            <div className="co">{P.user} · {P.role}</div>
          </div>
        </div>
      </div>
    </aside>
  );
}
window.Sidebar = Sidebar;

// ─── Topbar ──────────────────────────────────────────────────────
const TITLES = {
  briefing: { h: 'Morning Intelligence Briefing', c: 'Daily Digest' },
  opportunities: { h: 'Opportunities', c: 'Aggregated · 5 Sources' },
  detail: { h: 'Opportunity Detail', c: 'Opportunities' },
  pipeline: { h: 'Pipeline & Lifecycle', c: 'Capture' },
  partners: { h: 'Partner Discovery', c: 'Capture · Teaming' },
  analytics: { h: 'Spend Analytics', c: 'Insights' },
  studio: { h: 'Content Studio', c: 'Insights · Gemini' },
};

function Topbar({ view }) {
  const Icons = window.Icons;
  const t = TITLES[view] || TITLES.briefing;
  return (
    <div className="topbar">
      <div className="tb-title">
        <span className="crumb">{t.c}</span>
        <h1>{t.h}</h1>
      </div>
      <div className="tb-search">
        <Icons.search />
        <span>Search solicitations, agencies, NAICS…</span>
        <span className="kbd">⌘K</span>
      </div>
      <button className="tb-icon" title="Source status"><Icons.refresh /></button>
      <button className="tb-icon" title="Alerts"><Icons.bell /><span className="dot"></span></button>
    </div>
  );
}
window.Topbar = Topbar;