Web-Frontend/client/src/components/layout/Sidebar.jsx

import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
import { ColorModeButton } from "@/components/ui/color-mode.jsx";
import { useState } from "react";
import { NavLink } from "react-router-dom";
import Tooltip from "../ui/Tooltip.jsx";
import { Mountain, House, Earth, MapPin, ShieldUser, Menu } from 'lucide-react';

const SIDEBAR_DEFAULT_BUTTONS = [
  { icon: House, name: "Home", url: "/home" },
  { icon: Earth, name: "Global Map", url: "/global-map" },
  { icon: MapPin, name: "Regional Map", url: "/regional-map" },
  { icon: Mountain, name: "Volcano", url: "/volcano" },
  { icon: ShieldUser, name: "Admin", url: "/admin" } // TODO remove in the future as default should not have admin
];

export default function Sidebar() {
  const [isOpen, setIsOpen] = useState(true);
  const recipe = useSlotRecipe({ key: "sidebar" });
  const styles = recipe();

  // TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;

  const toggleSidebar = () => setIsOpen((prev) => !prev);

  return (
      <Box
          css={styles.root}
          width={isOpen ? "210px" : "71px"}
          transition="width 0.4s ease"
          position="relative"
          display="flex"
          flexDirection="column"
          gap={4} // Increased gap slightly to help with the squashed look
          pt={4} // Added top padding to give the logo room to breathe
      >
        {/* Home Link Logo */}
        <Button
            as={NavLink}
            to="/home"
            color="color"
            variant="plain"
            fontWeight="bold"
            height="auto" // Prevents the large text from squashing vertically
            overflow="hidden"
            px={0}
            justifyContent={isOpen ? "center" : "center"} // Center the 'V' when collapsed
            ml={isOpen ? 3 : 0} // Align with other buttons when open
            textStyle={isOpen ? "4xl" : "3xl"} // Scale down slightly when closed
        >
          {isOpen ? "🌋 VDAP" : "🌋"}
        </Button>

        {/* Menu Trigger */}
        <IconButton
            aria-label="Toggle Sidebar"
            variant="plain"
            size="md"
            onClick={toggleSidebar}
            width="54px"
            alignSelf={isOpen ? "flex-start" : "center"} // Center the icon when collapsed
            ml={isOpen ? 3 : 0} // Align with other buttons when open
        >
          <Menu />
        </IconButton>

        {/* Navigation Buttons */}
        {visibleButtons.map((button) => {
          const Icon = button.icon;
          return (
              <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
                <Button
                    as={NavLink}
                    to={button.url}
                    css={styles.buttons}
                    justifyContent="flex-start"
                    width="100%"
                    overflow="hidden" // Prevents text popout on collapse
                >
                  <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}

                  {/* Cleaned conditional transition styling */}
                  <Box
                      as="span"
                      ml={isOpen ? 3 : 0}
                      opacity={isOpen ? 1 : 0}
                      visibility={isOpen ? "visible" : "hidden"} // Prevents phantom width calculations and overflow into canvas
                      transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
                      whiteSpace="nowrap"
                  >
                    {button.name}
                  </Box>
                </Button>
              </Tooltip>
          );
        })}

        {/* Theme Toggler */}
        <ColorModeButton
            position="absolute"
            bottom="4"
            left={isOpen ? "4" : "50%"} // Center the toggle when collapsed
            transform={isOpen ? "none" : "translateX(-50%)"} // Exact centering logic
        />
      </Box>
  );
}