/* ui.jsx — shared retro widgets for DoomSpot. Exports to window. */
const { useRef, useEffect, useState } = React;

/* Pixel button with chunky bevel */
function PixelButton({ children, onClick, disabled, variant = "primary", size = "md", style }) {
  const [down, setDown] = useState(false);
  const pal = {
    primary: { bg: "var(--accent)", fg: "#120806", edge: "rgba(0,0,0,.45)", hi: "rgba(255,255,255,.32)" },
    ghost: { bg: "var(--panel)", fg: "var(--ink)", edge: "rgba(0,0,0,.5)", hi: "rgba(255,255,255,.12)" },
    danger: { bg: "var(--blood)", fg: "#fff", edge: "rgba(0,0,0,.5)", hi: "rgba(255,255,255,.28)" },
    good: { bg: "var(--good)", fg: "#08160a", edge: "rgba(0,0,0,.45)", hi: "rgba(255,255,255,.3)" },
  }[variant];
  const pad = size === "lg" ? "18px 30px" : size === "sm" ? "8px 12px" : "13px 20px";
  const fs = size === "lg" ? "calc(15px * var(--fscale))" : size === "sm" ? "calc(9px * var(--fscale))" : "calc(11px * var(--fscale))";
  return (
    <button
      onClick={disabled ? undefined : onClick}
      onMouseDown={() => setDown(true)} onMouseUp={() => setDown(false)} onMouseLeave={() => setDown(false)}
      disabled={disabled}
      style={{
        fontFamily: "var(--font)", fontSize: fs, letterSpacing: ".04em", lineHeight: 1.3,
        color: pal.fg, background: pal.bg, padding: pad, border: "0", cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.4 : 1, position: "relative", textTransform: "uppercase",
        boxShadow: down
          ? `inset 3px 3px 0 ${pal.edge}`
          : `inset -3px -4px 0 ${pal.edge}, inset 3px 3px 0 ${pal.hi}`,
        transform: down ? "translateY(2px)" : "none", transition: "transform .04s",
        imageRendering: "pixelated", ...style,
      }}>
      {children}
    </button>
  );
}

/* CRT scanlines + glow overlay */
function Scanlines({ intensity = 0.5, glow = false }) {
  if (intensity <= 0.01) return null;
  return (
    <div aria-hidden="true" style={{
      position: "fixed", inset: 0, pointerEvents: "none", zIndex: 9000, mixBlendMode: "multiply",
      background: `repeating-linear-gradient(to bottom, rgba(0,0,0,${0.55 * intensity}) 0px, rgba(0,0,0,${0.55 * intensity}) 1px, transparent 2px, transparent 3px)`,
    }}>
      <div style={{
        position: "absolute", inset: 0, mixBlendMode: "overlay",
        background: glow ? "radial-gradient(ellipse at center, rgba(255,255,255,.06), transparent 60%)" : "none",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.4) 100%)",
      }} />
    </div>
  );
}

/* DOOMSPOT wordmark — variants are pure CSS, no SVG */
function Logo({ variant = "metal", size = 1 }) {
  const base = {
    fontFamily: "'Press Start 2P', monospace", fontSize: `calc(${44 * size}px)`, lineHeight: 1,
    letterSpacing: ".02em", display: "inline-block", textTransform: "uppercase", userSelect: "none",
  };
  const styles = {
    blocky: { ...base, color: "var(--accent)", textShadow: "4px 4px 0 #000, 8px 8px 0 rgba(0,0,0,.4)" },
    metal: {
      ...base,
      background: "linear-gradient(180deg, var(--ink) 0%, var(--accent2) 42%, var(--accent) 55%, #3a0d06 100%)",
      WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent",
      filter: "drop-shadow(3px 4px 0 #000) drop-shadow(0 0 14px rgba(216,64,31,.35))",
    },
    stencil: {
      ...base, color: "transparent", WebkitTextStroke: "2px var(--accent)",
      textShadow: "0 0 18px var(--accent)",
    },
  };
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: `${6 * size}px` }}>
      <span style={styles[variant] || styles.metal}>DOOM<span style={{ WebkitTextFillColor: "var(--accent)", color: "var(--accent)" }}>CRM</span></span>
      <span style={{ fontFamily: "var(--font)", fontSize: `calc(${10 * size}px * var(--fscale))`, color: "var(--ink-dim)", letterSpacing: ".3em" }}>
        CRM CLEANUP // FOR HUBSPOT
      </span>
      <span style={{ fontFamily: "var(--font)", fontSize: `calc(${7 * size}px * var(--fscale))`, color: "var(--ink-dim)", letterSpacing: ".25em", opacity: .85 }}>
        by RESONATE
      </span>
    </div>
  );
}

