// src/ui/primitives.jsx — shared small UI building blocks

const FW = {
  navy: "#221659",
  navy2: "#2C1F66",
  yellow: "#F9EC31",
  mint: "#00E69E",
  cyan: "#2ADDE6",
  cream: "#FDFCFA",
  beige: "#F9F6EF",
  beige2: "#EFE8D3",
  gray50: "#F5F5F5",
  gray100: "#EAEAEB",
  gray500: "#737373",
  white: "#FFFFFF",
};
window.FW = FW;

// Primary yellow pill button with navy arrow well
const FwButton = ({ variant = "primary", children, onClick, arrow = true, icon, disabled, style = {}, small = false, ...rest }) => {
  const padding = small ? "10px 16px" : "14px 22px";
  const fontSize = small ? 15 : 16;
  const bases = {
    primary:   { background: FW.yellow, color: FW.navy, border: 0 },
    navy:      { background: FW.navy,   color: "#fff",  border: 0 },
    secondary: { background: FW.white,  color: FW.navy, border: `1px solid ${FW.gray100}` },
    ghost:     { background: "transparent", color: FW.navy, border: 0 },
    danger:    { background: "transparent", color: "#B0384B", border: `1px solid #E8C6CD` },
  };
  const arrowBg = variant === "navy" ? FW.yellow : FW.navy;
  const arrowFg = variant === "navy" ? FW.navy : (variant === "primary" ? FW.yellow : "#fff");

  return (
    <button onClick={disabled ? undefined : onClick} disabled={disabled} style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      padding, borderRadius: 999, fontWeight: 700, fontSize, cursor: disabled ? "not-allowed" : "pointer",
      fontFamily: "var(--font-sans)", lineHeight: 1.1,
      opacity: disabled ? 0.5 : 1,
      transition: "transform .15s ease, box-shadow .15s ease",
      ...bases[variant], ...style
    }} onMouseDown={e => !disabled && (e.currentTarget.style.transform = "scale(0.96)")}
       onMouseUp={e => (e.currentTarget.style.transform = "scale(1)")}
       onMouseLeave={e => (e.currentTarget.style.transform = "scale(1)")}
       {...rest}>
      {icon && <i className={icon} style={{ fontSize: 18 }} />}
      {children}
      {arrow && variant !== "ghost" && (
        <span style={{
          display: "inline-grid", placeItems: "center",
          width: 26, height: 26, borderRadius: 999,
          background: arrowBg, color: arrowFg, fontSize: 14,
        }}>→</span>
      )}
    </button>
  );
};
window.FwButton = FwButton;

// Card — flat with optional tint and soft shadow
const FwCard = ({ tint, children, style = {}, padded = true, ...rest }) => {
  const tints = { mint: FW.mint, cyan: FW.cyan, yellow: FW.yellow, cream: FW.cream, navy: FW.navy };
  return (
    <div style={{
      background: tint ? tints[tint] : FW.white,
      color: tint === "navy" ? "#fff" : FW.navy,
      borderRadius: 24,
      padding: padded ? 32 : 0,
      boxShadow: "0 4px 12px rgba(0,0,0,.06)",
      ...style
    }} {...rest}>{children}</div>
  );
};
window.FwCard = FwCard;

// Input field
const FwInput = React.forwardRef(({ label, hint, error, suffix, style = {}, containerStyle = {}, ...rest }, ref) => (
  <label style={{ display: "block", ...containerStyle }}>
    {label && <div style={{ fontSize: 14, fontWeight: 700, color: FW.navy, marginBottom: 8 }}>{label}</div>}
    <div style={{
      display: "flex", alignItems: "center",
      border: `1.5px solid ${error ? "#D4526E" : FW.gray100}`,
      background: FW.white,
      borderRadius: 14,
      padding: "0 16px",
      transition: "border-color .15s",
    }}>
      <input ref={ref} {...rest} style={{
        flex: 1, border: 0, background: "transparent", padding: "14px 0",
        fontFamily: "var(--font-sans)", fontSize: 16, color: FW.navy, outline: "none",
        ...style
      }} />
      {suffix && <span style={{ color: FW.gray500, fontSize: 14, fontWeight: 600 }}>{suffix}</span>}
    </div>
    {hint && !error && <div style={{ fontSize: 13, color: FW.gray500, marginTop: 6 }}>{hint}</div>}
    {error && <div style={{ fontSize: 13, color: "#B0384B", marginTop: 6 }}>{error}</div>}
  </label>
));
window.FwInput = FwInput;

