import { useState } from "react";

import {
    Box,
    List,
    ListItem,
    ListItemButton,
    ListItemIcon,
    ListItemText,
    Typography,
    Button,
    Collapse,
    Divider,
} from "@mui/material";

import HomeIcon from "@mui/icons-material/Home";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import AccountTreeIcon from "@mui/icons-material/AccountTree";
import SummarizeIcon from "@mui/icons-material/Summarize";
import ReviewsIcon from "@mui/icons-material/Reviews";
import InsightsIcon from "@mui/icons-material/Insights";
import TaskAltIcon from "@mui/icons-material/TaskAlt";
import AddIcon from "@mui/icons-material/Add";

import { useColorStore } from "@/Store/useColorStore";
import { usePage, Link } from "@inertiajs/react";
import ModalCreate from "@/Pages/Project/partial/ModalCreate";

export default function Sidebar() {
    const [openModal, setOpenModal] = useState(false);

    const { projects = [], auth } = usePage().props;

    const { main, secondary, grayLight, secondLight, secondaryShadow, gray } =
        useColorStore();

    const [openUserMenu, setOpenUserMenu] = useState(() => {
        return route().current("users.*") || route().current("guests.*");
    });

    const handleUserMenuToggle = () => {
        setOpenUserMenu(!openUserMenu);
    };

    const menu = [
        {
            name: "Dashboard",
            icon: <HomeIcon sx={{ fontSize: "20px" }} />,
            routeName: "dashboard.*",
            href: route("dashboard.index"),
        },
        {
            name: "My Task",
            icon: <TaskAltIcon sx={{ fontSize: "20px" }} />,
            routeName: "task.*",
            href: route("task.index"),
        },
        {
            name: "Report",
            icon: <SummarizeIcon sx={{ fontSize: "20px" }} />,
            routeName: "report.*",
            href: route("report.index"),
        },
        {
            name: "Chat",
            icon: <ReviewsIcon sx={{ fontSize: "20px" }} />,
            routeName: "chat.*",
            href: route("chat.index"),
        },
    ];

    return (
        <Box
            sx={{
                width: "300px",
                minWidth: "300px",
                flexShrink: 0,
                bgcolor: secondLight,
                minHeight: "100vh",
                px: 2,
            }}
            role="presentation"
        >
            <List sx={{ px: 1.5, pt: 2 }}>
                <ListItem disablePadding>
                    <ListItemButton
                        component={Link}
                        href={route("dashboard.index")}
                        sx={{ display: "flex", gap: 1, px: 0 }}
                    >
                        <ListItemIcon
                            sx={{
                                minWidth: "20px",
                                bgcolor: main,
                                display: "flex",
                                justifyContent: "center",
                                p: "4px",
                                borderRadius: "5px",
                            }}
                        >
                            <InsightsIcon
                                sx={{ color: "white", fontSize: "20px" }}
                            />
                        </ListItemIcon>
                        <ListItemText
                            sx={{
                                "& .MuiTypography-root": {
                                    fontSize: "18px",
                                    fontWeight: 600,
                                },
                            }}
                        >
                            AI Assistant
                        </ListItemText>
                    </ListItemButton>
                </ListItem>
            </List>

            <Divider
                textAlign="left"
                sx={{
                    fontSize: "12px",
                    color: "gray",
                    borderStyle: "dotted",
                    my: 1,
                }}
            >
                Menu
            </Divider>

            <List sx={{ px: 1 }}>
                {menu.map((item, index) => {
                    if (item.children) {
                        const isParentActive = Array.isArray(item.routeName)
                            ? item.routeName.some((r) => route().current(r))
                            : route().current(item.routeName);

                        return (
                            <div key={index}>
                                <ListItem disablePadding>
                                    <ListItemButton
                                        onClick={handleUserMenuToggle}
                                        sx={{
                                            borderRadius: "8px",
                                            mb: 0.5,
                                            bgcolor: isParentActive
                                                ? secondary
                                                : "transparent",
                                            "&:hover": {
                                                bgcolor: isParentActive
                                                    ? secondary
                                                    : "#f5f5f5",
                                            },
                                        }}
                                    >
                                        <ListItemIcon
                                            sx={{
                                                color: isParentActive
                                                    ? "white"
                                                    : "inherit",
                                            }}
                                        >
                                            {item.icon}
                                        </ListItemIcon>
                                        <ListItemText
                                            primary={item.name}
                                            sx={{
                                                "& .MuiTypography-root": {
                                                    fontSize: 13,
                                                    fontWeight: 600,
                                                    color: isParentActive
                                                        ? "white"
                                                        : "gray",
                                                },
                                            }}
                                        />
                                        {openUserMenu ? (
                                            <ExpandLess
                                                sx={{
                                                    color: isParentActive
                                                        ? "white"
                                                        : "gray",
                                                }}
                                            />
                                        ) : (
                                            <ExpandMore
                                                sx={{
                                                    color: isParentActive
                                                        ? "white"
                                                        : "gray",
                                                }}
                                            />
                                        )}
                                    </ListItemButton>
                                </ListItem>

                                <Collapse
                                    in={openUserMenu}
                                    timeout="auto"
                                    unmountOnExit
                                >
                                    <List
                                        component="div"
                                        disablePadding
                                        sx={{ pl: 2 }}
                                    >
                                        {item.children.map(
                                            (subItem, subIndex) => {
                                                const isSubActive =
                                                    route().current(
                                                        subItem.routeName,
                                                    );

                                                return (
                                                    <ListItem
                                                        key={subIndex}
                                                        disablePadding
                                                    >
                                                        <ListItemButton
                                                            component={Link}
                                                            href={subItem.href}
                                                            sx={{
                                                                borderRadius:
                                                                    "8px",
                                                                mb: 0.5,
                                                                bgcolor:
                                                                    isSubActive
                                                                        ? secondary
                                                                        : "transparent",
                                                                "&:hover": {
                                                                    bgcolor:
                                                                        isSubActive
                                                                            ? secondary
                                                                            : "#f5f5f5",
                                                                },
                                                            }}
                                                        >
                                                            <ListItemIcon>
                                                                <ChevronRightIcon
                                                                    sx={{
                                                                        color: isSubActive
                                                                            ? "white"
                                                                            : "gray",
                                                                    }}
                                                                />
                                                            </ListItemIcon>
                                                            <ListItemText
                                                                primary={
                                                                    subItem.name
                                                                }
                                                                sx={{
                                                                    "& .MuiTypography-root":
                                                                        {
                                                                            fontSize: 12,
                                                                            fontWeight: 500,
                                                                            color: isSubActive
                                                                                ? "white"
                                                                                : gray,
                                                                        },
                                                                }}
                                                            />
                                                        </ListItemButton>
                                                    </ListItem>
                                                );
                                            },
                                        )}
                                    </List>
                                </Collapse>
                            </div>
                        );
                    }

                    const isActive = route().current(item.routeName);

                    return (
                        <ListItem key={index} disablePadding>
                            <ListItemButton
                                component={Link}
                                href={item.href}
                                sx={{
                                    borderRadius: "8px",
                                    mb: 0.5,
                                    bgcolor: isActive
                                        ? secondaryShadow
                                        : "transparent",
                                    "&:hover": {
                                        bgcolor: isActive
                                            ? grayLight
                                            : "#f5f5f5",
                                    },
                                }}
                            >
                                <ListItemIcon
                                    sx={{
                                        color: isActive ? secondary : gray,
                                        minWidth: "30px",
                                    }}
                                >
                                    {item.icon}
                                </ListItemIcon>
                                <ListItemText
                                    primary={item.name}
                                    sx={{
                                        "& .MuiTypography-root": {
                                            fontSize: 13,
                                            fontWeight: isActive ? 600 : 400,
                                            color: isActive ? "black" : gray,
                                        },
                                    }}
                                />
                            </ListItemButton>
                        </ListItem>
                    );
                })}
            </List>

            <Divider
                sx={{
                    fontSize: "12px",
                    color: "gray",
                    borderStyle: "dotted",
                    my: 1,
                }}
            />

            <List sx={{ px: 1 }}>
                <ListItem
                    sx={{
                        display: "flex",
                        justifyContent: "space-between",
                        px: 0,
                    }}
                >
                    <Typography
                        sx={{
                            fontSize: "12px",
                            color: gray,
                            textDecoration: "none",
                            fontWeight: 600,
                        }}
                        component={Link}
                        href={route("project.index")}
                    >
                        PROJECTS
                    </Typography>
                    <Button
                        sx={{
                            p: "0px",
                            width: "fit-content",
                            display: "flex",
                            minWidth: "22px",
                            height: "22px",
                            bgcolor: secondaryShadow,
                            borderRadius: "50%",
                            color: secondary,
                            "&:hover": {
                                bgcolor: secondary,
                                color: "white",
                            },
                        }}
                        onClick={() => setOpenModal(true)}
                    >
                        <AddIcon sx={{ fontSize: "16px" }} />
                    </Button>
                </ListItem>

                {projects.length > 0 ? (
                    projects.map((item) => {
                        const isActive = route().current(
                            "project.view",
                            item.id,
                        );

                        return (
                            <ListItem disablePadding key={item.id}>
                                <ListItemButton
                                    component={Link}
                                    href={route("project.view", [item.id])}
                                    sx={{
                                        p: 0.5,
                                        borderRadius: "6px",
                                        display: "flex",
                                        gap: 1,
                                        alignItems: "center",
                                        mb: 0.5,
                                        "&:hover": {
                                            bgcolor: secondaryShadow,
                                        },

                                        bgcolor: isActive && secondaryShadow,
                                    }}
                                >
                                    <AccountTreeIcon
                                        sx={{
                                            fontSize: "18px",
                                            color: "black",
                                            bgcolor: item.project_color,
                                            p: "2px",
                                            borderRadius: "3px",
                                        }}
                                    />
                                    <Typography
                                        sx={{
                                            fontSize: "12px",
                                            color: isActive ? "black" : gray,
                                            whiteSpace: "nowrap",
                                            overflow: "hidden",
                                            textOverflow: "ellipsis",
                                            fontWeight: isActive ? 500 : 300,
                                        }}
                                    >
                                        {item.title}
                                    </Typography>
                                </ListItemButton>
                            </ListItem>
                        );
                    })
                ) : (
                    <Typography
                        sx={{
                            fontSize: "11px",
                            color: "gray",
                            px: 1,
                            mt: 0.5,
                            fontStyle: "italic",
                        }}
                    >
                        No Project..
                    </Typography>
                )}
            </List>

            <ModalCreate open={openModal} setOpen={setOpenModal} />
        </Box>
    );
}