// Shared atoms used across the app kit.

const Icon = ({ name, size = 16, color, style }) => {
  const [svg, setSvg] = React.useState("");

  React.useEffect(() => {
    if (!window.lucide) return;
    // Render icon in a detached container so createIcons never touches React-managed DOM
    const tmp = document.createElement("div");
    tmp.innerHTML = `<i data-lucide="${name}"></i>`;
    document.body.appendChild(tmp);
    window.lucide.createIcons({ attrs: { "stroke-width": "1.5" } });
    setSvg(tmp.innerHTML);
    document.body.removeChild(tmp);
  }, [name]);

  return (
    <span
      dangerouslySetInnerHTML={{ __html: svg }}
      style={{ display: "inline-flex", width: size, height: size, flexShrink: 0, color, ...style }}
    />
  );
};

function Button({ variant = "primary", size = "md", children, icon, trailingIcon, onClick, style, disabled }) {
  const sizes = {
    sm: { height: 30, fontSize: 13, padding: "0 12px", radius: 6 },
    md: { height: 36, fontSize: 14, padding: "0 14px", radius: 8 },
    lg: { height: 44, fontSize: 15, padding: "0 18px", radius: 10 },
  };
  const variants = {
    primary:   { bg: "var(--gr-green-500)", color: "#fff", border: "transparent", hover: "var(--gr-green-600)" },
    secondary: { bg: "var(--bg-surface)", color: "var(--fg-1)", border: "var(--border-1)", hover: "var(--bg-muted)" },
    ghost:     { bg: "transparent", color: "var(--fg-1)", border: "transparent", hover: "var(--bg-subtle)" },
    danger:    { bg: "var(--gr-danger)", color: "#fff", border: "transparent", hover: "#9c1c14" },
  };
  const s = sizes[size]; const v = variants[variant];
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={disabled ? undefined : onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      disabled={disabled}
      style={{
        height: s.height, padding: s.padding, borderRadius: s.radius,
        background: disabled ? "var(--gr-stone-100)" : (hover ? v.hover : v.bg),
        color: disabled ? "var(--fg-4)" : v.color,
        border: `1px solid ${v.border}`,
        font: `500 ${s.fontSize}px var(--font-sans)`, letterSpacing: "-0.005em",
        display: "inline-flex", alignItems: "center", gap: 8,
        cursor: disabled ? "not-allowed" : "pointer",
        transition: "background var(--dur-fast) var(--ease-out)",
        whiteSpace: "nowrap",
        ...style,
      }}>
      {icon}{children}{trailingIcon}
    </button>
  );
}

const Card = ({ children, raised, padding = 18, style }) => (
  <div style={{
    background: "var(--bg-surface)",
    backdropFilter: "blur(12px)",
    WebkitBackdropFilter: "blur(12px)",
    border: "1px solid var(--border-1)",
    borderRadius: 12, padding,
    boxShadow: raised ? "var(--shadow-sm)" : "none",
    ...style,
  }}>{children}</div>
);

const Pill = ({ tone = "neutral", children, dot, style }) => {
  const tones = {
    neutral: { bg: "var(--bg-muted)", fg: "var(--fg-1)" },
    success: { bg: "var(--gr-green-50)", fg: "var(--gr-green-700)" },
    warning: { bg: "var(--gr-warning-bg)", fg: "var(--gr-warning)" },
    danger:  { bg: "var(--gr-danger-bg)", fg: "var(--gr-danger)" },
    info:    { bg: "var(--gr-info-bg)", fg: "var(--gr-info)" },
    outline: { bg: "var(--bg-surface)", fg: "var(--fg-2)", border: "var(--border-1)" },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "3px 10px", borderRadius: 999,
      font: "500 12px var(--font-sans)", color: t.fg, background: t.bg,
      border: t.border ? `1px solid ${t.border}` : "1px solid transparent",
      ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: "currentColor" }}></span>}
      {children}
    </span>
  );
};

const Avatar = ({ initials = "JL", size = 32, brand, style }) => (
  <div style={{
    width: size, height: size, borderRadius: 999,
    background: brand ? "var(--gr-green-500)" : "var(--gr-stone-100)",
    color: brand ? "#fff" : "var(--fg-2)",
    border: brand ? "1px solid var(--gr-green-600)" : "1px solid var(--border-1)",
    font: `600 ${Math.round(size * 0.36)}px var(--font-sans)`,
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    flexShrink: 0,
    ...style,
  }}>{initials}</div>
);

const ProgressBar = ({ value = 0, height = 6, tone = "brand" }) => (
  <div style={{ width: "100%", height, background: "var(--gr-stone-100)", borderRadius: 999, overflow: "hidden" }}>
    <div style={{
      height: "100%",
      width: `${Math.max(0, Math.min(100, value))}%`,
      background: tone === "brand" ? "var(--gr-green-500)" : tone === "warning" ? "var(--gr-warning)" : "var(--fg-3)",
      transition: "width 280ms var(--ease-out)",
    }} />
  </div>
);

const Eyebrow = ({ children, color = "var(--fg-3)" }) => (
  <div style={{ font: "var(--text-caption)", letterSpacing: "0.06em", textTransform: "uppercase", color }}>{children}</div>
);

const TextField = ({ label, helper, error, ...rest }) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <label style={{ display: "block" }}>
      {label && <div style={{ font: "500 13px var(--font-sans)", color: "var(--fg-1)", marginBottom: 6 }}>{label}</div>}
      <input {...rest}
        onFocus={e => { setFocused(true); rest.onFocus?.(e); }}
        onBlur={e => { setFocused(false); rest.onBlur?.(e); }}
        style={{
          width: "100%", height: 38, padding: "0 12px", boxSizing: "border-box",
          background: "var(--bg-surface)",
          border: `1px solid ${error ? "var(--gr-danger)" : focused ? "var(--border-focus)" : "var(--border-1)"}`,
          borderRadius: 6, font: "var(--text-body)", color: "var(--fg-1)",
          outline: "none",
          boxShadow: focused ? "var(--ring-focus)" : "none",
          transition: "border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)",
        }} />
      {helper && !error && <div style={{ font: "var(--text-body-sm)", color: "var(--fg-3)", marginTop: 6 }}>{helper}</div>}
      {error && <div style={{ font: "var(--text-body-sm)", color: "var(--gr-danger)", marginTop: 6 }}>{error}</div>}
    </label>
  );
};

Object.assign(window, { Icon, Button, Card, Pill, Avatar, ProgressBar, Eyebrow, TextField });