// Icon — Streamline-flavored line icons at 1.4 stroke, currentColor.
// Sizes: 14 (default body 3), 16 (body 2 / buttons), 20 (verdict pills / section headings).
//
// We intentionally keep the inventory small and consistent with the existing
// app kit (/projects/c95cc902-ace6-466c-ad08-4119308b8281/ui_kits/app/Primitives.jsx) —
// outline only, no filled glyphs.

const Icon = ({ name, size = 14, stroke = 1.4, style }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
    style: { display: "inline-block", flexShrink: 0, ...style },
  };
  const paths = {
    // Nav
    grid:      <><rect x="4" y="4" width="7" height="7"/><rect x="13" y="4" width="7" height="7"/><rect x="4" y="13" width="7" height="7"/><rect x="13" y="13" width="7" height="7"/></>,
    facility:  <><path d="M3 21h18"/><path d="M5 21V8l7-4 7 4v13"/><path d="M10 21v-6h4v6"/></>,
    accounts:  <><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/><path d="M7 15h4"/></>,
    coins:     <><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6"/><path d="M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6"/></>,
    user:      <><circle cx="12" cy="8" r="3.6"/><path d="M5 20v-1a7 7 0 0114 0v1"/></>,
    activity:  <><path d="M3 12h4l3-7 4 14 3-7h4"/></>,
    docs:      <><path d="M7 3h8l4 4v14H7z"/><path d="M15 3v4h4"/></>,
    settings:  <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></>,
    // Status & feedback
    shield:      <><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/></>,
    shieldCheck: <><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/><path d="M8.5 12.5l2.4 2.4 4.6-5.1"/></>,
    shieldX:     <><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/><path d="M9 10l6 6"/><path d="M15 10l-6 6"/></>,
    check:       <><path d="M4 12l5 5L20 6"/></>,
    cross:       <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>,
    clock:       <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    alert:       <><circle cx="12" cy="12" r="9"/><path d="M12 8v5"/><path d="M12 16h.01"/></>,
    info:        <><circle cx="12" cy="12" r="9"/><path d="M12 8h.01"/><path d="M11 12h1v5h1"/></>,
    // Actions
    plus:     <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    arrow:    <><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>,
    chevron:  <><path d="M9 6l6 6-6 6"/></>,
    chevDown: <><path d="M6 9l6 6 6-6"/></>,
    chevUp:   <><path d="M6 15l6-6 6 6"/></>,
    deposit:  <><path d="M12 4v12"/><path d="M6 10l6 6 6-6"/><path d="M4 20h16"/></>,
    withdraw: <><path d="M12 20V8"/><path d="M6 14l6-6 6 6"/><path d="M4 4h16"/></>,
    borrow:   <><circle cx="12" cy="12" r="8"/><path d="M9 12l2 2 4-4"/></>,
    repay:    <><path d="M21 12a9 9 0 11-3-6.7"/><path d="M21 4v5h-5"/></>,
    copy:     <><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 012-2h10"/></>,
    external: <><path d="M14 4h6v6"/><path d="M20 4l-9 9"/><path d="M19 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V6a1 1 0 011-1h5"/></>,
    refresh:  <><path d="M21 12a9 9 0 11-3-6.7"/><path d="M21 4v5h-5"/></>,
    search:   <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    bell:     <><path d="M6 16V11a6 6 0 0112 0v5l2 2H4l2-2z"/><path d="M10 20a2 2 0 004 0"/></>,
    sun:      <><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/></>,
    moon:     <><path d="M21 13A8.5 8.5 0 0111 3a7 7 0 1010 10z"/></>,
    eligible: <><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></>,
    handshake:<><path d="M11 17l-3 3-2-2 3-3"/><path d="M14 16l-2 2-3-3 5-5 6 6-2 2-2-2"/><path d="M3 12l3-3 4 4"/></>,
    // Wallet-gate additions
    lock:      <><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></>,
    wallet:    <><path d="M4 7a2 2 0 012-2h11a1 1 0 011 1v2"/><path d="M3 7v11a2 2 0 002 2h13a1 1 0 001-1v-3"/><path d="M21 9v6h-4a3 3 0 010-6h4z"/></>,
    power:     <><path d="M12 4v8"/><path d="M7.5 7a7 7 0 109 0"/></>,
    fingerprint: <><path d="M12 10a2 2 0 012 2c0 3-.5 5-1 6.5"/><path d="M8.5 8.5A5 5 0 0117 12c0 1.5-.2 3-.5 4.5"/><path d="M5.5 11A8 8 0 0112 6a8 8 0 016.5 3.4"/><path d="M9 14c0 2-.3 3.5-.8 5"/></>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
};

