"use client"

import { useActionState, useEffect, useRef } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { changePassword, type ChangePasswordState } from "@/app/account/actions"

const initialState: ChangePasswordState = {}

export function ChangePasswordForm({ hasPassword }: { hasPassword: boolean }) {
  const [state, formAction, pending] = useActionState(changePassword, initialState)
  const formRef = useRef<HTMLFormElement>(null)

  useEffect(() => {
    if (state.success) formRef.current?.reset()
  }, [state.success])

  return (
    <form ref={formRef} action={formAction} className="space-y-4 max-w-sm">
      {hasPassword && (
        <Input label="Mot de passe actuel" name="currentPassword" type="password" required />
      )}
      <Input label="Nouveau mot de passe" name="newPassword" type="password" required minLength={8} />
      <Input
        label="Confirmer le nouveau mot de passe"
        name="confirmPassword"
        type="password"
        required
        minLength={8}
      />
      {state.error && <p className="text-xs text-red-500 font-mono">{state.error}</p>}
      {state.success && (
        <p className="text-xs text-[var(--accent)] font-mono">Mot de passe mis à jour.</p>
      )}
      <Button type="submit" size="sm" disabled={pending}>
        {pending ? "Mise à jour…" : hasPassword ? "Changer le mot de passe" : "Définir un mot de passe"}
      </Button>
    </form>
  )
}