import {HStack, Flex, Box, useRecipe, useSlotRecipe} from "@chakra-ui/react";
import {NavLink, Outlet, useLocation} from "react-router-dom";
import {SearchBar} from "../../components/dashboard/SearchBar.jsx";
import {SettingsButton} from "../../components/dashboard/SettingsButton.jsx";

// 1. Import your icons (Swap these for whichever you prefer!)
import {LayoutDashboard, CalendarDays, Cloud, Satellite, Activity} from "lucide-react";

// 2. Define the tabs array
const HOME_TABS = [
  {name: "My Dashboard", url: "/home", icon: LayoutDashboard, exact: true},
  {name: "Daily Activity", url: "/home/daily", icon: CalendarDays},
  {name: "Gas", url: "/home/gas", icon: Cloud},
  {name: "Remote Sensing", url: "/home/remote", icon: Satellite},
  {name: "Seismic", url: "/home/seismic", icon: Activity},
];

export default function Home() {
  const glassTabsRecipe = useRecipe({key: "glassTab"});
  const homeRecipe = useSlotRecipe({key: "home"});
  const glassTabsStyle = glassTabsRecipe();
  const homeStyle = homeRecipe();

  const location= useLocation();
  const isPersonalDashboard= location.pathname === "/home" || location.pathname === "/home/";

  return (
    <Flex css={homeStyle.root}>
      <Flex as="header" css={homeStyle.header}>
        {/* TABS CONTAINER */}
        <Flex>
          {HOME_TABS.map((tab) => {
            const Icon = tab.icon;
            return (
              <Box key={tab.name} as={NavLink} to={tab.url} end={tab.exact} css={glassTabsStyle}> {/* CRITICAL: 'end' prop forces exact match so "/home" deactivates on sub-routes*/}
                {/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
                <Icon size={24} style={{flexShrink: 0}}/>
                <Box as="span">{tab.name}</Box>
              </Box>
            );
          })}

          {/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
          {isPersonalDashboard && <SettingsButton/>}
        </Flex>

        {/* EDIT MODE BUTTONS & CONTROLS */}
        {/* Leaving this HStack here in case you plan to put the SearchBar or other global tools back on the right side */}
        <HStack width="258px" justifyContent="flex-end">
          {/* Future global controls go here */}
        </HStack>
      </Flex>

      {/* TABS CONTENT */}
      <Flex css={homeStyle.body}>
        <Outlet/>
      </Flex>

    </Flex>
  );
}