import { useState } from "react";
import { AppBar, Toolbar, IconButton, Box, Typography, Container } from "@mui/material";
import { motion } from "framer-motion";
import { Outlet } from "react-router-dom";
import MenuIcon from "@mui/icons-material/Menu";
import CloseIcon from "@mui/icons-material/Close";
import smallone from "../qsmall.png";
import big from "../QUDRAEDGELOGOTRANSPARENTBLACKfinal.png";

export default function Layout() {
    const [menuOpen, setMenuOpen] = useState(false);

    return (
        <Box sx={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
            
            {/* HEADER */}
            <AppBar position="static" sx={{ background: "transparent", boxShadow: "none", overflow: "hidden", paddingRight: '0px' }}>
                <Toolbar sx={{ position: "relative", height: "64px", display: "flex", justifyContent: "space-between", alignItems: "center", paddingRight: '0px' }}>
                    
                    {/* Expanding Menu Animation (Right to Left) */}
                    <motion.div
                        initial={{ width: "0%", right: 0 }}
                        animate={{ width: menuOpen ? "100%" : "0%" }}
                        transition={{ duration: 0.5 }}
                        style={{
                            position: "absolute",
                            top: 0,
                            right: 0,
                            height: "100%",
                            background: "black",
                            zIndex: -1,
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "flex-end",
                            overflow: "hidden",
                        }}
                    >
                        {/* Menu Items - Now Horizontal */}
                        {menuOpen && (
                            <motion.div
                                initial={{ opacity: 0, x: 20 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ delay: 0.2, duration: 0.5 }}
                                style={{ 
                                    display: "flex", 
                                    flexDirection: "row", 
                                    alignItems: "center", 
                                    gap: "40px", 
                                    color: "white",
                                    paddingRight: "90px"
                                }}
                            >
                                <Typography 
                                    
                                    variant="h6" 
                                    component="a" 
                                    href="#" 
                                    sx={{ 
                                        color:'white',
                                        cursor: "pointer", 
                                        "&:hover": { color: "#f5a623" },
                                        whiteSpace: "nowrap"
                                    }}
                                >
                                    Home
                                </Typography>
                                <Typography 
                                    variant="h6" 
                                    component="a" 
                                    href="#" 
                                    sx={{ 
                                        color:'white',
                                        cursor: "pointer", 
                                        "&:hover": { color: "#f5a623" },
                                        whiteSpace: "nowrap"
                                    }}
                                >
                                    About
                                </Typography>
                                <Typography 
                                    variant="h6" 
                                    component="a" 
                                    href="#" 
                                    sx={{ 
                                        color:'white',
                                        cursor: "pointer", 
                                        "&:hover": { color: "#f5a623" },
                                        whiteSpace: "nowrap"
                                    }}
                                >
                                    Services
                                </Typography>
                                <Typography 
                                    variant="h6" 
                                    component="a" 
                                    href="#" 
                                    sx={{ 
                                        color:'white',
                                        cursor: "pointer", 
                                        "&:hover": { color: "#f5a623" },
                                        whiteSpace: "nowrap"
                                    }}
                                >
                                    Contact
                                </Typography>
                            </motion.div>
                        )}
                    </motion.div>

                    {/* Left Side Logo Animation */}
                    <Box
                        sx={{ position: "relative", width: 50, height: 50, overflow: "hidden" }}
                        onMouseEnter={(e) => (e.currentTarget.style.width = "120px")}
                        onMouseLeave={(e) => (e.currentTarget.style.width = "40px")}
                    >
                        <img src={smallone} alt="Logo" width={50} height={50} />
                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ duration: 0.3 }}
                            style={{ position: "absolute", top: 0, left: 50 }}
                        >
                            <img src={big} alt="Full Logo" width={100} height={50} />
                        </motion.div>
                    </Box>

                    {/* Right Side Menu Button */}
                    <IconButton onClick={() => setMenuOpen(!menuOpen)}>
                        <motion.div animate={{ rotate: menuOpen ? 135 : 0 }} transition={{ duration: 0.5 }}>
                            {menuOpen ? <CloseIcon sx={{ color: "white" }} /> : <MenuIcon />}
                        </motion.div>
                    </IconButton>

                </Toolbar>
            </AppBar>

            {/* MAIN CONTENT */}
            <Box sx={{ flexGrow: 1 }}>
                <Outlet />
            </Box>

            {/* FOOTER */}
            <Box sx={{ backgroundColor: "black", color: "white", textAlign: "center", padding: "10px 0", marginTop: "auto" }}>
                <Container>
                    <Typography variant="body2">
                        © {new Date().getFullYear()} QudraEdge. All Rights Reserved.
                    </Typography>
                </Container>
            </Box>
        </Box>
    );
}