// Ascend mountain mark — from the design system Mark component.
const Mark = ({ size = 18, color = "var(--accent)" }) => (
  <svg width={size * 28.461 / 26} height={size} viewBox="0 0 28.461 26" fill={color}>
    <path d="M 28.461 25.759 L 17.736 15.126 L 16.699 16.193 L 14.282 10.852 L 11.934 15.88 L 10.877 15.061 L 10.841 15.032 L 0 26 L 14.297 0 L 28.461 25.759 Z"/>
  </svg>
);

// StatusPill — variants from prompt 4.3
const StatusPill = ({ variant = "active", children, dot = true, "aria-label": ariaLabel }) => (
  <span className={`pill pill--${variant}`} role="status" aria-label={ariaLabel || `${children} status`}>
    {dot && <span className="pill-dot" aria-hidden="true" />}
    <span>{children}</span>
  </span>
);

// TokenChip — collateral or settlement variants
const TokenChip = ({ ticker, name, variant = "collateral", onClick }) => (
  <button
    type="button"
    onClick={onClick}
    className={`chip ${variant === "settlement" ? "chip--info" : "chip--neutral"}`}
    style={{
      border: "none", cursor: onClick ? "pointer" : "default",
      padding: "4px 10px", gap: 6,
    }}
  >
    <span style={{ fontWeight: 600, letterSpacing: 0.2 }}>{ticker}</span>
    {name && (
      <span style={{
        fontWeight: 400,
        color: variant === "settlement" ? "var(--blue-80)" : "var(--fg-subtle)",
        opacity: 0.8,
      }}>{name}</span>
    )}
  </button>
);

// Truncated address w/ hover-to-show + click-to-copy
const MonoAddr = ({ full, display, srOnly }) => {
  const [copied, setCopied] = React.useState(false);
  const text = display || (full && full.length > 12 ? `${full.slice(0, 6)}…${full.slice(-4)}` : full);
  const copy = (e) => {
    e.stopPropagation();
    try { navigator.clipboard.writeText(full || text); setCopied(true); setTimeout(() => setCopied(false), 1000); } catch {}
  };
  return (
    <button
      type="button"
      onClick={copy}
      title={copied ? "Copied" : (full || text)}
      aria-label={srOnly ? `${srOnly}, address ${full || text}` : (full || text)}
      style={{
        all: "unset",
        cursor: "pointer",
        fontFamily: "var(--font-mono)",
        fontSize: 13,
        lineHeight: "18px",
        color: "var(--fg-muted)",
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        borderBottom: "1px dotted var(--border)",
        transition: "color var(--motion-fast), border-color var(--motion-fast)",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; e.currentTarget.style.borderBottomColor = "var(--accent)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.color = "var(--fg-muted)"; e.currentTarget.style.borderBottomColor = "var(--border)"; }}
    >
      <span>{text}</span>
      <Icon name={copied ? "check" : "copy"} size={11} stroke={1.6} style={{ opacity: 0.6 }}/>
    </button>
  );
};

// Eyebrow — small uppercase metadata label
const Eyebrow = ({ children, color }) => (
  <span style={{
    fontFamily: "var(--font-body)",
    fontSize: 11,
    lineHeight: "16px",
    fontWeight: 500,
    letterSpacing: "0.06em",
    textTransform: "uppercase",
    color: color || "var(--fg-subtle)",
  }}>{children}</span>
);

Object.assign(window, {
  Icon, Mark, StatusPill, TokenChip, MonoAddr, Eyebrow,
});