import { Undo2, Redo2, RotateCcw, Download, Loader2 } from 'lucide-react';

function Slider({ label, value, onChange, min, max, step = 0.05, unit = '', onBegin, fmt }) {
  return (
    <label className="block">
      <span className="flex items-center justify-between text-[11px] text-slate-400"><span>{label}</span><b className="mono text-slate-200">{fmt ? fmt(value) : `${value}${unit}`}</b></span>
      <input type="range" min={min} max={max} step={step} value={value}
        onMouseDown={onBegin} onTouchStart={onBegin}
        onChange={e => onChange(Number(e.target.value))} className="mt-1 w-full accent-cyan-400" />
    </label>
  );
}
function Toggle({ label, checked, onChange, onBegin }) {
  return (
    <label className="flex items-center justify-between rounded-lg border border-white/[0.06] bg-black/20 px-2.5 py-1.5 text-[11px] text-slate-300">
      <span>{label}</span>
      <input type="checkbox" checked={checked} onChange={e => { onBegin?.(); onChange(e.target.checked); }} className="h-3.5 w-3.5 accent-cyan-400" />
    </label>
  );
}

export default function CleanupControls({ s, set, beginInteraction, onUndo, onRedo, onResetAll, onExport, canUndo, canRedo, exporting }) {
  const wrap = (key) => (v) => set({ [key]: v });
  return (
    <div className="space-y-3">
      <div className="flex flex-wrap gap-1.5">
        <button disabled={!canUndo} onClick={onUndo} className="tool-button"><Undo2 size={13} />Undo</button>
        <button disabled={!canRedo} onClick={onRedo} className="tool-button"><Redo2 size={13} />Redo</button>
        <button onClick={onResetAll} className="tool-button"><RotateCcw size={13} />Reset all</button>
        <button disabled={exporting} onClick={onExport} className="btn-primary ml-auto !min-h-9 px-3 text-xs">
          {exporting ? <><Loader2 size={13} className="animate-spin" />Saving…</> : <><Download size={13} />Export PNG</>}
        </button>
      </div>

      <div className="grid grid-cols-2 gap-2.5">
        <Slider label="Brightness" value={s.brightness} min={0.2} max={2} step={0.05} onBegin={beginInteraction} onChange={wrap('brightness')} fmt={v => `${v.toFixed(2)}×`} />
        <Slider label="Contrast" value={s.contrast} min={0.2} max={2} step={0.05} onBegin={beginInteraction} onChange={wrap('contrast')} fmt={v => `${v.toFixed(2)}×`} />
      </div>
      <Toggle label="Greyscale" checked={s.greyscale} onChange={wrap('greyscale')} onBegin={beginInteraction} />
      <Toggle label="Black & white threshold" checked={s.thresholdEnabled} onChange={wrap('thresholdEnabled')} onBegin={beginInteraction} />
      {s.thresholdEnabled && <Slider label="Threshold" value={s.threshold} min={0.05} max={0.95} step={0.01} onBegin={beginInteraction} onChange={wrap('threshold')} fmt={v => v.toFixed(2)} />}
      <Toggle label="Invert" checked={s.invert} onChange={wrap('invert')} onBegin={beginInteraction} />
      <Toggle label="Remove white background" checked={s.removeWhiteBackground} onChange={wrap('removeWhiteBackground')} onBegin={beginInteraction} />
      {s.removeWhiteBackground && <Slider label="White tolerance" value={s.whiteTolerance} min={0.5} max={0.99} step={0.01} onBegin={beginInteraction} onChange={wrap('whiteTolerance')} fmt={v => v.toFixed(2)} />}
      <Toggle label="Remove transparent padding" checked={s.trimPadding} onChange={wrap('trimPadding')} onBegin={beginInteraction} />
      <Slider label="Noise removal" value={s.noiseRemoval} min={0} max={1} step={0.05} onBegin={beginInteraction} onChange={wrap('noiseRemoval')} fmt={v => v.toFixed(2)} />
      <Toggle label="Remove isolated pixels" checked={s.removeIsolated} onChange={wrap('removeIsolated')} onBegin={beginInteraction} />
      <Slider label="Edge smoothing" value={s.edgeSmoothing} min={0} max={1} step={0.05} onBegin={beginInteraction} onChange={wrap('edgeSmoothing')} fmt={v => v.toFixed(2)} />
      <Slider label="Edge sharpening" value={s.edgeSharpening} min={0} max={1} step={0.05} onBegin={beginInteraction} onChange={wrap('edgeSharpening')} fmt={v => v.toFixed(2)} />
      <Slider label="Minimum line thickness" value={s.minLineThickness} min={0} max={8} step={1} onBegin={beginInteraction} onChange={wrap('minLineThickness')} fmt={v => `${v}px`} />
      <Slider label="Close small gaps" value={s.closeGaps} min={0} max={8} step={1} onBegin={beginInteraction} onChange={wrap('closeGaps')} fmt={v => `${v}px`} />
      <Slider label="Remove small regions" value={s.removeSmallRegions} min={0} max={400} step={10} onBegin={beginInteraction} onChange={wrap('removeSmallRegions')} fmt={v => `${v}px²`} />
      <Slider label="Preserve detail" value={s.preserveDetail} min={0} max={1} step={0.05} onBegin={beginInteraction} onChange={wrap('preserveDetail')} fmt={v => v.toFixed(2)} />
    </div>
  );
}