import { useId } from 'react';
import { Check } from 'lucide-react';
import { Icon } from '~/components/Icon';

export interface ChoiceOption {
  value: string;
  label: string;
  disabled?: boolean;
}

interface Props {
  kind: 'checkbox' | 'radio';
  options: ChoiceOption[];
  values: string[];
  onChange?: (values: string[]) => void;
  label?: string;
  disabled?: boolean;
  className?: string;
}

/**
 * 极简勾选：复选框与单选框共用一套行结构，只有可视框形状不同。
 * 用原生 input 保留键盘与读屏行为；焦点环画在可视框上（input 本身 sr-only）。
 */
export function MinimalChoice({
  kind,
  options,
  values,
  onChange,
  label,
  disabled = false,
  className = '',
}: Props) {
  const groupId = useId();

  const toggle = (value: string) => {
    if (kind === 'radio') {
      onChange?.([value]);
      return;
    }
    const next = new Set(values);
    if (next.has(value)) next.delete(value);
    else next.add(value);
    onChange?.([...next]);
  };

  return (
    <fieldset
      disabled={disabled || undefined}
      aria-disabled={disabled || undefined}
      className={`border-0 p-0 m-0 min-w-0 ${disabled ? 'opacity-60' : ''} ${className}`}
    >
      {label && (
        <legend className="text-xs uppercase tracking-[0.18em] text-[var(--color-text-muted)] mb-2.5">
          {label}
        </legend>
      )}
      <div className="space-y-2.5">
        {options.map((option) => {
          const isOn = values.includes(option.value);
          const isDisabled = disabled || option.disabled;
          return (
            <label
              key={option.value}
              className={`flex items-center gap-3 text-sm ${
                isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
              }`}
            >
              <input
                type={kind}
                name={groupId}
                value={option.value}
                checked={isOn}
                disabled={isDisabled}
                onChange={() => toggle(option.value)}
                className="peer sr-only"
              />
              <span
                aria-hidden="true"
                className={`
                  grid place-items-center shrink-0 size-5
                  ${kind === 'checkbox' ? 'rounded-md' : 'rounded-full'}
                  ${isOn
                    ? 'bg-[var(--color-accent)] border border-[var(--color-accent)] text-[var(--color-bg)]'
                    : 'bg-[var(--color-surface)] border border-[var(--color-divider)] shadow-[var(--shadow-sm)]'}
                  peer-focus-visible:outline peer-focus-visible:outline-2
                  peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[var(--color-accent)]
                `}
              >
                {isOn && kind === 'checkbox' && (
                  <Icon icon={Check} size={12} strokeWidth={3} />
                )}
                {isOn && kind === 'radio' && (
                  <span className="size-2 rounded-full bg-current" />
                )}
              </span>
              <span>{option.label}</span>
            </label>
          );
        })}
      </div>
    </fieldset>
  );
}