import AssignmentOutlined from "@mui/icons-material/AssignmentOutlined";
import FactCheckOutlined from "@mui/icons-material/FactCheckOutlined";
import PaymentsOutlined from "@mui/icons-material/PaymentsOutlined";
import ReceiptLongOutlined from "@mui/icons-material/ReceiptLongOutlined";
import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
import Button from "@mui/material/Button";
import LinearProgress from "@mui/material/LinearProgress";

const views = [
  { icon: ReceiptLongOutlined, id: "rechargeDetails", label: "APP充值详情" },
  { icon: AssignmentOutlined, id: "create", label: "发起申请" },
  { icon: FactCheckOutlined, id: "applications", label: "申请审核" },
  { icon: PaymentsOutlined, id: "withdrawals", label: "用户提现申请" }
];

export function FinanceShell({ activeView, canAudit, canCreate, canViewRechargeDetails, canViewWithdrawals, children, loading, onRefresh, onViewChange, session }) {
  const visibleViews = views.filter((view) => {
    if (view.id === "rechargeDetails") {
      return canViewRechargeDetails;
    }
    if (view.id === "applications") {
      return canAudit;
    }
    if (view.id === "withdrawals") {
      return canViewWithdrawals;
    }
    return canCreate;
  });
  const activeLabel = visibleViews.find((view) => view.id === activeView)?.label || visibleViews[0]?.label || "财务系统";

  return (
    <main className="finance-shell">
      <aside className="finance-sidebar">
        <div className="finance-brand">
          <span>HY</span>
          <strong>财务系统</strong>
        </div>
        <nav className="finance-nav" aria-label="财务系统菜单">
          {visibleViews.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>
            );
          })}
        </nav>
        <div className="finance-user">
          <span>{session?.user?.name || session?.user?.account || "当前用户"}</span>
          <small>
            {canViewRechargeDetails
              ? "payment-bill:view"
              : canAudit
                ? "finance-application:audit"
                : canViewWithdrawals
                  ? "finance-withdrawal:view"
                  : "finance-application:create"}
          </small>
        </div>
      </aside>
      <section className="finance-main">
        <header className="finance-header">
          <div>
            <span>HYApp</span>
            <h1>{activeLabel}</h1>
          </div>
          <Button startIcon={<RefreshOutlined fontSize="small" />} variant="outlined" onClick={onRefresh}>
            刷新
          </Button>
        </header>
        {loading ? <LinearProgress className="finance-progress" /> : null}
        <div className="finance-content">{children}</div>
      </section>
    </main>
  );
}
