// ui_kits/yehi/cycle-view.jsx
// The cycle overview screen — header, goal, scope, non-goals, betting table.

function CycleHeader({ cycle }) {
  return (
    <header style={{ paddingBottom: 28, borderBottom: "1px solid var(--hairline)", marginBottom: 48 }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 24, marginBottom: 18 }}>
        <MetaEyebrow>Cycle {cycle.number} · {cycle.weeksIn} of {cycle.weeksTotal} weeks · {cycle.status}</MetaEyebrow>
        <MonoTag>opened {cycle.opened} · reopened {cycle.reopened}</MonoTag>
      </div>
      <h1
        style={{
          fontFamily: "var(--font-display)",
          fontWeight: 300,
          fontVariationSettings: '"opsz" 144',
          fontSize: "clamp(42px, 5vw, 64px)",
          letterSpacing: "-0.02em",
          lineHeight: 1.02,
          color: "var(--fg-1)",
          margin: 0,
        }}
      >
        {cycle.title}.
      </h1>
      <div
        style={{
          display: "flex",
          alignItems: "flex-start",
          gap: 12,
          marginTop: 26,
          padding: "16px 18px",
          border: "1px solid var(--hairline)",
        }}
      >
        <IconSlot name="goal" size={20} color="var(--tehom-signal)" />
        <div>
          <MetaEyebrow color="var(--tehom-signal)">Cycle goal</MetaEyebrow>
          <p
            style={{
              margin: "8px 0 0",
              fontFamily: "var(--font-body)",
              fontSize: 17,
              lineHeight: 1.55,
              color: "var(--fg-2)",
              maxWidth: 920,
            }}
          >
            "{cycle.goal}"
          </p>
        </div>
      </div>
    </header>
  );
}

function CycleScope({ cycle }) {
  const Block = ({ icon, label, items }) => (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
        <IconSlot name={icon} size={14} />
        <MetaEyebrow>{label}</MetaEyebrow>
      </div>
      <ul
        style={{
          listStyle: "none",
          margin: 0,
          padding: 0,
          display: "flex",
          flexDirection: "column",
          gap: 10,
          fontFamily: "var(--font-body)",
          fontSize: 14,
          color: "var(--fg-2)",
          lineHeight: 1.55,
        }}
      >
        {items.map((item, i) => (
          <li key={i} style={{ display: "flex", gap: 10 }}>
            <span style={{ color: "var(--fg-4)", flexShrink: 0 }}>→</span>
            <span>{item}</span>
          </li>
        ))}
      </ul>
    </div>
  );
  return (
    <section style={{ marginBottom: 64 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 48 }}>
        <Block icon="agreement" label="Scope" items={cycle.scope} />
        <Block icon="blocker" label="Non-goals" items={cycle.nonGoals} />
      </div>
    </section>
  );
}

function BettingTableRow({ bet, onSelect, clickable }) {
  return (
    <article
      onClick={clickable ? () => onSelect(bet.id) : undefined}
      style={{
        display: "grid",
        gridTemplateColumns: "120px 1fr 200px 100px",
        gap: 24,
        alignItems: "start",
        padding: "20px 24px",
        borderBottom: "1px solid var(--hairline)",
        cursor: clickable ? "pointer" : "default",
        transition: "background var(--dur-quick) var(--ease-quiet)",
        opacity: clickable ? 1 : 0.65,
      }}
      onMouseEnter={(e) => clickable && (e.currentTarget.style.background = "rgba(250,247,242,0.025)")}
      onMouseLeave={(e) => clickable && (e.currentTarget.style.background = "transparent")}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <BetMarker state={bet.status} />
        <MonoTag color="var(--fg-2)">{bet.id}</MonoTag>
      </div>
      <div>
        <h3
          style={{
            fontFamily: "var(--font-body)",
            fontWeight: 600,
            fontSize: 16,
            lineHeight: 1.3,
            color: "var(--fg-1)",
            margin: 0,
          }}
        >
          {bet.title}
        </h3>
        {bet.mustShip && (
          <p
            style={{
              margin: "8px 0 0",
              fontFamily: "var(--font-body)",
              fontSize: 13,
              lineHeight: 1.55,
              color: "var(--fg-3)",
              maxWidth: 640,
            }}
          >
            {bet.mustShip}
          </p>
        )}
      </div>
      <MonoTag>{bet.owner}</MonoTag>
      <div style={{ textAlign: "right" }}>
        <StatusLabel state={bet.status} />
      </div>
    </article>
  );
}

function BettingTable({ bets, abbreviated, onSelect }) {
  return (
    <section>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 18 }}>
        <IconSlot name="bet" size={14} />
        <MetaEyebrow>Betting table · {bets.length + abbreviated.length} bets</MetaEyebrow>
      </div>
      <div style={{ borderTop: "1px solid var(--hairline)" }}>
        {bets.map((bet) => (
          <BettingTableRow key={bet.id} bet={bet} onSelect={onSelect} clickable={true} />
        ))}
        {abbreviated.map((bet) => (
          <BettingTableRow key={bet.id} bet={bet} onSelect={onSelect} clickable={false} />
        ))}
      </div>
      <div style={{ paddingTop: 16, fontFamily: "var(--font-body)", fontSize: 12, color: "var(--fg-4)" }}>
        Clickable rows have detail views in this prototype; abbreviated rows are summarized only.
      </div>
    </section>
  );
}

function CycleView({ onSelectBet }) {
  const { cycle, bets, betsAbbreviated } = window.YEHI_DATA;
  return (
    <YContainer style={{ padding: "48px 0 96px" }}>
      <CycleHeader cycle={cycle} />
      <CycleScope cycle={cycle} />
      <BettingTable bets={bets} abbreviated={betsAbbreviated} onSelect={onSelectBet} />
    </YContainer>
  );
}

Object.assign(window, { CycleHeader, CycleScope, BettingTable, BettingTableRow, CycleView });