rekordbox-viewer/packages/frontend/src/pages/Configuration.tsx

import { Box, Heading, VStack, Text, Button, OrderedList, ListItem, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useToast, IconButton, Flex } from "@chakra-ui/react";
import { ChevronLeftIcon } from "@chakra-ui/icons";
import { useNavigate } from "react-router-dom";
import { useXmlParser } from "../hooks/useXmlParser";

import { StyledFileInput } from "../components/StyledFileInput";
import { api } from "../services/api";

export function Configuration() {
  const { resetLibrary } = useXmlParser();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const toast = useToast();
  const navigate = useNavigate();



  const handleResetDatabase = async () => {
    try {
      await api.resetDatabase();
      await resetLibrary();
      onClose();
      toast({
        title: "Database reset successful",
        description: "Your library has been cleared.",
        status: "success",
        duration: 5000,
        isClosable: true,
      });
      // Navigate to homepage to show welcome modal and start fresh
      navigate('/');
    } catch (error) {
      toast({
        title: "Failed to reset database",
        description: "An error occurred while resetting the database.",
        status: "error",
        duration: 5000,
        isClosable: true,
      });
    }
  };

  return (
    <Box 
      h="100%" 
      bg="gray.900" 
      p={8}
      overflowY="auto"
      sx={{
        '&::-webkit-scrollbar': {
          width: '8px',
          borderRadius: '8px',
          backgroundColor: 'gray.900',
        },
        '&::-webkit-scrollbar-thumb': {
          backgroundColor: 'gray.700',
          borderRadius: '8px',
        },
      }}
    >
      <VStack spacing={8} align="stretch" maxW="2xl" mx="auto">
        <Flex align="center" gap={4}>
          <IconButton
            icon={<ChevronLeftIcon boxSize={6} />}
            aria-label="Go back"
            variant="ghost"
            onClick={() => navigate('/')}
            color="gray.300"
            _hover={{ color: "white", bg: "whiteAlpha.200" }}
          />
          <Heading size="lg">Configuration</Heading>
        </Flex>
        
        <Box bg="gray.800" p={6} borderRadius="lg" borderWidth="1px" borderColor="gray.700">
          <Heading size="md" mb={4}>Library Management</Heading>
          
          <VStack spacing={6} align="stretch">
            <Box>
              <Text color="gray.400" mb={4}>
                To get started with Rekordbox Reader, you'll need to export your library from Rekordbox and import it here.
              </Text>
              
              <OrderedList spacing={3} color="gray.400" mb={6}>
                <ListItem>
                  Open Rekordbox and go to <Text as="span" color="gray.300" fontWeight="medium">File → Export Collection in xml format</Text>
                </ListItem>
                <ListItem>
                  Choose a location to save your XML file
                </ListItem>
                <ListItem>
                  Click the button below to import your Rekordbox XML file
                </ListItem>
              </OrderedList>
            </Box>

            <Box>
              <Text fontWeight="medium" mb={2}>Import Library</Text>
              <StyledFileInput />
            </Box>
            


            <Box borderTopWidth="1px" borderColor="gray.700" pt={6} mt={4}>
              <Text fontWeight="medium" mb={2}>Reset Database</Text>
              <Text color="gray.400" mb={4}>
                Clear all songs and playlists from the database. This action cannot be undone.
              </Text>
              <Button 
                onClick={onOpen}
                width="full"
                colorScheme="red"
                variant="outline"
              >
                Reset Database
              </Button>
            </Box>
          </VStack>
        </Box>
      </VStack>

      {/* Reset Database Confirmation Modal */}
      <Modal isOpen={isOpen} onClose={onClose} isCentered>
        <ModalOverlay />
        <ModalContent bg="gray.800">
          <ModalHeader color="white">Confirm Database Reset</ModalHeader>
          <ModalBody>
            <VStack spacing={4} align="stretch">
              <Text color="gray.300">
                Are you sure you want to reset the database? This will:
              </Text>
              <OrderedList spacing={2} color="gray.400" pl={4}>
                <ListItem>Delete all imported songs</ListItem>
                <ListItem>Remove all playlists</ListItem>
                <ListItem>Clear all custom configurations</ListItem>
              </OrderedList>
              <Text color="red.300" fontWeight="medium">
                This action cannot be undone.
              </Text>
            </VStack>
          </ModalBody>
          <ModalFooter gap={3}>
            <Button 
              variant="outline" 
              onClick={onClose}
              color="gray.300"
              _hover={{
                bg: "whiteAlpha.200",
                color: "white"
              }}
            >
              Cancel
            </Button>
            <Button colorScheme="red" onClick={handleResetDatabase}>
              Reset Database
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
}