'use client';

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

export function SaveSearchForm({ initialUrl, initialName }: { initialUrl: string; initialName: string }) {
  const [state, action] = useActionState(saveSearchAction, idle);
  return (
    <form action={action} className="space-y-3" noValidate key={state.ok ? 'reset' : 'form'}>
      <FormMessage state={state} />
      <Field label="Name" name="name" error={state.fieldErrors?.name}>
        <TextInput name="name" required maxLength={80} defaultValue={initialName} placeholder="e.g. PSA 10 Charizards under $5k" />
      </Field>
      <Field label="RareIndex URL" name="url" error={state.fieldErrors?.url} hint="Paste the path of a /search or /explore page with its filters.">
        <TextInput name="url" required defaultValue={initialUrl} placeholder="/search?q=charizard+psa+10&max=5000" className="mono-num text-xs md:text-xs" />
      </Field>
      <Checkbox name="notify" label="Notify me about new matches" description="Re-run daily; new assets or listings go to your inbox." />
      <SubmitButton pendingText="Saving…">Save search</SubmitButton>
    </form>
  );
}