"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[]
}

interface ScheduleDisplayProps {
  rounds: TournamentRound[]
  tournamentId: number
}

export function ScheduleDisplay({ rounds, tournamentId }: ScheduleDisplayProps) {
  return (
    <div className="space-y-6">
      {rounds.map((round) => (
        <div key={round.id} className="bg-white rounded-lg shadow p-4">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold">Round {round.roundNumber}</h3>
            <span className={`text-sm px-2 py-1 rounded ${
              round.status === 'completed' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'
            }`}>
              {round.status}
            </span>
          </div>
          <div className="space-y-2">
            {round.bracketMatchups.map((matchup) => {
              const content = (
                <div className="p-3 border border-gray-200 rounded hover:border-green-500 transition-colors">
                  <div className="flex justify-between items-center">
                    <div className="flex-1">
                      <p className="text-sm text-gray-500">
                        Match {matchup.bracketPosition || matchup.id}
                      </p>
                      <p className="font-medium">
                        {matchup.player1P1?.name || 'TBD'} & {matchup.player1P2?.name || 'TBD'}
                      </p>
                      <p className="text-sm text-gray-500">vs</p>
                      <p className="font-medium">
                        {matchup.player2P1?.name || 'TBD'} & {matchup.player2P2?.name || 'TBD'}
                      </p>
                    </div>
                    <div className="text-right">
                      {matchup.match ? (
                        <span className="text-sm text-green-600">Completed</span>
                      ) : (
                        <span className="text-sm text-gray-400">Pending</span>
                      )}
                    </div>
                  </div>
                </div>
              )

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