'use client';

import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/Button';
import { AnomalyDetectionConfig } from '@/services/integrations/jira/anomaly-detection';

interface AnomalyConfigModalProps {
  isOpen: boolean;
  onClose: () => void;
  config: AnomalyDetectionConfig | null;
  onConfigUpdate: (config: AnomalyDetectionConfig) => Promise<void>;
}

export function AnomalyConfigModal({
  isOpen,
  onClose,
  config,
  onConfigUpdate,
}: AnomalyConfigModalProps) {
  if (!config) return null;

  const handleSubmit = async () => {
    await onConfigUpdate(config);
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Configuration de la détection d'anomalies"
    >
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Seuil de variance de vélocité (%)
          </label>
          <input
            type="number"
            value={config.velocityVarianceThreshold}
            onChange={(e) =>
              onConfigUpdate({
                ...config,
                velocityVarianceThreshold: Number(e.target.value),
              })
            }
            className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
            min="0"
            max="100"
          />
          <p className="text-xs text-gray-500 mt-1">
            Pourcentage de variance acceptable dans la vélocité
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Multiplicateur de cycle time
          </label>
          <input
            type="number"
            step="0.1"
            value={config.cycleTimeThreshold}
            onChange={(e) =>
              onConfigUpdate({
                ...config,
                cycleTimeThreshold: Number(e.target.value),
              })
            }
            className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
            min="1"
            max="5"
          />
          <p className="text-xs text-gray-500 mt-1">
            Multiplicateur au-delà duquel le cycle time est considéré anormal
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Ratio de déséquilibre de charge
          </label>
          <input
            type="number"
            step="0.1"
            value={config.workloadImbalanceThreshold}
            onChange={(e) =>
              onConfigUpdate({
                ...config,
                workloadImbalanceThreshold: Number(e.target.value),
              })
            }
            className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
            min="1"
            max="10"
          />
          <p className="text-xs text-gray-500 mt-1">
            Ratio maximum acceptable entre les charges de travail
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Taux de completion minimum (%)
          </label>
          <input
            type="number"
            value={config.completionRateThreshold}
            onChange={(e) =>
              onConfigUpdate({
                ...config,
                completionRateThreshold: Number(e.target.value),
              })
            }
            className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
            min="0"
            max="100"
          />
          <p className="text-xs text-gray-500 mt-1">
            Pourcentage minimum de completion des sprints
          </p>
        </div>

        <div className="flex gap-2 pt-4">
          <Button onClick={handleSubmit} className="flex-1">
            💾 Sauvegarder
          </Button>
          <Button onClick={onClose} variant="secondary" className="flex-1">
            Annuler
          </Button>
        </div>
      </div>
    </Modal>
  );
}