// Textarea
const FwTextarea = ({ label, hint, value, onChange, placeholder, rows = 4, style = {} }) => (
  <label style={{ display: "block" }}>
    {label && <div style={{ fontSize: 14, fontWeight: 700, color: FW.navy, marginBottom: 8 }}>{label}</div>}
    <textarea value={value} onChange={onChange} placeholder={placeholder} rows={rows} style={{
      width: "100%", border: `1.5px solid ${FW.gray100}`, borderRadius: 14,
      padding: "14px 16px", fontFamily: "var(--font-sans)", fontSize: 16, color: FW.navy,
      background: FW.white, outline: "none", resize: "vertical", lineHeight: 1.4,
      ...style
    }} />
    {hint && <div style={{ fontSize: 13, color: FW.gray500, marginTop: 6 }}>{hint}</div>}
  </label>
);
window.FwTextarea = FwTextarea;

// Chip / tag
const FwChip = ({ children, tint = "cream", active, onClick, icon, style = {} }) => {
  const bg = active
    ? FW.navy
    : (tint === "mint"   ? "#E7FFF2"
      : tint === "cyan"   ? "#E5FBFD"
      : tint === "yellow" ? "#FEF9B3"
      : tint === "navy"   ? FW.navy
      : FW.cream);
  const fg = active || tint === "navy" ? "#fff" : FW.navy;
  return (
    <span onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "8px 14px", borderRadius: 999, background: bg, color: fg,
      fontSize: 14, fontWeight: 600, cursor: onClick ? "pointer" : "default",
      border: `1px solid ${active ? FW.navy : "transparent"}`,
      transition: "background-color .15s, color .15s, border-color .15s",
      ...style
    }}>
      {icon && <i className={icon} style={{ fontSize: 14 }} />}
      {children}
    </span>
  );
};
window.FwChip = FwChip;

// Progress pill — horizontal dots
const StepProgress = ({ steps, current, onJumpTo }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
    {steps.map((s, i) => {
      const klikbaar = !!onJumpTo && i < current;
      return (
        <React.Fragment key={i}>
          <div
            onClick={klikbaar ? () => onJumpTo(i) : undefined}
            role={klikbaar ? "button" : undefined}
            tabIndex={klikbaar ? 0 : undefined}
            onKeyDown={klikbaar ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onJumpTo(i); } } : undefined}
            title={klikbaar ? `Terug naar: ${s}` : undefined}
            style={{
              display: "flex", alignItems: "center", gap: 8,
              opacity: i > current ? 0.5 : 1,
              cursor: klikbaar ? "pointer" : "default",
              padding: "4px 6px", margin: "-4px -6px", borderRadius: 8,
              transition: "background .15s ease",
            }}
            onMouseEnter={klikbaar ? (e) => { e.currentTarget.style.background = FW.beige2; } : undefined}
            onMouseLeave={klikbaar ? (e) => { e.currentTarget.style.background = "transparent"; } : undefined}>
            <div style={{
              width: 24, height: 24, borderRadius: 999,
              background: i < current ? FW.mint : i === current ? FW.navy : FW.gray100,
              color: i <= current ? (i === current ? "#fff" : FW.navy) : FW.gray500,
              display: "grid", placeItems: "center", fontSize: 12, fontWeight: 700,
            }}>{i < current ? "✓" : i + 1}</div>
            <span style={{ fontSize: 14, fontWeight: i === current ? 700 : 500, color: FW.navy }}>
              {s}
            </span>
          </div>
          {i < steps.length - 1 && <span style={{ width: 20, height: 2, background: i < current ? FW.mint : FW.gray100 }} />}
        </React.Fragment>
      );
    })}
  </div>
);
window.StepProgress = StepProgress;

// Inline banner — warning, error of info (bijv. AI-foutmelding)
const FwInlineBanner = ({ type = "warning", children, onDismiss, style = {} }) => {
  const configs = {
    warning: { bg: "#FFF3CD", border: "#FFD25A", icon: "ri-alert-line",            color: FW.navy },
    error:   { bg: "#FEE8EC", border: "#E8C6CD", icon: "ri-error-warning-line",    color: "#B0384B" },
    info:    { bg: "#E7FFF2", border: "#00E69E", icon: "ri-information-line",       color: FW.navy },
  };
  const c = configs[type] || configs.warning;
  return (
    <div style={{
      display: "flex", alignItems: "flex-start", gap: 10,
      padding: "12px 16px", borderRadius: 12,
      background: c.bg, border: `1.5px solid ${c.border}`,
      fontSize: 14, color: c.color, lineHeight: 1.45,
      ...style
    }}>
      <i className={c.icon} style={{ fontSize: 16, marginTop: 1, flexShrink: 0 }} />
      <span style={{ flex: 1 }}>{children}</span>
      {onDismiss && (
        <button onClick={onDismiss} style={{
          background: "transparent", border: 0, cursor: "pointer",
          color: c.color, fontSize: 18, padding: "0 0 0 8px", lineHeight: 1, flexShrink: 0,
        }}>×</button>
      )}
    </div>
  );
};
window.FwInlineBanner = FwInlineBanner;