import React from 'react';
import { Box, Stack, Heading } from '@chakra-ui/react';
import { Experience } from '../types/cv';
// Import Patternfly components
import PatternflyTextInput from './PatternflyTextInput';
import PatternflyTextarea from './PatternflyTextarea';
// @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 ExperiencesFormProps {
  experiences: Experience[];
  onAddExperience: () => void;
  onUpdateExperience: (index: number, experience: Partial<Experience>) => void;
  onRemoveExperience: (index: number) => void;
}

export const ExperiencesForm: React.FC<ExperiencesFormProps> = ({
  experiences,
  onAddExperience,
  onUpdateExperience,
  onRemoveExperience
}) => {
  return (
    <Box>
      <Heading size="md" mb={4} fontFamily="'Red Hat Display', sans-serif">Experiences</Heading>
      <Stack gap={4} direction="column">
        {experiences.map((experience, index) => (
          <Box key={index} p={4} borderWidth="1px" borderRadius="md" borderColor={colors.gray.medium} bg="white">
            <Stack gap={3} direction="column">
              <PatternflyTextInput
                id={`experience-${index}-industry`}
                label="Industry"
                value={experience.industry}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onUpdateExperience(index, { industry: e.target.value })}
                name={`experience-${index}-industry`}
                isRequired
              />
              
              <PatternflyTextInput
                id={`experience-${index}-date`}
                label="Date"
                value={experience.date}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onUpdateExperience(index, { date: e.target.value })}
                name={`experience-${index}-date`}
                isRequired
                helperText="Format: YYYY-MM to YYYY-MM or Present"
              />
              
              <PatternflyTextInput
                id={`experience-${index}-location`}
                label="Location"
                value={experience.location}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onUpdateExperience(index, { location: e.target.value })}
                name={`experience-${index}-location`}
                isRequired
              />
              
              <PatternflyTextarea
                id={`experience-${index}-description`}
                label="Description"
                value={experience.description}
                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onUpdateExperience(index, { description: e.target.value })}
                name={`experience-${index}-description`}
                rows={4}
                isRequired
                helperText="Describe your responsibilities and achievements"
              />
              
              <PatternflyTextInput
                id={`experience-${index}-technologies`}
                label="Technologies (optional)"
                value={experience.technologies || ''}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onUpdateExperience(index, { technologies: e.target.value })}
                name={`experience-${index}-technologies`}
                helperText="Comma-separated list of technologies used"
              />
              
              <Box>
                <RedHatButton
                  variant="secondary"
                  size="sm"
                  onClick={() => onRemoveExperience(index)}
                >
                  Remove Experience
                </RedHatButton>
              </Box>
            </Stack>
          </Box>
        ))}
        <Box>
          <RedHatButton 
            variant="primary"
            onClick={onAddExperience}
          >
            Add Experience
          </RedHatButton>
        </Box>
      </Stack>
    </Box>
  );
};