"use client";

import { Team, ThirdPlaceRow } from "@/lib/types";

export default function ThirdPlace({
  rows, teams, secureTeams,
}: { rows: ThirdPlaceRow[]; teams: Team[]; secureTeams?: string[] }) {
  const name = (id: string) => {
    const t = teams.find((t) => t.id === id);
    return t?.localisedName ?? t?.name ?? id;
  };
  const secureSet = secureTeams ? new Set(secureTeams) : null;

  return (
    <div className="third-wrap">
      <p className="notice" style={{ marginBottom: 16 }}>
        Acht der zwölf Gruppendritten erreichen die Runde der letzten 32. Gewertet wird
        gruppenübergreifend nach Punkten, Tordifferenz und Toren — der Direktvergleich
        entfällt, weil diese Teams nie gegeneinander gespielt haben. Die Trennlinie markiert
        den Schnitt zwischen Platz 8 und 9.
      </p>
      <table className="third-table">
        <thead>
          <tr>
            <th>#</th><th>Gruppe</th><th>Team</th>
            <th>Sp</th><th>Pkt</th><th>±</th><th>Tore</th><th>Status</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => {
            const isCut = i === 8; // erste nicht-qualifizierte Zeile
            return (
              <tr
                key={r.teamId}
                className={`third-row ${r.qualifies ? "qual" : ""} ${isCut ? "cut" : ""}`}
              >
                <td>{r.overallRank}</td>
                <td>{r.group}</td>
                <td className={r.played === 3 ? "team-complete" : ""} style={{ fontWeight: 600 }}>
                {name(r.teamId)}
                {secureSet?.has(r.teamId) && (
                  <span style={{ color: "var(--turf)", marginLeft: 6, fontSize: 13 }} title="sicher qualifiziert">✓</span>
                )}
              </td>
                <td>{r.played}</td>
                <td className="pts">{r.points}</td>
                <td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
                <td>{r.goalsFor}:{r.goalsAgainst}</td>
                <td>
                  <span className={`qual-badge ${r.qualifies ? "yes" : "no"}`}>
                    {r.qualifies ? "weiter" : "raus"}
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}