// GPS brand chrome — logo, top stripe, shared header bits, role colors.
const GPS_RED = "#C41230";

// Real GPS logo. Use light=true for dark backgrounds (dark logo on white circle = no good),
// so the DARK-bg variant is the one with the white circle (gps-logo-dark.png).
function BrandMark({ size = 40, light = false }) {
  const src = light ? "assets/gps-logo-light.png" : "assets/gps-logo-dark.png";
  return (
    <img
      src={src}
      width={size}
      height={size}
      alt="GPS"
      style={{ width: size, height: size, objectFit: "contain", display: "block" }}
    />
  );
}

function TopStripe() {
  return (
    <div
      className="absolute top-0 left-0 right-0 h-[3px] z-10"
      style={{ background: GPS_RED }}
    />
  );
}

function BrandWordmark({ subtitle, subtitleColor, version = "v2.0" }) {
  return (
    <div className="leading-tight">
      <div className="font-display text-[28px] tracking-tight flex items-baseline gap-2">
        BOXD
        <span className="text-zinc-500 text-[14px] font-mono tracking-normal">{version}</span>
      </div>
      <div className="text-[11px] uppercase tracking-[0.18em] text-zinc-400 mt-0.5">
        German Performance Solutions
      </div>
      {subtitle && (
        <div
          className="text-[10px] uppercase tracking-[0.22em] font-semibold mt-1"
          style={{ color: subtitleColor || "#71717a" }}
        >
          {subtitle}
        </div>
      )}
    </div>
  );
}

function Avatar({ user, size = 48 }) {
  const initials = user.name.split(" ").map((p) => p[0]).join("").slice(0, 2);
  const ring =
    user.role === "admin"
      ? { borderColor: GPS_RED, color: "#fecaca" }
      : user.role === "manager"
      ? { borderColor: GPS_RED, color: "#fafafa" }
      : { borderColor: "#3f3f46", color: "#fafafa" };
  return (
    <div
      className="rounded-full bg-zinc-800 border-2 flex items-center justify-center font-semibold"
      style={{
        width: size,
        height: size,
        fontSize: size * 0.36,
        borderColor: ring.borderColor,
        color: ring.color,
      }}
    >
      {initials}
    </div>
  );
}

function RoleBadge({ role }) {
  const map = {
    worker: { label: "Worker", bg: "bg-zinc-800", color: "text-zinc-300", border: "border-zinc-700" },
    manager: { label: "Manager", bg: "bg-[#C41230]/15", color: "text-red-200", border: "border-[#C41230]/40" },
    admin: { label: "Admin", bg: "bg-[#C41230]/25", color: "text-red-100", border: "border-[#C41230]/60" },
  };
  const m = map[role] || map.worker;
  return (
    <span className={`px-2 py-0.5 rounded text-[11px] font-semibold uppercase tracking-wider border ${m.bg} ${m.color} ${m.border}`}>
      {m.label}
    </span>
  );
}

// Press-and-hold button: fills left-to-right over `holdMs` (default 500ms), then triggers onComplete.
function HoldButton({ children, onComplete, holdMs = 500, color = "emerald", disabled, className = "", subText }) {
  const [progress, setProgress] = React.useState(0);
  const [holding, setHolding] = React.useState(false);
  const rafRef = React.useRef(null);
  const startRef = React.useRef(0);

  function step(ts) {
    if (!startRef.current) startRef.current = ts;
    const p = Math.min(1, (ts - startRef.current) / holdMs);
    setProgress(p);
    if (p < 1) {
      rafRef.current = requestAnimationFrame(step);
    } else {
      cancelAnimationFrame(rafRef.current);
      setHolding(false);
      setProgress(0);
      startRef.current = 0;
      onComplete && onComplete();
    }
  }

  function start(e) {
    if (disabled) return;
    e.preventDefault();
    setHolding(true);
    startRef.current = 0;
    rafRef.current = requestAnimationFrame(step);
  }
  function cancel() {
    if (!holding) return;
    cancelAnimationFrame(rafRef.current);
    setHolding(false);
    setProgress(0);
    startRef.current = 0;
  }

  const bg =
    color === "emerald" ? "bg-emerald-600" :
    color === "amber" ? "bg-amber-500" :
    color === "red" ? "bg-red-600" :
    color === "violet" ? "bg-violet-600" :
    color === "orange" ? "bg-orange-600" :
    color === "teal" ? "bg-teal-600" : "bg-zinc-700";
  const fill =
    color === "emerald" ? "bg-emerald-400" :
    color === "amber" ? "bg-amber-300" :
    color === "red" ? "bg-red-400" :
    color === "violet" ? "bg-violet-400" :
    color === "orange" ? "bg-orange-400" :
    color === "teal" ? "bg-teal-400" : "bg-zinc-400";
  const text = color === "amber" ? "text-zinc-950" : color === "emerald" ? "text-zinc-950" : "text-white";

  return (
    <button
      disabled={disabled}
      onPointerDown={start}
      onPointerUp={cancel}
      onPointerLeave={cancel}
      onPointerCancel={cancel}
      className={`relative overflow-hidden rounded-xl ${bg} ${text} font-display tracking-wider active:scale-[0.99] transition-transform disabled:opacity-40 disabled:cursor-not-allowed ${className}`}
    >
      {/* Fill overlay */}
      <div
        className={`absolute inset-y-0 left-0 ${fill} pointer-events-none transition-none`}
        style={{ width: `${progress * 100}%`, opacity: 0.55 }}
      />
      <div className="relative z-10 flex flex-col items-center justify-center h-full gap-1 px-3 pointer-events-none">
        {children}
        {subText && (
          <span className="text-[13px] font-sans font-medium opacity-70 normal-case tracking-normal">
            {holding ? "keep holding…" : subText}
          </span>
        )}
      </div>
    </button>
  );
}

Object.assign(window, { GPS_RED, BrandMark, TopStripe, BrandWordmark, Avatar, RoleBadge, HoldButton });