/* global React */
const { Chip } = window.OregonCoastAIDesignSystem_e04d97;

const Wrap = ({ children, wide, style }) => (
  <div style={{ maxWidth: wide ? "var(--wrap-wide)" : "var(--wrap-max)", margin: "0 auto", padding: "0 22px", ...style }}>{children}</div>
);
const Section = ({ children, wide, id, style }) => (
  <section id={id} style={{ padding: "56px 0", borderBottom: "1px solid var(--border-line)", ...style }}>
    <Wrap wide={wide}>{children}</Wrap>
  </section>
);
const Kicker = ({ children, tone }) => (
  <div style={{ fontFamily: "var(--font-mono)", fontSize: "12px", color: tone === "muted" ? "var(--text-muted)" : "var(--text-accent)", letterSpacing: "0.14em", textTransform: "uppercase" }}>{children}</div>
);
const SH = ({ children, style }) => (
  <h3 style={{ fontSize: "clamp(22px,3vw,30px)", margin: "10px 0 8px", color: "var(--text-strong)", fontWeight: 700, lineHeight: 1.18, maxWidth: "30ch", ...style }}>{children}</h3>
);
const Sub = ({ children, style }) => (
  <p style={{ color: "var(--text-body)", maxWidth: "660px", margin: "0 0 26px", fontSize: "16px", lineHeight: 1.6, ...style }}>{children}</p>
);

// Mono metric readout — instrument style
function Metric({ label, value, unit, color, sub }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "3px" }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: "10.5px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: "4px" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: "22px", fontWeight: 600, color: color || "var(--text-strong)", fontVariantNumeric: "tabular-nums", transition: "color 200ms ease" }}>{value}</span>
        {unit ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "11px", color: "var(--text-muted)" }}>{unit}</span> : null}
      </div>
      {sub ? <div style={{ fontFamily: "var(--font-mono)", fontSize: "10px", color: "var(--text-muted)" }}>{sub}</div> : null}
    </div>
  );
}

// Legend for the de-mixing viz
function VizLegend({ compact }) {
  const items = [
    [window.DV_CLASS_COLORS[0], "Class A — responder-enriched", "ring"],
    [window.DV_CLASS_COLORS[1], "Class B", "dot"],
    [window.DV_CLASS_COLORS[2], "Class C", "dot"],
    ["#ffb454", "Abstain — no confident routing", "abstain"],
    ["#5ad19b", "Healthy-control reference", "hc"],
  ];
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: compact ? "10px 16px" : "10px 22px", alignItems: "center" }}>
      {items.map(([c, label, kind]) => (
        <div key={label} style={{ display: "flex", alignItems: "center", gap: "7px" }}>
          <span style={{
            width: 11, height: 11, borderRadius: "50%", flex: "0 0 auto",
            background: kind === "abstain" ? "transparent" : (kind === "hc" ? "transparent" : c),
            border: kind === "abstain" ? `1.5px solid ${c}` : (kind === "hc" ? `1.5px solid ${c}` : (kind === "ring" ? `2px solid ${c}` : "none")),
            boxShadow: kind === "ring" ? `0 0 0 2px rgba(52,224,216,0.15)` : "none",
          }} />
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "10.5px", color: "var(--text-muted)" }}>{label}</span>
        </div>
      ))}
    </div>
  );
}

// Pipeline arrow row
function Pipeline({ steps }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px", fontFamily: "var(--font-mono)", fontSize: "12px", color: "var(--text-muted)" }}>
      {steps.map((s, i) => (
        <React.Fragment key={s}>
          <span style={{ color: i === steps.length - 1 ? "var(--text-accent)" : "var(--text-body)" }}>{s}</span>
          {i < steps.length - 1 ? <span style={{ color: "var(--text-accent)" }}>→</span> : null}
        </React.Fragment>
      ))}
    </div>
  );
}

Object.assign(window, { OCAWrap: Wrap, OCASection: Section, OCAKicker: Kicker, OCASH: SH, OCASub: Sub, OCAMetric: Metric, OCAVizLegend: VizLegend, OCAPipeline: Pipeline });