import { useCallback } from 'react';
import type { PresetConfig } from '../types/engine';

interface ParameterSlidersProps {
  presetConfig: PresetConfig | null;
  params: Record<string, unknown>;
  onChange: (params: Record<string, unknown>) => void;
}

interface SliderDef {
  key: string;
  label: string;
  min: number;
  max: number;
  step: number;
  defaultValue: number;
  /** Only shown when this vectorization mode is active */
  modeFilter?: 'potrace' | 'vtracer';
}

function getSliderDefs(config: PresetConfig): SliderDef[] {
  const mode = config.vectorization.mode;
  const potrace = config.vectorization.potrace;
  const vtracer = config.vectorization.vtracer;
  const post = config.postprocessing;

  const sliders: SliderDef[] = [
    {
      key: 'epsilon',
      label: 'Detail Level',
      min: 0.5,
      max: 10,
      step: 0.5,
      defaultValue: post.epsilon ?? 2.5,
    },
  ];

  if (mode === 'potrace') {
    sliders.push(
      {
        key: 'turdsize',
        label: 'Noise Filter',
        min: 0,
        max: 50,
        step: 1,
        defaultValue: potrace?.turdsize ?? 10,
        modeFilter: 'potrace',
      },
      {
        key: 'alphamax',
        label: 'Smooth Curves',
        min: 0,
        max: 1.334,
        step: 0.1,
        defaultValue: potrace?.alphamax ?? 1.0,
        modeFilter: 'potrace',
      },
    );
  } else {
    sliders.push(
      {
        key: 'filter_speckle',
        label: 'Noise Filter',
        min: 0,
        max: 50,
        step: 1,
        defaultValue: vtracer?.filter_speckle ?? 20,
        modeFilter: 'vtracer',
      },
      {
        key: 'corner_threshold',
        label: 'Corner Threshold',
        min: 0,
        max: 180,
        step: 1,
        defaultValue: vtracer?.corner_threshold ?? 60,
        modeFilter: 'vtracer',
      },
    );
  }

  return sliders;
}

export default function ParameterSliders({
  presetConfig,
  params,
  onChange,
}: ParameterSlidersProps) {
  const handleChange = useCallback(
    (key: string, value: number) => {
      onChange({ ...params, [key]: value });
    },
    [params, onChange],
  );

  if (!presetConfig) {
    return null;
  }

  const sliders = getSliderDefs(presetConfig);

  return (
    <div className="parameter-sliders">
      <h3 className="parameter-heading">Parameters</h3>
      {sliders.map((slider) => {
        const value =
          typeof params[slider.key] === 'number'
            ? (params[slider.key] as number)
            : slider.defaultValue;

        return (
          <div key={slider.key} className="slider-row">
            <label className="slider-label" htmlFor={`slider-${slider.key}`}>
              {slider.label}
            </label>
            <input
              id={`slider-${slider.key}`}
              type="range"
              className="slider-input"
              min={slider.min}
              max={slider.max}
              step={slider.step}
              value={value}
              onChange={(e) =>
                handleChange(slider.key, parseFloat(e.target.value))
              }
            />
            <span className="slider-value">{value}</span>
          </div>
        );
      })}
    </div>
  );
}
