'use client';

import { useActionState } from 'react';
import { createCollectionAction, updateCollectionAction } from '@/lib/account/actions';
import { idle } from '@/lib/auth/state';
import { Field, FormMessage, Select, SubmitButton, TextArea, TextInput } from '@/components/account/form';

const KINDS = [
  ['collection', 'Collection'],
  ['wishlist', 'Wishlist (with budget)'],
  ['vault', 'Vault / storage'],
  ['sold', 'Sold archive'],
] as const;

export function CreateCollectionForm() {
  const [state, action] = useActionState(createCollectionAction, idle);
  return <CollectionFields state={state} action={action} submitLabel="Create collection" />;
}

export function EditCollectionForm({ collection }: { collection: { id: string; name: string; description: string | null; kind: string; budgetUsd: number | null; color: string | null } }) {
  const [state, action] = useActionState(updateCollectionAction, idle);
  return <CollectionFields state={state} action={action} submitLabel="Save changes" initial={collection} />;
}

function CollectionFields({ state, action, submitLabel, initial }: { state: import('@/lib/auth/state').ActionState; action: (fd: FormData) => void; submitLabel: string; initial?: { id: string; name: string; description: string | null; kind: string; budgetUsd: number | null; color: string | null } }) {
  return (
    <form action={action} className="space-y-4" noValidate>
      {initial ? <input type="hidden" name="collectionId" value={initial.id} /> : null}
      <FormMessage state={state} />
      <div className="grid gap-4 sm:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)_80px]">
        <Field label="Name" name="name" error={state.fieldErrors?.name}>
          <TextInput name="name" required maxLength={80} defaultValue={initial?.name ?? ''} placeholder="e.g. Vintage Pokémon, Watch box, 2025 pickups" />
        </Field>
        <Field label="Type" name="kind">
          <Select name="kind" defaultValue={initial?.kind ?? 'collection'}>
            {KINDS.map(([v, l]) => (
              <option key={v} value={v}>
                {l}
              </option>
            ))}
          </Select>
        </Field>
        <Field label="Budget (USD, optional)" name="budgetUsd" error={state.fieldErrors?.budgetUsd}>
          <TextInput name="budgetUsd" type="number" min={0} step="1" defaultValue={initial?.budgetUsd ?? ''} placeholder="wishlists" />
        </Field>
        <Field label="Colour" name="color">
          <input type="color" name="color" defaultValue={initial?.color ?? '#1f3a8a'} className="h-10 w-full cursor-pointer rounded-md border border-border bg-elevated p-1 md:h-9" />
        </Field>
      </div>
      <Field label="Description (optional)" name="description">
        <TextArea name="description" maxLength={500} defaultValue={initial?.description ?? ''} placeholder="What lives here?" className="min-h-[60px]" />
      </Field>
      <SubmitButton pendingText="Saving…">{submitLabel}</SubmitButton>
    </form>
  );
}