import React from "react";
import { Box, Button, Paper, Typography } from "@mui/material";
import { useNavigate, useRouteError } from "react-router-dom";
import { useI18n } from "../i18n/I18nProvider";

export default function RouteErrorPage() {
  const navigate = useNavigate();
  const error = useRouteError() as any;
  const { t } = useI18n();

  const details = typeof error?.statusText === "string" && error.statusText.trim()
    ? error.statusText
    : typeof error?.message === "string" && error.message.trim()
      ? error.message
      : null;

  return (
    <Box sx={{ minHeight: "100vh", display: "grid", placeItems: "center", p: 3 }}>
      <Paper
        sx={{
          p: { xs: 4, md: 6 },
          borderRadius: 4,
          border: "none",
          boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)",
          width: "100%",
          maxWidth: 640,
        }}
      >
        <Box sx={{ display: "grid", gap: 1.5 }}>
          <Typography sx={{ fontWeight: 900, fontSize: { xs: 48, md: 64 }, lineHeight: 1, letterSpacing: "-0.02em", color: "error.main" }}>
            {error?.status || 500}
          </Typography>
          <Typography variant="h4" sx={{ fontWeight: 800 }}>
            {t("appErrorTitle")}
          </Typography>
          <Typography sx={{ color: "text.secondary" }}>
            {t("appErrorBody")}
          </Typography>
          {details ? <Typography sx={{ color: "text.secondary" }}>{details}</Typography> : null}
          <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mt: 1 }}>
            <Button variant="contained" onClick={() => navigate("/jobs")}>
              {t("goHome")}
            </Button>
            <Button variant="outlined" onClick={() => navigate(-1)}>
              {t("goBack")}
            </Button>
          </Box>
        </Box>
      </Paper>
    </Box>
  );
}
