'use client';

import { useId } from 'react';
import { Input } from '@/components/ui/input';
import { TRUTH_CARD_NAMES } from '@/game/truthtrance-card-names';
import type { CardCountFact } from '@/game/truthtrance-card-count';
import {
  HAND_INVENTORY_LABELS,
  type HandInventoryFact,
} from '@/game/truthtrance-hand-inventory';

export function CardCountFields<T extends CardCountFact | HandInventoryFact>({
  value,
  onChange,
}: {
  value: T;
  onChange: (fact: T) => void;
}) {
  const id = useId();
  const invalid = !Number.isSafeInteger(value.value) || value.value < 0;
  return (
    <>
      {value.kind === 'handCount' ? (
        <label>
          Card name
          <select
            value={value.name}
            onChange={(event) =>
              onChange({ ...value, name: event.target.value })
            }
          >
            {TRUTH_CARD_NAMES.map((name) => (
              <option key={name}>{name}</option>
            ))}
          </select>
        </label>
      ) : (
        <label>
          Cards to count
          <select
            value={value.category}
            onChange={(event) =>
              onChange({
                ...value,
                category: event.target.value as HandInventoryFact['category'],
              })
            }
          >
            {Object.entries(HAND_INVENTORY_LABELS).map(([category, label]) => (
              <option key={category} value={category}>
                {label}
              </option>
            ))}
          </select>
        </label>
      )}
      <label>
        Compare card count
        <select
          value={value.compare}
          onChange={(event) =>
            onChange({
              ...value,
              compare: event.target.value as CardCountFact['compare'],
            })
          }
        >
          <option value="eq">Exactly</option>
          <option value="gte">At least</option>
          <option value="lte">At most</option>
        </select>
      </label>
      <label htmlFor={`${id}-count`}>
        {value.kind === 'handCount' ? 'Number of copies' : 'Number of cards'}
        <Input
          id={`${id}-count`}
          type="number"
          min={0}
          max={Number.MAX_SAFE_INTEGER}
          step={1}
          required
          value={Number.isNaN(value.value) ? '' : value.value}
          aria-invalid={invalid}
          aria-describedby={`${id}-help${invalid ? ` ${id}-error` : ''}`}
          onChange={(event) =>
            onChange({ ...value, value: event.currentTarget.valueAsNumber })
          }
        />
      </label>
      <p id={`${id}-help`} className="fine">
        {value.kind === 'handCount'
          ? 'Counts copies of this exact named card'
          : value.category === 'all'
            ? 'Counts all physical cards'
            : 'Counts physical cards of the selected primary role'}{' '}
        in the player’s hand now. Cards in the deck, discard pile, or a separate
        cache do not count. The answer reveals only whether the comparison is
        true.
      </p>
      {value.kind === 'handInventory' && value.category !== 'all' && (
        <p className="fine">
          Primary roles follow the cards: Weirding Way is a weapon and Chemistry
          is a defense. Worthless cards stay separate, including for Bene
          Gesserit or CHOAM. Alternate uses and faction powers do not change
          this count. Poison Blade and Shield Snooper match both of their
          printed attack or defense types; Mirror Weapon has no fixed poison or
          projectile primary role.
        </p>
      )}
      {invalid && (
        <p id={`${id}-error`} className="notice" role="alert">
          {Number.isInteger(value.value) &&
          value.value > Number.MAX_SAFE_INTEGER
            ? 'That card count is too large.'
            : 'Enter a whole card count of zero or more.'}
        </p>
      )}
    </>
  );
}