// Likeness — primitives shared across creator surfaces.

const Button = ({ variant = "primary", size = "md", icon, children, ...rest }) => {
  const styles = {
    primary:   { background: "var(--lk-navy)",      color: "#fff", border: "1px solid transparent" },
    accent:    { background: "var(--lk-terracotta)",color: "#fff", border: "1px solid transparent" },
    secondary: { background: "#fff", color: "var(--lk-navy)", border: "1px solid var(--lk-border)" },
    ghost:     { background: "transparent", color: "var(--lk-navy)", border: "1px solid transparent" },
    danger:    { background: "#fff", color: "var(--lk-error)", border: "1px solid var(--lk-border)" },
  }[variant];
  const sizes = {
    sm: { height: 28, padding: "0 10px", fontSize: 13 },
    md: { height: 36, padding: "0 14px", fontSize: 14 },
    lg: { height: 44, padding: "0 18px", fontSize: 15 },
  }[size];
  return (
    <button {...rest} style={{
      ...styles, ...sizes,
      display: "inline-flex", alignItems: "center", gap: 8,
      borderRadius: 4, fontFamily: "var(--font-sans)", fontWeight: 500, cursor: "pointer",
      transition: "background 120ms var(--ease-standard), border-color 120ms",
      ...rest.style,
    }}
    onMouseOver={e => {
      if (variant === "primary")   e.currentTarget.style.background = "var(--lk-navy-12)";
      if (variant === "accent")    e.currentTarget.style.background = "var(--lk-terracotta-12)";
      if (variant === "secondary") { e.currentTarget.style.background = "rgba(26,31,54,0.04)"; e.currentTarget.style.borderColor = "var(--border-strong)"; }
      if (variant === "ghost")     e.currentTarget.style.background = "rgba(26,31,54,0.04)";
      if (variant === "danger")    { e.currentTarget.style.background = "var(--lk-error-bg)"; e.currentTarget.style.borderColor = "var(--lk-error)"; }
    }}
    onMouseOut={e => {
      e.currentTarget.style.background = styles.background;
      e.currentTarget.style.borderColor = styles.border.includes("transparent") ? "transparent" : "var(--lk-border)";
    }}>
      {icon && <i data-lucide={icon} style={{ width: 14, height: 14 }}></i>}
      {children}
    </button>
  );
};

const IconButton = ({ icon, badge, ...rest }) => (
  <button {...rest} style={{
    all: "unset", cursor: "pointer", position: "relative",
    width: 32, height: 32, borderRadius: 4,
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    color: "var(--lk-muted)", transition: "background 120ms",
    ...rest.style,
  }}
  onMouseOver={e => e.currentTarget.style.background = "rgba(26,31,54,0.04)"}
  onMouseOut={e => e.currentTarget.style.background = "transparent"}>
    <i data-lucide={icon} style={{ width: 18, height: 18 }}></i>
    {badge ? (
      <span style={{
        position: "absolute", top: 4, right: 4, minWidth: 14, height: 14, padding: "0 4px",
        background: "var(--lk-terracotta)", color: "#fff",
        borderRadius: 999, font: "600 10px/14px var(--font-sans)", textAlign: "center",
      }}>{badge}</span>
    ) : null}
  </button>
);

const CHIP_VARIANTS = {
  approved: { bg: "var(--lk-success-bg)", fg: "var(--lk-success)" },
  pending:  { bg: "var(--lk-warning-bg)", fg: "var(--lk-warning)" },
  revoked:  { bg: "var(--lk-error-bg)",   fg: "var(--lk-error)" },
  warning:  { bg: "var(--lk-warning-bg)", fg: "var(--lk-warning)" },
  draft:    { bg: "var(--lk-tint)",       fg: "var(--lk-muted)" },
  licensed: { bg: "var(--lk-terracotta-bg)",fg: "var(--lk-terracotta-08)" },
  neutral:  { bg: "var(--lk-tint)",       fg: "var(--lk-muted)" },
};

const Chip = ({ variant = "neutral", size = "sm", dot = true, children }) => {
  const v = CHIP_VARIANTS[variant];
  const sz = size === "xs"
    ? { height: 18, padding: "0 6px", fontSize: 10 }
    : { height: 22, padding: "0 10px", fontSize: 11 };
  return (
    <span style={{
      ...sz, display: "inline-flex", alignItems: "center", gap: 6,
      background: v.bg, color: v.fg,
      borderRadius: 999, fontFamily: "var(--font-sans)", fontWeight: 600,
      letterSpacing: "0.06em", textTransform: "uppercase",
    }}>
      {dot && size !== "xs" && <span style={{ width: 6, height: 6, borderRadius: 999, background: v.fg }}></span>}
      {children}
    </span>
  );
};

