// Shared UI primitives

const Pill = ({ tone = "neutral", children, dot = false }) => {
  const tones = {
    neutral: { bg: "var(--bg-3)", fg: "var(--ink-2)", dot: "var(--ink-3)" },
    success: { bg: "var(--accent-2)", fg: "var(--accent)", dot: "var(--accent)" },
    warn:    { bg: "var(--warn-2)", fg: "oklch(48% 0.14 75)", dot: "var(--warn)" },
    danger:  { bg: "var(--danger-2)", fg: "var(--danger)", dot: "var(--danger)" },
    info:    { bg: "var(--info-2)", fg: "oklch(40% 0.1 240)", dot: "oklch(55% 0.12 240)" },
    ink:     { bg: "var(--ink)", fg: "#fff", dot: "#fff" },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      background: t.bg, color: t.fg,
      padding: "3px 9px", borderRadius: 999,
      fontSize: 11.5, fontWeight: 500, letterSpacing: 0.1,
      whiteSpace: "nowrap",
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: t.dot, boxShadow: tone === "warn" ? `0 0 0 3px oklch(68% 0.14 75 / 0.18)` : "none" }} />}
      {children}
    </span>
  );
};

const Btn = ({ variant = "secondary", size = "md", icon, iconRight, children, onClick, disabled, style = {}, full = false }) => {
  const sizes = {
    sm: { pad: "6px 10px", fs: 12.5, h: 28, gap: 6 },
    md: { pad: "8px 14px", fs: 13, h: 34, gap: 8 },
    lg: { pad: "12px 20px", fs: 14, h: 44, gap: 10 },
  };
  const s = sizes[size];
  const variants = {
    primary: { bg: "var(--ink)", fg: "#fff", border: "var(--ink)", hover: "oklch(32% 0.01 85)" },
    accent:  { bg: "var(--accent)", fg: "#fff", border: "var(--accent)", hover: "oklch(46% 0.13 148)" },
    secondary: { bg: "var(--surface)", fg: "var(--ink)", border: "var(--line-2)", hover: "var(--bg-2)" },
    ghost:   { bg: "transparent", fg: "var(--ink-2)", border: "transparent", hover: "var(--bg-3)" },
    danger:  { bg: "var(--surface)", fg: "var(--danger)", border: "var(--line-2)", hover: "var(--danger-2)" },
  };
  const v = variants[variant];
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        gap: s.gap, padding: s.pad, height: s.h, minHeight: s.h,
        background: disabled ? "var(--bg-3)" : (hover ? v.hover : v.bg),
        color: disabled ? "var(--ink-3)" : v.fg,
        border: `1px solid ${disabled ? "var(--line)" : v.border}`,
        borderRadius: 7,
        fontSize: s.fs, fontWeight: 500,
        cursor: disabled ? "not-allowed" : "pointer",
        transition: "background 120ms, color 120ms, transform 60ms",
        width: full ? "100%" : "auto",
        ...style,
      }}
    >
      {icon && <Icon name={icon} size={s.fs + 3} />}
      {children}
      {iconRight && <Icon name={iconRight} size={s.fs + 3} />}
    </button>
  );
};

const Card = ({ children, style = {}, pad = 20 }) => (
  <div style={{
    background: "var(--surface)",
    border: "1px solid var(--line)",
    borderRadius: 12,
    padding: pad,
    ...style,
  }}>{children}</div>
);

const Section = ({ title, action, children, style = {} }) => (
  <Card pad={0} style={style}>
    {title && (
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "14px 18px",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.8, color: "var(--ink-2)" }}>{title}</div>
        {action}
      </div>
    )}
    <div>{children}</div>
  </Card>
);

const Avatar = ({ emp, size = 34 }) => {
  const initials = (emp.first_name[0] + (emp.last_name[0] || "")).toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: 999,
      background: emp.avatar_color || "var(--bg-3)",
      color: "oklch(28% 0.02 85)",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontSize: size * 0.38, fontWeight: 600,
      letterSpacing: 0.3,
      flexShrink: 0,
    }}>{initials}</div>
  );
};

const Row = ({ children, style = {} }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 12, ...style }}>{children}</div>
);

// KPI card
const KPI = ({ label, value, sub, tone = "neutral", action }) => (
  <Card style={{ flex: 1, minWidth: 0 }}>
    <div style={{ fontSize: 11.5, fontWeight: 500, textTransform: "uppercase", letterSpacing: 0.8, color: "var(--ink-3)" }}>{label}</div>
    <div style={{ marginTop: 10, fontFamily: "'Instrument Sans', sans-serif", fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--ink)" }}>{value}</div>
    {sub && <div style={{ marginTop: 6, fontSize: 12.5, color: "var(--ink-3)" }}>{sub}</div>}
    {action && <div style={{ marginTop: 14 }}>{action}</div>}
  </Card>
);

const Money = ({ n, strong, sign, color, size }) => {
  const s = LS_fmt.eurSigned(n);
  return (
    <span className="num" style={{
      fontVariantNumeric: "tabular-nums",
      fontWeight: strong ? 600 : 500,
      color: color || (n < 0 ? "var(--ink-2)" : "var(--ink)"),
      fontSize: size,
      whiteSpace: "nowrap",
    }}>{s}</span>
  );
};

const Divider = ({ v, style = {} }) => v
  ? <div style={{ width: 1, alignSelf: "stretch", background: "var(--line)", ...style }} />
  : <div style={{ height: 1, background: "var(--line)", ...style }} />;

// Modal
const Modal = ({ open, onClose, children, width = 720 }) => {
  if (!open) return null;
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 100,
      background: "oklch(20% 0.01 85 / 0.42)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 24,
      animation: "fadeIn 140ms ease",
    }} onClick={onClose}>
      <style>{`@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }`}</style>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "var(--surface)",
        borderRadius: 14,
        width: "100%",
        maxWidth: width,
        maxHeight: "90vh",
        overflow: "auto",
        boxShadow: "0 20px 60px -20px oklch(20% 0.01 85 / 0.35)",
        animation: "popIn 180ms cubic-bezier(.2,.9,.3,1.2)",
      }}>{children}</div>
    </div>
  );
};

// Toast
const ToastStack = ({ toasts }) => (
  <div style={{ position: "fixed", bottom: 20, right: 20, zIndex: 200, display: "flex", flexDirection: "column", gap: 8 }}>
    {toasts.map(t => (
      <div key={t.id} style={{
        background: "var(--ink)", color: "#fff",
        padding: "10px 14px", borderRadius: 8,
        fontSize: 13, display: "flex", alignItems: "center", gap: 10,
        boxShadow: "0 10px 30px -10px oklch(20% 0.01 85 / 0.4)",
        animation: "popIn 200ms cubic-bezier(.2,.9,.3,1.2)",
      }}>
        {t.icon && <Icon name={t.icon} size={15} />}
        {t.msg}
      </div>
    ))}
  </div>
);

Object.assign(window, { Pill, Btn, Card, Section, Avatar, Row, KPI, Money, Divider, Modal, ToastStack });