import React, { useState, useContext, useEffect } from 'react';
import { AuthProvider, AuthContext } from './context/AuthContext';
import Sidebar from './components/Sidebar';
import AiStewardView from './views/AiStewardView';
import PestLibraryView from './views/PestLibraryView';
import SeasonalGuideView from './views/SeasonalGuideView';
import ToolGuideView from './views/ToolGuideView';
import BonsaiDiaryView from './views/BonsaiDiaryView';
import HealthCheckView from './views/HealthCheckView';
import SpeciesIdentifierView from './views/SpeciesIdentifierView';
import DesignStudioView from './views/DesignStudioView';
import WiringGuideView from './views/WiringGuideView';
import SoilAnalyzerView from './views/SoilAnalyzerView';
import NebariDeveloperView from './views/NebariDeveloperView';
import PotCalculatorView from './views/PotCalculatorView';
import SunTrackerView from './views/SunTrackerView';
import FertilizerMixerView from './views/FertilizerMixerView';
import SoilVolumeCalculatorView from './views/SoilVolumeCalculatorView';
import WeatherShieldView from './views/WeatherShieldView';
import SettingsView from './views/SettingsView';
import LoginView from './views/LoginView';
import { View } from './types';
import Spinner from './components/Spinner';

const AppContent: React.FC = () => {
  const { user, isLoading } = useContext(AuthContext);
  const [activeView, setActiveView] = useState<View>('garden');
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);

  useEffect(() => {
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js').then(registration => {
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(error => {
          console.log('ServiceWorker registration failed: ', error);
        });
      });
    }
  }, []);
  
  const renderView = () => {
    switch (activeView) {
      case 'steward': return <AiStewardView setActiveView={setActiveView} />;
      case 'pests': return <PestLibraryView setActiveView={setActiveView} />;
      case 'seasons': return <SeasonalGuideView setActiveView={setActiveView} />;
      case 'tools': return <ToolGuideView />;
      case 'garden': return <BonsaiDiaryView setActiveView={setActiveView} />;
      case 'healthCheck': return <HealthCheckView setActiveView={setActiveView} />;
      case 'speciesIdentifier': return <SpeciesIdentifierView setActiveView={setActiveView} />;
      case 'designStudio': return <DesignStudioView setActiveView={setActiveView} />;
      case 'wiringGuide': return <WiringGuideView setActiveView={setActiveView} />;
      case 'soilAnalyzer': return <SoilAnalyzerView setActiveView={setActiveView} />;
      case 'nebariDeveloper': return <NebariDeveloperView setActiveView={setActiveView} />;
      case 'potCalculator': return <PotCalculatorView />;
      case 'sunTracker': return <SunTrackerView />;
      case 'fertilizerMixer': return <FertilizerMixerView />;
      case 'soilVolumeCalculator': return <SoilVolumeCalculatorView />;
      case 'weatherShield': return <WeatherShieldView />;
      case 'settings': return <SettingsView />;
      default: return <BonsaiDiaryView setActiveView={setActiveView} />;
    }
  };

  if (isLoading) {
    return <div className="flex items-center justify-center h-screen bg-stone-100"><Spinner text="Loading Yuki..." /></div>;
  }
  
  if (!user) {
    return <LoginView />;
  }

  return (
    <div className="flex h-screen bg-stone-100">
      <Sidebar
        activeView={activeView}
        setActiveView={setActiveView}
        isCollapsed={isSidebarCollapsed}
        setIsCollapsed={setIsSidebarCollapsed}
      />
      <main className="flex-1 p-8 overflow-y-auto">
        {renderView()}
      </main>
    </div>
  );
};

const AppWrapper = () => (
  <AuthProvider>
    <AppContent />
  </AuthProvider>
);

export default AppWrapper;