import {
  Paper,
  Text,
  Group,
  Box,
  Stack,
  Divider,
  Title
} from "@mantine/core";
import { useTeam } from "../queries";
import TeamAvatar from "@/components/team-avatar";
import SongSummary from "./team-form/song-summary";

interface TeamCardProps {
  teamId: string;
}

const TeamCard = ({ teamId }: TeamCardProps) => {
  const { data: team, error } = useTeam(teamId);

  if (error || !team) {
    return (
      <Paper p="sm" withBorder radius="md">
        <Text c="red" ta="center" size="sm">
          Failed to load team
        </Text>
      </Paper>
    );
  }

  const song = {
    song_id: team.song_id,
    song_name: team.song_name,
    song_artist: team.song_artist,
    song_album: team.song_album,
    song_start: team.song_start,
    song_end: team.song_end,
    song_image_url: team.song_image_url,
  };

  return (
    <Paper
      withBorder
      radius="lg"
      shadow="xs"
    >
      <Stack gap={2}>
        <Group gap="md" align="center" p="xs">
          <TeamAvatar
            team={team}
            size={40}
            radius="md"
            style={{
              backgroundColor: team.primary_color || undefined,
              color: team.accent_color || undefined,
            }}
          />
          <Box style={{ flex: 1, minWidth: 0 }}>
            <Title order={5} lineClamp={1}>
              {team.name}
            </Title>
            <Text size="sm" c="dimmed" lineClamp={1}>
              {team.players?.map(p => `${p.first_name} ${p.last_name}`).join(', ')}
            </Text>
          </Box>
        </Group>
        <Divider />
        <Box p="sm">
          <SongSummary song={song} />
        </Box>
      </Stack>
    </Paper>
  );
};

export default TeamCard;