"use client"

import type React from "react"
import Link from "next/link"
import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { toast } from "sonner"
import { AuthCard } from "@/components/auth-card"
import { PasswordInput } from "@/components/password-input"

export default function ResetPasswordForm() {
  const router = useRouter()
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [confirmPasswordError, setConfirmPasswordError] = useState("")
  const [confirmPasswordTouched, setConfirmPasswordTouched] = useState(false)

  const validateConfirmPassword = (confirmPwd: string) => {
    if (!confirmPwd) {
      return "Please confirm your password"
    }
    if (confirmPwd !== password) {
      return "Passwords don't match"
    }
    return ""
  }

  const isFormValid = () => {
    return password &&
    // isPasswordValid(password) && 
    confirmPassword && !validateConfirmPassword(confirmPassword)
  }

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

    const confirmPwdErr = validateConfirmPassword(confirmPassword)

    if (confirmPwdErr
      // || !isPasswordValid(password)
    ) {
      setConfirmPasswordError(confirmPwdErr)
      setConfirmPasswordTouched(true)

      toast("Invalid password. Please check the password requirements");
      return
    }

    setIsLoading(true)

    setTimeout(() => {
      toast("Password reset successful. You can now login with your new password");
      router.push("/login");
    }, 1000)
  }

  return (
    <AuthCard
      title="Reset password"
      description="Enter your new password"
      footer={
        <Link href="/login" className="text-primary hover:underline font-medium">
          Cancel
        </Link>
      }
    >
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="password">New Password</Label>
          <PasswordInput
            id="password"
            placeholder="Choose a new password"
            value={password}
            onChange={(e) => {
              setPassword(e.target.value)
              if (confirmPasswordTouched && confirmPassword) {
                setConfirmPasswordError(validateConfirmPassword(confirmPassword))
              }
            }}
            required
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="confirmPassword">Confirm New Password</Label>
          <PasswordInput
            id="confirmPassword"
            placeholder="Retype your new password"
            value={confirmPassword}
            onChange={(e) => {
              setConfirmPassword(e.target.value)
              if (confirmPasswordTouched) {
                setConfirmPasswordError(validateConfirmPassword(e.target.value))
              }
            }}
            onBlur={() => {
              setConfirmPasswordTouched(true)
              setConfirmPasswordError(validateConfirmPassword(confirmPassword))
            }}
            required
          />
          {confirmPasswordTouched && confirmPasswordError && (
            <p className="text-sm text-red-500">{confirmPasswordError}</p>
          )}
        </div>
        <Button type="submit" className="w-full cursor-pointer" disabled={isLoading || !isFormValid()}>
          {isLoading ? "Resetting..." : "Reset password"}
        </Button>
      </form>
    </AuthCard>
  )
}