// ui_kits/yehi/primitives.jsx
// Small primitives shared across Yehi components. Builds on the same patterns
// established in ui_kits/marketing/primitives.jsx but specialized for Yehi.

const { useEffect: useEffectY, useState: useStateY } = React;

// ---- Container — 1160px max with brand gutter ----
function YContainer({ children, style }) {
  return (
    <div style={{ width: "min(1160px, calc(100vw - 48px))", margin: "0 auto", ...style }}>
      {children}
    </div>
  );
}

// ---- YehiLockup — inline-loaded SVG from brand_family/yehi/, breathing dot ----
function YehiLockup({ size = 36, attribution = false }) {
  const [markup, setMarkup] = useStateY("");
  useEffectY(() => {
    fetch("../../brand_family/yehi/lockup-horizontal-dark.svg")
      .then((r) => r.text())
      .then((t) => setMarkup(
        t.replace(/<\?xml[^?]*\?>\s*/, "")
         .replace(/<!--[\s\S]*?-->\s*/g, "")
         .replace(/<rect width="\d+"[^>]*fill="#050A10"[^>]*\/>/, "")  // strip the bg rect; the page provides bg
         .replace(/fill="#050A10"/g, "fill=\"transparent\"")
         .replace(/<svg([^>]*)>/, (m, attrs) =>
           `<svg${attrs.replace(/\s(width|height)="[^"]*"/g, "")} height="${size}">`)
         // Inject a subtle breath animation on the dot
         .replace(/<circle cx="30" cy="5.25" r="5.25" fill="#FAF7F2"\/>/,
                  `<circle cx="30" cy="5.25" r="5.25" fill="#FAF7F2"><animate attributeName="opacity" values="1;0.82;1" dur="4s" repeatCount="indefinite"/></circle>`)
      ));
  }, [size]);
  return (
    <a
      href="#/"
      style={{ display: "inline-flex", alignItems: "center", gap: 10, textDecoration: "none" }}
      dangerouslySetInnerHTML={{ __html: markup }}
      aria-label="yehi"
    />
  );
}

// ---- IconSlot — fetch any icon from assets/icons/ and inline it for currentColor ----
function IconSlot({ name, size = 16, color }) {
  const [markup, setMarkup] = useStateY("");
  useEffectY(() => {
    fetch(`../../assets/icons/${name}.svg`)
      .then((r) => r.text())
      .then((t) => setMarkup(
        t.replace(/<\?xml[^?]*\?>\s*/, "")
         .replace(/<!--[\s\S]*?-->\s*/g, "")
         .replace(/<svg([^>]*)>/, (m, attrs) =>
           `<svg${attrs.replace(/\s(width|height)="[^"]*"/g, "")} width="${size}" height="${size}">`)
      ));
  }, [name, size]);
  return (
    <span
      style={{ display: "inline-flex", alignItems: "center", color: color || "currentColor", lineHeight: 1 }}
      dangerouslySetInnerHTML={{ __html: markup }}
    />
  );
}

// ---- MetaEyebrow — the brand's classification label ----
function MetaEyebrow({ children, color }) {
  return (
    <div
      style={{
        fontFamily: "var(--font-mono)",
        color: color || "var(--fg-4)",
        fontSize: 11,
        letterSpacing: "0.1em",
        textTransform: "uppercase",
        lineHeight: 1.4,
      }}
    >
      {children}
    </div>
  );
}

