// ─────────────────────────────────────────────────────────────
// PORTAL UI — shared components mirroring the Zentro design system
// ─────────────────────────────────────────────────────────────
const PUI = {};

PUI.Btn = function Btn({ variant = "primary", size = "md", children, iconLeft, iconRight, fullWidth, ...rest }) {
  const pad = size === "sm" ? "8px 14px" : size === "lg" ? "14px 26px" : "10px 18px";
  const fs  = size === "sm" ? 13 : size === "lg" ? 15 : 14;
  const styles = {
    primary:   { background: "var(--gold-500)", color: "#08080A", border: "none" },
    secondary: { background: "transparent", color: "var(--text-secondary)", border: "1px solid var(--border-default)" },
    ghost:     { background: "transparent", color: "var(--text-secondary)", border: "none" },
    danger:    { background: "rgba(226,73,46,0.1)", color: "#E2492E", border: "1px solid rgba(226,73,46,0.3)" },
  }[variant];
  return (
    <button {...rest} style={{
      ...styles, padding: pad, fontSize: fs, fontWeight: 700, borderRadius: 10,
      fontFamily: "var(--font-sans)", cursor: rest.disabled ? "not-allowed" : "pointer",
      opacity: rest.disabled ? 0.4 : 1,
      display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
      width: fullWidth ? "100%" : "auto", transition: "all .15s", whiteSpace: "nowrap",
      ...rest.style,
    }}
    onMouseEnter={(e) => { if (variant === "primary") e.currentTarget.style.background = "var(--gold-400)"; if (variant === "secondary" || variant === "ghost") e.currentTarget.style.color = "var(--text-primary)"; }}
    onMouseLeave={(e) => { if (variant === "primary") e.currentTarget.style.background = "var(--gold-500)"; if (variant === "secondary" || variant === "ghost") e.currentTarget.style.color = "var(--text-secondary)"; }}
    >{iconLeft}{children}{iconRight}</button>
  );
};

PUI.Card = function Card({ children, padding = 24, hover, onClick, style }) {
  return (
    <div onClick={onClick} style={{
      background: "var(--surface-card)", border: "1px solid var(--border-subtle)",
      borderRadius: 16, padding, transition: "border-color .15s, transform .15s",
      cursor: onClick ? "pointer" : "default", ...style,
    }}
    onMouseEnter={(e) => { if (hover) { e.currentTarget.style.borderColor = "rgba(251,208,40,0.3)"; e.currentTarget.style.transform = "translateY(-2px)"; } }}
    onMouseLeave={(e) => { if (hover) { e.currentTarget.style.borderColor = "var(--border-subtle)"; e.currentTarget.style.transform = "none"; } }}
    >{children}</div>
  );
};

PUI.Avatar = function Avatar({ name = "?", url, size = 34 }) {
  if (url) return <img src={url} alt={name} style={{ width: size, height: size, borderRadius: "50%", objectFit: "cover", flexShrink: 0, border: "1.5px solid rgba(251,208,40,0.3)" }} />;
  const initials = name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase() || "?";
  return (
    <div style={{
      width: size, height: size, borderRadius: "50%", flexShrink: 0,
      background: "rgba(251,208,40,0.12)", border: "1.5px solid rgba(251,208,40,0.3)",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "var(--font-display)", fontWeight: 700, fontSize: size * 0.38, color: "var(--gold-400)",
    }}>{initials}</div>
  );
};

PUI.hexRgba = function (hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(x => x + x).join("") : h, 16);
  return "rgba(" + ((n >> 16) & 255) + "," + ((n >> 8) & 255) + "," + (n & 255) + "," + a + ")";
};

PUI.StatusBadge = function StatusBadge({ status }) {
  const s = window.PORTAL.statusOf(status);
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 10px",
      borderRadius: 99, fontSize: 11, fontWeight: 700, whiteSpace: "nowrap",
      color: s.color, background: PUI.hexRgba(s.color, 0.1),
      border: "1px solid " + PUI.hexRgba(s.color, 0.35),
    }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: s.color }} />
      {s.label}
    </span>
  );
};

PUI.PriorityBadge = function PriorityBadge({ priority }) {
  const p = window.PORTAL.priorityOf(priority);
  return <span style={{ fontSize: 11, fontWeight: 700, color: p.color, letterSpacing: "0.04em", textTransform: "uppercase" }}>{p.label}</span>;
};

PUI.Field = function Field({ label, children, required }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
      {label && <label style={{ fontSize: 12, fontWeight: 700, color: "var(--text-secondary)", letterSpacing: "0.02em" }}>
        {label}{required && <span style={{ color: "var(--gold-400)" }}> *</span>}
      </label>}
      {children}
    </div>
  );
};

PUI.inputStyle = {
  padding: "11px 13px", borderRadius: 10, width: "100%",
  background: "var(--surface-inset)", border: "1.5px solid var(--border-default)",
  color: "var(--text-primary)", fontSize: 14, fontFamily: "var(--font-sans)", outline: "none",
};

PUI.Input = function Input(props) {
  return <input {...props} style={{ ...PUI.inputStyle, ...props.style }}
    onFocus={(e) => e.target.style.borderColor = "var(--gold-500)"}
    onBlur={(e) => e.target.style.borderColor = "var(--border-default)"} />;
};

PUI.Select = function Select({ children, ...props }) {
  return <select {...props} style={{ ...PUI.inputStyle, cursor: "pointer", ...props.style }}>{children}</select>;
};

PUI.Textarea = function Textarea(props) {
  return <textarea {...props} style={{ ...PUI.inputStyle, resize: "vertical", minHeight: 90, lineHeight: 1.6, ...props.style }}
    onFocus={(e) => e.target.style.borderColor = "var(--gold-500)"}
    onBlur={(e) => e.target.style.borderColor = "var(--border-default)"} />;
};

PUI.Modal = function Modal({ open, onClose, children, width = 560 }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 1000, background: "rgba(4,4,6,0.75)",
      backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "100%", maxWidth: width, maxHeight: "88vh", overflowY: "auto",
        background: "var(--surface-raised)", border: "1px solid var(--border-default)",
        borderRadius: 20, padding: 30, animation: "pmodal .22s cubic-bezier(.22,1,.36,1)",
      }}>{children}</div>
    </div>
  );
};

PUI.SectionTitle = function SectionTitle({ children, right }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 22, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>{children}</h2>
      {right}
    </div>
  );
};

PUI.Empty = function Empty({ icon, title, sub }) {
  return (
    <div style={{ textAlign: "center", padding: "56px 20px", color: "var(--text-tertiary)" }}>
      <div style={{ fontSize: 32, marginBottom: 10, opacity: 0.5 }}>{icon || "◇"}</div>
      <div style={{ fontSize: 15, fontWeight: 700, color: "var(--text-secondary)" }}>{title}</div>
      {sub && <div style={{ fontSize: 13, marginTop: 6 }}>{sub}</div>}
    </div>
  );
};

PUI.Spinner = function Spinner({ size = 18 }) {
  return <span style={{
    width: size, height: size, border: "2px solid rgba(251,208,40,0.25)",
    borderTopColor: "var(--gold-500)", borderRadius: "50%", display: "inline-block",
    animation: "pspin .8s linear infinite",
  }} />;
};

window.PUI = PUI;