frontend/components/ControlPanel.tsx

'use client'

import { Settings, Gauge, Zap, Clock } from 'lucide-react'

interface Config {
  threshold: number
  batchSize: number
  speed: number
}

interface ControlPanelProps {
  config: Config
  setConfig: (config: Config) => void
}

export default function ControlPanel({ config, setConfig }: ControlPanelProps) {
  return (
    <div className="glass rounded-xl p-6">
      <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
        <Settings className="w-5 h-5 text-primary-500" />
        Configuration
      </h3>
      
      <div className="space-y-6">
        {/* Threshold slider */}
        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="text-sm text-dark-300 flex items-center gap-2">
              <Gauge className="w-4 h-4" />
              Fraud Threshold
            </label>
            <span className="text-sm font-mono text-primary-500">{config.threshold.toFixed(2)}</span>
          </div>
          <input
            type="range"
            min="0"
            max="1"
            step="0.05"
            value={config.threshold}
            onChange={(e) => setConfig({ ...config, threshold: parseFloat(e.target.value) })}
            className="w-full h-2 bg-dark-700 rounded-lg appearance-none cursor-pointer accent-primary-500"
          />
          <div className="flex justify-between text-xs text-dark-500 mt-1">
            <span>Sensitive (0.0)</span>
            <span>Conservative (1.0)</span>
          </div>
        </div>
        
        {/* Batch size slider */}
        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="text-sm text-dark-300 flex items-center gap-2">
              <Zap className="w-4 h-4" />
              Batch Size
            </label>
            <span className="text-sm font-mono text-primary-500">{config.batchSize}</span>
          </div>
          <input
            type="range"
            min="1"
            max="50"
            step="1"
            value={config.batchSize}
            onChange={(e) => setConfig({ ...config, batchSize: parseInt(e.target.value) })}
            className="w-full h-2 bg-dark-700 rounded-lg appearance-none cursor-pointer accent-primary-500"
          />
          <div className="flex justify-between text-xs text-dark-500 mt-1">
            <span>Detailed (1)</span>
            <span>Fast (50)</span>
          </div>
        </div>
        
        {/* Speed slider */}
        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="text-sm text-dark-300 flex items-center gap-2">
              <Clock className="w-4 h-4" />
              Processing Speed
            </label>
            <span className="text-sm font-mono text-primary-500">{config.speed.toFixed(1)}s</span>
          </div>
          <input
            type="range"
            min="0.1"
            max="3"
            step="0.1"
            value={config.speed}
            onChange={(e) => setConfig({ ...config, speed: parseFloat(e.target.value) })}
            className="w-full h-2 bg-dark-700 rounded-lg appearance-none cursor-pointer accent-primary-500"
          />
          <div className="flex justify-between text-xs text-dark-500 mt-1">
            <span>Fast (0.1s)</span>
            <span>Slow (3.0s)</span>
          </div>
        </div>
      </div>
      
      {/* Config summary */}
      <div className="mt-6 pt-4 border-t border-dark-700">
        <p className="text-xs text-dark-400">
          💡 Lower threshold = More fraud alerts (higher recall)<br/>
          💡 Higher threshold = Fewer false positives (higher precision)
        </p>
      </div>
    </div>
  )
}