import { Box, VStack, Text, Divider } from "@chakra-ui/react";
import { Song } from "../types/interfaces";

interface SongDetailsProps {
  song: Song | null;
}

export const SongDetails: React.FC<SongDetailsProps> = ({ song }) => {
  if (!song) {
    return (
      <Box h="full" p={4}>
        <Text color="gray.500">Select a song to view details</Text>
      </Box>
    );
  }

  const details = [
    { label: "Title", value: song.title },
    { label: "Artist", value: song.artist },
    { label: "Album", value: song.album },
    { label: "Genre", value: song.genre },
    { label: "BPM", value: song.averageBpm },
    { label: "Key", value: song.tonality },
    { label: "Year", value: song.year },
    { label: "Label", value: song.label },
    { label: "Mix", value: song.mix },
    { label: "Rating", value: song.rating },
    { label: "Comments", value: song.comments },
  ].filter(detail => detail.value);

  return (
    <Box h="full">
      <VStack align="stretch" spacing={4} p={4}>
        <Box>
          <Text fontSize="lg" fontWeight="bold" color="white">
            {song.title}
          </Text>
          <Text fontSize="md" color="gray.400">
            {song.artist}
          </Text>
        </Box>
        <Divider borderColor="gray.700" />
        <VStack align="stretch" spacing={3}>
          {details.map(({ label, value }) => (
            <Box key={label}>
              <Text fontSize="xs" color="gray.500" mb={1}>
                {label}
              </Text>
              <Text fontSize="sm" color="gray.300">
                {value}
              </Text>
            </Box>
          ))}
        </VStack>
        {song.tempo && (
          <>
            <Divider borderColor="gray.700" />
            <Box>
              <Text fontSize="xs" color="gray.500" mb={2}>
                Tempo Details
              </Text>
              <VStack align="stretch" spacing={2}>
                <Box>
                  <Text fontSize="xs" color="gray.500">BPM</Text>
                  <Text fontSize="sm" color="gray.300">{song.tempo.bpm}</Text>
                </Box>
                <Box>
                  <Text fontSize="xs" color="gray.500">Beat</Text>
                  <Text fontSize="sm" color="gray.300">{song.tempo.battito}</Text>
                </Box>
                <Box>
                  <Text fontSize="xs" color="gray.500">Time Signature</Text>
                  <Text fontSize="sm" color="gray.300">{song.tempo.metro}</Text>
                </Box>
              </VStack>
            </Box>
          </>
        )}
      </VStack>
    </Box>
  );
};