import InsightsOutlined from "@mui/icons-material/InsightsOutlined";
import PaymentsOutlined from "@mui/icons-material/PaymentsOutlined";
import ReceiptLongOutlined from "@mui/icons-material/ReceiptLongOutlined";
import RuleFolderOutlined from "@mui/icons-material/RuleFolderOutlined";
import LinearProgress from "@mui/material/LinearProgress";

const NAV_GROUPS = [
    {
        label: "订单",
        views: [{ icon: ReceiptLongOutlined, id: "coinSellerRechargeOrders", label: "币商充值" }],
    },
    {
        label: "经营",
        views: [
            { icon: InsightsOutlined, id: "overview", label: "财务概览" },
            { icon: ReceiptLongOutlined, id: "rechargeDetails", label: "充值流水" },
            { icon: RuleFolderOutlined, id: "recon", label: "渠道对账" },
        ],
    },
    {
        label: "审批",
        views: [
            { icon: PaymentsOutlined, id: "withdrawalOperations", label: "用户提现运营审核" },
            { icon: PaymentsOutlined, id: "withdrawalFinance", label: "用户提现财务审核" },
        ],
    },
];

const VIEW_TITLES = {
    coinSellerRechargeOrders: "币商充值",
    overview: "财务概览",
    recon: "渠道对账",
    rechargeDetails: "充值流水",
    withdrawalFinance: "用户提现财务审核",
    withdrawalOperations: "用户提现运营审核",
};

export function FinanceShell({
    activeView,
    appBar,
    canViewCoinSellerRechargeOrders,
    canViewRechargeDetails,
    canViewFinanceWithdrawals,
    canViewOperationsWithdrawals,
    children,
    loading,
    onViewChange,
    session,
    subtitle,
    toolbar,
}) {
    const allows = (viewId) => {
        if (viewId === "overview" || viewId === "rechargeDetails" || viewId === "recon") {
            return canViewRechargeDetails;
        }
        if (viewId === "coinSellerRechargeOrders") {
            return canViewCoinSellerRechargeOrders;
        }
        if (viewId === "withdrawalFinance") {
            return canViewFinanceWithdrawals;
        }
        if (viewId === "withdrawalOperations") {
            return canViewOperationsWithdrawals;
        }
        return false;
    };
    return (
        <main className="finance-shell">
            <aside className="finance-sidebar">
                <div className="finance-brand">
                    <span>HY</span>
                    <div>
                        <strong>财务工作台</strong>
                        <small>Finance Console</small>
                    </div>
                </div>
                <nav className="finance-nav" aria-label="财务系统菜单">
                    {NAV_GROUPS.map((group) => {
                        const visible = group.views.filter((view) => allows(view.id));
                        if (!visible.length) {
                            return null;
                        }
                        return (
                            <div className="finance-nav__group" key={group.label}>
                                <span className="finance-nav__label">{group.label}</span>
                                {visible.map((view) => {
                                    const Icon = view.icon;
                                    return (
                                        <button
                                            className={activeView === view.id ? "is-active" : ""}
                                            key={view.id}
                                            type="button"
                                            onClick={() => onViewChange(view.id)}
                                        >
                                            <Icon fontSize="small" />
                                            <span>{view.label}</span>
                                        </button>
                                    );
                                })}
                            </div>
                        );
                    })}
                </nav>
                <div className="finance-user">
                    <span>{session?.user?.name || session?.user?.account || "当前用户"}</span>
                    <small>财务系统</small>
                </div>
            </aside>
            <section className="finance-main">
                {loading ? <LinearProgress className="finance-progress" /> : null}
                <header className="finance-topbar">
                    {appBar || (
                        <div className="finance-topbar__title">
                            <h1>{VIEW_TITLES[activeView] || "财务系统"}</h1>
                            {subtitle ? <small>{subtitle}</small> : null}
                        </div>
                    )}
                    {toolbar ? <div className="finance-topbar__tools">{toolbar}</div> : null}
                </header>
                <div className="finance-content">{children}</div>
            </section>
        </main>
    );
}
