import React from 'react';
import { ShoppingBag, Tag, Clock, TrendingUp, MapPin, Info } from 'lucide-react';
import { Input, SettingSection, SettingRow } from '../../../../../components/ui';
import type { OrderSettings } from '../../../../../api/types/settings';

interface OrderSettingsCardProps {
  settings: OrderSettings;
  onChange: (settings: OrderSettings) => void;
  disabled?: boolean;
}

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

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

  return (
    <SettingSection
      title="Pedidos y Reglas de Negocio"
      description="Configure order discounts, pricing rules, and delivery settings"
      icon={<ShoppingBag className="w-5 h-5" />}
    >
      <div className="divide-y divide-[var(--border-primary)]">
        {/* Discount & Pricing */}
        <div className="p-4 sm:p-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <Tag className="w-4 h-4 mr-2" />
            Descuentos y Precios
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <Input
              type="number"
              label="Descuento Máximo (%)"
              value={settings.max_discount_percentage}
              onChange={handleChange('max_discount_percentage')}
              disabled={disabled}
              min={0}
              max={100}
              step={1}
              placeholder="50.0"
              helperText="Porcentaje máximo de descuento permitido"
            />
          </div>
        </div>

        <SettingRow
          label="Habilitar descuentos en pedidos"
          description="Allow discounts to be applied to orders"
          icon={<Tag className="w-4 h-4" />}
          type="toggle"
          checked={settings.discount_enabled}
          onToggle={handleToggleChange('discount_enabled')}
          disabled={disabled}
          helpText="When enabled, discounts can be applied within the maximum limit"
        />

        <SettingRow
          label="Habilitar precios dinámicos"
          description="Automatically adjust prices based on demand and inventory"
          icon={<TrendingUp className="w-4 h-4" />}
          type="toggle"
          checked={settings.dynamic_pricing_enabled}
          onToggle={handleToggleChange('dynamic_pricing_enabled')}
          disabled={disabled}
          helpText="AI-powered dynamic pricing based on market conditions"
        />

        {/* Delivery Settings */}
        <div className="p-4 sm:p-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <MapPin className="w-4 h-4 mr-2" />
            Configuración de Entrega
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <Input
              type="number"
              label="Ventana de Entrega Predeterminada (horas)"
              value={settings.default_delivery_window_hours}
              onChange={handleChange('default_delivery_window_hours')}
              disabled={disabled}
              min={1}
              max={168}
              step={1}
              placeholder="48"
              helperText="Tiempo predeterminado para entrega"
            />
          </div>
        </div>

        <SettingRow
          label="Habilitar seguimiento de entregas"
          description="Allow customers to track their deliveries in real-time"
          icon={<MapPin className="w-4 h-4" />}
          type="toggle"
          checked={settings.delivery_tracking_enabled}
          onToggle={handleToggleChange('delivery_tracking_enabled')}
          disabled={disabled}
          helpText="Enables real-time delivery tracking for customers"
        />

        {/* 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">
                Reglas de Negocio
              </h5>
              <p className="text-xs text-blue-700 dark:text-blue-300 mb-2">
                Estos ajustes controlan las reglas de negocio que se aplican a los pedidos.
              </p>
              <ul className="text-xs text-blue-700 dark:text-blue-300 space-y-1 list-disc list-inside">
                <li><strong>Precios dinámicos:</strong> Ajusta automáticamente los precios según demanda, inventario y otros factores</li>
                <li><strong>Descuentos:</strong> Permite aplicar descuentos a productos y pedidos dentro del límite establecido</li>
                <li><strong>Seguimiento de entregas:</strong> Permite a los clientes rastrear sus pedidos en tiempo real</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </SettingSection>
  );
};

export default OrderSettingsCard;