const Field = ({ label, hint, children }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
    <span style={{ font: "500 12px/1.4 var(--font-sans)", color: "var(--lk-navy)" }}>{label}</span>
    {children}
    {hint && <span style={{ font: "400 11px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>{hint}</span>}
  </label>
);

const inputStyle = {
  height: 36, padding: "0 12px", border: "1px solid var(--lk-border)", borderRadius: 2,
  font: "400 14px/1 var(--font-sans)", color: "var(--lk-navy)", background: "#fff",
  outline: "none",
};

const Input = (props) => <input {...props} style={{ ...inputStyle, ...props.style }} />;

const Toggle = ({ checked, onChange, label }) => (
  <label style={{ display: "inline-flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
    <span style={{
      position: "relative", width: 32, height: 18,
      background: checked ? "var(--lk-terracotta)" : "var(--lk-border)",
      borderRadius: 999, transition: "background 120ms",
    }}>
      <span style={{
        position: "absolute", top: 2, left: checked ? 16 : 2, width: 14, height: 14,
        background: "#fff", borderRadius: 999, transition: "left 120ms",
      }}></span>
    </span>
    <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{ display: "none" }}/>
    <span style={{ font: "500 13px/1 var(--font-sans)", color: "var(--lk-navy)" }}>{label}</span>
  </label>
);

const Avatar = ({ name = "?", src, size = 32 }) => {
  const initials = name.split(" ").map(p => p[0]).slice(0, 2).join("").toUpperCase();
  const bg = ["#2A3A8E", "#E08855", "#7c3a1f", "#3D4DA5"][name.charCodeAt(0) % 4];
  return (
    <span style={{
      width: size, height: size, borderRadius: 999, background: bg,
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      color: "#fff", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: size * 0.4,
      backgroundImage: src ? `url(${src})` : undefined, backgroundSize: "cover", backgroundPosition: "center",
      flexShrink: 0,
    }}>
      {!src && initials}
    </span>
  );
};

const Stat = ({ label, value, delta, deltaTone = "neutral" }) => (
  <div style={{
    border: "1px solid var(--lk-border)", borderRadius: 4, padding: 20,
    display: "flex", flexDirection: "column", gap: 6, background: "#fff",
  }}>
    <span style={{
      font: "600 11px/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--lk-muted)",
    }}>{label}</span>
    <span style={{ font: "600 28px/1.15 var(--font-sans)", color: "var(--lk-navy)", letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums" }}>{value}</span>
    {delta && (
      <span style={{
        font: "500 12px/1 var(--font-sans)",
        color: deltaTone === "up" ? "var(--lk-success)" : deltaTone === "down" ? "var(--lk-error)" : "var(--lk-muted)",
      }}>{delta}</span>
    )}
  </div>
);

const EmptyState = ({ icon = "inbox", title, body, action }) => (
  <div style={{
    border: "1px dashed var(--lk-border)", borderRadius: 4, padding: 40,
    display: "flex", flexDirection: "column", alignItems: "center", gap: 8, textAlign: "center",
  }}>
    <i data-lucide={icon} style={{ width: 24, height: 24, color: "var(--lk-muted)" }}></i>
    <span style={{ font: "600 14px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>{title}</span>
    <span style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--lk-muted)", maxWidth: 360 }}>{body}</span>
    {action && <div style={{ marginTop: 8 }}>{action}</div>}
  </div>
);

// License frame — the brand's signature visual element
const LicenseFrame = ({ src, state = "approved", licenseId, creator, ratio = "4 / 5", children, style }) => {
  const overlay = state !== "approved";
  return (
    <div style={{
      position: "relative", aspectRatio: ratio, borderRadius: 4, overflow: "hidden",
      background: src ? `url(${src}) center/cover` : "linear-gradient(135deg, #2A2520 0%, #5b3f31 50%, #8a6750 100%)",
      ...style,
    }}>
      {overlay && (
        <div style={{
          position: "absolute", inset: 0, background: "rgba(26,31,54,0.6)",
          backdropFilter: "blur(24px) saturate(0.8)", WebkitBackdropFilter: "blur(24px) saturate(0.8)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <Chip variant={state === "pending" ? "pending" : state === "revoked" ? "revoked" : "neutral"}>
            {state === "pending" ? "Pending review" : state === "revoked" ? "Revoked" : "Locked"}
          </Chip>
        </div>
      )}
      {state === "approved" && (
        <>
          <span style={{
            position: "absolute", bottom: 8, left: 8, width: 18, height: 18, borderRadius: 999,
            background: "var(--lk-terracotta)", display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <svg viewBox="0 0 20 20" width="9" height="9" fill="none">
              <path d="M6 4 V16 H14" stroke="#fff" strokeWidth="2.4" strokeLinecap="square" />
            </svg>
          </span>
          {licenseId && (
            <span style={{
              position: "absolute", bottom: 10, right: 10,
              font: "500 9px/1 var(--font-mono)", color: "rgba(255,255,255,0.85)",
              letterSpacing: "0.04em", textShadow: "0 1px 2px rgba(0,0,0,0.4)",
            }}>{licenseId}{creator ? ` · ${creator}` : ""}</span>
          )}
        </>
      )}
      {children}
    </div>
  );
};

Object.assign(window, { Button, IconButton, Chip, Field, Input, Toggle, Avatar, Stat, EmptyState, LicenseFrame });