/* Reactive Doom-style status face, drawn pixel-by-pixel */
function FaceCanvas({ health, hurt, size = 56 }) {
  const ref = useRef(null);
  useEffect(() => {
    const c = ref.current; if (!c) return;
    const N = 16; c.width = N; c.height = N;
    const ctx = c.getContext("2d");
    ctx.clearRect(0, 0, N, N);
    const css = getComputedStyle(document.documentElement);
    const accent = css.getPropertyValue("--accent").trim() || "#d8401f";
    const skin = "#d8a06a", skinLo = "#a8703f", hair = "#3a2412";
    const px = (x, y, w, h, col) => { ctx.fillStyle = col; ctx.fillRect(x, y, w, h); };
    // head
    px(3, 2, 10, 12, skin); px(3, 2, 10, 2, hair); px(3, 4, 1, 9, skinLo); px(12, 4, 1, 9, skinLo);
    // sweat/grime as health drops
    const grim = health < 34, mid = health < 67;
    // eyes
    const eyeC = hurt ? "#fff" : "#241008";
    if (grim) { px(4, 6, 3, 2, "#fff"); px(10, 6, 3, 2, "#fff"); px(5, 6, 1, 2, eyeC); px(11, 6, 1, 2, eyeC); }
    else { px(4, 6, 2, 2, eyeC); px(10, 6, 2, 2, eyeC); }
    // brow
    px(4, 5, 3, 1, hair); px(9, 5, 3, 1, hair);
    // nose
    px(7, 8, 2, 2, skinLo);
    // mouth
    if (mid) { px(5, 11, 6, 2, "#3a0a06"); px(6, 12, 1, 1, "#fff"); px(9, 12, 1, 1, "#fff"); } // grimace + teeth
    else { px(6, 11, 4, 1, "#5a1a10"); }
    // blood when low
    if (grim) { px(11, 9, 1, 4, accent); px(4, 4, 1, 2, accent); px(12, 3, 1, 3, accent); }
    if (hurt) { ctx.globalAlpha = .35; px(0, 0, N, N, accent); ctx.globalAlpha = 1; }
  }, [health, hurt]);
  return <canvas ref={ref} style={{ width: size, height: size, imageRendering: "pixelated", display: "block" }} />;
}

/* Floating kill/combo bark */
function BarkToast({ bark }) {
  if (!bark) return null;
  const kind = bark.kind;
  const col = kind === "hurt" ? "var(--accent)" : (kind === "pickup" || kind === "weapon") ? "var(--good)" : "var(--accent2)";
  const top = kind === "hurt" ? "30%" : "16%";
  const size = (kind === "weapon" || kind === "pickup") ? 14 : 20;
  return (
    <div key={bark.id} style={{
      position: "absolute", top, left: "50%", transform: "translateX(-50%)",
      fontFamily: "var(--font)", fontSize: "calc(" + size + "px * var(--fscale))", color: col,
      textShadow: "3px 3px 0 #000, 0 0 16px " + col, whiteSpace: "nowrap", pointerEvents: "none",
      animation: "barkpop .9s ease-out forwards", letterSpacing: ".04em", zIndex: 50, textAlign: "center",
    }}>{bark.text}</div>
  );
}

/* Thin labelled stat bar */
function StatBar({ value, max, color }) {
  return (
    <div style={{ height: 8, background: "rgba(0,0,0,.5)", width: "100%", boxShadow: "inset 1px 1px 0 rgba(0,0,0,.6)" }}>
      <div style={{ height: "100%", width: `${Math.max(0, Math.min(100, value / max * 100))}%`, background: color, transition: "width .2s" }} />
    </div>
  );
}

Object.assign(window, { PixelButton, Scanlines, Logo, FaceCanvas, BarkToast, StatBar });