"use client";

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

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

  return (
    <div className="third-wrap">
      <p className="notice" style={{ marginBottom: 16 }}>
        {dict.thirds.explanation}
      </p>
      <table className="third-table">
        <thead>
          <tr>
            <th>{dict.table.rank}</th><th>{dict.table.group}</th><th>Team</th>
            <th>{dict.table.matches}</th><th>{dict.table.points}</th><th>{dict.table.goalDiff}</th><th>{dict.table.goals}</th><th>{dict.table.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={dict.label.securelyQualified}>✓</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 ? dict.thirds.advances : dict.thirds.eliminated}
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}