'use client';

import { FormEvent, useEffect, useState } from 'react';

export function VerifyEmailForm() {
  const [token, setToken] = useState('');
  const [message, setMessage] = useState('');
  const [busy, setBusy] = useState(false);

  useEffect(() => { setToken(new URLSearchParams(window.location.search).get('token') ?? ''); }, []);

  async function submit(event: FormEvent) {
    event.preventDefault(); setBusy(true); setMessage('');
    try {
      const response = await fetch('/api/auth/verify-email', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ token }) });
      const body = await response.json().catch(() => ({}));
      if (!response.ok) throw new Error(body.detail ?? 'Unable to verify email.');
      setMessage('Email verified. You can return to your account.');
    } catch (error) { setMessage(error instanceof Error ? error.message : 'Unable to verify email.'); }
    finally { setBusy(false); }
  }

  return <form className="auth-form" onSubmit={submit}><label>Verification token<input required value={token} onChange={(event) => setToken(event.target.value)} /></label><button className="button" disabled={busy} type="submit">{busy ? 'Checking...' : 'Verify email'}</button>{message && <p className="form-message" role="status">{message}</p>}</form>;
}