import React from "react";
import {
  AppBar,
  Box,
  Button,
  Container,
  IconButton,
  Menu,
  MenuItem,
  Toolbar,
  Typography,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import InstagramIcon from "@mui/icons-material/Instagram";
import WhatsAppIcon from "@mui/icons-material/WhatsApp";
import PinterestIcon from "@mui/icons-material/Pinterest";
import StorefrontIcon from "@mui/icons-material/Storefront";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
import { keyframes } from "@emotion/react";
import { styled } from "@mui/system";
import { Link as RouterLink, useLocation } from "react-router-dom";
import logo from "../../assets/logobgremove.png";

const colors = {
  ivory: "#fffaf5",
  blush: "#f4ddd4",
  peach: "#efb7a2",
  coral: "#d9826f",
  berry: "#7f4b5d",
  plum: "#4f2f42",
  gold: "#c99652",
};

const shimmer = keyframes`
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
`;

const GlassBar = styled(AppBar)({
  background:
    "linear-gradient(120deg, rgba(255,250,245,0.94), rgba(244,221,212,0.88), rgba(248,241,234,0.94))",
  backdropFilter: "blur(18px)",
  borderBottom: `1px solid ${colors.peach}66`,
  boxShadow: "0 18px 40px rgba(79, 47, 66, 0.1)",
  color: colors.plum,
});

const bounce = keyframes`
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
`;

const SocialDock = styled(Box)({
  display: "flex",
  alignItems: "center",
  gap: "10px",
  padding: "8px 12px",
  borderRadius: "999px",
  background: "rgba(255,255,255,0.35)",
  border: `1px solid ${colors.peach}66`,
  boxShadow: "0 12px 28px rgba(79, 47, 66, 0.08)",
});

const DesktopNav = styled(Box)({
  display: "flex",
  alignItems: "center",
  gap: "26px",
  padding: "0 10px",
});

const navItems = [
  { label: "Home", to: "/" },
  { label: "Shop", to: "/home" },
  { label: "Journal", to: "/journal" },
  { label: "Coming Soon", to: "/coming-soon" },
];

const socialLinks = [
  { label: "Instagram", href: "https://instagram.com/thekalawati", icon: InstagramIcon },
  { label: "WhatsApp", href: "https://wa.me/1234567890", icon: WhatsAppIcon },
  { label: "Pinterest", href: "https://pinterest.com/thekalawati", icon: PinterestIcon },
  { label: "Etsy", href: "https://etsy.com/shop/thekalawati", icon: StorefrontIcon },
  { label: "LinkedIn", href: "https://linkedin.com/company/thekalawati", icon: LinkedInIcon },
];

const isActivePath = (pathname: string, href: string) => {
  if (href === "/") {
    return pathname === "/";
  }

  return pathname === href || pathname.startsWith(`${href}/`);
};

const WebsiteHeader: React.FC = () => {
  const location = useLocation();
  const [menuAnchor, setMenuAnchor] = React.useState<null | HTMLElement>(null);

  const closeMenu = () => setMenuAnchor(null);

  return (
    <>
      <GlassBar position="sticky" elevation={0}>
        <Container maxWidth="xl">
          <Toolbar disableGutters sx={{ minHeight: 84, gap: 2, justifyContent: "space-between" }}>
            <Box
              component={RouterLink}
              to="/"
              sx={{
                display: "flex",
                alignItems: "center",
                gap: "12px",
                color: colors.plum,
                textDecoration: "none",
              }}
            >
              <Box
                component="img"
                src={logo}
                alt="The Kalawati"
                sx={{ width: 50, height: 50, objectFit: "contain" }}
              />
              <Box sx={{ display: "flex", flexDirection: "column" }}>
                <Typography
                  sx={{
                    fontFamily: '"Playfair Display", serif',
                    fontSize: { xs: "1rem", md: "1.12rem" },
                    letterSpacing: "0.1em",
                  }}
                >
                  THE KALAWATI
                </Typography>
                <Typography
                  sx={{
                    fontSize: "0.72rem",
                    letterSpacing: "0.16em",
                    textTransform: "uppercase",
                    color: colors.berry,
                  }}
                >
                  Storytelling Store
                </Typography>
              </Box>
            </Box>

            <DesktopNav sx={{ display: { xs: "none", md: "flex" } }}>
              {navItems.map((item) => (
                <Button
                  key={item.to}
                  component={RouterLink}
                  to={item.to}
                  sx={{
                    position: "relative",
                    minWidth: "auto",
                    padding: "8px 0",
                    textTransform: "none",
                    borderRadius: 0,
                    fontWeight: isActivePath(location.pathname, item.to) ? 700 : 500,
                    fontSize: "0.98rem",
                    letterSpacing: "0.04em",
                    color: isActivePath(location.pathname, item.to) ? colors.plum : colors.berry,
                    "&:hover": {
                      background: "transparent",
                      color: colors.plum,
                    },
                    "&::after": {
                      content: '""',
                      position: "absolute",
                      left: 0,
                      bottom: 0,
                      width: isActivePath(location.pathname, item.to) ? "100%" : "0%",
                      height: "1.5px",
                      background: `linear-gradient(90deg, ${colors.coral}, ${colors.plum})`,
                      transition: "width 0.3s ease",
                    },
                    "&:hover::after": {
                      width: "100%",
                    },
                  }}
                >
                  {item.label}
                </Button>
              ))}
            </DesktopNav>

            <SocialDock sx={{ display: { xs: "none", md: "flex" } }}>
              {socialLinks.map((item, index) => {
                const Icon = item.icon;

                return (
                  <IconButton
                    key={item.label}
                    href={item.href}
                    target="_blank"
                    rel="noreferrer"
                    aria-label={item.label}
                    sx={{
                      width: 40,
                      height: 40,
                      color: colors.plum,
                      background: `linear-gradient(135deg, ${colors.blush}, ${colors.ivory})`,
                      border: `1px solid ${colors.peach}88`,
                      boxShadow: "0 8px 18px rgba(79, 47, 66, 0.08)",
                      animation: `${bounce} 2.4s infinite`,
                      animationDelay: `${index * 0.12}s`,
                      transition: "transform 0.25s ease, background 0.25s ease, color 0.25s ease",
                      "&:hover": {
                        background: `linear-gradient(135deg, ${colors.coral}, ${colors.berry})`,
                        color: colors.ivory,
                        transform: "translateY(-2px)",
                      },
                    }}
                  >
                    <Icon fontSize="small" />
                  </IconButton>
                );
              })}
            </SocialDock>

            <IconButton
              onClick={(event) => setMenuAnchor(event.currentTarget)}
              sx={{
                display: { xs: "inline-flex", md: "none" },
                color: colors.plum,
                border: `1px solid ${colors.peach}88`,
                background: "rgba(255,255,255,0.55)",
              }}
            >
              <MenuIcon />
            </IconButton>
          </Toolbar>
        </Container>
      </GlassBar>

      <Menu
        anchorEl={menuAnchor}
        open={Boolean(menuAnchor)}
        onClose={closeMenu}
        PaperProps={{
          sx: {
            mt: 1,
            minWidth: 210,
            borderRadius: "18px",
            background: "rgba(255,250,245,0.96)",
            backdropFilter: "blur(16px)",
            border: `1px solid ${colors.peach}66`,
            boxShadow: "0 18px 36px rgba(79, 47, 66, 0.12)",
          },
        }}
      >
        {navItems.map((item) => (
          <MenuItem
            key={item.to}
            component={RouterLink}
            to={item.to}
            onClick={closeMenu}
            selected={isActivePath(location.pathname, item.to)}
            sx={{
              color: colors.plum,
              py: 1.2,
              "&.Mui-selected": {
                background: `${colors.blush}`,
              },
            }}
          >
            {item.label}
          </MenuItem>
        ))}
      </Menu>
    </>
  );
};

export default WebsiteHeader;
