import React from 'react';
import { Card } from '@components/ui';
import { SupplierSelectionSettings } from '@services/types/settings';
import { Slider } from '@components/ui/Slider';
import { Input } from '@components/ui/Input';

interface SupplierSelectionSettingsCardProps {
  settings: SupplierSelectionSettings;
  onChange: (settings: SupplierSelectionSettings) => void;
  disabled?: boolean;
}

const SupplierSelectionSettingsCard: React.FC<SupplierSelectionSettingsCardProps> = ({
  settings,
  onChange,
  disabled = false,
}) => {
  const handleNumberChange = (field: keyof SupplierSelectionSettings, value: string) => {
    const numValue = value === '' ? 0 : Number(value);
    onChange({
      ...settings,
      [field]: numValue,
    });
  };

  const handleToggleChange = (field: keyof SupplierSelectionSettings, value: boolean) => {
    onChange({
      ...settings,
      [field]: value,
    });
  };

  return (
    <Card className="p-6">
      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6">
        Configuración de Selección de Proveedores
      </h3>

      <div className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Price Weight */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Peso del Precio ({(settings.price_weight * 100).toFixed(0)}%)
            </label>
            <Slider
              min={0}
              max={1}
              step={0.01}
              value={[settings.price_weight]}
              onValueChange={([value]: number[]) => handleNumberChange('price_weight', value.toString())}
              disabled={disabled}
            />
          </div>

          {/* Lead Time Weight */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Peso del Tiempo de Entrega ({(settings.lead_time_weight * 100).toFixed(0)}%)
            </label>
            <Slider
              min={0}
              max={1}
              step={0.01}
              value={[settings.lead_time_weight]}
              onValueChange={([value]: number[]) => handleNumberChange('lead_time_weight', value.toString())}
              disabled={disabled}
            />
          </div>

          {/* Quality Weight */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Peso de la Calidad ({(settings.quality_weight * 100).toFixed(0)}%)
            </label>
            <Slider
              min={0}
              max={1}
              step={0.01}
              value={[settings.quality_weight]}
              onValueChange={([value]: number[]) => handleNumberChange('quality_weight', value.toString())}
              disabled={disabled}
            />
          </div>

          {/* Reliability Weight */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Peso de la Confiabilidad ({(settings.reliability_weight * 100).toFixed(0)}%)
            </label>
            <Slider
              min={0}
              max={1}
              step={0.01}
              value={[settings.reliability_weight]}
              onValueChange={([value]: number[]) => handleNumberChange('reliability_weight', value.toString())}
              disabled={disabled}
            />
          </div>

          {/* Diversification Threshold */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Umbral de Diversificación (0-1000)
            </label>
            <Input
              type="number"
              min="0"
              max="1000"
              value={settings.diversification_threshold}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNumberChange('diversification_threshold', e.target.value)}
              disabled={disabled}
              className="w-full"
            />
          </div>

          {/* Max Single Percentage */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Máximo % para Proveedor Único ({(settings.max_single_percentage * 100).toFixed(0)}%)
            </label>
            <Slider
              min={0}
              max={1}
              step={0.01}
              value={[settings.max_single_percentage]}
              onValueChange={([value]: number[]) => handleNumberChange('max_single_percentage', value.toString())}
              disabled={disabled}
            />
          </div>
        </div>

        {/* Enable Supplier Score Optimization Toggle */}
        <div className="flex items-center gap-2">
          <input
            type="checkbox"
            id="enable_supplier_score_optimization"
            checked={settings.enable_supplier_score_optimization}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleToggleChange('enable_supplier_score_optimization', e.target.checked)}
            disabled={disabled}
            className="rounded border-[var(--border-primary)]"
          />
          <label htmlFor="enable_supplier_score_optimization" className="text-sm text-[var(--text-secondary)]">
            Habilitar Optimización por Puntuación de Proveedores
          </label>
        </div>
      </div>
    </Card>
  );
};

export default SupplierSelectionSettingsCard;
