import { useState } from 'react';
import { cn } from '@/lib/utils';
import { WheelRange } from '@/components/WheelRange';

// LevelRow — a named level with a slider, a value you can type into, and ±.
//
// Shared, like ShiftRow, and for the same complaint: the consoles each drew
// their levels their own way. This is the wide shape — one row per level, the
// slider taking the width it needs — rather than two half-width sliders side by
// side, which is what "c'est laid et elles sont toutes petites" was about.
//
// Four ways to move it, so nobody has to learn ours: drag, wheel over the
// track, ± for one step, or click the number and type. Typing matters for the
// levels TCI reports in real units — a squelch at -95 dBm is a value an
// operator knows, not a position to hunt for with a mouse.
export function LevelRow({
  label, value, min = 0, max = 100, step = 1, unit = '', accent, disabled, onSet,
}: {
  label: string;
  value: number;
  min?: number;
  max?: number;
  step?: number;
  unit?: string;
  accent?: string;
  disabled?: boolean;
  onSet: (v: number) => void;
}) {
  const [editing, setEditing] = useState<string | null>(null);
  const clamp = (v: number) => Math.max(min, Math.min(max, v));
  const commit = (raw: string) => {
    setEditing(null);
    const v = parseInt(raw.replace(/[^0-9+-]/g, ''), 10);
    if (!Number.isNaN(v)) onSet(clamp(v));
  };
  return (
    <div className="flex items-center gap-3">
      <span className="w-24 shrink-0 text-[11px] font-bold uppercase tracking-wider text-muted-foreground">
        {label}
      </span>
      <WheelRange
        min={min} max={max} step={step} value={value} disabled={disabled} accent={accent}
        onChange={onSet}
        className="h-2.5 flex-1 [&::-webkit-slider-thumb]:size-4"
      />
      <div className={cn('flex items-center gap-0.5 shrink-0', disabled && 'opacity-40')}>
        <button type="button" disabled={disabled} onClick={() => onSet(clamp(value - step))}
          className="px-1.5 text-sm font-bold text-muted-foreground hover:text-foreground disabled:opacity-40">−</button>
        {editing !== null ? (
          <input
            autoFocus
            value={editing}
            onChange={(e) => setEditing(e.target.value)}
            onBlur={(e) => commit(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') commit((e.target as HTMLInputElement).value);
              else if (e.key === 'Escape') setEditing(null);
            }}
            className="w-14 rounded border border-border bg-background px-1 text-right text-xs font-mono tabular-nums outline-none"
          />
        ) : (
          <button type="button" disabled={disabled} onClick={() => setEditing(String(value))}
            className="w-14 text-right text-xs font-mono tabular-nums hover:text-primary disabled:cursor-default">
            {value}{unit}
          </button>
        )}
        <button type="button" disabled={disabled} onClick={() => onSet(clamp(value + step))}
          className="px-1.5 text-sm font-bold text-muted-foreground hover:text-foreground disabled:opacity-40">+</button>
      </div>
    </div>
  );
}