'use client';
import { useActionState } from 'react';
import { requestReset, resetPassword, changePassword } from '@/app/(auth)/actions';
export function ResetRequestForm() {
  const [s, act, pending] = useActionState(requestReset, undefined);
  if (s?.ok) return <div className="border-l-2 border-forest bg-forest/5 px-4 py-3 text-[14.5px]">{s.ok}</div>;
  return (
    <form action={act} className="space-y-4">
      <div><label className="label">E-posta</label><input name="email" type="email" required className="field" autoComplete="email" /></div>
      {s?.error && <div className="border-l-2 border-survey bg-survey/5 px-3 py-2 text-sm text-survey-dark">{s.error}</div>}
      <button disabled={pending} className="btn-ink w-full disabled:opacity-60">{pending ? 'Gönderiliyor…' : 'Bağlantı gönder'}</button>
    </form>
  );
}
export function ResetPasswordForm({ token }: { token: string }) {
  const [s, act, pending] = useActionState(resetPassword, undefined);
  return (
    <form action={act} className="space-y-4">
      <input type="hidden" name="token" value={token} />
      <div><label className="label">Yeni şifre</label><input name="password" type="password" minLength={8} required className="field" autoComplete="new-password" /></div>
      <div><label className="label">Yeni şifre (tekrar)</label><input name="password2" type="password" minLength={8} required className="field" autoComplete="new-password" /></div>
      {s?.error && <div className="border-l-2 border-survey bg-survey/5 px-3 py-2 text-sm text-survey-dark">{s.error}</div>}
      <button disabled={pending} className="btn-ink w-full disabled:opacity-60">{pending ? 'Kaydediliyor…' : 'Şifreyi değiştir'}</button>
    </form>
  );
}
export function ResendVerify({ action }: { action: () => Promise<{ error?: string; ok?: boolean }> }) {
  const [s, act, pending] = useActionState(async () => action(), undefined);
  return (
    <form action={act} className="inline">
      {s?.ok ? <span className="font-mono text-[12px]">Gönderildi. Gelen kutunuza bakın.</span> : (
        <button disabled={pending} className="font-mono text-[12px] underline decoration-survey underline-offset-4">{pending ? 'Gönderiliyor…' : 'Doğrulama e-postasını tekrar gönder'}</button>)}
      {s?.error && <span className="ml-2 text-[12px] text-survey-dark">{s.error}</span>}
    </form>
  );
}
export function ChangePasswordForm() {
  const [s, act, pending] = useActionState(changePassword, undefined);
  return (
    <form action={act} className="space-y-4">
      <div><label className="label">Mevcut şifre</label><input name="current" type="password" required className="field" autoComplete="current-password" /></div>
      <div><label className="label">Yeni şifre</label><input name="password" type="password" minLength={8} required className="field" autoComplete="new-password" /></div>
      <div><label className="label">Yeni şifre (tekrar)</label><input name="password2" type="password" minLength={8} required className="field" autoComplete="new-password" /></div>
      {s?.error && <div className="border-l-2 border-survey bg-survey/5 px-3 py-2 text-sm text-survey-dark">{s.error}</div>}
      {s?.ok && <div className="border-l-2 border-forest bg-forest/5 px-3 py-2 text-sm">{s.ok}</div>}
      <button disabled={pending} className="btn-ink disabled:opacity-60">{pending ? 'Kaydediliyor…' : 'Şifreyi değiştir'}</button>
    </form>
  );
}