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

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

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

import { api } from "../api";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";

export default function ResetPasswordPage() {
  const { toast } = useToast();
  const { t } = useI18n();
  const navigate = useNavigate();

  const [email, setEmail] = useState("");
  const [token, setToken] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    setEmail(params.get("email") || "");
    setToken(params.get("token") || "");
  }, []);

  const missingResetInfo = !email || !token;

  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: 3 }}>
        <Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>
          {t("resetPasswordTitle")}
        </Typography>
        <Typography sx={{ color: "text.secondary", mb: 2 }}>
          {t("resetPasswordBody")}
        </Typography>

        <Box
          component="form"
          onSubmit={(e) => {
            e.preventDefault();
            if (missingResetInfo) {
              toast(t("missingResetLinkInfo"), "error");
              return;
            }
            setLoading(true);
            api
              .post("/auth/reset-password", { email, token, newPassword })
              .then(() => {
                toast(t("passwordResetSuccess"), "success");
                navigate("/login", { replace: true });
              })
              .catch((e2: any) => {
                const msg = e2?.response?.data || e2?.message || t("resetFailed");
                toast(String(msg), "error");
              })
              .finally(() => setLoading(false));
          }}
          sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
        >
          {missingResetInfo ? <Alert severity="warning">{t("missingResetLinkInfo")}</Alert> : null}
          <TextField label={t("profileEmail")} value={email} onChange={(e) => setEmail(e.target.value)} disabled={!missingResetInfo} fullWidth />
          <TextField label={t("profileNewPassword")} type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} fullWidth />

          <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1, mt: 1 }}>
            <Button type="button" variant="outlined" onClick={() => navigate("/login")} disabled={loading}>
              {t("backToLogin")}
            </Button>
            <Button type="submit" variant="contained" disabled={loading || missingResetInfo}>
              {t("updatePassword")}
            </Button>
          </Box>
        </Box>
      </Paper>
    </Box>
  );
}