'use client';
import { Suspense, useState } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { api } from '@/lib/api';
import { AuthShell, AuthBack } from '../shell';
import { Spinner } from '@/components/ui';
import { FloatInput } from '@/components/float';
import { validate, v } from '@/lib/validation';

function ResetForm() {
  const q = useSearchParams();
  const router = useRouter();
  const [pw, setPw] = useState('');
  const [cf, setCf] = useState('');
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);
  const [errs, setErrs] = useState<Record<string, string>>({});
  return (
    <AuthShell title="Reset password" subtitle="Choose a new password (min 8 characters)">
      <form className="space-y-4" noValidate onSubmit={async (e) => {
        e.preventDefault(); setErr('');
        const fe = validate({
          password: () => v.minLen(pw, 8, 'New password'),
          confirm: () => v.match(pw, cf, 'Passwords do not match'),
        });
        setErrs(fe);
        if (Object.keys(fe).length) return;
        setBusy(true);
        try {
          await api.post('/api/v1/auth/reset-password', { token: q.get('token'), password: pw, confirm: cf });
          router.push('/login');
        } catch (ex: any) { setErr(ex.message); }
        finally { setBusy(false); }
      }}>
        <FloatInput label="New password" id="rp-new" type="password" autoComplete="new-password" required hint="Minimum 8 characters" error={errs.password} value={pw} onChange={(e) => setPw(e.target.value)} />
        <FloatInput label="Confirm password" id="rp-confirm" type="password" autoComplete="new-password" required error={errs.confirm} value={cf} onChange={(e) => setCf(e.target.value)} />
        {err && <p role="alert" className="alert-error">{err}</p>}
        <button className="btn-primary btn-tall w-full" disabled={busy}>{busy ? <Spinner label="Resetting…" /> : 'Reset password'}</button>
        <p className="text-center"><AuthBack /></p>
      </form>
    </AuthShell>
  );
}

export default function ResetPage() {
  return (
    <Suspense fallback={<main className="min-h-screen grid place-items-center p-4"><Spinner /></main>}>
      <ResetForm />
    </Suspense>
  );
}