"use client"

import Link from "next/link"

interface Player {
  id: number
  name: string
}

interface BracketMatchup {
  id: number
  player1P1: Player | null
  player1P2: Player | null
  player2P1: Player | null
  player2P2: Player | null
  match: { id: number } | null
  bracketPosition: number | null
  status: string
}

interface TournamentRound {
  id: number
  roundNumber: number
  status: string
  bracketMatchups: BracketMatchup[]
}

export function ScheduleDisplay({ rounds }: { rounds: TournamentRound[] }) {
  return (
    <div className="space-y-6">
      {rounds.map((round) => (
        <div key={round.id} className="border border-gray-200 rounded-lg p-4">
          <h3 className="text-lg font-semibold text-gray-900 mb-3">
            Round {round.roundNumber}
            <span className="ml-2 text-sm font-normal text-gray-500">
              ({round.status})
            </span>
          </h3>

          <div className="space-y-3">
            {round.bracketMatchups.map((matchup) => {
              const team1 = [
                matchup.player1P1?.name,
                matchup.player1P2?.name,
              ]
                .filter(Boolean)
                .join(" + ")

              const team2 = [
                matchup.player2P1?.name,
                matchup.player2P2?.name,
              ]
                .filter(Boolean)
                .join(" + ")

              const content = (
                <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                  <div className="flex-1">
                    <span className="font-medium text-gray-900">
                      {team1 || "TBD"}
                    </span>
                    <span className="mx-3 text-gray-400">vs</span>
                    <span className="font-medium text-gray-900">
                      {team2 || "TBD"}
                    </span>
                  </div>
                  <div className="text-sm text-gray-500">
                    {matchup.status === "pending" ? (
                      <span className="text-gray-400">Pending</span>
                    ) : matchup.match ? (
                      <span className="text-green-600">Completed</span>
                    ) : (
                      <span className="text-gray-400">{matchup.status}</span>
                    )}
                  </div>
                </div>
              )

              if (matchup.match) {
                return (
                  <Link
                    key={matchup.id}
                    href={`/matches/${matchup.match.id}`}
                    className="block hover:bg-gray-100 rounded-md transition-colors"
                    data-testid="matchup"
                  >
                    {content}
                  </Link>
                )
              }

              return (
                <Link
                  key={matchup.id}
                  href={`/matches/new?matchup=${matchup.id}`}
                  className="block hover:bg-gray-100 rounded-md transition-colors"
                  data-testid="matchup"
                >
                  {content}
                </Link>
              )
            })}
          </div>
        </div>
      ))}
    </div>
  )
}