// Atoms — Button, Chip, Avatar, Icon — Mindworks AI Journey Builder

const Icon = ({ name, size = 16, style = {}, opacity = 1, color }) => (
  <img
    src={`${ICONS}/${name}.svg`}
    alt=""
    style={{
      width: size, height: size, opacity, display: "inline-block",
      filter: color === "brand"
        ? "invert(28%) sepia(98%) saturate(3500%) hue-rotate(238deg) brightness(96%) contrast(105%)"
        : color === "white" ? "brightness(0) invert(1)" : color === "muted" ? "opacity(.65)" : "none",
      ...style,
    }}
  />
);

const Button = ({ kind = "secondary", size = "md", icon, iconRight, children, onClick, style = {}, disabled }) => {
  const sizes = {
    sm: { height: 24, fontSize: 12, padding: "0 10px" },
    md: { height: 32, fontSize: 14, padding: "0 14px" },
    lg: { height: 38, fontSize: 14, padding: "0 18px" },
  };
  const kinds = {
    primary:     { background: "var(--mw-brand-500)", color: "#fff", border: "0", boxShadow: "var(--mw-shadow-button)" },
    secondary:   { background: "#fff", color: "var(--mw-text-secondary)", border: "1px solid var(--mw-border-strong)" },
    ghost:       { background: "transparent", color: "var(--mw-text-secondary)", border: "0" },
    destructive: { background: "var(--mw-danger)", color: "#fff", border: "0" },
    ai:          {
      background: "linear-gradient(135deg, #1F3CFF 0%, #534aff 45%, #7B3DCC 100%)",
      color: "#fff", border: "0",
      boxShadow: "0 1px 1px 0 rgba(42, 43, 57, 0.1), 0 0 0 1px rgba(83,74,255,.25)",
    },
  };
  const iconColor = kind === "primary" || kind === "destructive" || kind === "ai" ? "white" : null;
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        ...sizes[size], ...kinds[kind],
        borderRadius: 9999, fontFamily: "inherit", fontWeight: 500,
        cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.5 : 1,
        display: "inline-flex", alignItems: "center", gap: 6, lineHeight: 1,
        transition: "filter 120ms, transform 120ms",
        whiteSpace: "nowrap",
        ...style,
      }}
      onMouseDown={(e) => !disabled && (e.currentTarget.style.transform = "scale(.985)")}
      onMouseUp={(e) => (e.currentTarget.style.transform = "scale(1)")}
      onMouseLeave={(e) => (e.currentTarget.style.transform = "scale(1)")}
    >
      {icon && <Icon name={icon} size={14} color={iconColor} />}
      {children}
      {iconRight && <Icon name={iconRight} size={14} color={iconColor} />}
    </button>
  );
};

const Chip = ({ tone = "neutral", children, dot, style = {} }) => {
  const tones = {
    success: { bg: "#DAF0E0", fg: "#22863A" },
    warning: { bg: "#FFF9E0", fg: "#B2791A" },
    danger:  { bg: "#FCE2E2", fg: "#C02F32" },
    info:    { bg: "#E8E9F6", fg: "#534AFF" },
    purple:  { bg: "#F0E8FF", fg: "#7B3DCC" },
    neutral: { bg: "#F1F2F4", fg: "#6A7383" },
    dark:    { bg: "#1A1B25", fg: "#fff" },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "2px 8px", borderRadius: 6, fontSize: 12, fontWeight: 500,
      background: t.bg, color: t.fg, lineHeight: 1.4, ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: "50%", background: t.fg }} />}
      {children}
    </span>
  );
};

const Avatar = ({ initials = "NM", color = "#76ADFF", size = 28 }) => (
  <div style={{
    width: size, height: size, borderRadius: "50%", background: color,
    color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center",
    fontSize: Math.max(10, Math.round(size * 0.38)), fontWeight: 600, flexShrink: 0, letterSpacing: 0.2,
  }}>
    {initials}
  </div>
);

// The AI Orb — a small animated gradient mark that signals AI features
const AIOrb = ({ size = 22, spin = false }) => (
  <span style={{
    width: size, height: size, borderRadius: "50%",
    background: "conic-gradient(from 220deg, #7BC8FF, #3B7FFF, #534aff, #7B3DCC, #534aff, #7BC8FF)",
    display: "inline-block", position: "relative",
    boxShadow: "0 0 0 1px rgba(83,74,255,.18), 0 6px 14px -6px rgba(83,74,255,.55)",
    animation: spin ? "mw-orb-spin 6s linear infinite, mw-orb-breathe 2.4s ease-in-out infinite" : "mw-orb-breathe 4s ease-in-out infinite",
  }}>
    <span style={{
      position: "absolute", inset: Math.max(2, size * 0.18), borderRadius: "50%",
      background: "radial-gradient(circle at 32% 28%, #fff 0%, #cfd6ff 35%, transparent 70%)",
      opacity: 0.7,
    }} />
  </span>
);

// Step icon — used in both Builder preview & Viewer timeline
const StepIcon = ({ kind, status, size = 32 }) => {
  const map = {
    trigger: { icon: "flag", bg: "#1A1B25", fg: "#fff" },
    email:   { icon: "send", bg: "#fff",    fg: "#534AFF", border: "#534AFF" },
    task:    { icon: "user", bg: "#fff",    fg: "#FF9143", border: "#FF9143" },
    exit:    { icon: "check",bg: "#fff",    fg: "#22863A", border: "#22863A" },
  };
  let m = map[kind] || map.email;
  // status overrides
  if (status === "done") {
    m = { ...m, bg: m.fg === "#fff" ? "#1A1B25" : m.fg, fg: "#fff", border: m.fg };
  } else if (status === "skipped") {
    m = { ...m, bg: "#fff", fg: "#A3ACBA", border: "#A3ACBA", strike: true };
  } else if (status === "shifted") {
    m = { ...m, bg: "#fff", fg: m.fg, border: m.fg };
  }
  return (
    <span style={{
      width: size, height: size, borderRadius: "50%",
      background: m.bg, border: m.border ? `1.5px solid ${m.border}` : "0",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      flexShrink: 0, position: "relative",
      boxShadow: status === "done" && kind !== "trigger" ? "0 1px 2px rgba(64,68,82,.10)" : "none",
    }}>
      <Icon name={m.icon} size={Math.round(size * 0.45)}
            style={{ filter: m.fg === "#fff"
                ? "brightness(0) invert(1)"
                : `brightness(0) saturate(100%) ${m.fg === "#A3ACBA" ? "invert(74%) sepia(7%) saturate(345%) hue-rotate(184deg) brightness(91%) contrast(89%)"
                  : m.fg === "#534AFF" ? "invert(28%) sepia(98%) saturate(3500%) hue-rotate(238deg) brightness(96%) contrast(105%)"
                  : m.fg === "#FF9143" ? "invert(71%) sepia(58%) saturate(2253%) hue-rotate(335deg) brightness(102%) contrast(101%)"
                  : m.fg === "#22863A" ? "invert(36%) sepia(91%) saturate(394%) hue-rotate(86deg) brightness(94%) contrast(89%)"
                  : ""}` }} />
      {status === "skipped" && (
        <span style={{
          position: "absolute", left: 4, right: 4, top: "50%",
          height: 1.5, background: "#A3ACBA", transform: "rotate(-22deg)",
        }} />
      )}
    </span>
  );
};

Object.assign(window, { Icon, Button, Chip, Avatar, AIOrb, StepIcon });