'use client';

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { usePathname } from 'next/navigation';
import { useAuth } from '@/contexts/AuthContext';
import { useScroll } from '@/hooks/useScroll';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { cn } from '@/lib/utils';
import BottomNavbar from "../../components/BottomNavbar";
import MobileHeader from "../../components/MobileHeader";
import DesktopNavbar from "../../components/DesktopNavbar";


interface MainLayoutProps {
    children: React.ReactNode;
}

export default function MainLayout({ children }: MainLayoutProps) {
    const pathname = usePathname();
    const { scrolled, showScrollTop, scrollToTop } = useScroll();
    const { user, isLoading } = useAuth();
    const isMobile = useMediaQuery('(max-width: 768px)');
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

    // Prevent body scroll when mobile menu is open
    useEffect(() => {
        if (isMobileMenuOpen) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
        return () => {
            document.body.style.overflow = 'unset';
        };
    }, [isMobileMenuOpen]);

    // Loading skeleton
    if (isLoading) {
        return (
            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
                <div className="fixed top-0 left-0 right-0 z-50 h-16 bg-white/80 backdrop-blur-md animate-pulse" />
                <div className="pt-16">
                    <div className="max-w-7xl mx-auto px-4 py-8">
                        <div className="space-y-4">
                            <div className="h-12 bg-gray-200 rounded-xl animate-pulse" />
                            <div className="h-64 bg-gray-200 rounded-xl animate-pulse" />
                            <div className="h-32 bg-gray-200 rounded-xl animate-pulse" />
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
            {/* Desktop Navbar */}
            <DesktopNavbar
                scrolled={scrolled}
                user={user}
                pathname={pathname}
            />

            {/* Mobile Header */}
            <MobileHeader
                scrolled={scrolled}
                isMobileMenuOpen={isMobileMenuOpen}
                setIsMobileMenuOpen={setIsMobileMenuOpen}
                user={user}
                pathname={pathname}
            />

            {/* Main Content with Animation */}
            <motion.main
                key={pathname}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.3, ease: 'easeInOut' }}
                className={cn(
                    "pt-16 lg:pt-20",
                    isMobile && "pb-20" // Add padding for bottom navbar on mobile
                )}
            >
                {children}
            </motion.main>

            {/* Bottom Navigation (Mobile Only) */}
            {isMobile && (
                <BottomNavbar user={user} pathname={pathname} />
            )}

            {/* Scroll to Top Button */}
            <AnimatePresence>
                {showScrollTop && (
                    <motion.button
                        initial={{ opacity: 0, scale: 0.8, y: 20 }}
                        animate={{ opacity: 1, scale: 1, y: 0 }}
                        exit={{ opacity: 0, scale: 0.8, y: 20 }}
                        transition={{ duration: 0.2 }}
                        onClick={scrollToTop}
                        className="fixed bottom-24 md:bottom-8 right-4 z-50 group"
                        aria-label="Scroll to top"
                    >
                        <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-blue-600 rounded-full blur-xl opacity-75 group-hover:opacity-100 transition-opacity animate-pulse" />
                        <div className="relative w-12 h-12 md:w-14 md:h-14 bg-gradient-to-r from-green-500 to-blue-600 rounded-full shadow-2xl flex items-center justify-center text-white transform transition-all duration-300 group-hover:scale-110 group-hover:rotate-3 cursor-pointer">
                            <div className="absolute inset-0 rounded-full bg-gradient-to-r from-green-400 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity" />
                            <svg className="w-6 h-6 relative z-10 group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 10l7-7m0 0l7 7m-7-7v18" />
                            </svg>
                            <div className="absolute inset-0 rounded-full border-2 border-white/30 animate-spin-slow" />
                        </div>
                        <div className="absolute -left-16 top-1/2 transform -translate-y-1/2 bg-gray-900 text-white text-xs px-2 py-1 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">
                            Scroll to Top
                            <div className="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-gray-900 rotate-45" />
                        </div>
                    </motion.button>
                )}
            </AnimatePresence>

            {/* Custom Styles */}
            <style jsx global>{`
        @keyframes spin-slow {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
          animation: spin-slow 3s linear infinite;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        ::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
          background: linear-gradient(to bottom, #10b981, #3b82f6);
          border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: linear-gradient(to bottom, #059669, #2563eb);
        }
        
        /* Smooth scrolling */
        html {
          scroll-behavior: smooth;
        }
        
        /* Prevent body scroll when menu is open */
        body.menu-open {
          overflow: hidden;
        }
      `}</style>
        </div>
    );
}