import React, { useEffect } from 'react';
import { CareerWizardProvider, useCareerWizard } from './CareerWizardContext';
import { ThemeProvider } from '../contexts/ThemeContext';
import { ErrorBoundary } from '../components/ErrorBoundary';
import { WizardHeader } from './components/WizardHeader';
import { CareerWizardSidebar } from './components/CareerWizardSidebar';
import { StepContent } from './components/StepContent';
import { WizardFooter } from './components/WizardFooter';
import { SidebarProvider } from '../components/ui/sidebar';

const CareerWizardContent: React.FC = () => {
  const { triggerRefresh } = useCareerWizard();

  // Refresh current step status and update tray icon when window gains focus
  useEffect(() => {
    const handleFocus = () => {
      triggerRefresh();
      // Update tray icon to reflect current state
      window.careerWizardAPI.updateTrayIcon().catch(err => {
        console.error('Failed to update tray icon:', err);
      });
    };

    window.addEventListener('focus', handleFocus);
    return () => window.removeEventListener('focus', handleFocus);
  }, [triggerRefresh]);

  return (
    <div className="h-full flex flex-col bg-background overflow-hidden">
      <WizardHeader title="Career Setup" />
      <SidebarProvider defaultOpen={true}>
        <div className="flex flex-1 min-h-0">
          <CareerWizardSidebar />
          <div className="flex flex-col flex-1 min-h-0">
            <StepContent />
            <WizardFooter />
          </div>
        </div>
      </SidebarProvider>
    </div>
  );
};

export const CareerWizard: React.FC = () => {
  return (
    <ErrorBoundary>
      <ThemeProvider>
        <CareerWizardProvider>
          <CareerWizardContent />
        </CareerWizardProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
};
