'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { registerAccount, type RegisterFormState } from '@/app/register/actions';

const initialState: RegisterFormState = undefined;

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
      {pending ? 'Creating Account…' : 'Create Account'}
    </button>
  );
}

export function RegisterForm() {
  const [state, formAction] = useFormState(registerAccount, initialState);
  const errors = state?.errors ?? {};
  const values = state?.values ?? {};

  return (
    <form action={formAction} className="mt-6 space-y-4">
      {Object.keys(errors).length > 0 && (
        <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          <ul className="list-inside list-disc">
            {Object.values(errors).flat().map((error) => (
              <li key={error}>{error}</li>
            ))}
          </ul>
        </div>
      )}

      <div>
        <label className="block text-sm font-semibold text-navy-800">Full Name</label>
        <input
          type="text"
          name="name"
          defaultValue={values.name}
          required
          className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
        />
      </div>
      <div>
        <label className="block text-sm font-semibold text-navy-800">Email Address</label>
        <input
          type="email"
          name="email"
          defaultValue={values.email}
          required
          className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
        />
      </div>
      <div>
        <label className="block text-sm font-semibold text-navy-800">Phone Number</label>
        <input
          type="tel"
          name="phone_number"
          defaultValue={values.phone_number}
          className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
        />
      </div>
      <div>
        <label className="block text-sm font-semibold text-navy-800">Password</label>
        <input
          type="password"
          name="password"
          required
          minLength={8}
          className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
        />
      </div>
      <div>
        <label className="block text-sm font-semibold text-navy-800">Confirm Password</label>
        <input
          type="password"
          name="password_confirmation"
          required
          minLength={8}
          className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
        />
      </div>
      <label className="flex items-start gap-2 text-xs text-navy-600">
        <input type="checkbox" name="is_vendor" className="mt-0.5 rounded border-navy-100 text-gold-500 focus:ring-gold-500" />
        I also want to sell my own products as an independent vendor
      </label>
      <SubmitButton />
    </form>
  );
}