// Shared hi-fi components for the engagement screens.
// Exports to window for cross-file use.

const I = {
  grid: <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/>,
  model: <g><path d="M12 2L4 7l8 5 8-5-8-5z"/><path d="M4 12l8 5 8-5"/><path d="M4 17l8 5 8-5"/></g>,
  modules: <g><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></g>,
  file: <g><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></g>,
  target: <g><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></g>,
  activity: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>,
  link: <g><circle cx="6" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="M6 9v6a3 3 0 0 0 3 3h6"/></g>,
  help: <g><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></g>,
  settings: <g><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></g>,
  search: <g><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></g>,
  bell: <g><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></g>,
  plus: <g><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></g>,
  spark: <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>,
  up: <polyline points="18 15 12 9 6 15"/>,
  dn: <polyline points="6 9 12 15 18 9"/>,
  flat: <line x1="5" y1="12" x2="19" y2="12"/>,
  layers: <g><polygon points="12 2 4 7 12 12 20 7 12 2"/><polyline points="4 17 12 22 20 17"/><polyline points="4 12 12 17 20 12"/></g>,
  shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
  check: <polyline points="20 6 9 17 4 12"/>,
  arrowR: <g><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></g>,
  ext: <g><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></g>,
  users: <g><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></g>,
  mic: <g><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/></g>,
  clipboard: <g><path d="M9 2h6a1 1 0 0 1 1 1v2H8V3a1 1 0 0 1 1-1z"/><rect x="4" y="4" width="16" height="18" rx="2"/></g>,
  zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
  doc: <g><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></g>,
  map: <g><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></g>,
  cal: <g><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></g>,
  lock: <g><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></g>,
};

function Ico({ d, sw = 1.8, fill = "none", size = 16, style }) {
  return <svg viewBox="0 0 24 24" width={size} height={size} fill={fill} stroke={fill === "none" ? "currentColor" : "none"} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', ...style }}>{d}</svg>;
}

// Sidebar — client vs admin variants; some icons locked for scoped clients
function Sidebar({ active = 'grid', locked = [], persona = 'admin' }) {
  const items = [
    { id: 'grid', icon: I.grid, t: 'Portfolio' },
    { id: 'model', icon: I.model, t: 'Operating models' },
    { id: 'modules', icon: I.modules, t: 'Modules' },
    { id: 'file', icon: I.file, t: 'Assessments' },
    { id: 'target', icon: I.target, t: 'Actions' },
    { id: 'activity', icon: I.activity, t: 'Activity' },
  ];
  const av = persona === 'admin' ? 'av-me' : 'av-priya';
  return (
    <aside className="sb">
      <div className="sb-logo">M8</div>
      {items.map(it => (
        <div key={it.id} className={`sb-icon ${active === it.id ? 'active' : ''} ${locked.includes(it.id) ? 'locked' : ''}`} title={it.t}>
          <Ico d={locked.includes(it.id) ? I.lock : it.icon}/>
        </div>
      ))}
      <span className="sb-sp"/>
      <div className="sb-icon" title="Help"><Ico d={I.help}/></div>
      <div className="sb-icon" title="Settings"><Ico d={I.settings}/></div>
      <div className="sb-av"><img src={`assets/avatars/${av}.svg`} alt=""/></div>
    </aside>
  );
}

function Topbar({ crumbs = [], byline, search = 'Search…' }) {
  return (
    <div className="topbar">
      <nav className="crumb">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">›</span>}
            <span className={i === crumbs.length - 1 ? 'current' : ''}>{c}</span>
          </React.Fragment>
        ))}
      </nav>
      <div className="tb-right">
        {byline && (
          <span className="byline"><span className="o-dot"/> {byline}</span>
        )}
        <div className="searchbox"><Ico d={I.search} sw={2}/><span className="ph">{search}</span><span className="kbd">⌘K</span></div>
        <div className="icon-btn"><Ico d={I.bell} sw={2}/><span className="dot"/></div>
      </div>
    </div>
  );
}

function tone(v) { return v >= 70 ? 'good' : v >= 55 ? 'ok' : 'bad'; }

function Gauge({ value, size = 56, sw = 5 }) {
  const r = (size - sw * 2 - 2) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - value / 100);
  return (
    <div className="gauge" style={{ width: size, height: size }}>
      <svg viewBox={`0 0 ${size} ${size}`}>
        <circle className="track" cx={size/2} cy={size/2} r={r} strokeWidth={sw}/>
        <circle className={`arc ${tone(value)}`} cx={size/2} cy={size/2} r={r} strokeWidth={sw} strokeDasharray={`${c} ${c}`} strokeDashoffset={off}/>
      </svg>
      <div className="num">{value}<small>%</small></div>
    </div>
  );
}

// states: array of 'done'|'partial'|'active'|'' length 10
function Blocks({ states }) {
  return (
    <div className="blocks">
      {states.map((s, i) => <span key={i} className={`blk ${s}`}/>)}
    </div>
  );
}

function StatCard({ hue, icon, trend, trendDir = 'up', label, value, unit, foot }) {
  const tdir = { up: I.up, dn: I.dn, flat: I.flat }[trendDir];
  return (
    <div className="stat">
      <div className="stat-top">
        <div className={`stat-icon ${hue}`}><Ico d={icon}/></div>
        {trend && <span className={`stat-trend ${trendDir}`}><Ico d={tdir} sw={2.4}/> {trend}</span>}
      </div>
      <div className="stat-lbl">{label}</div>
      <div className="stat-val">{value}{unit && <small>{unit}</small>}</div>
      <div className="stat-foot">{foot}</div>
    </div>
  );
}

// Quiet "rest of the OS" rail — the entitlement wayfinding device
function OSRail({ on = [], note }) {
  const stops = ['Design', 'Govern', 'Assess', 'Improve', 'Sense'];
  return (
    <div className="osrail">
      <div className="osrail-h"><Ico d={I.layers} sw={2} /> Your operating system · end to end</div>
      <div className="osspine">
        {stops.map((s, i) => (
          <React.Fragment key={s}>
            {i > 0 && <span className="arr">›</span>}
            <div className={`osstop ${on.includes(s) ? 'on' : 'off'}`}>
              {s}{!on.includes(s) && <span className="lk"> 🔒</span>}
            </div>
          </React.Fragment>
        ))}
      </div>
      {note && <div className="osrail-foot">{note}</div>}
    </div>
  );
}

// AI summary banner — key info + what to do, at the top of every screen
function AISum({ head, act }) {
  return (
    <div className="aisum">
      <div className="aisum-ic"><Ico d={I.spark} sw={2.2} size={16} style={{ color: '#fff' }}/></div>
      <div className="aisum-body">
        <span className="aisum-text">{head}</span>
        {act && <span className="aisum-do"><b>Do next:</b> {act}</span>}
      </div>
      <span className="aisum-tag">AI summary</span>
    </div>
  );
}

Object.assign(window, { I, Ico, Sidebar, Topbar, Gauge, Blocks, StatCard, OSRail, AISum, tone });