import React from 'react';
import { Truck, Calendar, TrendingUp, AlertTriangle, Info } from 'lucide-react';
import { Input, SettingSection } from '../../../../../components/ui';
import type { SupplierSettings } from '../../../../../api/types/settings';

interface SupplierSettingsCardProps {
  settings: SupplierSettings;
  onChange: (settings: SupplierSettings) => void;
  disabled?: boolean;
}

const SupplierSettingsCard: React.FC<SupplierSettingsCardProps> = ({
  settings,
  onChange,
  disabled = false,
}) => {
  const handleChange = (field: keyof SupplierSettings) => (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const value = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
    onChange({ ...settings, [field]: value });
  };

  return (
    <SettingSection
      title="Gestión de Proveedores"
      description="Configure supplier performance thresholds and default terms"
      icon={<Truck className="w-5 h-5" />}
    >
      <div className="divide-y divide-[var(--border-primary)]">
        {/* Default Terms */}
        <div className="p-4 sm:p-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <Calendar className="w-4 h-4 mr-2" />
            Términos Predeterminados
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input
              type="number"
              label="Plazo de Pago Predeterminado (días)"
              value={settings.default_payment_terms_days}
              onChange={handleChange('default_payment_terms_days')}
              disabled={disabled}
              min={1}
              max={90}
              step={1}
              placeholder="30"
            />

            <Input
              type="number"
              label="Días de Entrega Predeterminados"
              value={settings.default_delivery_days}
              onChange={handleChange('default_delivery_days')}
              disabled={disabled}
              min={1}
              max={30}
              step={1}
              placeholder="3"
            />
          </div>
        </div>

        {/* Performance Thresholds - Delivery */}
        <div className="p-4 sm:p-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <TrendingUp className="w-4 h-4 mr-2" />
            Umbrales de Rendimiento - Entregas
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input
              type="number"
              label="Tasa de Entrega Excelente (%)"
              value={settings.excellent_delivery_rate}
              onChange={handleChange('excellent_delivery_rate')}
              disabled={disabled}
              min={90}
              max={100}
              step={0.5}
              placeholder="95.0"
            />

            <Input
              type="number"
              label="Tasa de Entrega Buena (%)"
              value={settings.good_delivery_rate}
              onChange={handleChange('good_delivery_rate')}
              disabled={disabled}
              min={80}
              max={99}
              step={0.5}
              placeholder="90.0"
            />
          </div>
        </div>

        {/* Performance Thresholds - Quality */}
        <div className="p-4 sm:p-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <TrendingUp className="w-4 h-4 mr-2" />
            Umbrales de Rendimiento - Calidad
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input
              type="number"
              label="Tasa de Calidad Excelente (%)"
              value={settings.excellent_quality_rate}
              onChange={handleChange('excellent_quality_rate')}
              disabled={disabled}
              min={90}
              max={100}
              step={0.5}
              placeholder="98.0"
            />

            <Input
              type="number"
              label="Tasa de Calidad Buena (%)"
              value={settings.good_quality_rate}
              onChange={handleChange('good_quality_rate')}
              disabled={disabled}
              min={80}
              max={99}
              step={0.5}
              placeholder="95.0"
            />
          </div>
        </div>

        {/* Critical Alerts */}
        <div className="p-4 sm:p-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <AlertTriangle className="w-4 h-4 mr-2" />
            Alertas Críticas
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            <Input
              type="number"
              label="Retraso de Entrega Crítico (horas)"
              value={settings.critical_delivery_delay_hours}
              onChange={handleChange('critical_delivery_delay_hours')}
              disabled={disabled}
              min={1}
              max={168}
              step={1}
              placeholder="24"
            />

            <Input
              type="number"
              label="Tasa de Rechazo de Calidad Crítica (%)"
              value={settings.critical_quality_rejection_rate}
              onChange={handleChange('critical_quality_rejection_rate')}
              disabled={disabled}
              min={0}
              max={50}
              step={0.5}
              placeholder="10.0"
            />

            <Input
              type="number"
              label="Varianza de Coste Alta (%)"
              value={settings.high_cost_variance_percentage}
              onChange={handleChange('high_cost_variance_percentage')}
              disabled={disabled}
              min={0}
              max={100}
              step={1}
              placeholder="15.0"
            />
          </div>
        </div>

        {/* Info Box */}
        <div className="p-4 sm:p-6 bg-blue-50 dark:bg-blue-900/20">
          <div className="flex items-start gap-3">
            <Info className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
            <div className="flex-1">
              <h5 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-1">
                Evaluación de Proveedores
              </h5>
              <p className="text-xs text-blue-700 dark:text-blue-300">
                Estos umbrales se utilizan para evaluar automáticamente el rendimiento de los proveedores.
                Los proveedores con rendimiento por debajo de los umbrales "buenos" recibirán alertas automáticas.
              </p>
            </div>
          </div>
        </div>
      </div>
    </SettingSection>
  );
};

export default SupplierSettingsCard;