wm-projekt/app/[locale]/components/Fixtures.tsx

"use client";

import { GROUP_IDS, GroupId, Match, Team, teamName } from "@/lib/types";
import { computeGroupTables } from "@/lib/standings";
import { Dictionary } from "@/lib/i18n";
import Flag from "./Flag";

function teamById(teams: Team[], id: string | null) {
  return id ? teams.find((t) => t.id === id) : undefined;
}

function tzLabel(locale: string): string {
  try {
    const parts = new Intl.DateTimeFormat(locale === "en" ? "en-US" : "de-DE", { timeZoneName: "short" })
      .formatToParts(new Date());
    return parts.find((p) => p.type === "timeZoneName")?.value ?? "";
  } catch {
    return "";
  }
}

function fmtDate(iso: string, locale: string): string {
  const d = new Date(iso);
  const s = d.toLocaleString(locale === "en" ? "en-US" : "de-DE", {
    weekday: "short", day: "2-digit", month: "2-digit",
    hour: "2-digit", minute: "2-digit",
  });
  const tz = tzLabel(locale);
  return tz ? `${s} ${tz}` : s;
}

function statusText(m: Match, dict: Dictionary): { text: string; live: boolean } {
  switch (m.status) {
    case "LIVE":
    case "IN_PLAY":
      return { text: m.minute != null ? `${m.minute}'` : dict.status.running, live: true };
    case "PAUSED":
      return { text: dict.status.halftime, live: true };
    case "FINISHED":
      return { text: dict.status.finished, live: false };
    default:
      return { text: "", live: false };
  }
}

// Mitte: Ergebnis (wenn vorhanden) oder ein schlichtes "–" bei ungespielten
// Spielen. Datum/Uhrzeit steht bereits links im Status und wird hier NICHT
// wiederholt.
function ScoreCell({ m, dict }: { m: Match; dict: Dictionary }) {
  const hasScore = m.homeScore != null && m.awayScore != null;
  const st = statusText(m, dict);
  if (hasScore) {
    return (
      <span className={`fx-score ${st.live ? "score-live" : ""}`}>
        {m.homeScore} : {m.awayScore}
      </span>
    );
  }
  return <span className="fx-vs">–</span>;
}

function GroupStandings({
  group, teams, matches, dict,
}: { group: GroupId; teams: Team[]; matches: Match[]; dict: Dictionary }) {
  // Live-Tabelle: laufende Spiele werden mit Zwischenstand eingerechnet.
  const table = computeGroupTables(teams, matches, true).find((t) => t.group === group);
  if (!table) return null;

  // Teams, die gerade ein laufendes Spiel haben -> Zeile markieren.
  const liveTeamIds = new Set<string>();
  let hasLive = false;
  for (const m of matches) {
    if (m.group !== group) continue;
    if (m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED") {
      hasLive = true;
      if (m.homeTeamId) liveTeamIds.add(m.homeTeamId);
      if (m.awayTeamId) liveTeamIds.add(m.awayTeamId);
    }
  }

  return (
    <div className="fx-standings">
      <div className="fx-standings-title">
        {dict.fixtures.standingsTitle(group)}
        {hasLive && <span className="fx-standings-live">{dict.label.liveIndicator}</span>}
      </div>
      <table className="standings">
        <thead>
          <tr>
            <th className="team">{dict.table.team}</th>
            <th>{dict.table.matches}</th><th>{dict.table.won}</th><th>{dict.table.drawn}</th><th>{dict.table.lost}</th>
            <th>{dict.table.goals}</th><th>{dict.table.goalDiff}</th><th>{dict.table.points}</th>
          </tr>
        </thead>
        <tbody>
          {table.rows.map((r) => {
            const team = teamById(teams, r.teamId);
            const cls = r.rank <= 2 ? `q${r.rank}` : r.rank === 3 ? "q3" : "";
            const isLive = liveTeamIds.has(r.teamId);
            return (
              <tr key={r.teamId} className={isLive ? "row-live" : ""}>
                <td className="team">
                  <span className={`rankdot ${cls}`}>{r.rank}</span>
                  <Flag team={team} size={20} />
                  <span className="team-name">{teamName(team, "de")}</span>
                  {isLive && <span className="row-live-dot" title={dict.status.running} />}
                </td>
                <td>{r.played}</td>
                <td>{r.won}</td>
                <td>{r.drawn}</td>
                <td>{r.lost}</td>
                <td>{r.goalsFor}:{r.goalsAgainst}</td>
                <td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
                <td className="pts">{r.points}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default function Fixtures({
  group, teams, matches, onSelectGroup, dict, locale,
}: {
  group: GroupId; teams: Team[]; matches: Match[];
  onSelectGroup: (g: GroupId) => void;
  dict: Dictionary; locale: string;
}) {
  const intlLocale = locale === "en" ? "en-US" : "de-DE";
  const list = matches
    .filter((m) => m.group === group)
    .sort((a, b) => +new Date(a.utcDate) - +new Date(b.utcDate));

  return (
    <div>
      <div className="grp-switch">
        {GROUP_IDS.map((g) => (
          <button
            key={g}
            className={`grp-chip ${g === group ? "active" : ""}`}
            onClick={() => onSelectGroup(g)}
          >
            {g}
          </button>
        ))}
      </div>

      {list.length === 0 ? (
        <div className="notice">{dict.fixtures.noMatches(group)}</div>
      ) : (
        <div className="fixtures">
          {list.map((m) => {
            const home = teamById(teams, m.homeTeamId);
            const away = teamById(teams, m.awayTeamId);
            const st = statusText(m, dict);
            const displayText = st.text || fmtDate(m.utcDate, locale);
            const homeWin = m.homeScore != null && m.awayScore != null && m.homeScore > m.awayScore;
            const awayWin = m.homeScore != null && m.awayScore != null && m.awayScore > m.homeScore;
            return (
              <div className={`fx ${st.live ? "fx-live" : ""}`} key={m.id}>
                <div className="fx-status">
                  {st.live && <span className="dot live" />}
                  <span>{displayText}</span>
                </div>
                <div className="fx-teams">
                  <div className={`fx-team home ${homeWin ? "win" : ""}`}>
                    <Flag team={home} size={22} />
                    <span className="fx-name">{teamName(home, locale)}</span>
                  </div>
                  <ScoreCell m={m} dict={dict} />
                  <div className={`fx-team away ${awayWin ? "win" : ""}`}>
                    <Flag team={away} size={22} />
                    <span className="fx-name">{teamName(away, locale)}</span>
                  </div>
                </div>
                <div className="fx-meta">
                  {(() => {
                    const stadium = [m.stadiumName, m.stadiumCity].filter(Boolean).join(", ");
                    const crowd = m.attendance != null ? m.attendance.toLocaleString(intlLocale) : "";
                    const sep = stadium && crowd ? " · " : "";
                    const text = stadium + sep + crowd;
                    return text ? <span className="fx-venue">{text}</span> : null;
                  })()}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {list.length > 0 && (
        <GroupStandings group={group} teams={teams} matches={matches} dict={dict} />
      )}
    </div>
  );
}