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

interface MOQSettingsCardProps {
  settings: MOQSettings;
  onChange: (settings: MOQSettings) => void;
 disabled?: boolean;
}

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

  const handleToggleChange = (field: keyof MOQSettings, 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 MOQ (Cantidad Mínima de Pedido)
      </h3>

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

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

          {/* Max Batch Size */}
          <div className="space-y-2">
            <label className="text-sm font-medium text-[var(--text-secondary)]">
              Tamaño Máximo de Lote (1-10000)
            </label>
            <Input
              type="number"
              min="1"
              max="10000"
              step="1"
              value={settings.max_batch_size}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleNumberChange('max_batch_size', e.target.value)}
              disabled={disabled}
              className="w-full"
            />
          </div>
        </div>

        {/* Toggle Options */}
        <div className="space-y-3">
          <div className="flex items-center gap-2">
            <input
              type="checkbox"
              id="allow_early_ordering"
              checked={settings.allow_early_ordering}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleToggleChange('allow_early_ordering', e.target.checked)}
              disabled={disabled}
              className="rounded border-[var(--border-primary)]"
            />
            <label htmlFor="allow_early_ordering" className="text-sm text-[var(--text-secondary)]">
              Permitir Pedido Anticipado
            </label>
          </div>

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

export default MOQSettingsCard;
