import { Button } from '@/components/ui/Button';
import { ArrowRightIcon } from '@/components/ui/icons';

/**
 * Type-a-code fallback for guests who can't scan. A plain GET form to /join (works without JS);
 * that page validates the code and redirects to /join/<CODE>.
 */
export function CodeForm({ defaultValue = '', autoFocus = false }: { defaultValue?: string; autoFocus?: boolean }) {
  return (
    <form action="/join" method="get" className="flex w-full flex-col gap-3">
      <label htmlFor="join-code" className="text-base font-semibold">
        Game code
      </label>
      <input
        id="join-code"
        name="code"
        defaultValue={defaultValue}
        required
        minLength={2}
        maxLength={12}
        pattern="[A-Za-z0-9]{2,12}"
        autoFocus={autoFocus}
        autoCapitalize="characters"
        autoComplete="off"
        autoCorrect="off"
        spellCheck={false}
        enterKeyHint="go"
        placeholder="e.g. HARBOR"
        aria-describedby="join-code-hint"
        className="block min-h-16 w-full rounded-2xl border-2 border-line-strong bg-night/70 px-5 text-center font-display text-2xl font-bold tracking-[0.2em] text-fg uppercase placeholder:font-sans placeholder:text-base placeholder:font-normal placeholder:tracking-normal placeholder:text-subtle placeholder:normal-case focus-visible:border-cyan focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-cyan/60"
      />
      <p id="join-code-hint" className="text-sm text-subtle">
        It’s on the TV next to the QR code.
      </p>
      <Button type="submit" size="lg" fullWidth className="font-display">
        Find the game <ArrowRightIcon />
      </Button>
    </form>
  );
}