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

interface SafetyStockSettingsCardProps {
  settings: SafetyStockSettings;
  onChange: (settings: SafetyStockSettings) => void;
  disabled?: boolean;
}

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

  const handleStringChange = (field: keyof SafetyStockSettings, value: any) => {
    const stringValue = typeof value === 'object' && value !== null ? value[0] : value;
    onChange({
      ...settings,
      [field]: stringValue.toString(),
    });
  };

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

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

          {/* Method */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Método de Cálculo
            </label>
            <Select
              value={settings.method}
              onChange={(value) => handleStringChange('method', value)}
              disabled={disabled}
              options={[
                { value: 'statistical', label: 'Estadístico (Z×σ×√L)' },
                { value: 'fixed_percentage', label: 'Porcentaje Fijo (20%)' },
              ]}
            />
          </div>

          {/* Min Safety Stock */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Stock de Seguridad Mínimo (0-1000)
            </label>
            <Input
              type="number"
              min="0"
              max="1000"
              step="0.1"
              value={settings.min_safety_stock}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNumberChange('min_safety_stock', e.target.value)}
              disabled={disabled}
              className="w-full"
            />
          </div>

          {/* Max Safety Stock */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Stock de Seguridad Máximo (0-1000)
            </label>
            <Input
              type="number"
              min="0"
              max="1000"
              step="0.1"
              value={settings.max_safety_stock}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNumberChange('max_safety_stock', e.target.value)}
              disabled={disabled}
              className="w-full"
            />
          </div>

          {/* Reorder Point Calculation */}
          <div className="space-y-2 md:col-span-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Método de Punto de Reorden
            </label>
            <Select
              value={settings.reorder_point_calculation}
              onChange={(value) => handleStringChange('reorder_point_calculation', value)}
              disabled={disabled}
              options={[
                { value: 'safety_stock_plus_lead_time_demand', label: 'Stock de Seguridad + Demanda de Tiempo de Entrega' },
                { value: 'safety_stock_only', label: 'Solo Stock de Seguridad' },
                { value: 'fixed_quantity', label: 'Cantidad Fija' },
              ]}
            />
          </div>
        </div>
      </div>
    </Card>
  );
};

export default SafetyStockSettingsCard;
