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

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 />;
            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") },
    ];

    return (
        <Box className="page-container" sx={{ color: theme.palette.text.primary }}>
            <Box>
                <Typography variant="h3" align="center" gutterBottom>
                    Admin Panel
                </Typography>
                <Typography variant="subtitle1" align="center">
                    Manage your application settings and content here.
                </Typography>
            </Box>

            <Box sx={{ display: "flex", gap: 4, mt: 4 }}>
                {/* Sidebar */}
                <Box
                    sx={{
                        width: "100%",
                        maxWidth: 280,
                        bgcolor: theme.palette.background.paper,
                        border: `1px solid ${theme.palette.divider}`,
                        borderRadius: 2,
                        boxShadow: 1,
                    }}
                >
                    <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 sx={{ flexGrow: 1 }}>{renderContent()}</Box>
            </Box>
        </Box>
    );
}
