import { Outlet, useLocation } from 'react-router-dom';
import { motion } from 'framer-motion';
import Sidebar from './Sidebar';
import { MiniOscilloscope } from './MiniOscilloscope';

const MainLayout = () => {
  const location = useLocation();
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
  // Don't show mini oscilloscope on the oscilloscope page itself
  const showMiniOscilloscope = location.pathname !== '/oscilloscope';
  // Check if on game page and mobile
  const isMobileGamePage = isMobile && location.pathname.startsWith('/games/') && location.pathname !== '/games' && location.pathname !== '/games/leaderboard';

  return (
    <motion.div 
      initial={{ opacity: 0, scale: 0.95 }} 
      animate={{ opacity: 1, scale: 1 }} 
      transition={{ duration: 0.5 }} 
      className={`relative z-10 flex flex-col items-center ${isMobileGamePage ? 'pt-4' : 'pt-8 md:pt-12'} px-4 w-full ${isMobileGamePage ? 'pb-4' : 'pb-20'}`}
    >
      {!isMobileGamePage && (
        <>
          {/* Branding */}
          <motion.h1 
            initial={{ opacity: 0, y: -20 }} 
            animate={{ opacity: 1, y: 0 }} 
            transition={{ delay: 0.3, duration: 0.5 }} 
            className="font-minecraft text-4xl md:text-5xl lg:text-6xl text-primary text-glow-strong mb-6"
          >
            <span className="inline-block translate-y-[0.35em]">~</span>$ whoami Jory
          </motion.h1>
        </>
      )}

      {/* Main Container */}
      <div className={`w-full ${isMobileGamePage ? 'h-[calc(100vh-2rem)] max-w-[95vw]' : 'max-w-[90vw] xl:max-w-[1200px] 2xl:max-w-[1400px] min-h-[55vh] md:h-[70vh] max-h-[750px]'} flex flex-col md:flex-row border-2 border-primary bg-background/60 box-glow-strong rounded-lg overflow-hidden`}>
        {!isMobileGamePage && <Sidebar />}
        
        {/* Content Area */}
        <main className={`flex-1 p-6 md:p-8 ${isMobileGamePage ? 'p-2 md:p-4 overflow-hidden' : 'overflow-y-auto'} bg-background/40`}>
          <Outlet />
        </main>
      </div>

      {/* Mini Oscilloscope Bar */}
      {showMiniOscilloscope && !isMobileGamePage && <MiniOscilloscope />}
    </motion.div>
  );
};

export default MainLayout;