'use client';

import { useActionState, useState } from 'react';
import { signupAction } from '@/lib/auth/actions';
import { idle } from '@/lib/auth/state';
import { Field, FormMessage, PasswordField, SubmitButton, TextInput } from '@/components/account/form';

export function SignupForm({ next }: { next: string }) {
  const [state, action] = useActionState(signupAction, idle);
  const [email, setEmail] = useState('');
  return (
    <form action={action} className="mt-6 space-y-4" noValidate>
      <input type="hidden" name="next" value={next} />
      <FormMessage state={state} />
      <Field label="Name (optional)" name="name">
        <TextInput name="name" type="text" autoComplete="name" placeholder="How should we greet you?" maxLength={80} />
      </Field>
      <Field label="E-mail" name="email" error={state.fieldErrors?.email}>
        <TextInput name="email" type="email" autoComplete="email" required placeholder="you@example.com" value={email} onChange={(e) => setEmail(e.target.value)} invalid={Boolean(state.fieldErrors?.email)} />
      </Field>
      <PasswordField name="password" autoComplete="new-password" email={email} error={state.fieldErrors?.password} />
      <SubmitButton className="w-full" pendingText="Creating account…">
        Create account
      </SubmitButton>
      <p className="text-center text-[11px] leading-relaxed text-subtle">By continuing you agree that RareIndex is an information platform: valuations are estimates, not appraisals or investment advice.</p>
    </form>
  );
}