import RestartAltOutlined from "@mui/icons-material/RestartAltOutlined";
import Tooltip from "@mui/material/Tooltip";
import { Button } from "@/shared/ui/Button.jsx";
import { IconButton } from "@/shared/ui/IconButton.jsx";
import { SearchBox } from "@/shared/ui/SearchBox.jsx";
import { StatusSelect } from "@/shared/ui/StatusSelect.jsx";
import styles from "@/shared/ui/AdminListLayout.module.css";

export function AdminListPage({ children }) {
    return (
        <section className={styles.root}>
            <div className={styles.contentPanel}>{children}</div>
        </section>
    );
}

export function AdminListToolbar({ actions, filters }) {
    if (!actions && !filters) {
        return null;
    }

    return (
        <div className={styles.toolbar}>
            {filters ? (
                <div className={styles.toolbarLeft}>
                    <section className={styles.filters}>{filters}</section>
                </div>
            ) : null}
            {actions ? <div className={styles.toolbarActions}>{actions}</div> : null}
        </div>
    );
}

export function AdminListBody({ children }) {
    return <div className={styles.listBlock}>{children}</div>;
}

export function AdminRowActions({ children }) {
    return <div className={styles.rowActions}>{children}</div>;
}

export function AdminSearchBox(props) {
    return <SearchBox {...props} className={[styles.search, props.className || ""].filter(Boolean).join(" ")} />;
}

export function AdminFilterSelect(props) {
    return (
        <StatusSelect {...props} className={[styles.statusSelect, props.className || ""].filter(Boolean).join(" ")} />
    );
}

export function AdminFilterResetButton({ disabled = false, label = "重置", onClick }) {
    return (
        <Button
            className={styles.resetButton}
            disabled={disabled}
            startIcon={<RestartAltOutlined fontSize="small" />}
            onClick={onClick}
        >
            {label}
        </Button>
    );
}

export function AdminActionIconButton({ children, label, primary = false, tooltip = label, ...props }) {
    return (
        <Tooltip arrow title={tooltip}>
            <span>
                <IconButton
                    {...props}
                    className={props.className || ""}
                    label={label}
                    sx={primary ? primaryActionSx : props.sx}
                >
                    {children}
                </IconButton>
            </span>
        </Tooltip>
    );
}

export const adminListClasses = styles;

const primaryActionSx = {
    borderColor: "var(--primary)",
    backgroundColor: "var(--primary)",
    color: "var(--active-contrast)",
    "&:hover": {
        borderColor: "var(--primary-strong)",
        backgroundColor: "var(--primary-strong)",
        color: "var(--active-contrast)",
    },
};
