import AccountBalanceOutlined from "@mui/icons-material/AccountBalanceOutlined";
import InsightsOutlined from "@mui/icons-material/InsightsOutlined";
import { useAuth } from "@/app/auth/AuthProvider.jsx";
import { PERMISSIONS } from "@/app/permissions";

export const WORKSPACE_ENTRIES = [
    {
        description: "财务管理",
        href: "/finance/",
        icon: AccountBalanceOutlined,
        label: "财务工作台",
        permissions: [
            PERMISSIONS.financeView,
            PERMISSIONS.financeWithdrawalView,
            PERMISSIONS.financeWithdrawalAudit,
            PERMISSIONS.operationsWithdrawalView,
            PERMISSIONS.operationsWithdrawalAudit,
        ],
    },
    {
        description: "运营管理",
        href: "/databi/social/",
        icon: InsightsOutlined,
        label: "运营工作台",
        permission: PERMISSIONS.overviewView,
    },
];

export function getPermittedWorkspaceEntries(can) {
    // 独立工作台按任一真实入口权限展示；提现财务/运营审核者没有 finance:view 时也必须能发现自己的审批队列。
    return WORKSPACE_ENTRIES.filter((entry) => (entry.permissions || [entry.permission]).some((permission) => can(permission)));
}

export function DashboardWorkspaces() {
    const { can } = useAuth();
    const entries = getPermittedWorkspaceEntries(can);

    return (
        <section className="workspace-entry-section" aria-label="工作台入口">
            <div className="workspace-entry-head">
                <h2>工作台</h2>
            </div>
            {entries.length ? (
                <div className="workspace-entry-grid">
                    {entries.map((entry) => {
                        const Icon = entry.icon;
                        return (
                            // 使用普通链接触发完整文档导航，确保 Vite 的多入口页面加载各自的 HTML 和应用运行时。
                            <a className="workspace-entry-card" href={entry.href} key={entry.href}>
                                <span className="workspace-entry-card__icon">
                                    <Icon fontSize="small" />
                                </span>
                                <span className="workspace-entry-card__group">{entry.description}</span>
                                <strong>{entry.label}</strong>
                            </a>
                        );
                    })}
                </div>
            ) : (
                <div className="workspace-entry-empty">当前无可访问工作台</div>
            )}
        </section>
    );
}