// ---- BetMarker — bracket-framed status dot (the `bet` icon vocabulary).
// Used as the row/header marker for an actual bet (BET-NNN). The brackets
// signal "this is a committed thing." For acceptance criteria and
// verification cells, use the unbracketed BetStatusDot.
function BetMarker({ state }) {
  const dot = {
    idle:     { fill: "transparent", stroke: "var(--tehom-muted)", animate: false },
    active:   { fill: "var(--tehom-signal)", stroke: "none", animate: true },
    complete: { fill: "var(--fg-1)",         stroke: "none", animate: false },
    blocked:  { fill: "var(--tehom-error)",  stroke: "none", animate: false },
    error:    { fill: "var(--tehom-error)",  stroke: "none", animate: false },
  }[state] || { fill: "transparent", stroke: "var(--tehom-muted)", animate: false };
  return (
    <svg
      viewBox="0 0 24 16"
      width="22"
      height="14"
      fill="none"
      stroke="currentColor"
      strokeWidth="1"
      strokeLinecap="round"
      strokeLinejoin="round"
      shapeRendering="geometricPrecision"
      style={{ flexShrink: 0, color: "var(--fg-2)" }}
      aria-label={`bet ${state}`}
    >
      {/* Left frame bracket */}
      <path d="M 6 3 L 3 3 L 3 13 L 6 13" />
      {/* Right frame bracket */}
      <path d="M 18 3 L 21 3 L 21 13 L 18 13" />
      {/* Center status dot */}
      <circle
        cx="12" cy="8" r="2.4"
        fill={dot.fill}
        stroke={dot.stroke}
        strokeWidth={dot.stroke === "none" ? 0 : 1}
      >
        {dot.animate && (
          <animate attributeName="opacity" values="1;0.55;1" dur="4s" repeatCount="indefinite"/>
        )}
      </circle>
    </svg>
  );
}

// ---- BetStatusDot — animated for active state ----
function BetStatusDot({ state }) {
  const config = {
    idle:     { fill: "transparent", border: "1px solid var(--tehom-muted)", animate: false },
    active:   { fill: "var(--tehom-signal)", border: "none", animate: true },
    complete: { fill: "var(--fg-1)", border: "none", animate: false },
    blocked:  { fill: "var(--tehom-error)", border: "none", animate: false },
    error:    { fill: "var(--tehom-error)", border: "none", animate: false },
    pass:     { fill: "var(--fg-1)", border: "none", animate: false },
  }[state] || { fill: "transparent", border: "1px solid var(--tehom-muted)", animate: false };
  return (
    <span
      aria-label={state}
      style={{
        display: "inline-block",
        width: 9,
        height: 9,
        borderRadius: 999,
        background: config.fill,
        border: config.border,
        flexShrink: 0,
        animation: config.animate
          ? "tehom-breath var(--dur-breath) var(--ease-quiet) infinite"
          : "none",
      }}
    />
  );
}

// ---- Badge — a small categorical label, used for bet metadata ----
function Badge({ label, value, kind }) {
  const palettes = {
    priority: { bg: "rgba(176, 91, 59, 0.15)", fg: "#D6826A" },
    type:     { bg: "rgba(61, 79, 102, 0.30)", fg: "#7E94B3" },
    scope:    { bg: "rgba(201, 169, 97, 0.13)", fg: "#C9A961" },
    effort:   { bg: "rgba(250, 247, 242, 0.06)", fg: "#FAF7F2" },
    ai:       { bg: "rgba(201, 169, 97, 0.13)", fg: "#C9A961" },
  };
  const p = palettes[kind] || palettes.effort;
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        padding: "4px 9px",
        background: p.bg,
        color: p.fg,
        fontFamily: "var(--font-mono)",
        fontSize: 10,
        letterSpacing: "0.08em",
        textTransform: "uppercase",
        lineHeight: 1.2,
      }}
    >
      <span style={{ opacity: 0.55 }}>{label}</span>
      <span>{value}</span>
    </span>
  );
}

// ---- MonoTag — a one-off small mono label for repo names, dates, etc ----
function MonoTag({ children, color }) {
  return (
    <span
      style={{
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        color: color || "var(--fg-3)",
        letterSpacing: "0.02em",
      }}
    >
      {children}
    </span>
  );
}

// ---- StatusLabel — a localized label-with-dot pattern ----
function StatusLabel({ state }) {
  const label = {
    idle: "Ready", active: "Active", complete: "Complete", blocked: "Blocked",
  }[state] || state;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
      <BetStatusDot state={state} />
      <MetaEyebrow>{label}</MetaEyebrow>
    </span>
  );
}

Object.assign(window, {
  YContainer, YehiLockup, IconSlot, MetaEyebrow, BetMarker, BetStatusDot, Badge, MonoTag, StatusLabel,
});