import {
    AccountCircle,
    Category,
    QueryStats,
    ReceiptLong,
} from "@mui/icons-material";
import {
    Box,
    List,
    ListItem,
    ListItemButton,
    ListItemIcon,
    ListItemText,
    useTheme
} from "@mui/material";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import AccountsInfo from "../helper/adminpanel/AccountsInfo";
import FSModelInfo from "../helper/adminpanel/FSModelInfo";
import ItemInfo from "../helper/adminpanel/ItemsInfo";
import OrdersInfo from "../helper/adminpanel/OrdersInfo";
import StatisticsInfo from "../helper/adminpanel/StatisticsInfo";

export default function AdminPanel() {
    const { t } = useTranslation();
    const theme = useTheme();
    const [infoStatus, setInfoStatus] = useState<string>("statistics");

    const handleInfoStatus = (path: string) => {
        setInfoStatus(path);
    };

    const renderContent = () => {
        switch (infoStatus) {
            case "statistics":
                return <StatisticsInfo />;
            case "orders":
                return <OrdersInfo />;
            case "accounts":
                return <AccountsInfo />;
            case "items":
                return <ItemInfo />;
            case "fsmodel":
                return <FSModelInfo />;
            default:
                return <StatisticsInfo />;
        }
    };

    const menuItems = [
        { key: "statistics", icon: <QueryStats />, label: t("statistics") },
        { key: "orders", icon: <ReceiptLong />, label: t("orders") },
        { key: "accounts", icon: <AccountCircle />, label: t("accounts") },
        { key: "items", icon: <Category />, label: t("items") },
        { key: "fsmodel", icon: <Category />, label: t("fsmodel") },
    ];

    return (
        <Box className="page-container" sx={{ color: theme.palette.text.primary }}>
            <div
                className="home-page-background"
                style={{
                    color: theme.palette.text.primary,
                    backgroundColor: theme.palette.background.paper
                }}
            >
                {/* Sidebar */}
                <Box
                    className="sidebar"
                >
                    <nav aria-label="main admin menu">
                        <List>
                            {menuItems.map((item) => (
                                <ListItem key={item.key} disablePadding>
                                    <ListItemButton
                                        selected={infoStatus === item.key}
                                        onClick={() => handleInfoStatus(item.key)}
                                        sx={{
                                            "&.Mui-selected": {
                                                bgcolor: theme.palette.action.selected,
                                                color: theme.palette.primary.main,
                                            },
                                            "&:hover": {
                                                bgcolor: theme.palette.action.hover,
                                            },
                                        }}
                                    >
                                        <ListItemIcon sx={{ color: "inherit" }}>{item.icon}</ListItemIcon>
                                        <ListItemText primary={item.label} />
                                    </ListItemButton>
                                </ListItem>
                            ))}
                        </List>
                    </nav>
                </Box>

                {/* Content */}
                <Box className="page-background">{renderContent()}</Box>
            </div>
        </Box>
    );
}
