'use client';

import { useActionState } from 'react';
import { cancelChangeEmailAction, confirmChangeEmailAction, startChangeEmailAction, updateProfileAction } from '@/lib/auth/account-actions';
import { idle } from '@/lib/auth/state';
import { CodeInput, Field, FormMessage, Select, SubmitButton, TextArea, TextInput } from '@/components/account/form';

export function ProfileForm({ user }: { user: { name: string | null; handle: string | null; bio: string | null; displayCurrency: string } }) {
  const [state, action] = useActionState(updateProfileAction, idle);
  return (
    <form action={action} className="space-y-4" noValidate>
      <FormMessage state={state} />
      <div className="grid gap-4 sm:grid-cols-2">
        <Field label="Name" name="name" error={state.fieldErrors?.name}>
          <TextInput name="name" defaultValue={user.name ?? ''} maxLength={80} autoComplete="name" />
        </Field>
        <Field label="Public handle" name="handle" error={state.fieldErrors?.handle} hint="3–24 chars, letters/numbers/hyphens. Unlocks /u/handle.">
          <div className="flex items-center">
            <span className="rounded-l-md border border-r-0 border-border bg-sunken px-2.5 py-2 text-sm text-subtle">/u/</span>
            <TextInput name="handle" id="handle" defaultValue={user.handle ?? ''} className="rounded-l-none" placeholder="yourname" autoCapitalize="off" />
          </div>
        </Field>
      </div>
      <Field label="Bio" name="bio" error={state.fieldErrors?.bio} hint="Up to 280 characters.">
        <TextArea name="bio" defaultValue={user.bio ?? ''} maxLength={280} placeholder="What do you collect?" />
      </Field>
      <Field label="Display currency" name="displayCurrency" hint="Historical sales keep their native currency; this only changes the display conversion.">
        <Select name="displayCurrency" defaultValue={user.displayCurrency} className="sm:max-w-[200px]">
          {['USD', 'CAD', 'EUR', 'GBP', 'JPY'].map((c) => (
            <option key={c} value={c}>
              {c}
            </option>
          ))}
        </Select>
      </Field>
      <SubmitButton pendingText="Saving…">Save profile</SubmitButton>
    </form>
  );
}

export function ChangeEmailForm({ pendingEmail }: { pendingEmail: string | null }) {
  const [start, startAction] = useActionState(startChangeEmailAction, idle);
  const [confirm, confirmAction] = useActionState(confirmChangeEmailAction, idle);
  const pending = (start.data?.pendingEmail as string | undefined) ?? pendingEmail;
  if (pending && !confirm.ok) {
    return (
      <div className="space-y-4">
        <p className="text-sm text-muted">
          Enter the code we sent to <span className="font-medium text-fg">{pending}</span>.
        </p>
        <form action={confirmAction} className="space-y-3" noValidate>
          <FormMessage state={confirm} />
          <CodeInput name="code" autoSubmit={false} label="Confirmation code" />
          <div className="flex gap-2">
            <SubmitButton pendingText="Confirming…">Confirm new e-mail</SubmitButton>
          </div>
        </form>
        <form action={cancelChangeEmailAction}>
          <SubmitButton variant="ghost" className="h-8 text-xs">
            Cancel change
          </SubmitButton>
        </form>
      </div>
    );
  }
  return (
    <form action={startAction} className="space-y-4" noValidate>
      <FormMessage state={confirm.ok ? confirm : start} />
      <div className="grid gap-4 sm:grid-cols-2">
        <Field label="New e-mail" name="newEmail" error={start.fieldErrors?.newEmail}>
          <TextInput name="newEmail" type="email" autoComplete="email" required />
        </Field>
        <Field label="Current password" name="password" error={start.fieldErrors?.password}>
          <TextInput name="password" type="password" autoComplete="current-password" required />
        </Field>
      </div>
      <SubmitButton variant="secondary" pendingText="Sending code…">
        Send confirmation code
      </SubmitButton>
    </form>
  );
}