import { Loader2 } from "lucide-react"
import { useState } from "react"
import { Navigate, useNavigate } from "react-router-dom"
import { toast } from "sonner"

import { resetPasswordWithOtp } from "../../api/users"
import { Button } from "../../components/ui/button"
import { useAuthFlow } from "../../context/AuthFlowContext"
import { useTranslation } from "../../hooks/useTranslation"
import { AuthPanel } from "./AuthPanel"
import { AuthPasswordField } from "./AuthPasswordField"
import { getApiErrorMessage } from "./utils"

export function ForgotPasswordPasswordPage() {
  const navigate = useNavigate()
  const { t } = useTranslation()
  const { state, resetFlow, setMobile } = useAuthFlow()
  const [password, setPassword] = useState("")
  const [confirmation, setConfirmation] = useState("")
  const [loading, setLoading] = useState(false)

  if (!state.forgotPassword.mobile) {
    return <Navigate to="/auth/forgot-password" replace />
  }

  if (!state.forgotPassword.code) {
    return <Navigate to="/auth/forgot-password/verify" replace />
  }

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault()

    if (!password || !confirmation) {
      toast.error(t.login.toasts.fillAll)
      return
    }

    if (password !== confirmation) {
      toast.error(t.login.passwordMismatch)
      return
    }

    setLoading(true)
    try {
      await resetPasswordWithOtp(state.forgotPassword.mobile, state.forgotPassword.code, password, confirmation)
      setMobile("login", state.forgotPassword.mobile)
      resetFlow("forgotPassword")
      toast.success(t.login.toasts.passwordResetSuccess)
      navigate("/auth/login/password", { replace: true })
    } catch (error) {
      toast.error(getApiErrorMessage(error, t.login.toasts.passwordResetFailed))
    } finally {
      setLoading(false)
    }
  }

  return (
    <AuthPanel
      title={t.login.resetPasswordTitle}
      description={t.login.resetPasswordDescription}
    >
      <form onSubmit={handleSubmit} className="grid gap-4">
        <AuthPasswordField
          id="reset-password"
          value={password}
          onChange={setPassword}
          placeholder={t.login.newPasswordPlaceholder}
          disabled={loading}
        />
        <AuthPasswordField
          id="reset-password-confirmation"
          value={confirmation}
          onChange={setConfirmation}
          placeholder={t.login.confirmPasswordPlaceholder}
          disabled={loading}
        />

        <Button type="submit" className="h-11 w-full" disabled={loading}>
          {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
          {t.login.resetPasswordCta}
        </Button>

        <Button type="button" variant="outline" className="h-11 w-full" onClick={() => navigate("/auth/forgot-password/verify")}>
          {t.login.back}
        </Button>
      </form>
    </AuthPanel>
  )
}