import React, { 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 { getMicrosoftMsalInstance } from "../components/MicrosoftAuthCard";
import { useI18n } from "../i18n/I18nProvider";

export default function MicrosoftLegacyRelinkPage() {
  const { t } = useI18n();
  const navigate = useNavigate();
  const [working, setWorking] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const params = new URLSearchParams(window.location.search);
  const userId = params.get("userId") || "";
  const tenantId = params.get("tenantId") || "";
  const objectId = params.get("objectId") || "";
  const recoveryToken = params.get("token") || "";
  const clientId = (process.env.NEXT_PUBLIC_MICROSOFT_CLIENT_ID || "").trim();
  const missing = !userId || !tenantId || !objectId || !recoveryToken || !clientId;

  async function confirm() {
    setWorking(true);
    setError(null);
    try {
      const msal = getMicrosoftMsalInstance(clientId);
      await msal.initialize();
      const result = await msal.loginPopup({ scopes: ["openid", "profile", "email"] });
      if (!result.idToken) throw new Error(t("microsoftAuthFailed"));
      await api.post("/auth/microsoft/legacy-relink/confirm", {
        userId,
        tenantId,
        objectId,
        recoveryToken,
        microsoftToken: result.idToken,
      });
      setSuccess(true);
    } catch (e: any) {
      setError(getApiErrorMessage(e, t("microsoftLegacyRelinkFailed")));
    } finally {
      setWorking(false);
    }
  }

  return (
    <Box sx={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", p: 2 }}>
      <Paper sx={{ width: "min(520px, 100%)", p: 4, borderRadius: 4 }}>
        <Typography variant="h5" sx={{ fontWeight: 900 }}>{t("microsoftLegacyRelinkTitle")}</Typography>
        <Typography sx={{ color: "text.secondary", mt: 1 }}>{t("microsoftLegacyRelinkBody")}</Typography>
        {missing ? <Alert severity="error" sx={{ mt: 2 }}>{t("microsoftLegacyRelinkMissing")}</Alert> : null}
        {error ? <Alert severity="error" sx={{ mt: 2 }}>{error}</Alert> : null}
        {success ? <Alert severity="success" sx={{ mt: 2 }}>{t("microsoftLegacyRelinkSuccess")}</Alert> : null}
        <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1, mt: 3 }}>
          <Button onClick={() => navigate("/login")}>{t("backToLogin")}</Button>
          {!success ? (
            <Button variant="contained" disabled={missing || working} onClick={() => void confirm()}>
              {working ? <CircularProgress size={20} /> : t("continueWithMicrosoft")}
            </Button>
          ) : null}
        </Box>
      </Paper>
    </Box>
  );
}