import { Box, Button, Chip, Divider, Typography } from "@mui/material";
import { SPACING } from "../../../../data/spacing";
import { NavLink } from "../../../../components/nav-link/NavLink";
import { useLocation } from "react-router-dom";
import {
  Home,
  Business,
  House,
  LocalHospital,
  DirectionsCar,
  AccountBalance,
  Public,
} from "@mui/icons-material"; // Example icons
import { motion } from "framer-motion";
import useUserProfile from "../../hooks/useUserProfile";
import {
  DRIVER_USER_PROFILE,
  ROUTE_AVICULTURE_USER_PROFILE,
  ROUTE_CHAIN_COMPANY_USER_PROFILE,
  ROUTE_CITYVET_USER_PROFILE,
  ROUTE_CITY_USER_PROFILE,
  ROUTE_GENERAL_USER_PROFILE,
  ROUTE_STEWARD_USER_PROFILE,
  ROUTE_INSPECTOR_USER_PROFILE,
  ROUTE_LIVE_STOCK_USER_PROFILE,
  ROUTE_PROVINCE_FINANCIAL_USER_PROFILE,
  ROUTE_PROVINCE_USER_PROFILE,
  ROUTE_SLAUGHTER_HOUSE_VET_USER_PROFILE,
  ROUTE_SLAUGHTER_USER_PROFILE,
  ROUTE_VETFARM_USER_PROFILE,
} from "../../../../routes/routes";
import { Grid } from "../../../../components/grid/Grid";

const routesMap = {
  General: {
    path: ROUTE_GENERAL_USER_PROFILE,
    label: "کاربری",
    icon: <Home />,
  },
  CityOperator: {
    path: ROUTE_CITY_USER_PROFILE,
    label: "شهرستان",
    icon: <Business />,
  },
  Poultry: {
    path: ROUTE_AVICULTURE_USER_PROFILE,
    label: "مرغداری",
    icon: <House />,
  },
  ProvinceOperator: {
    path: ROUTE_PROVINCE_USER_PROFILE,
    label: "تخصیص استان",
    icon: <AccountBalance />,
  },
  KillHouse: {
    path: ROUTE_SLAUGHTER_USER_PROFILE,
    label: "کشتارگاه",
    icon: <LocalHospital />,
  },
  VetFarm: {
    path: ROUTE_VETFARM_USER_PROFILE,
    label: "دامپزشک فارم",
    icon: <LocalHospital />,
  },
  KillHouseVet: {
    path: ROUTE_SLAUGHTER_HOUSE_VET_USER_PROFILE,
    label: "دامپزشک کشتارگاه",
    icon: <LocalHospital />,
  },
  Driver: {
    path: DRIVER_USER_PROFILE,
    label: "راننده",
    icon: <DirectionsCar />,
  },
  ProvinceFinancial: {
    path: ROUTE_PROVINCE_FINANCIAL_USER_PROFILE,
    label: "مالی",
    icon: <AccountBalance />,
  },
  ProvinceInspector: {
    path: ROUTE_INSPECTOR_USER_PROFILE,
    label: "بازرس",
    icon: <Public />,
  },
  Guilds: {
    path: ROUTE_STEWARD_USER_PROFILE,
    label: "صنف",
    icon: <Business />,
  },
  CityVet: {
    path: ROUTE_CITYVET_USER_PROFILE,
    label: "دامپزشک شهرستان",
    icon: <LocalHospital />,
  },
  LiveStockSupport: {
    path: ROUTE_LIVE_STOCK_USER_PROFILE,
    label: "پشتیبانی امور دام",
    icon: <LocalHospital />,
  },
  ChainCompany: {
    path: ROUTE_CHAIN_COMPANY_USER_PROFILE,
    label: "شرکت زنجیره",
    icon: <Business />,
  },
};

export const GeneralDashboardOperations = () => {
  const { pathname } = useLocation();
  const [roles] = useUserProfile();

  return (
    <Box p={SPACING.SMALL} display="flex" flexDirection="column">
      <Grid
        container
        xs={12}
        justifyContent="center"
        alignItems="center"
        gap={1}
        direction={{ xs: "column", md: "row" }}
      >
        <Divider sx={{ width: "100%" }}>
          <Chip
            label={
              <Typography
                variant="h6"
                sx={{ fontSize: "18px", color: "darkcyan" }}
              >
                نقش ها
              </Typography>
            }
          />
        </Divider>

        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.2 }}
        >
          <NavLink
            to={ROUTE_GENERAL_USER_PROFILE}
            active={
              pathname === ROUTE_GENERAL_USER_PROFILE || pathname === "/"
                ? "true"
                : null
            }
            style={{ textDecoration: "none" }}
          >
            <Button
              variant="outlined"
              color="primary"
              fullWidth
              startIcon={<Home />}
              sx={{ borderRadius: 3, padding: "4px 8px" }}
            >
              حساب کاربری
            </Button>
          </NavLink>
        </motion.div>

        {roles.map((role, i) => {
          const route = routesMap[role];
          return route ? (
            <motion.div
              key={role + i}
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: i * 0.1 }}
            >
              <NavLink
                to={route.path}
                active={pathname === route.path ? "true" : null}
                style={{ textDecoration: "none" }}
              >
                <Button
                  variant="outlined"
                  fullWidth
                  size="small"
                  startIcon={route.icon}
                  sx={{ borderRadius: 3, padding: "4px 8px", color: "gray" }}
                >
                  {route.label}
                </Button>
              </NavLink>
            </motion.div>
          ) : null;
        })}
      </Grid>
    </Box>
  );
};
