// ============================================================================
// Primitive components — Badge, Dot, Card, Section, Icon
// ============================================================================

const Dot = ({ status = "ok", pulse = false }) => {
  const color = {
    ok: "var(--success)",
    fail: "var(--danger)",
    warn: "var(--warn)",
    info: "var(--info)",
    idle: "var(--fg-3)",
  }[status] || "var(--fg-3)";
  return (
    <span
      className={pulse ? "tb-dot tb-dot-pulse" : "tb-dot"}
      style={{ background: color }}
    />
  );
};

const Badge = (props = {}) => {
  const kind = props.kind || "neutral";
  const solid = props.solid === true || props.solid === "true";
  const cls = solid ? `tb-badge tb-badge-solid-${kind}` : `tb-badge tb-badge-${kind}`;
  const spanProps = {};
  if (props.title != null) spanProps.title = props.title;
  if (props.style != null) spanProps.style = props.style;
  if (props.onClick != null) spanProps.onClick = props.onClick;
  if (props.className) spanProps.className = `${cls} ${props.className}`;
  else spanProps.className = cls;
  return <span {...spanProps}>{props.children}</span>;
};

const Card = ({ tone = "neutral", indicator = false, padding = 16, children, style, onClick }) => {
  const toneClass = `tb-card tb-card-${tone}`;
  return (
    <div className={toneClass} style={{ padding, ...style }} onClick={onClick}>
      {indicator && <span className={`tb-card-indicator tb-indicator-${tone}`} />}
      {children}
    </div>
  );
};

const SectionHeader = ({ title, right }) => (
  <div className="tb-section-head">
    <div className="label-caps">{title}</div>
    {right && <div className="tb-section-head-right">{right}</div>}
  </div>
);

// Lucide-style icon with currentColor stroke
const Icon = ({ name, size = 14 }) => {
  const paths = {
    activity: <path d="M22 12h-4l-3 9L9 3l-3 9H2" />,
    refresh: <><path d="M21 12a9 9 0 11-9-9 9 9 0 016.4 2.6L21 8" /><path d="M21 3v5h-5" /></>,
    play: <polygon points="5 3 19 12 5 21 5 3" />,
    pause: <><rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" /></>,
    stop: <rect x="6" y="6" width="12" height="12" />,
    check: <><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></>,
    alert: <><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.7 3h16.96a2 2 0 0 0 1.7-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><path d="M12 9v4M12 17h.01" /></>,
    x: <><circle cx="12" cy="12" r="10" /><path d="m15 9-6 6M9 9l6 6" /></>,
    bot: <><rect x="3" y="11" width="18" height="10" rx="2" /><circle cx="12" cy="5" r="2" /><path d="M12 7v4" /><path d="M8 16h.01M16 16h.01" /></>,
    db: <><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14a9 3 0 0 0 18 0V5" /><path d="M3 12a9 3 0 0 0 18 0" /></>,
    chart: <><line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" /></>,
    trend: <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></>,
    dashboard: <><rect x="3" y="3" width="7" height="9" /><rect x="14" y="3" width="7" height="5" /><rect x="14" y="12" width="7" height="9" /><rect x="3" y="16" width="7" height="5" /></>,
    coins: <><circle cx="8" cy="8" r="6" /><path d="M18.09 10.37A6 6 0 1 1 10.34 18" /><path d="M7 6h1v4" /><path d="m16.71 13.88.7.71-2.82 2.82" /></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></>,
    clock: <><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></>,
    bell: <><path d="M6 8a6 6 0 0 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" /></>,
    sun: <><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></>,
    moon: <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />,
    settings: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></>,
    search: <><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></>,
    filter: <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />,
    chevron: <polyline points="9 18 15 12 9 6" />,
    download: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></>,
    external: <><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" /></>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></>,
    list: <><line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" /><circle cx="3.5" cy="6" r="0.8" /><circle cx="3.5" cy="12" r="0.8" /><circle cx="3.5" cy="18" r="0.8" /></>,
  };
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth="1.75"
      strokeLinecap="round" strokeLinejoin="round"
      style={{ display: "inline-block", verticalAlign: "middle", flexShrink: 0 }}
    >
      {paths[name] || null}
    </svg>
  );
};

Object.assign(window, { Dot, Badge, Card, SectionHeader, Icon });