'use client';

import { useActionState } from 'react';
import { createTargetAction } from '@/lib/account/actions';
import { idle } from '@/lib/auth/state';
import { Field, FormMessage, Select, SubmitButton, TextInput } from '@/components/account/form';
import { AssetPicker } from '@/components/account/asset-picker';

export function TargetForm() {
  const [state, action] = useActionState(createTargetAction, idle);
  return (
    <form action={action} className="space-y-3" noValidate key={state.ok ? 'reset' : 'form'}>
      <FormMessage state={state} />
      <AssetPicker name="assetId" withVariant={false} error={state.fieldErrors?.assetId} />
      <div className="grid grid-cols-2 gap-3">
        <Field label="Direction" name="direction">
          <Select name="direction" defaultValue="below">
            <option value="below">Buy — RIV falls below</option>
            <option value="above">Sell — RIV rises above</option>
          </Select>
        </Field>
        <Field label="Target (USD)" name="targetUsd" error={state.fieldErrors?.targetUsd}>
          <TextInput name="targetUsd" type="number" min={0} step="0.01" required placeholder="2500" />
        </Field>
      </div>
      <Field label="Note (optional)" name="note">
        <TextInput name="note" maxLength={300} placeholder="Why this level?" />
      </Field>
      <SubmitButton pendingText="Saving…">Set target</SubmitButton>
    </form>
  );
}