import Alert from "@mui/material/Alert";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { hasAnyExternalCapability } from "../config/capabilities.js";
import { useExternalI18n } from "../i18n/ExternalI18nProvider.jsx";
import { translateExternalError } from "../i18n/errors.js";
import { useExternalAuth } from "./ExternalAuthProvider.jsx";

export function RequireExternalAuth() {
  const { initializationError, initializing, refresh, session } = useExternalAuth();
  const { t } = useExternalI18n();
  const location = useLocation();

  if (initializing) {
    return (
      <Box className="external-full-state" role="status">
        <CircularProgress size={28} />
        <Typography color="text.secondary">{t("auth.checkingSession")}</Typography>
      </Box>
    );
  }

  if (!session) {
    if (initializationError) {
      return (
        <Box className="external-full-state">
          <Alert severity="error">{translateExternalError(initializationError, t, "auth.sessionFailed")}</Alert>
          <Button onClick={refresh}>{t("auth.recheck")}</Button>
        </Box>
      );
    }
    return <Navigate replace state={{ from: location }} to="/login" />;
  }

  return <Outlet />;
}

export function RequireExternalCapability({ anyOf }) {
  const { session } = useExternalAuth();
  const { t } = useExternalI18n();

  if (hasAnyExternalCapability(session, anyOf)) {
    return <Outlet />;
  }

  return (
    <Box className="external-page external-full-state">
      <Alert severity="warning">{t("auth.noPermission")}</Alert>
      <Button component="a" href="/external-admin/overview" variant="outlined">
        {t("auth.returnOverview")}
      </Button>
    </Box>
  );
}