import { LockKeyhole } from "lucide-react";
import { Outlet, useLocation, useNavigate } from "react-router";

import { Button } from "~/components/ui/button";
import { Card, CardContent } from "~/components/ui/card";
import { OperationsDataBoundary, OperationsDataProvider } from "~/features/operations/OperationsDataContext";
import {
  isOperationsPageVisibleForRole,
  useCanOperationsPage,
  operationsPageFromPath,
  useOperationsRole,
} from "~/features/operations/operationsRole";

export default function OperationsLayout() {
  const role = useOperationsRole();
  const location = useLocation();
  const navigate = useNavigate();
  const page = operationsPageFromPath(location.pathname);
  const canViewByPermission = useCanOperationsPage(page);

  if (!isOperationsPageVisibleForRole(role, page) || !canViewByPermission) {
    return (
      <section className="grid h-full place-items-center bg-bg p-6">
        <Card className="w-full max-w-xl">
          <CardContent className="flex flex-col items-center py-12 text-center">
            <span className="grid size-12 place-items-center rounded-2xl bg-warning-soft text-warning"><LockKeyhole className="size-6" /></span>
            <h2 className="mt-4 text-xl font-bold text-foreground">当前角色不展示该页面</h2>
            <p className="mt-2 text-sm leading-6 text-muted-foreground">运维前端根据登录返回的角色适配界面。该显示规则不替代独立权限模块的服务端授权。</p>
            <Button className="mt-5" onClick={() => navigate("/operations")}>返回运维工作台</Button>
          </CardContent>
        </Card>
      </section>
    );
  }

  return (
    <OperationsDataProvider>
      <OperationsDataBoundary>
        <Outlet />
      </OperationsDataBoundary>
    </OperationsDataProvider>
  );
}