import { type ChangeEvent } from 'react';
import { Field } from '~/components/Field';

interface Props {
  label?: string;
  hint?: string;
  /** 错误态：语义色描边 + aria-invalid */
  error?: boolean;
  /** 错误文案：盖过 hint 显示，并挂 role="alert" */
  errorMessage?: string;
  /** 格数，同时是最大长度 */
  length?: number;
  value: string;
  onChange?: (value: string) => void;
  disabled?: boolean;
  /** 系统自动填充：iOS / Android 会把短信验证码直接填进这一格 */
  autocomplete?: 'one-time-code' | 'off';
  className?: string;
}

const onlyDigits = (raw: string, length: number) => raw.replace(/\D/g, '').slice(0, length);

/** 极简一次性验证码：同一份行为，格子只是发丝线方框——无模糊、无 inset、圆角退到 rounded-md */
export function MinimalOtp({
  label,
  hint,
  error = false,
  errorMessage,
  length = 6,
  value,
  onChange,
  disabled = false,
  autocomplete = 'one-time-code',
  className = '',
}: Props) {
  const cells = Array.from({ length }, (_, i) => i);

  return (
    <Field label={label} hint={hint} error={error} errorMessage={errorMessage} className={className}>
      {(field) => (
        <div className="relative inline-block">
          <input
            id={field.id}
            type="text"
            inputMode="numeric"
            autoComplete={autocomplete}
            pattern="[0-9]*"
            maxLength={length}
            value={value}
            disabled={disabled}
            aria-invalid={field.invalid || undefined}
            aria-describedby={field.describedBy}
            aria-label={label ? undefined : hint ?? '验证码'}
            onChange={(e: ChangeEvent<HTMLInputElement>) => onChange?.(onlyDigits(e.target.value, length))}
            className="peer absolute inset-0 z-10 size-full cursor-default opacity-0 disabled:cursor-not-allowed"
          />
          <div
            aria-hidden="true"
            className={`flex gap-2 outline-offset-4 peer-focus-visible:outline-2 peer-focus-visible:outline-[var(--color-accent)] ${disabled ? 'opacity-50' : ''}`}
          >
            {cells.map((i) => {
              const filled = i < value.length;
              const active = i === value.length && !disabled;
              return (
                <span
                  key={i}
                  className={`
                    grid place-items-center size-11 rounded-md border
                    bg-[var(--color-surface)] font-mono text-[length:var(--text-base)] tabular-nums
                    ${field.invalid
                      ? 'border-[var(--color-warning-fg)]'
                      : 'border-[var(--color-divider)]'}
                    ${active ? 'peer-focus-visible:border-[var(--color-accent)]' : ''}
                    ${filled ? 'text-[var(--color-text)]' : 'text-[var(--color-text-subtle)]'}
                  `}
                >
                  {filled ? value[i] : ''}
                </span>
              );
            })}
          </div>
        </div>
      )}
    </Field>
  );
}