'use client';

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

const TYPES: Array<{ v: string; l: string; targets: Array<'asset' | 'category' | 'index'>; threshold?: 'usd' | 'pct' }> = [
  { v: 'price_below', l: 'RIV falls below a value', targets: ['asset'], threshold: 'usd' },
  { v: 'price_above', l: 'RIV rises above a value', targets: ['asset'], threshold: 'usd' },
  { v: 'new_listing', l: 'New listing appears', targets: ['asset'] },
  { v: 'new_auction', l: 'New auction lot', targets: ['asset', 'category'] },
  { v: 'auction_ending', l: 'Auction ending within 24h', targets: ['asset', 'category'] },
  { v: 'auction_below_riv', l: 'Auction bid (with buyer premium) ≥ 10 % below RIV', targets: ['asset'] },
  { v: 'record_sale', l: 'New record (all-time high) sale', targets: ['asset', 'category'] },
  { v: 'unusual_volume', l: 'Unusual sales volume (% above 90-day average)', targets: ['asset', 'category'], threshold: 'pct' },
  { v: 'market_move', l: 'Index / category moves more than %', targets: ['category', 'index'], threshold: 'pct' },
  { v: 'rare_item', l: 'Rare item appears (Rare Radar)', targets: ['category'] },
  { v: 'population_update', l: 'Grading population changes', targets: ['asset'] },
];

export function AlertForm() {
  const [state, action] = useActionState(createAlertAction, idle);
  const [type, setType] = useState('price_below');
  const def = TYPES.find((t) => t.v === type)!;
  const [target, setTarget] = useState<'asset' | 'category' | 'index'>(def.targets[0]!);
  const effTarget = def.targets.includes(target) ? target : def.targets[0]!;
  return (
    <form action={action} className="space-y-3" noValidate key={state.ok ? 'reset' : 'form'}>
      <FormMessage state={state} />
      <Field label="When" name="alertType">
        <Select name="alertType" value={type} onChange={(e) => setType(e.target.value)}>
          {TYPES.map((t) => (
            <option key={t.v} value={t.v}>
              {t.l}
            </option>
          ))}
        </Select>
      </Field>
      {def.targets.length > 1 ? (
        <div className="flex gap-1 text-xs">
          {def.targets.map((t) => (
            <button key={t} type="button" onClick={() => setTarget(t)} className={`rounded-full border px-3 py-1 ${effTarget === t ? 'border-fg bg-accent text-accent-fg' : 'border-border text-muted'}`}>
              {t}
            </button>
          ))}
        </div>
      ) : null}
      <input type="hidden" name="targetType" value={effTarget} />
      {effTarget === 'asset' ? (
        <AssetPicker name="targetId" withVariant={false} error={state.fieldErrors?.targetId} />
      ) : effTarget === 'category' ? (
        <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>
      ) : (
        <Field label="Index" name="targetId">
          <Select name="targetId" defaultValue="RARE">
            {INDICES.map((i) => (
              <option key={i.ticker} value={i.ticker}>
                {i.ticker} — {i.name}
              </option>
            ))}
          </Select>
        </Field>
      )}
      {def.threshold ? (
        <Field label={def.threshold === 'usd' ? 'Threshold (USD)' : 'Threshold (%)'} name="threshold" error={state.fieldErrors?.threshold}>
          <TextInput name="threshold" type="number" min={0} step={def.threshold === 'usd' ? '0.01' : '0.5'} required placeholder={def.threshold === 'usd' ? '2500' : '5'} />
        </Field>
      ) : null}
      <div className="grid grid-cols-2 gap-3">
        <Field label="Deliver via" name="channel">
          <Select name="channel" defaultValue="both">
            <option value="both">Inbox + e-mail</option>
            <option value="inapp">Inbox only</option>
            <option value="email">E-mail only</option>
          </Select>
        </Field>
        <Field label="Cooldown" name="cooldownMinutes" hint="Minimum time between triggers.">
          <Select name="cooldownMinutes" defaultValue="1440">
            <option value="60">1 hour</option>
            <option value="360">6 hours</option>
            <option value="1440">1 day</option>
            <option value="10080">1 week</option>
          </Select>
        </Field>
      </div>
      <Field label="Name (optional)" name="name">
        <TextInput name="name" maxLength={80} placeholder="Defaults to the asset title" />
      </Field>
      <SubmitButton pendingText="Creating…">Create alert</SubmitButton>
    </form>
  );
}