import { cn } from '@/lib/utils';
import { Check } from 'lucide-react';
import type { FormTheme } from './Field';

type Option = {
  value: string;
  label: string;
  hint?: string;
};

type Props = {
  options: readonly Option[];
  value: string[];
  onChange: (value: string[]) => void;
  max?: number;
  columns?: string;
  ariaLabel?: string;
  theme?: FormTheme;
};

export const CheckboxCards = ({
  options,
  value,
  onChange,
  max,
  columns = 'grid-cols-1 sm:grid-cols-2',
  ariaLabel,
  theme = 'light',
}: Props) => {
  const dark = theme === 'dark';
  const toggle = (v: string) => {
    if (value.includes(v)) {
      onChange(value.filter((x) => x !== v));
    } else {
      if (max && value.length >= max) return;
      onChange([...value, v]);
    }
  };

  return (
    <div role="group" aria-label={ariaLabel} className={cn('grid gap-3', columns)}>
      {options.map((opt) => {
        const checked = value.includes(opt.value);
        const disabled = !checked && !!max && value.length >= max;
        return (
          <label
            key={opt.value}
            className={cn(
              'relative flex flex-col items-start gap-1 rounded-xl border-2 px-4 py-3.5 transition-all',
              checked
                ? dark
                  ? 'border-primary bg-primary/15 cursor-pointer'
                  : 'border-primary bg-primary/5 shadow-sm cursor-pointer'
                : disabled
                  ? dark
                    ? 'border-white/[0.12] bg-white/[0.03] opacity-50 cursor-not-allowed'
                    : 'border-foreground/10 bg-foreground/5 opacity-50 cursor-not-allowed'
                  : dark
                    ? 'border-white/[0.12] bg-white/[0.05] cursor-pointer hover:border-primary/60 hover:bg-white/[0.08]'
                    : 'border-foreground/10 bg-white cursor-pointer hover:border-primary/40 hover:bg-primary/5',
            )}
          >
            <input
              type="checkbox"
              checked={checked}
              disabled={disabled}
              onChange={() => toggle(opt.value)}
              className="sr-only"
            />
            <span className={cn('font-body font-semibold text-[15px] leading-tight pr-8 break-words', dark ? 'text-white' : 'text-foreground')}>
              {opt.label}
            </span>
            {opt.hint && (
              <span className={cn('text-xs font-body leading-snug', dark ? 'text-white/50' : 'text-foreground/50')}>{opt.hint}</span>
            )}
            <span
              className={cn(
                'absolute top-3 right-3 w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all',
                checked ? 'border-primary bg-primary' : dark ? 'border-white/30 bg-transparent' : 'border-foreground/20 bg-transparent',
              )}
              aria-hidden
            >
              {checked && <Check className="w-3 h-3 text-white" strokeWidth={3} />}
            </span>
          </label>
        );
      })}
    </div>
  );
};