import React, { useState } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Layout from './components/Layout';
import AnimatedRoutes from './components/AnimatedRoutes';
import { ToastProvider } from './context/ToastContext';
import ScrollToTop from './components/ScrollToTop';
import ContactModal from './components/ContactModal';
import GenericModal from './components/GenericModal';
import DigitalRain from './components/DigitalRain';
import BSOD from './components/BSOD';
import { AnimationProvider, useAnimation } from './context/AnimationContext';
import { CommandPaletteProvider } from './context/CommandPaletteContext';
import { VisualSettingsProvider } from './context/VisualSettingsContext';
import { AchievementProvider } from './context/AchievementContext';
import AchievementListeners from './components/AchievementListeners';
import { SidePanelProvider } from './context/SidePanelContext';
import { HomepageOrderProvider } from './context/HomepageOrderContext';
import { SiteConfigProvider } from './context/SiteConfigContext';
import { CloudMusicProvider } from './context/CloudMusicContext';
import { DndProvider } from './context/DndContext';
import TinyCloudPlayer from './app/apps/CloudMusicPlayer/components/TinyCloudPlayer';
import { MotionConfig } from 'framer-motion';

const MotionConfigWrapper = ({ children }) => {
  const { reduceMotion } = useAnimation();
  return (
    <MotionConfig reducedMotion={reduceMotion ? 'always' : 'never'}>
      {children}
    </MotionConfig>
  );
};

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isSearchVisible, setIsSearchVisible] = useState(false);
  const [isGenericModalOpen, setIsGenericModalOpen] = useState(false);
  const [genericModalContent, setGenericModalContent] = useState({
    title: '',
    content: null,
  });
  const [isRainActive, setIsRainActive] = useState(false); // State for Digital Rain
  const [isBSODActive, setIsBSODActive] = useState(false); // State for BSOD

  const toggleModal = () => {
    setIsModalOpen(!isModalOpen);
  };

  const openGenericModal = (title, content) => {
    setGenericModalContent({ title, content });
    setIsGenericModalOpen(true);
  };

  const closeGenericModal = () => {
    setIsGenericModalOpen(false);
  };

  const toggleSearch = () => {
    setIsSearchVisible(!isSearchVisible);
    window.scrollTo({ top: 0, behavior: 'smooth' }); // Scroll to top
  };
  const toggleDigitalRain = () => {
    setIsRainActive((prev) => !prev);
  };
  const toggleBSOD = () => {
    setIsBSODActive((prev) => !prev);
  };

  return (
    <AnimationProvider>
      <MotionConfigWrapper>
        <Router>
          <ToastProvider>
            <SiteConfigProvider>
              <CloudMusicProvider>
                <DndProvider>
                  <AchievementProvider>
                    <AchievementListeners />
                    <HomepageOrderProvider>
                      <VisualSettingsProvider>
                        <DigitalRain isActive={isRainActive} />
                        <BSOD isActive={isBSODActive} toggleBSOD={toggleBSOD} />
                        <ScrollToTop />
                        <TinyCloudPlayer />
                        <CommandPaletteProvider>
                          <SidePanelProvider>
                            <Layout
                              toggleModal={toggleModal}
                              isSearchVisible={isSearchVisible}
                              toggleSearch={toggleSearch}
                              openGenericModal={openGenericModal}
                              toggleDigitalRain={toggleDigitalRain}
                              toggleBSOD={toggleBSOD}
                            >
                              <AnimatedRoutes />
                            </Layout>
                          </SidePanelProvider>
                        </CommandPaletteProvider>
                        <ContactModal
                          isOpen={isModalOpen}
                          onClose={toggleModal}
                        />
                        <GenericModal
                          isOpen={isGenericModalOpen}
                          onClose={closeGenericModal}
                          title={genericModalContent.title}
                        >
                          {genericModalContent.content}
                        </GenericModal>
                      </VisualSettingsProvider>
                    </HomepageOrderProvider>
                  </AchievementProvider>
                </DndProvider>
              </CloudMusicProvider>
            </SiteConfigProvider>
          </ToastProvider>
        </Router>
      </MotionConfigWrapper>
    </AnimationProvider>
  );
}
export default App;