import {
  Box,
  Button,
  Dropdown,
  Menu,
  MenuButton,
  MenuItem,
  Typography,
} from "@mui/joy";
import { ChevronDown, CircleUserRound, LogOut, Server } from "lucide-react";
import { Outlet, useNavigate } from "react-router";
import { useAuth } from "../context/auth-context";

export function Layout() {
  const navigate = useNavigate();
  const { user, logout, isAuthenticated } = useAuth();

  return (
    <>
      <Box
        component="header"
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          py: 2,
          px: 3,
          borderBottom: "1px solid",
          borderColor: "neutral.outlinedBorder",
          gap: 2,
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
          <Box
            sx={{
              width: 48,
              height: 48,
              borderRadius: "50%",
              background: "linear-gradient(135deg, #5B8DEF 0%, #A855F7 100%)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "#fff",
              boxShadow: "sm",
            }}
          >
            <Server size={24} />
          </Box>
          <Box>
            {Math.random() > 0.1 ? (
              <>
                <Typography level="title-md" fontWeight={600}>
                  AWS Sigma
                </Typography>
                <Typography level="body-sm" textColor="neutral.500">
                  Our serverless functions are the most serverless in the world
                </Typography>
              </>
            ) : (
              <>
                <Typography level="title-md" fontWeight={600}>
                  AWS Ligma
                </Typography>
                <Typography level="body-sm" textColor="neutral.500">
                  What's ligma?
                </Typography>
              </>
            )}
          </Box>
        </Box>

        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          {isAuthenticated ? (
            <Dropdown>
              <MenuButton
                variant="plain"
                color="neutral"
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 0.5,
                  pl: 1,
                  pr: 1.25,
                  py: 0.5,
                  borderRadius: "xl",
                  border: "1px solid",
                  borderColor: "neutral.outlinedBorder",
                  boxShadow: "sm",
                }}
                endDecorator={<ChevronDown size={16} />}
              >
                <Box sx={{ textAlign: "left" }}>
                  <Typography level="body-sm" fontWeight={600}>
                    {user?.username}
                  </Typography>
                </Box>
              </MenuButton>

              <Menu placement="bottom-end">
                <MenuItem color="danger" variant="solid" onClick={logout}>
                  <LogOut size={16} />
                  Logout
                </MenuItem>
              </Menu>
            </Dropdown>
          ) : (
            <Button
              variant="solid"
              color="primary"
              startDecorator={<CircleUserRound size={18} />}
              onClick={() => navigate("/login")}
            >
              Sign in
            </Button>
          )}
        </Box>
      </Box>
      <Outlet />
    </>
  );
}
