/* Matchday screen — fixtures with consensus odds and per-model predictions. */

function FixtureCard({ fx, expanded, onToggle, byId }) {
  const { ProbBar, Scoreline, Badge, ModelChip, Tag } = window.TheOracleLeagueDesignSystem_92fa71;
  const Icon = window.Icon;
  const [hover, setHover] = React.useState(null); // { reason, x, y }
  const statusBadge =
    fx.status === "live" ? <Badge tone="positive" variant="solid" dot>LIVE {fx.minute}</Badge>
    : fx.status === "final" ? <Badge tone="neutral" variant="outline">FULL TIME</Badge>
    : <Badge tone="gold">UPCOMING</Badge>;

  return (
    <React.Fragment>
    <div style={{ background: "var(--bg-surface)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)" }}>
      <div style={{ padding: "16px 18px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-muted)" }}>
            {fx.group} · {fx.venue}
          </span>
          {statusBadge}
        </div>

        <Scoreline
          home={fx.home} away={fx.away}
          homeScore={fx.homeScore} awayScore={fx.awayScore}
          status={fx.status} kickoff={fx.kickoff}
        />

        <div style={{ marginTop: 16 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 7 }}>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fontWeight: 600, letterSpacing: "0.09em", textTransform: "uppercase", color: "var(--text-muted)" }}>Consensus</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)" }}>book {fx.book.home.toFixed(2)} / {fx.book.draw.toFixed(2)} / {fx.book.away.toFixed(2)}</span>
          </div>
          <ProbBar home={fx.consensus.home} draw={fx.consensus.draw} away={fx.consensus.away} height={26} />
        </div>
      </div>

      <button onClick={onToggle} style={{
        width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "11px 18px", border: "none", borderTop: "1px solid var(--border)",
        background: expanded ? "var(--bg-raised)" : "transparent", cursor: "pointer",
        fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--text-secondary)",
        transition: "background var(--dur)",
      }}>
        <span>{fx.picks.length} model predictions</span>
        <span style={{ transform: expanded ? "rotate(90deg)" : "none", transition: "transform var(--dur)", display: "inline-flex" }}>
          <Icon name="chevronRight" size={16} color="var(--text-muted)" />
        </span>
      </button>

      {expanded ? (
        <div style={{ borderTop: "1px solid var(--border)", padding: "6px 10px 10px" }}>
          {fx.picks.map((p) => {
            const m = byId[p.id];
            const oc = p.outcome;
            const ocColor = oc === "home" ? "var(--prob-home)" : oc === "away" ? "var(--prob-away)" : "var(--prob-draw)";
            const ocLabel = oc === "home" ? fx.home.code : oc === "away" ? fx.away.code : "DRAW";
            return (
              <div key={p.id}
                onMouseEnter={(e) => setHover({ reason: p.reason, name: m.name, x: e.clientX, y: e.clientY })}
                onMouseMove={(e) => setHover((h) => h && h.name === m.name ? { ...h, x: e.clientX, y: e.clientY } : h)}
                onMouseLeave={() => setHover(null)}
                style={{ display: "flex", alignItems: "center", gap: 12, padding: "9px 8px", borderBottom: "1px solid var(--border)", borderRadius: "var(--radius-sm)", cursor: p.reason ? "help" : "default", transition: "background var(--dur)", background: hover && hover.name === m.name ? "var(--bg-hover)" : "transparent" }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <ModelChip name={m.name} sublabel={m.vendor} color={m.color} size={28} />
                </div>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text-secondary)", minWidth: 42, textAlign: "center" }}>{p.score}</span>
                <span style={{
                  fontFamily: "var(--font-mono)", fontSize: 11.5, fontWeight: 700, letterSpacing: "0.03em",
                  color: ocColor, background: `color-mix(in srgb, ${ocColor} 12%, transparent)`,
                  border: `1px solid color-mix(in srgb, ${ocColor} 35%, transparent)`,
                  borderRadius: "var(--radius-xs)", padding: "3px 8px", minWidth: 56, textAlign: "center",
                }}>{ocLabel}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)", minWidth: 38, textAlign: "right" }}>{Math.round(p.conf * 100)}%</span>
                {fx.status === "final" ? (
                  <span style={{ width: 20, display: "inline-flex", justifyContent: "center" }}>
                    <Icon name={p.hit ? "check" : "x"} size={15} color={p.hit ? "var(--positive)" : "var(--negative)"} />
                  </span>
                ) : <span style={{ width: 20 }} />}
              </div>
            );
          })}
        </div>
      ) : null}
    </div>
    {hover && hover.reason ? (
      <div style={{
        position: "fixed", left: Math.min(hover.x + 16, (typeof window !== "undefined" ? window.innerWidth : 1280) - 320),
        top: hover.y + 18, width: 280, zIndex: 60, pointerEvents: "none",
        background: "var(--bg-raised)", border: "1px solid var(--border-strong)",
        borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", padding: "11px 13px",
      }}>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 5 }}>{hover.name} · reasoning</div>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, lineHeight: 1.5, color: "var(--text-secondary)" }}>{hover.reason}</div>
      </div>
    ) : null}
    </React.Fragment>
  );
}

function MatchdayScreen() {
  const { Eyebrow, Button } = window.TheOracleLeagueDesignSystem_92fa71;
  const { MATCHDAY, MODELS } = window;
  const Icon = window.Icon;
  const byId = Object.fromEntries(MODELS.map((m) => [m.id, m]));
  const [expanded, setExpanded] = React.useState(MATCHDAY.fixtures[0].id);
  const [filter, setFilter] = React.useState("all");

  const fixtures = MATCHDAY.fixtures.filter((f) => filter === "all" ? true : f.status === filter);
  const filters = [["all", "All"], ["upcoming", "Upcoming"], ["live", "Live"], ["final", "Final"]];

  return (
    <div style={{ padding: "28px 32px", maxWidth: 820 }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, marginBottom: 6 }}>
        <div style={{ flex: "none" }}>
          <Eyebrow tone="gold">{MATCHDAY.window}</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 400, letterSpacing: "-0.02em", color: "var(--text-primary)", lineHeight: 1.05, margin: "10px 0 0", whiteSpace: "nowrap" }}>
            Matchday {String(MATCHDAY.number).padStart(2, "0")}
          </h1>
        </div>
        <Button variant="secondary" size="sm" icon={<Icon name="calendar" size={15} />}>Full fixture list</Button>
      </div>

      <div style={{ display: "flex", gap: 7, margin: "20px 0 18px" }}>
        {filters.map(([id, label]) => {
          const on = filter === id;
          return (
            <button key={id} onClick={() => setFilter(id)} style={{
              padding: "6px 13px", borderRadius: "var(--radius-pill)", cursor: "pointer",
              fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600,
              border: `1px solid ${on ? "transparent" : "var(--border)"}`,
              background: on ? "var(--accent)" : "transparent",
              color: on ? "var(--text-on-accent)" : "var(--text-secondary)",
              transition: "background var(--dur)",
            }}>{label}</button>
          );
        })}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {fixtures.map((fx) => (
          <FixtureCard key={fx.id} fx={fx} byId={byId}
            expanded={expanded === fx.id}
            onToggle={() => setExpanded(expanded === fx.id ? null : fx.id)} />
        ))}
      </div>
    </div>
  );
}

window.MatchdayScreen = MatchdayScreen;