// ui_kits/yehi/bet-view.jsx
// The bet detail screen — header metadata, shaping, acceptance criteria,
// verification table, optional harvest callout.

function BackToCycle({ onBack }) {
  return (
    <a
      href="#/"
      onClick={(e) => { e.preventDefault(); onBack(); }}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        textDecoration: "none",
        color: "var(--fg-3)",
        fontFamily: "var(--font-body)",
        fontSize: 14,
        marginBottom: 32,
      }}
      onMouseEnter={(e) => (e.currentTarget.style.color = "var(--fg-1)")}
      onMouseLeave={(e) => (e.currentTarget.style.color = "var(--fg-3)")}
    >
      <IconSlot name="arrow-left" size={16} />
      <span>Back to cycle {window.YEHI_DATA.cycle.number}</span>
    </a>
  );
}

function BetHeader({ bet }) {
  return (
    <header style={{ paddingBottom: 32, borderBottom: "1px solid var(--hairline)", marginBottom: 48 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
        <BetMarker state={bet.status} />
        <MonoTag color="var(--fg-2)">{bet.id}</MonoTag>
        <span style={{ color: "var(--fg-4)" }}>·</span>
        <MetaEyebrow>{bet.betType}</MetaEyebrow>
        <span style={{ color: "var(--fg-4)" }}>·</span>
        <MonoTag>{bet.owningRepo}</MonoTag>
        <span style={{ flexGrow: 1 }} />
        <StatusLabel state={bet.status} />
      </div>
      <h1
        style={{
          display: "block",
          fontFamily: "var(--font-display)",
          fontWeight: 300,
          fontVariationSettings: '"opsz" 144',
          fontSize: "clamp(22px, 2.5vw, 30px)",
          letterSpacing: "-0.02em",
          lineHeight: 1.2,
          color: "var(--fg-1)",
          margin: "0 0 20px",
          maxWidth: 920,
        }}
      >
        {bet.title}.
      </h1>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 22 }}>
        <Badge label="Priority" value={bet.labels.priority} kind="priority" />
        <Badge label="Type" value={bet.labels.type} kind="type" />
        <Badge label="Scope" value={bet.labels.scope} kind="scope" />
        <Badge label="Effort" value={bet.labels.effort} kind="effort" />
        <Badge label="AI" value={bet.labels.ai} kind="ai" />
      </div>
      <div style={{ marginTop: 24, display: "flex", alignItems: "flex-start", gap: 12 }}>
        <IconSlot name="goal" size={18} color="var(--fg-1)" />
        <div>
          <MetaEyebrow>Must-ship outcome</MetaEyebrow>
          <p
            style={{
              margin: "6px 0 0",
              fontFamily: "var(--font-body)",
              fontSize: 17,
              lineHeight: 1.55,
              color: "var(--fg-2)",
              maxWidth: 920,
            }}
          >
            {bet.mustShip}
          </p>
        </div>
      </div>
    </header>
  );
}

function ShapingSection({ bet }) {
  return (
    <section style={{ marginBottom: 56 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 18 }}>
        <IconSlot name="threshold" size={14} />
        <MetaEyebrow>1 · Shaping</MetaEyebrow>
      </div>
      <h2
        style={{
          fontFamily: "var(--font-display)",
          fontWeight: 300,
          fontVariationSettings: '"opsz" 144',
          fontSize: 24,
          letterSpacing: "-0.015em",
          lineHeight: 1.2,
          color: "var(--fg-1)",
          margin: "0 0 14px",
        }}
      >
        Context &amp; problem
      </h2>
      <p
        style={{
          fontFamily: "var(--font-body)",
          fontSize: 16,
          lineHeight: 1.6,
          color: "var(--fg-2)",
          margin: 0,
          maxWidth: 920,
        }}
      >
        {bet.context}
      </p>
    </section>
  );
}

function AcceptanceCriteriaList({ items }) {
  if (!items || !items.length) return null;
  return (
    <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column" }}>
      {items.map((ac, i) => (
        <li
          key={i}
          style={{
            display: "grid",
            gridTemplateColumns: "24px 1fr 100px",
            gap: 18,
            alignItems: "flex-start",
            padding: "14px 0",
            borderBottom: "1px solid var(--hairline)",
            fontFamily: "var(--font-body)",
            fontSize: 15,
            lineHeight: 1.55,
            color: "var(--fg-2)",
          }}
        >
          <BetStatusDot state={ac.state === "complete" ? "complete" : ac.state} />
          <span>{ac.text}</span>
          <div style={{ textAlign: "right" }}>
            <StatusLabel state={ac.state} />
          </div>
        </li>
      ))}
    </ul>
  );
}

