"use client";

import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import {
  Alert,
  Box,
  CircularProgress,
  Stack,
  Typography,
} from "@mui/material";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";

import { Header } from "@/components/header";
import { permissionForPath } from "@/lib/permissions";
import { useAccessStore } from "@/store/accessStore";
import { useAuthStore } from "@/store/authStore";

export const RoutePermissionGuard = ({
  children,
  authenticated,
  accessDeniedReason = null,
}: {
  children: ReactNode;
  authenticated: boolean;
  accessDeniedReason?: "account" | "project" | null;
}) => {
  const pathname = usePathname();
  const permissions = useAccessStore((state) => state.permissions);
  const loading = useAccessStore((state) => state.loading);
  const sessionExpired = useAuthStore((state) => state.sessionExpired);
  const requiredPermission = permissionForPath(pathname);

  if (!authenticated || sessionExpired) {
    return (
      <Box sx={{ p: 3 }}>
        <Alert severity="warning">
          <Stack spacing={0.5}>
            <Typography variant="body1">登录状态已失效</Typography>
            <Typography variant="body2">
              正在跳转到登录页面…
            </Typography>
          </Stack>
        </Alert>
      </Box>
    );
  }

  if (accessDeniedReason) {
    const accountPending = accessDeniedReason === "account";

    return (
      <Box sx={{ minHeight: "100vh", bgcolor: "background.default" }}>
        <Header accessMode={accessDeniedReason} />
        <Box
          component="main"
          sx={{
            width: "100%",
            maxWidth: 840,
            mx: "auto",
            px: { xs: 2, sm: 3 },
            py: { xs: 4, md: 8 },
          }}
        >
          <Alert severity="warning" icon={<LockOutlinedIcon />}>
            <Stack spacing={0.5}>
              <Typography fontWeight={700}>
                {accountPending ? "账号尚未获得访问权限" : "无权访问当前项目"}
              </Typography>
              <Typography variant="body2">
                {accountPending
                  ? "身份认证已成功，但当前账号尚未由系统管理员启用。请联系系统管理员完成授权后重试。"
                  : "当前账号无法访问所选项目。请选择其他已授权项目，或联系系统管理员调整项目权限。"}
              </Typography>
            </Stack>
          </Alert>
        </Box>
      </Box>
    );
  }

  if (requiredPermission && loading) {
    return (
      <Box sx={{ minHeight: 320, display: "grid", placeItems: "center" }}>
        <CircularProgress size={28} />
      </Box>
    );
  }

  if (requiredPermission && !permissions.includes(requiredPermission)) {
    return (
      <Box sx={{ p: { xs: 2, md: 4 } }}>
        <Alert severity="error" icon={<LockOutlinedIcon />}>
          <Stack spacing={0.5}>
            <Typography fontWeight={700}>无权访问此功能</Typography>
            <Typography variant="body2">
              当前项目角色缺少权限：{requiredPermission}
            </Typography>
          </Stack>
        </Alert>
      </Box>
    );
  }

  return children;
};