import { Box, Container, Stack } from '@chakra-ui/react';
import { GeneralInfoForm } from './components/GeneralInfoForm';
import { KeySkillsForm } from './components/KeySkillsForm';
import { ExperiencesForm } from './components/ExperiencesForm';
import { EducationForm } from './components/EducationForm';
import { CertificationsForm } from './components/CertificationsForm';
import { ContactInfoForm } from './components/ContactInfoForm';
import { CVPreview } from './components/CVPreview';
import { PDFGenerator } from './components/PDFGenerator';
import { useCV } from './hooks/useCV';
import React, { useState, useEffect, useRef } from 'react';
// @ts-ignore
import RedHatButton from './components/RedHatButton';
import RedHatTabs from './components/RedHatTabs';
import RedHatIcon from './components/RedHatIcon';
import './App.css';

// Import Red Hat Design System components
import '@rhds/elements/rh-tabs/rh-tabs.js';
import '@rhds/elements/rh-card/rh-card.js';
import '@rhds/elements/rh-cta/rh-cta.js';

// Red Hat brand colors
const colors = {
  red: "#ee0000",
  blue: "#0066cc",
  darkBlue: "#004080",
  gray: {
    light: "#f5f5f5",
    medium: "#d2d2d2",
    dark: "#4c4c4c"
  }
};

function App() {
  const [activeTab, setActiveTab] = useState(0);
  const tabsContainerRef = useRef<HTMLDivElement>(null);
  
  const {
    cv,
    isLoadingUserData,
    updateGeneralInfo,
    addKeySkill,
    updateKeySkill,
    removeKeySkill,
    addExperience,
    updateExperience,
    removeExperience,
    addEducation,
    updateEducation,
    removeEducation,
    addCertification,
    updateCertification,
    removeCertification,
    importCertificationsFromCSV,
    importUserDataFromRover,
    updateContactInfo,
    updateAdditionalInfo,
    resetCV
  } = useCV();

  const tabTitles = ['General Info', 'Key Skills', 'Experiences', 'Education', 'Certifications', 'Contact Info'];
  
  // Handle tab changes
  useEffect(() => {
    const tabsContainer = tabsContainerRef.current;
    if (!tabsContainer) return;
    
    const tabsElement = tabsContainer.querySelector('rh-tabs');
    if (!tabsElement) return;
    
    const handleTabChange = (e: Event) => {
      const customEvent = e as CustomEvent;
      if (customEvent.detail && typeof customEvent.detail.activeIndex === 'number') {
        setActiveTab(customEvent.detail.activeIndex);
      }
    };
    
    tabsElement.addEventListener('active-tab-changed', handleTabChange);
    
    return () => {
      tabsElement.removeEventListener('active-tab-changed', handleTabChange);
    };
  }, []);
  
  // Define tab content with icons
  const tabs = [
    {
      title: "Personal Info",
      icon: <RedHatIcon icon="user" />,
      content: (
        <GeneralInfoForm
          generalInfo={cv.generalInfo}
          onInfoChange={updateGeneralInfo}
          onImportUserData={importUserDataFromRover}
          isLoadingUserData={isLoadingUserData}
        />
      )
    },
    {
      title: "Key Skills",
      icon: <RedHatIcon icon="lightbulb" />,
      content: (
        <KeySkillsForm
          skills={cv.keySkills}
          onAddSkill={addKeySkill}
          onUpdateSkill={updateKeySkill}
          onRemoveSkill={removeKeySkill}
        />
      )
    },
    {
      title: "Experience",
      icon: <RedHatIcon icon="briefcase" />,
      content: (
        <ExperiencesForm
          experiences={cv.experiences}
          onAddExperience={addExperience}
          onUpdateExperience={updateExperience}
          onRemoveExperience={removeExperience}
        />
      )
    },
    {
      title: "Education",
      icon: <RedHatIcon icon="graduation-cap" />,
      content: (
        <EducationForm
          education={cv.education}
          onAddEducation={addEducation}
          onUpdateEducation={updateEducation}
          onRemoveEducation={removeEducation}
        />
      )
    },
    {
      title: "Certifications",
      icon: <RedHatIcon icon="certificate" />,
      content: (
        <CertificationsForm
          certifications={cv.certifications}
          onAddCertification={addCertification}
          onUpdateCertification={updateCertification}
          onRemoveCertification={removeCertification}
          onImportCertifications={importCertificationsFromCSV}
        />
      )
    },
    {
      title: "Contact",
      icon: <RedHatIcon icon="address-card" />,
      content: (
        <ContactInfoForm
          contactInfo={cv.contactInfo}
          additionalInfo={cv.additionalInfo}
          onContactInfoChange={updateContactInfo}
          onAdditionalInfoChange={updateAdditionalInfo}
        />
      )
    }
  ];

  const handleTabChange = (index: number) => {
    setActiveTab(index);
  };
  
  return (
    <Container maxW="container.xl" py={5} fontFamily="'Red Hat Text', sans-serif">
      <Stack gap={5} direction="column">
        <Box display="flex" width="100%" justifyContent="space-between" alignItems="center">
          <Box as="h1" fontSize="2xl" fontWeight="bold" fontFamily="'Red Hat Display', sans-serif" color={colors.gray.dark}>
            Red Hat Consulting CV Generator
          </Box>
          <RedHatButton variant="primary" onClick={resetCV}>
            Reset CV
          </RedHatButton>
        </Box>
        
        <Box display="flex" width="100%" gap={5}>
          <Box width="60%">
            <rh-card>
              <h2 slot="heading">CV Form</h2>
              <div ref={tabsContainerRef}>
                <RedHatTabs 
                  tabs={tabs}
                  activeIndex={activeTab} 
                  onTabChange={handleTabChange}
                />
              </div>
              <div slot="footer">
                <small style={{ fontFamily: "'Red Hat Text', sans-serif", color: '#4d4d4d' }}>
                  Fill out the form tabs above to generate your CV
                </small>
              </div>
            </rh-card>
          </Box>
          
          <Box width="40%">
            <Stack gap={4} direction="column">
              <rh-card>
                <h2 slot="heading">PDF Generator</h2>
                <PDFGenerator cv={cv} />
                <rh-cta slot="footer" variant="primary">
                  <a href="#" onClick={(e) => {
                    e.preventDefault();
                    window.generatePDF && window.generatePDF();
                  }}>
                    Generate PDF
                  </a>
                </rh-cta>
              </rh-card>
              
              <rh-card>
                <h2 slot="heading">CV Preview</h2>
                <div style={{ padding: '0.5rem' }}>
                  <CVPreview cv={cv} />
                </div>
              </rh-card>
            </Stack>
          </Box>
        </Box>
      </Stack>
    </Container>
  );
}

export default App;