'use client';

import { useActionState, useState } from 'react';
import { toggleWatchAction, updateWatchItemAction } 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';
import { CATEGORIES } from '@rareindex/taxonomy';

export function WatchAddForm() {
  const [mode, setMode] = useState<'asset' | 'category'>('asset');
  return (
    <form action={toggleWatchAction} className="space-y-3">
      <div className="flex gap-1 text-xs">
        {(['asset', 'category'] as const).map((m) => (
          <button key={m} type="button" onClick={() => setMode(m)} className={`rounded-full border px-3 py-1 ${mode === m ? 'border-fg bg-accent text-accent-fg' : 'border-border text-muted'}`}>
            {m === 'asset' ? 'Asset' : 'Category / market'}
          </button>
        ))}
      </div>
      <input type="hidden" name="targetType" value={mode} />
      {mode === 'asset' ? (
        <AssetPicker name="targetId" withVariant={false} />
      ) : (
        <Field label="Category" name="targetId">
          <Select name="targetId" defaultValue="pokemon">
            {CATEGORIES.map((c) => (
              <option key={c.slug} value={c.slug}>
                {'— '.repeat(c.level)}
                {c.name}
              </option>
            ))}
          </Select>
        </Field>
      )}
      <SubmitButton pendingText="Adding…">Watch</SubmitButton>
    </form>
  );
}

export function WatchNoteForm({ itemId, note, targetPriceUsd }: { itemId: string; note: string | null; targetPriceUsd: number | null }) {
  const [state, action] = useActionState(updateWatchItemAction, idle);
  const [open, setOpen] = useState(false);
  if (!open) {
    return (
      <button type="button" onClick={() => setOpen(true)} className="max-w-full truncate text-left text-xs text-muted hover:text-fg">
        {note ? note : targetPriceUsd ? 'Edit target' : '+ note / target'}
      </button>
    );
  }
  return (
    <form action={action} className="flex flex-col gap-1">
      <input type="hidden" name="itemId" value={itemId} />
      <TextInput name="note" defaultValue={note ?? ''} placeholder="Note" maxLength={500} className="h-8 text-xs md:text-xs" />
      <TextInput name="targetPriceUsd" type="number" min={0} step="0.01" defaultValue={targetPriceUsd ?? ''} placeholder="Target (USD)" className="h-8 text-xs md:text-xs" />
      <div className="flex items-center gap-2">
        <SubmitButton variant="secondary" className="h-7 px-2 text-xs">
          Save
        </SubmitButton>
        <button type="button" onClick={() => setOpen(false)} className="text-xs text-muted">
          Cancel
        </button>
        <FormMessage state={state} className="py-0.5 text-xs" />
      </div>
    </form>
  );
}