import { cn } from '@/lib/utils';
import { surfaceQuickChips } from '@/lib/diagnosticForm';
import type { FormTheme } from './Field';

type Props = {
  value: number | undefined;
  onChange: (value: number | undefined) => void;
  theme?: FormTheme;
};

export const SurfaceInput = ({ value, onChange, theme = 'light' }: Props) => {
  const dark = theme === 'dark';
  return (
    <div className="space-y-3">
      <div className="relative">
        <input
          type="number"
          inputMode="numeric"
          min={1}
          step={50}
          placeholder="Ex : 3 500"
          value={value ?? ''}
          onChange={(e) => {
            const v = e.target.value;
            onChange(v === '' ? undefined : Number(v));
          }}
          className={cn(
            'w-full px-4 py-3.5 pr-14 rounded-xl border-2 focus:outline-none focus:border-primary transition-colors text-base',
            dark
              ? 'bg-white/[0.07] border-white/[0.12] text-white placeholder:text-white/30'
              : 'bg-white border-foreground/10 text-foreground placeholder:text-foreground/30',
          )}
        />
        <span className={cn('absolute right-4 top-1/2 -translate-y-1/2 font-body text-sm pointer-events-none', dark ? 'text-white/40' : 'text-foreground/40')}>
          m²
        </span>
      </div>
      <div className="flex flex-wrap gap-2">
        {surfaceQuickChips.map((chip) => {
          const active = value === chip;
          return (
            <button
              key={chip}
              type="button"
              onClick={() => onChange(chip)}
              className={cn(
                'px-3.5 py-1.5 rounded-full text-sm font-body font-medium transition-all border',
                active
                  ? 'border-primary bg-primary text-white'
                  : dark
                    ? 'border-white/[0.15] bg-white/[0.05] text-white/70 hover:border-primary/60 hover:text-white'
                    : 'border-foreground/15 bg-white text-foreground/70 hover:border-primary/40 hover:text-primary',
              )}
            >
              {chip.toLocaleString('fr-FR')} m²
            </button>
          );
        })}
        <button
          type="button"
          onClick={() => onChange(undefined)}
          className={cn('px-3 py-1.5 rounded-full text-sm font-body transition-colors', dark ? 'text-white/40 hover:text-white/70' : 'text-foreground/40 hover:text-foreground/70')}
        >
          Effacer
        </button>
      </div>
    </div>
  );
};