import React from 'react';
import { Box, Stack, Heading } from '@chakra-ui/react';
import { Certification } from '../types/cv';
import { CertificationImport } from './CertificationImport';
// Import Patternfly component
import PatternflyTextInput from './PatternflyTextInput';
// @ts-ignore
import RedHatButton from './RedHatButton';

// Red Hat brand colors
const colors = {
  red: "#ee0000",
  redHover: "#cc0000",
  redActive: "#a30000",
  blue: "#0066cc",
  blueHover: "#004080", 
  blueActive: "#002952",
  gray: {
    light: "#f5f5f5",
    medium: "#d2d2d2",
    dark: "#4c4c4c"
  }
};

interface CertificationsFormProps {
  certifications: Certification[];
  onAddCertification: () => void;
  onUpdateCertification: (index: number, certification: Partial<Certification>) => void;
  onRemoveCertification: (index: number) => void;
  onImportCertifications: (csvContent: string) => { success: boolean; count?: number; error?: string };
}

export const CertificationsForm: React.FC<CertificationsFormProps> = ({
  certifications,
  onAddCertification,
  onUpdateCertification,
  onRemoveCertification,
  onImportCertifications
}) => {
  return (
    <Box>
      <Heading size="md" mb={4} fontFamily="'Red Hat Display', sans-serif">Training and Certifications</Heading>
      
      {/* CSV Import Section */}
      <CertificationImport onImport={onImportCertifications} />
      <Box borderBottom="1px solid" borderColor={colors.gray.medium} my={4} />
      
      {/* Manual Entry Section */}
      <Stack gap={4} direction="column">
        {certifications.map((certification, index) => (
          <Box key={index} p={4} borderWidth="1px" borderRadius="md" borderColor={colors.gray.medium} bg="white">
            <Stack gap={3} direction="column">
              <PatternflyTextInput
                id={`certification-${index}-qualification`}
                label="Qualification"
                value={certification.qualification}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onUpdateCertification(index, { qualification: e.target.value })}
                name={`certification-${index}-qualification`}
                isRequired
                helperText="Certificate name or qualification title"
              />
              
              <PatternflyTextInput
                id={`certification-${index}-date`}
                label="Date"
                value={certification.date}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onUpdateCertification(index, { date: e.target.value })}
                name={`certification-${index}-date`}
                isRequired
                helperText="Date of completion (YYYY-MM-DD or YYYY-MM)"
              />
              
              <Box>
                <RedHatButton
                  variant="secondary"
                  size="sm"
                  onClick={() => onRemoveCertification(index)}
                >
                  Remove Certification
                </RedHatButton>
              </Box>
            </Stack>
          </Box>
        ))}
        <Box>
          <RedHatButton 
            variant="primary"
            onClick={onAddCertification}
          >
            Add Certification
          </RedHatButton>
        </Box>
      </Stack>
    </Box>
  );
};