/* Dispatches screen — the live event feed emitted by the pipeline. */

function DispatchesScreen({ onOpenModel }) {
  const { Eyebrow, Tag, Badge } = window.TheOracleLeagueDesignSystem_92fa71;
  const { DISPATCHES, MODELS } = window;
  const Icon = window.Icon;
  const byId = Object.fromEntries(MODELS.map((m) => [m.id, m]));

  const KIND_ICON = { result: "circleDot", bet: "coins", lock: "lock", rank: "trophy", odds: "scale" };

  return (
    <div style={{ padding: "28px 32px", maxWidth: 720 }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 26 }}>
        <Eyebrow tone="gold">Live feed</Eyebrow>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 400, letterSpacing: "-0.02em", color: "var(--text-primary)", lineHeight: 1.12, margin: 0 }}>
          Dispatches
        </h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--text-secondary)", maxWidth: 560, lineHeight: 1.55, margin: 0 }}>
          Results, settled bets, locks and rank changes — streamed straight from the pipeline as the tournament unfolds.
        </p>
      </div>

      <div style={{ position: "relative", paddingLeft: 30 }}>
        <span style={{ position: "absolute", left: 13, top: 6, bottom: 6, width: 2, background: "var(--border)" }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {DISPATCHES.map((d) => {
            const m = d.model ? byId[d.model] : null;
            const toneColor = { positive: "var(--positive)", negative: "var(--negative)", gold: "var(--accent)", info: "var(--info)", neutral: "var(--text-muted)" }[d.tone];
            return (
              <div key={d.id} style={{ position: "relative", padding: "12px 0" }}>
                <span style={{
                  position: "absolute", left: -30, top: 12, width: 28, height: 28, borderRadius: "50%",
                  background: "var(--bg-raised)", border: `1px solid color-mix(in srgb, ${toneColor} 45%, var(--border))`,
                  display: "inline-flex", alignItems: "center", justifyContent: "center", zIndex: 1,
                }}>
                  <Icon name={KIND_ICON[d.kind]} size={14} color={toneColor} />
                </span>
                <div style={{
                  background: "var(--bg-surface)", border: "1px solid var(--border)", borderRadius: "var(--radius-md)",
                  padding: "12px 15px",
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
                    <Tag tone={d.tone === "neutral" ? "neutral" : d.tone === "positive" ? "positive" : d.tone === "negative" ? "negative" : d.tone === "gold" ? "gold" : "info"}>{d.kind}</Tag>
                    {m ? (
                      <span onClick={() => onOpenModel(m.id)} style={{ display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
                        <span style={{ width: 8, height: 8, borderRadius: "50%", background: m.color }} />
                        <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, color: "var(--text-secondary)" }}>{m.name}</span>
                      </span>
                    ) : null}
                    <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)" }}>{d.time} ago</span>
                  </div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, fontWeight: 600, color: "var(--text-primary)", marginBottom: 3 }}>{d.title}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.5 }}>{d.body}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.DispatchesScreen = DispatchesScreen;