/* Carelon Passport — UI primitives */

const TONES = {
  green:  { bg: "#E6F6F0", fg: "#0B7A5B", dot: "#12A877" },
  teal:   { bg: "#E1F5F5", fg: "#058C8B", dot: "#00BBBA" },
  blue:   { bg: "#E6F2FD", fg: "#1E7BC4", dot: "#44B8F3" },
  violet: { bg: "#EFEAFE", fg: "#6B43E0", dot: "#794CFF" },
  purple: { bg: "#EFE7FB", fg: "#5009B5", dot: "#5009B5" },
  amber:  { bg: "#FBF1DE", fg: "#9A6A12", dot: "#D9A441" },
  coral:  { bg: "#FCEAE6", fg: "#C5503A", dot: "#E2705C" },
  slate:  { bg: "#EFF1F6", fg: "#5A6076", dot: "#9aa0b3" },
};

const StatusPill = ({ tone = "slate", children, pulse = false, icon = null }) => {
  const t = TONES[tone] || TONES.slate;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "4px 10px 4px 9px", borderRadius: 999,
      background: t.bg, color: t.fg,
      fontSize: 12.5, fontWeight: 600, letterSpacing: ".005em", lineHeight: 1.1, whiteSpace: "nowrap",
    }}>
      {icon ? <Icon name={icon} size={13} stroke={2} /> : (
        <span style={{ position: "relative", width: 7, height: 7 }}>
          <span style={{ position: "absolute", inset: 0, borderRadius: 999, background: t.dot }} />
          {pulse && <span className="cp-pulse" style={{ position: "absolute", inset: 0, borderRadius: 999, background: t.dot }} />}
        </span>
      )}
      {children}
    </span>
  );
};

const Button = ({ variant = "primary", size = "md", children, icon, iconRight, onClick, style = {}, full = false, type = "button" }) => {
  const sizes = {
    sm: { padding: "0 14px", height: 36, fontSize: 13.5, radius: 10, gap: 7 },
    md: { padding: "0 18px", height: 44, fontSize: 14.5, radius: 12, gap: 8 },
    lg: { padding: "0 22px", height: 50, fontSize: 15.5, radius: 14, gap: 9 },
  };
  const s = sizes[size] || sizes.md;
  const variants = {
    primary: { background: "var(--ink)", color: "#fff", border: "1px solid transparent", boxShadow: "0 1px 1px rgba(28,21,48,.18), 0 6px 16px -8px rgba(28,21,48,.5)" },
    brand:   { background: "linear-gradient(120deg, #5009B5 0%, #6A2BD6 55%, #794CFF 100%)", color: "#fff", border: "1px solid transparent", boxShadow: "0 1px 1px rgba(80,9,181,.25), 0 8px 20px -8px rgba(80,9,181,.55)" },
    secondary: { background: "#fff", color: "var(--ink)", border: "1px solid var(--line-strong)", boxShadow: "0 1px 1.5px rgba(28,21,48,.04)" },
    ghost: { background: "transparent", color: "var(--ink-2)", border: "1px solid transparent" },
    soft: { background: "var(--purple-soft)", color: "var(--purple)", border: "1px solid transparent" },
  };
  const v = variants[variant] || variants.primary;
  return (
    <button type={type} onClick={onClick} className="cp-btn" style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: s.gap,
      padding: s.padding, height: s.height, borderRadius: s.radius,
      fontSize: s.fontSize, fontWeight: 600, fontFamily: "inherit",
      cursor: "pointer", width: full ? "100%" : "auto", letterSpacing: ".005em", whiteSpace: "nowrap", flexShrink: 0,
      ...v, ...style,
    }}>
      {icon && <Icon name={icon} size={s.fontSize + 3} stroke={1.9} />}
      {children}
      {iconRight && <Icon name={iconRight} size={s.fontSize + 2} stroke={1.9} />}
    </button>
  );
};

const IconButton = ({ name, onClick, size = 20, label, active = false, badge = null, style = {} }) => (
  <button type="button" onClick={onClick} aria-label={label} className="cp-iconbtn" style={{
    position: "relative", width: 42, height: 42, borderRadius: 12,
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    background: active ? "var(--purple-soft)" : "transparent",
    color: active ? "var(--purple)" : "var(--ink-2)",
    border: "1px solid " + (active ? "transparent" : "var(--line)"), cursor: "pointer", ...style,
  }}>
    <Icon name={name} size={size} stroke={1.75} />
    {badge != null && (
      <span style={{
        position: "absolute", top: 6, right: 6, minWidth: 16, height: 16, padding: "0 4px",
        borderRadius: 999, background: "var(--coral)", color: "#fff", fontSize: 10.5, fontWeight: 700,
        display: "flex", alignItems: "center", justifyContent: "center", border: "2px solid #fff",
      }}>{badge}</span>
    )}
  </button>
);

