'use client';

import { PasswordInput } from './PasswordInput';

import * as ActionIcons from './Icons';

import Link from 'next/link';
import { useActionState } from 'react';
import { recoverPassword, type RecoveryState } from '@/app/actions';

export function PasswordRecoveryForm() {
  const [state, action, pending] = useActionState<RecoveryState, FormData>(recoverPassword, {});
  if (state.step === 'done') return <div className="space-y-4"><p role="status" className="text-sm text-ledger">Password changed successfully. Sign in with your new password.</p><Link href="/login" className="btn btn-primary w-full"><ActionIcons.LogOutIcon />Sign in</Link></div>;
  const step = state.step ?? 'email';
  return <form action={action} className="space-y-4">
    <input type="hidden" name="step" value={step} />
    {step === 'email' ? <label className="block"><span className="field-label"><ActionIcons.MailIcon />Registered email</span><input name="email" type="email" required autoFocus autoComplete="username" className="field" /></label> : <><input type="hidden" name="email" value={state.email ?? ''} /><p className="text-sm text-muted">{state.email}</p></>}
    {step === 'otp' && <>
      <input type="hidden" name="challenge" value={state.challenge ?? ''} />
      <p role="status" className="text-sm text-ink-2">{state.message}</p>
      <label className="block"><span className="field-label"><ActionIcons.MailIcon />Six-digit email OTP</span><input name="otp" required autoFocus inputMode="numeric" pattern="[0-9]{6}" minLength={6} maxLength={6} autoComplete="one-time-code" placeholder="000000" className="field num text-center tracking-widest" /></label>
    </>}
    {step === 'password' && <>
      <input type="hidden" name="token" value={state.token ?? ''} />
      <p role="status" className="text-sm text-ledger">OTP verified. Choose your new password.</p>
      <label className="block"><span className="field-label"><ActionIcons.KeyIcon />New password</span><PasswordInput name="password"  required autoFocus minLength={12} maxLength={200} autoComplete="new-password" className="field" /></label>
      <label className="block"><span className="field-label"><ActionIcons.KeyIcon />Repeat new password</span><PasswordInput name="confirmPassword"  required minLength={12} maxLength={200} autoComplete="new-password" className="field" /></label>
      <p className="text-xs text-muted">Use at least 12 characters with upper and lower case letters, a number and a symbol.</p>
    </>}
    {state.error && <p role="alert" className="rounded-lg border border-danger/30 p-3 text-sm text-danger">{state.error}</p>}
    <button disabled={pending} className="btn btn-primary w-full">{pending ? <ActionIcons.Spinner /> : step === 'email' ? <ActionIcons.SendIcon /> : step === 'otp' ? <ActionIcons.ShieldCheckIcon /> : <ActionIcons.KeyIcon />}{pending ? 'Please wait...' : step === 'email' ? 'Send OTP' : step === 'otp' ? 'Verify OTP' : 'Set new password'}</button>
    {step === 'otp' && <button type="submit" name="intent" value="resend" formNoValidate disabled={pending} className="btn btn-quiet w-full"><ActionIcons.SendIcon />Resend OTP</button>}
    {step !== 'email' && <button type="submit" name="intent" value="restart" formNoValidate disabled={pending} className="btn btn-quiet w-full"><ActionIcons.RefreshIcon />Start again</button>}
  </form>;
}