// Mindworks atoms — buttons, chips, avatars, fields, progress, KPI cards
const Button = ({ kind = "secondary", size = "md", icon, iconRight, children, onClick, style = {}, active = false }) => {
  const sizes = {
    xs: { height: 22, fontSize: 12, padding: "0 8px", gap: 4 },
    sm: { height: 26, fontSize: 12, padding: "0 10px", gap: 5 },
    md: { height: 32, fontSize: 13, padding: "0 14px", gap: 6 },
    lg: { height: 36, fontSize: 14, padding: "0 18px", gap: 6 },
  };
  const kinds = {
    primary: { background: "rgb(83,74,255)", color: "#fff", border: 0, boxShadow: "0 1px 1px 0 rgba(42,43,57,.10)" },
    secondary: { background: "#fff", color: "rgb(65,69,82)", border: "1px solid rgb(213,219,225)" },
    ghost: { background: active ? "rgb(232,233,246)" : "transparent", color: active ? "rgb(83,74,255)" : "rgb(65,69,82)", border: 0 },
    soft: { background: "rgb(248,248,251)", color: "rgb(65,69,82)", border: "1px solid rgb(239,240,242)" },
    destructive: { background: "rgb(192,47,50)", color: "#fff", border: 0 },
  };
  return (
    <button onClick={onClick} style={{
      ...sizes[size], ...kinds[kind], ...style,
      borderRadius: 9999, fontFamily: "inherit", fontWeight: 500, cursor: "pointer",
      display: "inline-flex", alignItems: "center", lineHeight: 1, transition: "all 120ms cubic-bezier(.2,.6,.2,1)",
      whiteSpace: "nowrap"
    }}
    onMouseEnter={e => {
      if (kind === "primary") e.currentTarget.style.background = "rgb(68,63,255)";
      else if (kind === "secondary" || kind === "soft") e.currentTarget.style.background = "rgb(248,248,251)";
      else if (kind === "ghost" && !active) e.currentTarget.style.background = "rgb(243,244,247)";
    }}
    onMouseLeave={e => { e.currentTarget.style.background = kinds[kind].background; }}
    >
      {icon && <Icon name={icon} size={size === "sm" || size === "xs" ? 13 : 14} color={kind === "primary" || kind === "destructive" ? "#fff" : "currentColor"} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size === "sm" || size === "xs" ? 12 : 14} color={kind === "primary" || kind === "destructive" ? "#fff" : "currentColor"} />}
    </button>
  );
};

const TONES = {
  success: { bg: "rgb(218,240,224)", fg: "rgb(34,134,58)" },
  warning: { bg: "rgb(255,243,210)", fg: "rgb(178,121,26)" },
  danger:  { bg: "rgb(252,226,226)", fg: "rgb(192,47,50)" },
  info:    { bg: "rgb(232,233,246)", fg: "rgb(83,74,255)" },
  purple:  { bg: "rgb(240,232,255)", fg: "rgb(123,61,204)" },
  neutral: { bg: "rgb(241,242,244)", fg: "rgb(106,115,131)" },
  blue:    { bg: "rgb(220,235,255)", fg: "rgb(31,90,194)" },
};

const Chip = ({ tone = "neutral", children, dot, style = {} }) => {
  const t = TONES[tone] || TONES.neutral;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 5,
      padding: "2px 8px", borderRadius: 6, fontSize: 12, fontWeight: 500,
      background: t.bg, color: t.fg, lineHeight: 1.4, whiteSpace: "nowrap", ...style
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: "50%", background: t.fg }} />}
      {children}
    </span>
  );
};

const Avatar = ({ initials = "NM", color = "#76ADFF", size = 28, image, ring = false }) => (
  <div style={{
    width: size, height: size, borderRadius: "50%", background: image ? `center/cover url(${image})` : color,
    color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center",
    fontSize: Math.round(size * 0.38), fontWeight: 600, flexShrink: 0,
    boxShadow: ring ? "0 0 0 2px #fff" : "none"
  }}>
    {!image && initials}
  </div>
);

