// Shared primitives for the USVI dashboard.

function cx(...args) { return args.filter(Boolean).join(" "); }

// -------- Avatar --------
function Avatar({ user, size = 22 }) {
  if (!user) return <span className="avatar avatar--empty" style={{width:size, height:size}}>—</span>;
  return (
    <span className="avatar" style={{ width: size, height: size, background: user.color, fontSize: Math.max(9, size * 0.42) }}>
      {user.initials}
    </span>
  );
}

// -------- Pills / chips --------
function OutcomePill({ outcome }) {
  const spec = APP_DATA.OUTCOMES[outcome];
  return (
    <span className={`pill pill--${spec.tone}`}>
      <span className="pill__dot" style={{ background: spec.dot }} />
      {spec.label}
    </span>
  );
}

function StatusPill({ status, onClick, editable }) {
  const tone =
    status === "New" ? "new" :
    status === "In Review" ? "hold" :
    status === "Contacted" ? "info" :
    status === "Qualified" ? "go" :
    status === "Closed Won" ? "go" :
    status === "Rejected" ? "stop" :
    status === "Closed Lost" ? "stop" : "new";
  return (
    <span
      className={cx("pill", `pill--${tone}`, editable && "pill--editable")}
      onClick={onClick}
      role={editable ? "button" : undefined}
    >
      {status}
      {editable && <span className="pill__caret">▾</span>}
    </span>
  );
}

function TagChip({ children }) {
  return <span className="chip">{children}</span>;
}

// -------- Score bar --------
function ScoreBar({ score }) {
  const tier = score >= 60 ? "hi" : score >= 35 ? "mid" : "lo";
  return (
    <div className="score">
      <div className={`score__num score__num--${tier}`}>{score}</div>
      <div className="score__track">
        <div className={`score__fill score__fill--${tier}`} style={{ width: `${score}%` }} />
      </div>
    </div>
  );
}

// -------- Relative time --------
function relTime(iso) {
  const h = Math.floor((Date.now() - new Date(iso).getTime()) / 36e5);
  if (h < 1)  return "just now";
  if (h < 24) return `${h}h ago`;
  const d = Math.floor(h/24);
  if (d < 14) return `${d}d ago`;
  const w = Math.floor(d/7);
  return `${w}w ago`;
}

// -------- Icon (minimal line glyphs as JSX SVG) --------
function Icon({ name, size = 14, style }) {
  const s = size;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", style };
  switch (name) {
    case "inbox":    return <svg {...common}><path d="M3 12l3-7h12l3 7"/><path d="M3 12v7h18v-7"/><path d="M8 12h3l1 2h0l1-2h3"/></svg>;
    case "chart":    return <svg {...common}><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-7"/></svg>;
    case "kanban":   return <svg {...common}><rect x="3" y="4" width="5" height="16" rx="1"/><rect x="10" y="4" width="5" height="10" rx="1"/><rect x="17" y="4" width="4" height="13" rx="1"/></svg>;
    case "chat":     return <svg {...common}><path d="M4 5h16v11H8l-4 4z"/></svg>;
    case "gear":     return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.5-2.4.8a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.4a7 7 0 0 0-2 1.2l-2.4-.8-2 3.5 2 1.5A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.5 2 3.5 2.4-.8c.6.5 1.3.9 2 1.2L10 21h4l.5-2.4c.7-.3 1.4-.7 2-1.2l2.4.8 2-3.5-2-1.5c.1-.4.1-.8.1-1.2z"/></svg>;
    case "search":   return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>;
    case "warn":     return <svg {...common}><path d="M12 3l10 18H2z"/><path d="M12 10v5"/><circle cx="12" cy="18" r=".6" fill="currentColor"/></svg>;
    case "dot":      return <svg {...common}><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>;
    case "check":    return <svg {...common}><path d="M4 12l5 5L20 6"/></svg>;
    case "x":        return <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "plus":     return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "chevron":  return <svg {...common}><path d="M9 6l6 6-6 6"/></svg>;
    case "down":     return <svg {...common}><path d="M6 9l6 6 6-6"/></svg>;
    case "filter":   return <svg {...common}><path d="M3 5h18l-7 9v5l-4 2v-7z"/></svg>;
    case "more":     return <svg {...common}><circle cx="5" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="19" cy="12" r="1" fill="currentColor"/></svg>;
    case "mail":     return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>;
    case "phone":    return <svg {...common}><path d="M5 4h4l2 5-3 2a11 11 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case "calendar": return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    case "bolt":     return <svg {...common}><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg>;
    case "file":     return <svg {...common}><path d="M7 3h8l4 4v14H7z"/><path d="M15 3v4h4"/></svg>;
    case "tag":      return <svg {...common}><path d="M20 12l-8 8-9-9V3h8z"/><circle cx="7" cy="7" r="1.2" fill="currentColor"/></svg>;
    case "link":     return <svg {...common}><path d="M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>;
    case "flag":     return <svg {...common}><path d="M5 3v18"/><path d="M5 4h12l-2 4 2 4H5"/></svg>;
    case "refresh":  return <svg {...common}><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 3v6h-6"/></svg>;
    case "download": return <svg {...common}><path d="M12 3v12m0 0l-4-4m4 4l4-4"/><path d="M4 19h16"/></svg>;
    case "sparkle":  return <svg {...common}><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>;
    case "keyboard": return <svg {...common}><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h0M10 10h0M14 10h0M18 10h0M6 14h12"/></svg>;
    default: return null;
  }
}

// -------- Kbd --------
function Kbd({ children }) { return <kbd className="kbd">{children}</kbd>; }

Object.assign(window, { cx, Avatar, OutcomePill, StatusPill, TagChip, ScoreBar, relTime, Icon, Kbd });