/* ============================================================
   UI KIT — shared primitives
   Aleksey Lobov website. Exports to window for cross-file use.
   ============================================================ */

// Wide-tracked uppercase micro-label — the signature texture
function Label({ children, tone = "muted", style }) {
  const color = tone === "ink" ? "var(--ink)" : tone === "faint" ? "var(--ink-4)" : "var(--ink-3)";
  return (
    <span style={{
      fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11,
      letterSpacing: "0.16em", textTransform: "uppercase", color, ...style
    }}>{children}</span>
  );
}

// Fine-cross "+" glyph (AIR expand marker)
function Plus({ size = 14, color = "currentColor", weight = 1.5 }) {
  return (
    <span style={{ position: "relative", display: "inline-block", width: size, height: size }}>
      <span style={{ position: "absolute", left: "50%", top: 0, width: weight, height: "100%", background: color, transform: "translateX(-50%)" }} />
      <span style={{ position: "absolute", top: "50%", left: 0, height: weight, width: "100%", background: color, transform: "translateY(-50%)" }} />
    </span>
  );
}

// Inline SVG icon set (replaces lucide's <i> DOM-swap, which crashes React on re-render)
function Icon({ name, style }) {
  const P = {
    "arrow-up-right": <React.Fragment><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" /></React.Fragment>,
    "arrow-down": <React.Fragment><line x1="12" y1="5" x2="12" y2="19" /><polyline points="19 12 12 19 5 12" /></React.Fragment>,
    "arrow-left": <React.Fragment><line x1="19" y1="12" x2="5" y2="12" /><polyline points="12 19 5 12 12 5" /></React.Fragment>,
    "arrow-right": <React.Fragment><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></React.Fragment>,
    "x": <React.Fragment><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></React.Fragment>,
    "check": <polyline points="20 6 9 17 4 12" />,
    "send": <React.Fragment><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></React.Fragment>,
    "lock": <React.Fragment><rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></React.Fragment>,
    "globe": <React.Fragment><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></React.Fragment>,
    "chevron-down": <polyline points="6 9 12 15 18 9" />,
  };
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true" style={{ width: 18, height: 18, strokeWidth: 2, display: "block", ...style }}>
      {P[name] || null}
    </svg>
  );
}

// The signature black pill / capsule button
function Pill({ children, variant = "primary", icon, onClick, style }) {
  const [hover, setHover] = React.useState(false);
  const base = {
    height: 44, padding: "0 22px", borderRadius: 999, border: "1px solid transparent",
    display: "inline-flex", alignItems: "center", gap: 10, cursor: "pointer",
    fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11,
    letterSpacing: "0.16em", textTransform: "uppercase", whiteSpace: "nowrap",
    transition: "transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease)",
    transform: hover ? "translateY(-1px)" : "none", userSelect: "none",
  };
  const variants = {
    primary: { background: hover ? "#23231f" : "var(--ink)", color: "var(--paper-on-ink)", boxShadow: "var(--shadow-pill)" },
    secondary: { background: "transparent", color: "var(--ink)", borderColor: hover ? "var(--ink)" : "var(--hairline-2)" },
    ghost: { background: hover ? "var(--surface-2)" : "var(--surface)", color: "var(--ink)" },
  };
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ ...base, ...variants[variant], ...style }}>
      {children}
      {icon === "plus" && <Plus size={13} />}
      {icon === "arrow" && <Icon name="arrow-up-right" style={{ width: 15, height: 15 }} />}
      {icon === "down" && <Icon name="arrow-down" style={{ width: 15, height: 15 }} />}
    </button>
  );
}

// Small icon-square button (chrome)
function IconButton({ icon, variant = "out", onClick, style }) {
  const [hover, setHover] = React.useState(false);
  const variants = {
    ink: { background: "var(--ink)", color: "var(--paper-on-ink)", border: "1px solid var(--ink)" },
    out: { background: hover ? "var(--surface)" : "var(--paper)", color: "var(--ink)", border: "1px solid var(--hairline-2)" },
    grey: { background: "var(--surface)", color: "var(--ink)", border: "1px solid transparent" },
  };
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ width: 46, height: 40, borderRadius: 6, display: "grid", placeItems: "center",
        cursor: "pointer", transition: "background var(--dur) var(--ease)", ...variants[variant], ...style }}>
      {icon === "menu" ? (
        /* brand menu mark — two short bars (not lucide's 3-line hamburger) */
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          strokeWidth="1.6" strokeLinecap="round" aria-hidden="true">
          <line x1="4" y1="9" x2="20" y2="9" />
          <line x1="4" y1="15" x2="20" y2="15" />
        </svg>
      ) : (
        <Icon name={icon} style={{ width: 18, height: 18, strokeWidth: 1.6 }} />
      )}
    </button>
  );
}

// Mono stat
function Stat({ value, label, tone }) {
  const color = tone === "up" ? "var(--up)" : tone === "down" ? "var(--down)" : "var(--ink)";
  return (
    <div>
      <div style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: "clamp(28px,3vw,40px)",
        color, fontVariantNumeric: "tabular-nums", lineHeight: 1, letterSpacing: "0.01em" }}>{value}</div>
      <div style={{ marginTop: 12 }}><Label>{label}</Label></div>
    </div>
  );
}

// Greyscale high-key image placeholder (until real assets arrive)
function ImagePlaceholder({ label, variant = "a", src, alt, objectPosition = "center", style }) {
  const bgs = {
    a: "radial-gradient(120% 90% at 70% 22%, #ffffff 0%, #ebebe8 42%, #cfcfca 100%)",
    b: "radial-gradient(80% 80% at 30% 78%, #d9d9d4 0%, #f2f2ef 60%, #ffffff 100%)",
    c: "linear-gradient(135deg, #cfcfca, #f4f4f2 55%, #e2e2dd)",
  };
  return (
    <div style={{ position: "relative", overflow: "hidden", background: bgs[variant],
      filter: variant === "c" && !src ? "grayscale(1)" : "none", ...style }}>
      {src
        ? <img src={src} alt={alt || label || ""} style={{ position: "absolute", inset: 0, width: "100%",
            height: "100%", objectFit: "cover", objectPosition, filter: "grayscale(1)" }} />
        : <span style={{ position: "absolute", right: 14, top: 14 }}><Plus size={16} color="var(--ink-3)" weight={1} /></span>}
      {label && <span style={{ position: "absolute", left: 16, bottom: 14, zIndex: 1,
        mixBlendMode: src ? "difference" : "normal" }}><Label>{label}</Label></span>}
    </div>
  );
}

// Ambient "smoke" — single permitted soft radial, very low contrast
function Smoke({ style }) {
  return <div style={{ position: "absolute", borderRadius: "50%",
    background: "radial-gradient(circle, rgba(120,120,110,0.16) 0%, rgba(120,120,110,0.06) 40%, rgba(255,255,255,0) 70%)",
    filter: "blur(8px)", pointerEvents: "none", ...style }} />;
}

Object.assign(window, { Label, Plus, Icon, Pill, IconButton, Stat, ImagePlaceholder, Smoke });