function ExecutionSection({ bet }) {
  return (
    <section style={{ marginBottom: 56 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 18 }}>
        <IconSlot name="runtime" size={14} />
        <MetaEyebrow>2 · Execution</MetaEyebrow>
      </div>
      <h2
        style={{
          fontFamily: "var(--font-display)",
          fontWeight: 300,
          fontVariationSettings: '"opsz" 144',
          fontSize: 24,
          letterSpacing: "-0.015em",
          lineHeight: 1.2,
          color: "var(--fg-1)",
          margin: "0 0 14px",
        }}
      >
        Acceptance criteria
      </h2>
      <AcceptanceCriteriaList items={bet.acceptance} />
      {bet.blockers && (
        <div
          style={{
            marginTop: 28,
            padding: "16px 18px",
            display: "flex",
            alignItems: "flex-start",
            gap: 12,
            background: "rgba(176, 91, 59, 0.10)",
            border: "1px solid rgba(176, 91, 59, 0.35)",
          }}
        >
          <IconSlot name="blocker" size={18} color="var(--tehom-error)" />
          <div>
            <MetaEyebrow color="var(--tehom-error)">Blocked</MetaEyebrow>
            <p
              style={{
                margin: "6px 0 0",
                fontFamily: "var(--font-body)",
                fontSize: 14,
                lineHeight: 1.55,
                color: "var(--fg-2)",
              }}
            >
              {bet.blockers}
            </p>
          </div>
        </div>
      )}
    </section>
  );
}

function VerificationTable({ items }) {
  if (!items || !items.length) {
    return (
      <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg-4)", padding: "12px 0" }}>
        No verification evidence yet.
      </div>
    );
  }
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "80px 80px 1fr 1fr 110px",
        borderTop: "1px solid var(--hairline)",
        borderLeft: "1px solid var(--hairline)",
      }}
    >
      {["AC", "Status", "How verified", "Evidence", "Date"].map((h) => (
        <div
          key={h}
          style={{
            padding: "10px 14px",
            borderRight: "1px solid var(--hairline)",
            borderBottom: "1px solid var(--hairline)",
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.12em",
            textTransform: "uppercase",
            color: "var(--fg-4)",
            background: "rgba(250,247,242,0.02)",
          }}
        >
          {h}
        </div>
      ))}
      {items.map((row, i) => (
        <React.Fragment key={i}>
          <div style={cellStyle}><MonoTag color="var(--fg-2)">{row.ac}</MonoTag></div>
          <div style={cellStyle}><StatusLabel state="pass" /></div>
          <div style={{ ...cellStyle, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-2)" }}>{row.how}</div>
          <div style={cellStyle}>
            <MonoTag color="var(--tehom-utility)">{row.evidence}</MonoTag>
          </div>
          <div style={cellStyle}><MonoTag>{row.date}</MonoTag></div>
        </React.Fragment>
      ))}
    </div>
  );
}
const cellStyle = {
  padding: "12px 14px",
  borderRight: "1px solid var(--hairline)",
  borderBottom: "1px solid var(--hairline)",
  fontFamily: "var(--font-body)",
  fontSize: 13,
  color: "var(--fg-2)",
  display: "flex",
  alignItems: "center",
};

function VerificationSection({ bet }) {
  return (
    <section style={{ marginBottom: 56 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 18 }}>
        <IconSlot name="audit" size={14} />
        <MetaEyebrow>3 · Verification</MetaEyebrow>
      </div>
      <h2
        style={{
          fontFamily: "var(--font-display)",
          fontWeight: 300,
          fontVariationSettings: '"opsz" 144',
          fontSize: 24,
          letterSpacing: "-0.015em",
          lineHeight: 1.2,
          color: "var(--fg-1)",
          margin: "0 0 18px",
        }}
      >
        Evidence
      </h2>
      <VerificationTable items={bet.verification} />
    </section>
  );
}

function HarvestSection({ bet }) {
  if (!bet.harvest) return null;
  return (
    <section
      style={{
        marginTop: 40,
        padding: 32,
        border: "1px solid var(--hairline)",
        background: "rgba(201, 169, 97, 0.05)",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
        <IconSlot name="harvest" size={16} color="var(--tehom-signal)" />
        <MetaEyebrow color="var(--tehom-signal)">Harvest</MetaEyebrow>
      </div>
      <p
        style={{
          fontFamily: "var(--font-display)",
          fontWeight: 300,
          fontVariationSettings: '"opsz" 144',
          fontSize: 22,
          lineHeight: 1.42,
          color: "var(--fg-1)",
          margin: 0,
          letterSpacing: "-0.01em",
          maxWidth: 820,
        }}
      >
        {bet.harvest}
      </p>
    </section>
  );
}

function BetView({ betId, onBack }) {
  const bet = window.YEHI_DATA.bets.find((b) => b.id === betId);
  if (!bet) {
    return (
      <YContainer style={{ padding: "48px 0" }}>
        <BackToCycle onBack={onBack} />
        <p style={{ fontFamily: "var(--font-body)", color: "var(--fg-3)" }}>
          Bet {betId} not found in this prototype. Try a different bet from the cycle table.
        </p>
      </YContainer>
    );
  }
  return (
    <YContainer style={{ padding: "48px 0 96px" }}>
      <BackToCycle onBack={onBack} />
      <BetHeader bet={bet} />
      <ShapingSection bet={bet} />
      <ExecutionSection bet={bet} />
      <VerificationSection bet={bet} />
      <HarvestSection bet={bet} />
    </YContainer>
  );
}

Object.assign(window, {
  BackToCycle, BetHeader, ShapingSection, AcceptanceCriteriaList,
  ExecutionSection, VerificationTable, VerificationSection, HarvestSection, BetView,
});