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

interface ReplenishmentSettingsCardProps {
  settings: ReplenishmentSettings;
  onChange: (settings: ReplenishmentSettings) => void;
  disabled?: boolean;
}

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

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

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

      <div className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Projection Horizon Days */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Días de Proyección (1-30)
            </label>
            <Input
              type="number"
              min="1"
              max="30"
              value={settings.projection_horizon_days}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNumberChange('projection_horizon_days', e.target.value)}
              disabled={disabled}
              className="w-full"
            />
          </div>

          {/* 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>

          {/* Buffer Days */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Días de Buffer (0-14)
            </label>
            <Input
              type="number"
              min="0"
              max="14"
              value={settings.buffer_days}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNumberChange('buffer_days', e.target.value)}
              disabled={disabled}
              className="w-full"
            />
          </div>

          {/* Demand Forecast Days */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Días de Previsión de Demanda (1-90)
            </label>
            <Input
              type="number"
              min="1"
              max="90"
              value={settings.demand_forecast_days}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNumberChange('demand_forecast_days', e.target.value)}
              disabled={disabled}
              className="w-full"
            />
          </div>

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

          {/* Max Order Quantity */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Cantidad Máxima de Pedido (1-1000)
            </label>
            <Input
              type="number"
              min="1"
              max="10000"
              step="1"
              value={settings.max_order_quantity}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNumberChange('max_order_quantity', e.target.value)}
              disabled={disabled}
              className="w-full"
            />
          </div>
        </div>

        {/* Enable Auto Replenishment Toggle */}
        <div className="flex items-center gap-2">
          <input
            type="checkbox"
            id="enable_auto_replenishment"
            checked={settings.enable_auto_replenishment}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleToggleChange('enable_auto_replenishment', e.target.checked)}
            disabled={disabled}
            className="rounded border-[var(--border-primary)]"
          />
          <label htmlFor="enable_auto_replenishment" className="text-sm text-[var(--text-secondary)]">
            Habilitar Reposición Automática
          </label>
        </div>
      </div>
    </Card>
  );
};

export default ReplenishmentSettingsCard;
