import { ReactNode, useEffect } from 'react';
import { AnimatePresence } from 'framer-motion';
import { useLocation } from 'react-router-dom';
import { Header } from './Header';
import { Sidebar } from './Sidebar';
import { MobileBottomNav } from './MobileBottomNav';
import { PageTransition } from './PageTransition';
import { useUIStore } from '@/stores/ui';
import { cn } from '@/lib/utils';
import { AstralBackground } from '../ui/AstralBackground';
import { NavigationProgress } from '../ui/NavigationProgress';
import { ScrollToTop } from '../ui/ScrollToTop';

interface LayoutProps {
  children: ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const { sidebarOpen } = useUIStore();
  const { pathname } = useLocation();

  // Scroll to top on route change
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return (
    <div className="min-h-screen bg-background text-foreground relative overflow-x-hidden">
      <NavigationProgress />
      <AstralBackground />

      <Header />

      <div className="flex relative z-10 transition-all duration-[var(--sumi-duration-slow)]">
        <Sidebar />

        <main
          id="main-content"
          className={cn(
            'flex-1 min-h-layout-main transition-all duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-in-out)] pb-20 lg:pb-0',
            sidebarOpen ? 'lg:ml-main-expanded' : 'lg:ml-main-collapsed max-lg:ml-0',
          )}
        >
          <div className="max-w-layout-content mx-auto p-4 sm:p-6 lg:p-8">
            <AnimatePresence mode="wait">
              <PageTransition>
                {children}
              </PageTransition>
            </AnimatePresence>
          </div>
        </main>
      </div>

      <MobileBottomNav />
      <ScrollToTop />
    </div>
  );
}