const AvatarGroup = ({ people = [], size = 24, max = 3 }) => (
  <div style={{ display: "inline-flex" }}>
    {people.slice(0, max).map((p, i) => (
      <div key={i} style={{ marginLeft: i === 0 ? 0 : -8 }}>
        <Avatar size={size} initials={p.initials} color={p.color} ring />
      </div>
    ))}
    {people.length > max && (
      <div style={{ marginLeft: -8, width: size, height: size, borderRadius: "50%", background: "rgb(241,242,244)", color: "rgb(65,69,82)", fontSize: Math.round(size * 0.36), fontWeight: 600, display: "inline-flex", alignItems: "center", justifyContent: "center", boxShadow: "0 0 0 2px #fff" }}>
        +{people.length - max}
      </div>
    )}
  </div>
);

// Stroke icon set (lucide-style, matched to MW visual language)
const Icon = ({ name, size = 16, color = "currentColor", style = {} }) => {
  const paths = {
    plus: <><path d="M12 5v14M5 12h14"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>,
    filter: <><path d="M3 6h18M6 12h12M10 18h4"/></>,
    expandDown: <><path d="m6 9 6 6 6-6"/></>,
    expandUp: <><path d="m6 15 6-6 6 6"/></>,
    chevronRight: <><path d="m9 6 6 6-6 6"/></>,
    chevronLeft: <><path d="m15 6-6 6 6 6"/></>,
    doubleChevronRight: <><path d="m6 17 5-5-5-5M13 17l5-5-5-5"/></>,
    pen: <><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></>,
    more: <><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></>,
    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"/></>,
    settings: <><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-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.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.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.82V9c.32.65.97 1.07 1.71 1.07H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    star: <><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></>,
    flag: <><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    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"/></>,
    upload: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></>,
    archive: <><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></>,
    check: <><polyline points="20 6 9 17 4 12"/></>,
    cross: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    users: <><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.87M16 3.13a4 4 0 0 1 0 7.75"/></>,
    file: <><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"/></>,
    folder: <><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></>,
    layers: <><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></>,
    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"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></>,
    chart: <><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></>,
    chartBar: <><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></>,
    trending: <><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></>,
    trendingDown: <><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></>,
    info: <><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></>,
    alert: <><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>,
    alertCircle: <><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></>,
    dollar: <><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></>,
    receipt: <><path d="M4 2v20l3-2 3 2 3-2 3 2 3-2 3 2V2l-3 2-3-2-3 2-3-2-3 2z"/><path d="M8 8h8M8 12h8M8 16h5"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" ry="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"/></>,
    activity: <><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></>,
    sparkles: <><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/><path d="M19 14l1 2 2 1-2 1-1 2-1-2-2-1 2-1z"/><path d="M5 16l.7 1.4 1.3.6-1.3.6L5 20l-.7-1.4L3 18l1.3-.6z"/></>,
    refresh: <><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></>,
    link: <><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></>,
    paperclip: <><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></>,
    arrowUp: <><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></>,
    arrowDown: <><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></>,
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    drag: <><circle cx="9" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="18" r="1"/></>,
    columns: <><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></>,
    send: <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,
    home: <><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></>,
    briefcase: <><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    tag: <><path d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></>,
    bookmark: <><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></>,
    circle: <><circle cx="12" cy="12" r="10"/></>,
    hardhat: <><path d="M2 18h20v3H2zM4 18V11a8 8 0 0 1 16 0v7M9 5v6M15 5v6"/></>,
    building: <><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ display: "inline-block", flexShrink: 0, ...style }}>
      {paths[name]}
    </svg>
  );
};

const ProgressBar = ({ value = 0, max = 100, color = "rgb(83,74,255)", height = 6, bg = "rgb(239,240,242)", radius = 999, label = false }) => {
  const pct = Math.max(0, Math.min(100, (value / max) * 100));
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}>
      <div style={{ flex: 1, height, background: bg, borderRadius: radius, overflow: "hidden" }}>
        <div style={{ width: `${pct}%`, height: "100%", background: color, borderRadius: radius, transition: "width 240ms cubic-bezier(.2,.6,.2,1)" }} />
      </div>
      {label && <span style={{ fontSize: 12, color: "rgb(106,115,131)", fontVariantNumeric: "tabular-nums", minWidth: 30, textAlign: "right" }}>{Math.round(pct)}%</span>}
    </div>
  );
};

