import React from 'react';
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  Text,
  VStack,
  HStack,
  Icon,
  Alert,
  AlertIcon,
  AlertDescription,
  useColorModeValue,
} from '@chakra-ui/react';
import { FiClock, FiTrash2, FiDownload } from 'react-icons/fi';

interface DraftRecoveryModalProps {
  isOpen: boolean;
  onClose: () => void;
  onRecover: () => void;
  onDiscard: () => void;
  onDeleteOnly: () => void; // Delete draft and close without opening new
  draftAge: number | null; // Age in minutes
  entityType?: string; // "článek", "aktivitu", "hráče", etc.
}

const DraftRecoveryModal: React.FC<DraftRecoveryModalProps> = ({
  isOpen,
  onClose,
  onRecover,
  onDiscard,
  onDeleteOnly,
  draftAge,
  entityType = 'položku',
}) => {
  const bgColor = useColorModeValue('white', 'gray.800');

  const getDraftAgeText = () => {
    if (draftAge === null) return 'nedávno';
    if (draftAge < 1) return 'před chvílí';
    if (draftAge < 60) return `před ${draftAge} min`;
    if (draftAge < 1440) return `před ${Math.floor(draftAge / 60)} h`;
    return `před ${Math.floor(draftAge / 1440)} dny`;
  };

  const handleRecover = () => {
    onRecover();
    onClose();
  };

  const handleDiscard = () => {
    onDiscard();
    onClose();
  };

  const handleDeleteOnly = () => {
    onDeleteOnly();
    onClose();
  };

  return (
    <Modal 
      isOpen={isOpen} 
      onClose={onClose} 
      isCentered
      closeOnOverlayClick={false}
      closeOnEsc={false}
    >
      <ModalOverlay backdropFilter="blur(4px)" />
      <ModalContent bg={bgColor} maxW="500px">
        <ModalHeader>
          <HStack spacing={2}>
            <Icon as={FiClock} color="blue.500" boxSize={6} />
            <Text>Nalezen neuložený koncept</Text>
          </HStack>
        </ModalHeader>
        
        <ModalBody>
          <VStack align="stretch" spacing={4}>
            <Alert status="info" borderRadius="md">
              <AlertIcon />
              <AlertDescription>
                Máme uložený neuložený koncept pro tuto {entityType}, vytvořený{' '}
                <strong>{getDraftAgeText()}</strong>.
              </AlertDescription>
            </Alert>

            <Text fontSize="sm" color="gray.600">
              Co chcete udělat?
            </Text>

            <VStack align="stretch" spacing={2}>
              <Button
                leftIcon={<FiDownload />}
                colorScheme="blue"
                size="lg"
                onClick={handleRecover}
              >
                Obnovit koncept
              </Button>
              <Text fontSize="xs" color="gray.500" textAlign="center">
                Načte uložená data a můžete pokračovat v práci
              </Text>
            </VStack>

            <VStack align="stretch" spacing={2}>
              <Button
                leftIcon={<FiTrash2 />}
                variant="outline"
                colorScheme="orange"
                size="sm"
                onClick={handleDeleteOnly}
              >
                Smazat koncept a zavřít
              </Button>
              <Text fontSize="xs" color="gray.500" textAlign="center">
                Smaže uložený koncept bez vytvoření nové {entityType}
              </Text>
            </VStack>

            <VStack align="stretch" spacing={2}>
              <Button
                leftIcon={<FiTrash2 />}
                variant="outline"
                colorScheme="red"
                size="sm"
                onClick={handleDiscard}
              >
                Zahodit koncept a začít znovu
              </Button>
              <Text fontSize="xs" color="gray.500" textAlign="center">
                Smaže uložený koncept a vytvoří novou prázdnou {entityType}
              </Text>
            </VStack>
          </VStack>
        </ModalBody>

        <ModalFooter>
          <Text fontSize="xs" color="gray.400">
            💡 Tip: Vaše práce se nyní ukládá automaticky při každé změně
          </Text>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default DraftRecoveryModal;
