/* =========================================================================
   Live ICP Tracker — shared wireframe primitives
   Exports to window: Icon, Tier, ScoreCell, Logo, Avatar, Chip, HeatDot,
   Bar, fmt helpers. Lucide-style inline SVG icons (1.8 stroke, 24 grid).
   ========================================================================= */
const ICONS = {
  search: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3",
  list: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01",
  card: "M3 5h18v14H3zM3 9h18M7 13h5",
  sliders: "M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6",
  signal: "M13 2 3 14h7l-1 8 10-12h-7l1-8z",
  users: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.87M16 3.13A4 4 0 0 1 16 11",
  dollar: "M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6",
  share: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13",
  building: "M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M9 13h.01M9 17h.01M15 9h.01M15 13h.01M15 17h.01",
  up: "M23 6l-9.5 9.5-5-5L1 18M17 6h6v6",
  down: "M23 18l-9.5-9.5-5 5L1 6M17 18h6v-6",
  arrow: "M5 12h14M13 6l6 6-6 6",
  chevR: "M9 6l6 6-6 6",
  chevD: "M6 9l6 6 6-6",
  chevL: "M15 6l-6 6 6 6",
  check: "M20 6 9 17l-5-5",
  plus: "M12 5v14M5 12h14",
  mail: "M4 4h16v16H4zM4 6l8 6 8-6",
  link: "M9 17H7A5 5 0 0 1 7 7h2M15 7h2a5 5 0 0 1 0 10h-2M8 12h8",
  spark: "M12 3l1.9 5.8L19.5 11l-5.6 2.2L12 19l-1.9-5.8L4.5 11l5.6-2.2z",
  bell: "M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0",
  refresh: "M23 4v6h-6M1 20v-6h6M3.5 9a9 9 0 0 1 14.8-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15",
  filter: "M22 3H2l8 9.5V19l4 2v-8.5z",
  swap: "M16 3l4 4-4 4M20 7H4M8 21l-4-4 4-4M4 17h16",
  hire: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M19 8v6M22 11h-6",
  trend: "M3 3v18h18M7 14l4-4 3 3 5-6",
  press: "M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9h4M18 14h-8M15 18h-5M10 6h8v4h-8z",
  flag: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7",
  pin: "M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11zM12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z",
  clock: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 6v6l4 2",
  external: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3",
  eye: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
  layers: "M12 2 2 7l10 5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5",
  grid: "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  columns: "M3 3h18v18H3zM12 3v18M3 12h18",
  download: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3",
  copy: "M9 9h11v11H9zM5 15H4V4h11v1",
  x: "M18 6 6 18M6 6l12 12",
  trash: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M10 11v6M14 11v6",
  settings: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.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",
};

function Icon({ name, size = 18, className = "", style = {}, strokeWidth = 1.8 }) {
  const d = ICONS[name];
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={strokeWidth}
      strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {d && d.split("M").filter(Boolean).map((seg, i) => <path key={i} d={"M" + seg} />)}
    </svg>
  );
}

const TIER_BG = { T1: "var(--c-malachyte)", T2: "var(--c-lavender)", T3: "var(--c-sunset)" };
function Tier({ t }) {
  return <span className="tier" style={{ background: TIER_BG[t] || "var(--wf-muted)" }}>{t}</span>;
}

function Logo({ name, size, src }) {
  const cls = size === "lg" ? "logo-mono lg" : size === "sm" ? "logo-mono sm" : "logo-mono";
  const initials = name.replace(/[^A-Za-z0-9& ]/g, "").split(/\s+/).slice(0, 2).map(w => w[0]).join("").toUpperCase();
  const [failed, setFailed] = React.useState(false);
  if (src && !failed) {
    return (
      <div className={cls + " logo-img"}>
        <img src={src} alt={name + " logo"} loading="lazy"
          onError={() => setFailed(true)} />
      </div>
    );
  }
  return <div className={cls}>{initials}</div>;
}

function Avatar({ name }) {
  const initials = name.replace(/[^A-Za-z ]/g, "").split(/\s+/).slice(0, 2).map(w => w[0]).join("").toUpperCase();
  return <div className="avatar">{initials}</div>;
}

function ScoreCell({ value, width = 56, hideNum = false }) {
  const pct = Math.max(0, Math.min(100, value));
  const color = pct >= 80 ? "var(--c-malachyte)" : pct >= 60 ? "var(--c-malachyte-light)" : "var(--wf-line-strong)";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9, justifyContent: "flex-end" }}>
      <div className="bar" style={{ width }}><i style={{ width: pct + "%", background: color }}></i></div>
      {!hideNum && <span className="score-num" style={{ minWidth: 22, textAlign: "right" }}>{value}</span>}
    </div>
  );
}

const HEAT = { hot: "var(--st-danger)", warm: "var(--c-sunset)", cool: "var(--fg-subtle)" };
function HeatDot({ heat }) { return <span className="heat-dot" style={{ background: HEAT[heat] || "var(--fg-subtle)" }}></span>; }

const STATUS_COLOR = { hot: "var(--st-danger)", warm: "var(--c-sunset)", cold: "var(--fg-subtle)", paused: "var(--c-lavender)", dead: "var(--wf-subtle)" };
function StatusChip({ status }) {
  return <span className="chip"><span className="dot" style={{ background: STATUS_COLOR[status] || "var(--fg-subtle)" }}></span>{status}</span>;
}

const SIGNAL_ICON = { vendor: "swap", role: "hire", exec: "users", traffic: "trend", press: "press", funding: "dollar", conf: "pin" };
function SignalIcon({ type, heat }) {
  const c = HEAT[heat] || "var(--fg-subtle)";
  return (
    <div className="sic" style={{ background: "color-mix(in srgb, " + c + " 14%, white)", color: c }}>
      <Icon name={SIGNAL_ICON[type] || "signal"} size={15} />
    </div>
  );
}

Object.assign(window, { Icon, Tier, Logo, Avatar, ScoreCell, HeatDot, StatusChip, SignalIcon });