const Avatar = ({ initials, size = 40, tone = "brand", online = false, src = null }) => {
  const grad = tone === "brand"
    ? "linear-gradient(135deg, #5009B5 0%, #794CFF 50%, #00BBBA 130%)"
    : "linear-gradient(135deg, #6A2BD6, #44B8F3)";
  return (
    <span style={{ position: "relative", display: "inline-flex", flexShrink: 0 }}>
      <span style={{
        width: size, height: size, borderRadius: 999, display: "flex", alignItems: "center", justifyContent: "center",
        background: grad, color: "#fff", fontWeight: 700, fontSize: size * 0.38, letterSpacing: ".01em",
        boxShadow: "inset 0 0 0 2px rgba(255,255,255,.18)", overflow: "hidden",
      }}>
        {src ? <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : initials}
      </span>
      {online && <span style={{
        position: "absolute", right: -1, bottom: -1, width: size * 0.3, height: size * 0.3,
        borderRadius: 999, background: "#12A877", border: "2.5px solid #fff",
      }} />}
    </span>
  );
};

const Card = ({ children, style = {}, pad = 24, interactive = false, className = "", onClick }) => (
  <div onClick={onClick} className={"cp-card " + (interactive ? "cp-card-i " : "") + className} style={{
    background: "var(--card)", border: "1px solid var(--line)", borderRadius: 22,
    padding: pad, boxShadow: "var(--shadow)", ...style,
  }}>{children}</div>
);

const CardHead = ({ title, sub, icon, action, tone = "purple" }) => {
  const t = TONES[tone] || TONES.purple;
  return (
    <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, marginBottom: 18 }}>
      <div style={{ display: "flex", gap: 12, alignItems: "center", minWidth: 0 }}>
        {icon && (
          <span style={{ width: 38, height: 38, borderRadius: 11, background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <Icon name={icon} size={19} stroke={1.8} />
          </span>
        )}
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 16.5, fontWeight: 700, color: "var(--ink)", letterSpacing: "-.01em" }}>{title}</div>
          {sub && <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2, fontWeight: 450 }}>{sub}</div>}
        </div>
      </div>
      {action}
    </div>
  );
};

const TextLink = ({ children, onClick, icon = "arrowRight" }) => (
  <button type="button" onClick={onClick} className="cp-link" style={{
    display: "inline-flex", alignItems: "center", gap: 5, background: "none", border: "none", cursor: "pointer",
    color: "var(--purple)", fontWeight: 600, fontSize: 13.5, fontFamily: "inherit", padding: 0, whiteSpace: "nowrap",
  }}>
    {children}{icon && <Icon name={icon} size={15} stroke={2} />}
  </button>
);

/* ---- Toast system ---- */
const ToastCtx = React.createContext(() => {});
const useToast = () => React.useContext(ToastCtx);

const ToastProvider = ({ children }) => {
  const [items, setItems] = React.useState([]);
  const push = React.useCallback((toast) => {
    const id = Math.random().toString(36).slice(2);
    setItems((x) => [...x, { id, ...toast }]);
    setTimeout(() => setItems((x) => x.filter((t) => t.id !== id)), toast.duration || 3400);
  }, []);
  return (
    <ToastCtx.Provider value={push}>
      {children}
      <div style={{ position: "fixed", right: 24, bottom: 24, display: "flex", flexDirection: "column", gap: 10, zIndex: 1000, alignItems: "flex-end" }}>
        {items.map((t) => (
          <div key={t.id} className="cp-toast" style={{
            display: "flex", alignItems: "center", gap: 12, padding: "13px 16px",
            background: "var(--ink)", color: "#fff", borderRadius: 14, minWidth: 280, maxWidth: 380,
            boxShadow: "0 12px 32px -8px rgba(28,21,48,.5)",
          }}>
            <span style={{ width: 30, height: 30, borderRadius: 9, background: "rgba(255,255,255,.13)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, color: t.tone === "warn" ? "#F4C25E" : "#5BE0C9" }}>
              <Icon name={t.icon || "checkCircle"} size={17} stroke={2} />
            </span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 650 }}>{t.title}</div>
              {t.body && <div style={{ fontSize: 12.5, color: "rgba(255,255,255,.7)", marginTop: 1 }}>{t.body}</div>}
            </div>
          </div>
        ))}
      </div>
    </ToastCtx.Provider>
  );
};

Object.assign(window, { StatusPill, Button, IconButton, Avatar, Card, CardHead, TextLink, ToastProvider, useToast, TONES });