import React, { useEffect } from 'react';
import { LearnerHubProvider, useLearnerHub } from './LearnerHubContext';
import { ThemeProvider } from '../contexts/ThemeContext';
import { ErrorBoundary } from '../components/ErrorBoundary';
import { WizardHeader } from './components/WizardHeader';
import { LearnerHubSidebar } from './components/LearnerHubSidebar';
import { StepContent } from './components/StepContent';
import { WizardFooter } from './components/WizardFooter';
import { SidebarProvider } from '../components/ui/sidebar';

const LearnerHubWizardContent: React.FC = () => {
  const { triggerRefresh } = useLearnerHub();

  useEffect(() => {
    const handleFocus = () => {
      triggerRefresh();
      window.learnerHubAPI.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="Learner Hub Setup" />
      <SidebarProvider defaultOpen={true}>
        <div className="flex flex-1 min-h-0">
          <LearnerHubSidebar />
          <div className="flex flex-col flex-1 min-h-0">
            <StepContent />
            <WizardFooter />
          </div>
        </div>
      </SidebarProvider>
    </div>
  );
};

export const LearnerHubWizard: React.FC = () => {
  return (
    <ErrorBoundary>
      <ThemeProvider>
        <LearnerHubProvider>
          <LearnerHubWizardContent />
        </LearnerHubProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
};
