import React, { useEffect } from 'react';
import { SetupWizardProvider, useSetupWizard } from './SetupWizardContext';
import { ThemeProvider } from '../contexts/ThemeContext';
import { ErrorBoundary } from '../components/ErrorBoundary';
import { WizardHeader } from './components/WizardHeader';
import { SetupWizardSidebar } from './components/SetupWizardSidebar';
import { StepContent } from './components/StepContent';
import { WizardFooter } from './components/WizardFooter';
import { SidebarProvider } from '../components/ui/sidebar';

const SetupWizardContent: React.FC = () => {
  const { triggerRefresh } = useSetupWizard();

  // Refresh current step status and update tray icon when window gains focus
  useEffect(() => {
    const handleFocus = () => {
      triggerRefresh();
      // Update tray icon to reflect current state
      window.setupWizardAPI.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 />
      <SidebarProvider defaultOpen={true}>
        <div className="flex flex-1 min-h-0">
          <SetupWizardSidebar />
          <div className="flex flex-col flex-1 min-h-0">
            <StepContent />
            <WizardFooter />
          </div>
        </div>
      </SidebarProvider>
    </div>
  );
};

export const SetupWizard: React.FC = () => {
  return (
    <ErrorBoundary>
      <ThemeProvider>
        <SetupWizardProvider>
          <SetupWizardContent />
        </SetupWizardProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
};
