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 './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);
    };
  }, []);
  
  // Render tab content
  const renderTabContent = (index: number) => {
    switch(index) {
      case 0:
        return (
          <GeneralInfoForm
            generalInfo={cv.generalInfo}
            onChange={updateGeneralInfo}
            onImportUserData={importUserDataFromRover}
            isLoadingUserData={isLoadingUserData}
          />
        );
      case 1:
        return (
          <KeySkillsForm
            skills={cv.keySkills}
            onAddSkill={addKeySkill}
            onUpdateSkill={updateKeySkill}
            onRemoveSkill={removeKeySkill}
          />
        );
      case 2:
        return (
          <ExperiencesForm
            experiences={cv.experiences}
            onAddExperience={addExperience}
            onUpdateExperience={updateExperience}
            onRemoveExperience={removeExperience}
          />
        );
      case 3:
        return (
          <EducationForm
            education={cv.education}
            onAddEducation={addEducation}
            onUpdateEducation={updateEducation}
            onRemoveEducation={removeEducation}
          />
        );
      case 4:
        return (
          <CertificationsForm
            certifications={cv.certifications}
            onAddCertification={addCertification}
            onUpdateCertification={updateCertification}
            onRemoveCertification={removeCertification}
            onImportCertifications={importCertificationsFromCSV}
          />
        );
      case 5:
        return (
          <ContactInfoForm
            contactInfo={cv.contactInfo}
            additionalInfo={cv.additionalInfo}
            onContactInfoChange={updateContactInfo}
            onAdditionalInfoChange={updateAdditionalInfo}
          />
        );
      default:
        return null;
    }
  };
  
  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}>
                <rh-tabs active-index={activeTab as unknown as number}>
                  {tabTitles.map((title, index) => (
                    <rh-tab key={index} slot="tab">{title}</rh-tab>
                  ))}
                  
                  {tabTitles.map((_, index) => (
                    <rh-tab-panel key={index}>
                      <div style={{ padding: '1rem' }}>
                        {renderTabContent(index)}
                      </div>
                    </rh-tab-panel>
                  ))}
                </rh-tabs>
              </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();
                    document.querySelector('button[data-generate-pdf]')?.click();
                  }}>
                    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;