const StatusDot = ({ tone = "success" }) => (
  <span style={{ width: 6, height: 6, borderRadius: "50%", background: TONES[tone]?.fg || "rgb(106,115,131)" }} />
);

const KPICard = ({ label, value, sub, delta, deltaTone = "success", icon, accent = "rgb(83,74,255)", onClick, footer }) => (
  <div onClick={onClick} style={{
    background: "#fff", border: "1px solid rgb(227,229,232)", borderRadius: 12, padding: "14px 16px",
    display: "flex", flexDirection: "column", gap: 10, cursor: onClick ? "pointer" : "default",
    transition: "all 120ms cubic-bezier(.2,.6,.2,1)", minHeight: 96
  }}
  onMouseEnter={e => { if (onClick) e.currentTarget.style.borderColor = "rgb(213,219,225)"; }}
  onMouseLeave={e => { if (onClick) e.currentTarget.style.borderColor = "rgb(227,229,232)"; }}
  >
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <span style={{ fontSize: 12, color: "rgb(106,115,131)", fontWeight: 500, letterSpacing: ".01em" }}>{label}</span>
      {icon && (
        <div style={{ width: 24, height: 24, borderRadius: 6, background: "rgb(248,248,251)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: accent }}>
          <Icon name={icon} size={14} color={accent} />
        </div>
      )}
    </div>
    <div style={{ display: "flex", alignItems: "baseline", gap: 8, fontVariantNumeric: "tabular-nums" }}>
      <span style={{ fontSize: 24, fontWeight: 700, letterSpacing: "-.015em", lineHeight: 1.1, color: "rgb(26,27,37)" }}>{value}</span>
      {sub && <span style={{ fontSize: 13, color: "rgb(106,115,131)" }}>{sub}</span>}
    </div>
    {(delta || footer) && (
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: "auto" }}>
        {delta && (
          <span style={{ display: "inline-flex", alignItems: "center", gap: 3, fontSize: 12, fontWeight: 500, color: TONES[deltaTone]?.fg }}>
            <Icon name={deltaTone === "success" ? "arrowUp" : deltaTone === "danger" ? "arrowDown" : "arrowRight"} size={11} />
            {delta}
          </span>
        )}
        {footer && <span style={{ fontSize: 12, color: "rgb(106,115,131)" }}>{footer}</span>}
      </div>
    )}
  </div>
);

const Card = ({ title, action, children, padding = 16, headerPadding, style = {} }) => {
  const titlePadX = headerPadding ?? (padding === 0 ? 16 : padding);
  const titlePadY = padding === 0 ? 12 : Math.max(padding - 2, 10);
  return (
  <div style={{ background: "#fff", border: "1px solid rgb(227,229,232)", borderRadius: 12, ...style }}>
    {title && (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: `${titlePadY}px ${titlePadX}px`, borderBottom: "1px solid rgb(239,240,242)" }}>
        <span style={{ fontSize: 14, fontWeight: 600, color: "rgb(26,27,37)" }}>{title}</span>
        {action}
      </div>
    )}
    <div style={{ padding }}>{children}</div>
  </div>
  );
};

const IconBtn = ({ icon, onClick, active, size = 30, tone = "neutral" }) => (
  <button onClick={onClick} style={{
    width: size, height: size, borderRadius: 9999,
    border: tone === "outline" ? "1px solid rgb(213,219,225)" : "0",
    background: active ? "rgb(232,233,246)" : tone === "outline" ? "#fff" : "transparent",
    display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
    color: active ? "rgb(83,74,255)" : "rgb(65,69,82)", transition: "all 120ms"
  }}
  onMouseEnter={e => { if (!active) e.currentTarget.style.background = "rgb(243,244,247)"; }}
  onMouseLeave={e => { if (!active) e.currentTarget.style.background = tone === "outline" ? "#fff" : "transparent"; }}
  >
    <Icon name={icon} size={size === 28 ? 14 : 16} />
  </button>
);

Object.assign(window, { Button, Chip, Avatar, AvatarGroup, Icon, ProgressBar, StatusDot, KPICard, Card, IconBtn, TONES });