import React, { useState } from "react";
import {
  AppBar,
  Toolbar,
  IconButton,
  Drawer,
  List,
  ListItemText,
  Button,
  useMediaQuery,
  useTheme,
  Box,
  Container,
  ListItemButton,
  Divider,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import { motion } from "framer-motion";
import HomeIcon from "@mui/icons-material/Home";
import BuildIcon from "@mui/icons-material/Build";
import WorkIcon from "@mui/icons-material/Work";
import InfoIcon from "@mui/icons-material/Info";
import ArticleIcon from "@mui/icons-material/Article";
import logo from "../QE Website design/Logo.png";

const navItems = [
  { label: "Home", icon: <HomeIcon />, href: "#" },
  { label: "Services", icon: <BuildIcon />, href: "#" },
  { label: "Portfolio", icon: <WorkIcon />, href: "#" },
  { label: "About Us", icon: <InfoIcon />, href: "#" },
  { label: "Blog", icon: <ArticleIcon />, href: "#" },
];

const Header = () => {
  const [mobileOpen, setMobileOpen] = useState(false);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));

  const toggleDrawer = () => setMobileOpen(!mobileOpen);

  const drawer = (
    <Box
      sx={{ width: 260, height: "100%", backgroundColor: "#000" }}
      onClick={toggleDrawer}
    >
      <ListItemButton
        component="a"
        href="#"
        sx={{ justifyContent: "center", my: 2 }}
      >
        <Box component="img" src={logo} alt="Logo" sx={{ height: 40 }} />
      </ListItemButton>
      <Divider sx={{ backgroundColor: "#444" }} />
      <Box>
        {navItems.map((item) => (
          <ListItemButton component="a" href={item.href} key={item.label}>
            <Box
              sx={{ display: "flex", alignItems: "center", color: "#00E0FF" }}
            >
              <Box sx={{ mr: 2 }}>{item.icon}</Box>
              <ListItemText primary={item.label} sx={{ color: "#fff" }} />
            </Box>
          </ListItemButton>
        ))}
      </Box>
      <Divider sx={{ backgroundColor: "#444", my: 2 }} />
      <Box px={2}>
        <Button
          variant="outlined"
          fullWidth
          sx={{
            borderColor: "#00E0FF",
            color: "#00E0FF",
            borderRadius: "24px",
            fontWeight: 600,
            textTransform: "none",
            "&:hover": {
              backgroundColor: "#00E0FF",
              color: "#000",
            },
          }}
        >
          Contact Us
        </Button>
      </Box>
    </Box>
  );

  return (
    <AppBar
      position="sticky"
      sx={{ backgroundColor: "#000", boxShadow: "none" }}
    >
      <Container maxWidth="lg">
        <Toolbar sx={{ justifyContent: "space-between", py: 1.5 }}>
          {isMobile ? (
            <>
              <IconButton edge="end" onClick={toggleDrawer}>
                <MenuIcon sx={{ color: "#fff" }} />
              </IconButton>
              <Drawer
                anchor="right"
                open={mobileOpen}
                onClose={toggleDrawer}
                sx={{ "& .MuiDrawer-paper": { backgroundColor: "#000" } }}
              >
                {drawer}
              </Drawer>
            </>
          ) : (
            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                width: "100%",
              }}
            >
              {/* Left - Logo */}
              <motion.div
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.6 }}
              >
                <Box
                  component="a"
                  href="#"
                  sx={{ display: "flex", alignItems: "center" }}
                >
                  <Box
                    component="img"
                    src={logo}
                    alt="Logo"
                    sx={{ height: 40, width: "auto", objectFit: "contain" }}
                  />
                </Box>
              </motion.div>

              {/* Center - Navigation */}
              <Box sx={{ display: "flex", gap: 4, alignItems: "center" }}>
                {navItems.map((item, index) => (
                  <motion.div
                    key={item.label}
                    initial={{ opacity: 0, y: -5 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.1 * index }}
                  >
                    <Box
                      component="a"
                      href={item.href}
                      sx={{
                        color: "#fff",
                        textDecoration: "none",
                        fontWeight: 500,
                        fontSize: "1rem",
                        "&:hover": {
                          color: "#00E0FF",
                        },
                      }}
                    >
                      {item.label}
                    </Box>
                  </motion.div>
                ))}
              </Box>

              {/* Right - Contact Us */}
              <motion.div
                initial={{ opacity: 0, x: 10 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.6 }}
              >
                <Button
                  variant="outlined"
                  sx={{
                    borderColor: "#00E0FF",
                    color: "#00E0FF",
                    borderRadius: "24px",
                    textTransform: "none",
                    fontWeight: 600,
                    px: 3,
                    py: 1,
                    "&:hover": {
                      backgroundColor: "#00E0FF",
                      color: "#000",
                      borderColor: "#00E0FF",
                    },
                  }}
                >
                  Contact Us
                </Button>
              </motion.div>
            </Box>
          )}
        </Toolbar>
      </Container>
    </AppBar>
  );
};

export default Header;
