import { Badge, Card, Text, Image, Stack, Flex } from "@mantine/core"
import { Tournament } from "@/features/tournaments/types"
import { useMemo } from "react"
import { CaretRightIcon, TrophyIcon } from "@phosphor-icons/react"
import { useNavigate } from "@tanstack/react-router"

interface TournamentCardProps {
  tournament: Tournament
}

export const TournamentCard = ({ tournament }: TournamentCardProps) => {
  const navigate = useNavigate({ from: '/tournaments/$tournamentId' })
  const displayDate = useMemo(() => {
    if (!tournament.start_time) return null
    const date = new Date(tournament.start_time)
    if (isNaN(date.getTime())) return null
    return date.toLocaleDateString('en-US', { 
      year: 'numeric', 
      month: 'long', 
      day: 'numeric' 
    })
  }, [tournament.start_time])

  return (
    <Card shadow="sm" padding="lg" radius="md" withBorder style={{ cursor: 'pointer' }} onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}>
      <Stack>
        <Flex align='center' gap='md'>
          <Image
            src={tournament.logo ? `/api/files/tournaments/${tournament.id}/${tournament.logo}` : undefined}
            maw={100}
            mah={100}
            fit='contain'
            alt={tournament.name}
            fallbackSrc={"TODO"}
            />
            <Stack ta='center' mx='auto' gap='0'>
              <Text size='lg' fw={800}>{tournament.name} <CaretRightIcon size={12} weight='bold' /></Text>
              {displayDate && <Text c='dimmed' size='xs' fw={600}>{displayDate}</Text>}
              <Stack gap={4} mt={4}>
                { /* TODO: Add medalists when data is available */}
                <Badge variant='dot' color='gold'>Longer Team Name Goes Here</Badge>
                <Badge variant='dot' color='silver'>Some Team</Badge>
                <Badge variant='dot' color='orange'>Medium Team Name</Badge>
              </Stack>
            </Stack>
        </Flex>
      </Stack>
    </Card>
  )
}