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

import { registerWithOtp } 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 { completeAuthentication, getApiErrorMessage, getPasswordValidationMessage } from "./utils"

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

  if (!state.signup.mobile) {
    return <Navigate to="/auth/signup" replace />
  }

  if (!state.signup.code) {
    return <Navigate to="/auth/signup/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
    }

    const passwordValidationMessage = getPasswordValidationMessage(password, t.login)
    if (passwordValidationMessage) {
      toast.error(passwordValidationMessage)
      return
    }

    setLoading(true)
    try {
      const data = await registerWithOtp(state.signup.mobile, state.signup.code, password, confirmation)
      resetFlow("signup")
      completeAuthentication({
        access: data.access,
        refresh: data.refresh,
        successMessage: t.login.toasts.accountCreated,
        redirectTo: "/timesheet",
        navigate,
      })
    } catch (error) {
      toast.error(getApiErrorMessage(error, t.login.toasts.failedSignup))
    } finally {
      setLoading(false)
    }
  }

  return (
    <AuthPanel
      title={t.login.signupPasswordTitle}
      description={t.login.signupPasswordDescription}
    >
      <form onSubmit={handleSubmit} className="grid gap-4">
        <AuthPasswordField
          id="signup-password"
          value={password}
          onChange={setPassword}
          placeholder={t.login.newPasswordPlaceholder}
          disabled={loading}
        />
        <AuthPasswordField
          id="signup-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.createAccountPasswordCta}
        </Button>

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