import React, { useEffect, useState } from "react";

import { Alert, Box, Button, CircularProgress, Paper, Typography } from "@mui/material";

import { useNavigate } from "react-router-dom";

import { api, getApiErrorMessage } from "../api";
import { useI18n } from "../i18n/I18nProvider";

type Status = "verifying" | "success" | "error";

export default function VerifyEmailPage({ emailChange = false }: { emailChange?: boolean }) {
  const { t } = useI18n();
  const navigate = useNavigate();

  const [status, setStatus] = useState<Status>("verifying");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const userId = params.get("userId") || "";
    const email = params.get("email") || "";
    const token = params.get("token") || "";

    if (!userId || !token || (emailChange && !email)) {
      setStatus("error");
      setErrorMessage(t(emailChange ? "missingEmailChangeLinkInfo" : "missingVerifyLinkInfo"));
      return;
    }

    api
      .post(emailChange ? "/auth/email-change/confirm" : "/auth/verify-email", emailChange ? { userId, email, token } : { userId, token })
      .then(() => setStatus("success"))
      .catch((e: any) => {
        setStatus("error");
        setErrorMessage(getApiErrorMessage(e, t("verifyEmailFailed")));
      });
  }, [emailChange, t]);

  return (
    <Box
      sx={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        p: 2,
        background:
          "radial-gradient(1200px 700px at 20% 0%, rgba(79,140,255,0.14), transparent 55%), radial-gradient(900px 600px at 80% 20%, rgba(245,158,11,0.10), transparent 55%)",
      }}
    >
      <Paper sx={{ width: "min(520px, 100%)", p: 4, 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)" }}>
        <Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>
          {t(emailChange ? "confirmEmailChangeTitle" : "verifyEmailTitle")}
        </Typography>

        <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5, mt: 2 }}>
          {status === "verifying" && (
            <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
              <CircularProgress size={20} />
              <Typography sx={{ color: "text.secondary" }}>{t(emailChange ? "confirmEmailChangeVerifying" : "verifyEmailVerifying")}</Typography>
            </Box>
          )}
          {status === "success" && <Alert severity="success">{t(emailChange ? "confirmEmailChangeSuccess" : "verifyEmailSuccess")}</Alert>}
          {status === "error" && <Alert severity="error">{errorMessage}</Alert>}

          <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1 }}>
            <Button variant="contained" onClick={() => navigate("/login")}>
              {t("backToLogin")}
            </Button>
          </Box>
        </Box>
      </Paper>
    </Box>
  );
}