import React, { useRef, useState } from 'react';
import { Box, Button, Input, Text } from '@chakra-ui/react';

interface CertificationImportProps {
  onImport: (csvContent: string) => { success: boolean; count?: number; error?: string };
}

export const CertificationImport: React.FC<CertificationImportProps> = ({ onImport }) => {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [message, setMessage] = useState<{text: string, type: 'success' | 'error'} | null>(null);

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || files.length === 0) return;

    setIsLoading(true);
    setMessage(null);
    
    try {
      const file = files[0];
      const content = await readFileAsText(file);
      const result = onImport(content);
      
      if (result.success) {
        setMessage({ 
          text: `Successfully imported ${result.count} certifications.`,
          type: 'success'
        });
      } else {
        setMessage({ 
          text: result.error || 'Unknown error occurred during import.',
          type: 'error'
        });
      }
    } catch (error) {
      setMessage({ 
        text: error instanceof Error ? error.message : 'Unknown error reading file.',
        type: 'error'
      });
    } finally {
      setIsLoading(false);
      // Reset the file input
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    }
  };

  const readFileAsText = (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        if (e.target?.result) {
          resolve(e.target.result as string);
        } else {
          reject(new Error('Failed to read file'));
        }
      };
      reader.onerror = () => reject(new Error('Failed to read file'));
      reader.readAsText(file);
    });
  };

  return (
    <Box mt={4} mb={4}>
      <Text fontWeight="medium" mb={2}>
        Import certifications from CSV
      </Text>
      <Box display="flex" alignItems="center" gap={2}>
        <Input
          type="file"
          accept=".csv"
          ref={fileInputRef}
          onChange={handleFileChange}
          style={{ display: 'none' }}
          id="csv-file-input"
        />
        <label htmlFor="csv-file-input">
          <Button
            as="span"
            colorScheme="blue"
            isLoading={isLoading}
            cursor="pointer"
          >
            Select CSV File
          </Button>
        </label>
        <Text fontSize="sm" color="gray.500">
          Expected format: columns for Name, Status, and Start date
        </Text>
      </Box>
      
      {message && (
        <Text 
          mt={2} 
          color={message.type === 'success' ? 'green.500' : 'red.500'}
          fontWeight="medium"
        >
          {message.text}
        </Text>
      )}
    </Box>
  );
};