import React from 'react';
import { ShoppingBag, Tag, Clock, TrendingUp, MapPin } from 'lucide-react';
import { Card, Input } 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 });
  };

  return (
    <Card className="p-6">
      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
        <ShoppingBag className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
        Pedidos y Reglas de Negocio
      </h3>

      <div className="space-y-6">
        {/* Discount & Pricing */}
        <div>
          <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="space-y-4 pl-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-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 en pedidos"
              />
            </div>

            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="discount_enabled"
                  checked={settings.discount_enabled}
                  onChange={handleChange('discount_enabled')}
                  disabled={disabled}
                  className="rounded border-[var(--border-primary)]"
                />
                <label htmlFor="discount_enabled" className="text-sm text-[var(--text-secondary)]">
                  Habilitar descuentos en pedidos
                </label>
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="dynamic_pricing_enabled"
                  checked={settings.dynamic_pricing_enabled}
                  onChange={handleChange('dynamic_pricing_enabled')}
                  disabled={disabled}
                  className="rounded border-[var(--border-primary)]"
                />
                <label htmlFor="dynamic_pricing_enabled" className="text-sm text-[var(--text-secondary)]">
                  Habilitar precios dinámicos
                </label>
              </div>
            </div>
          </div>
        </div>

        {/* Delivery Settings */}
        <div>
          <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="space-y-4 pl-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-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 la entrega de pedidos"
              />
            </div>

            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="delivery_tracking_enabled"
                checked={settings.delivery_tracking_enabled}
                onChange={handleChange('delivery_tracking_enabled')}
                disabled={disabled}
                className="rounded border-[var(--border-primary)]"
              />
              <label htmlFor="delivery_tracking_enabled" className="text-sm text-[var(--text-secondary)]">
                Habilitar seguimiento de entregas
              </label>
            </div>
          </div>
        </div>

        {/* Info Box */}
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
          <div className="flex items-start gap-3">
            <TrendingUp className="w-5 h-5 text-blue-600 mt-0.5" />
            <div className="flex-1">
              <h5 className="text-sm font-semibold text-blue-900 mb-1">
                Reglas de Negocio
              </h5>
              <p className="text-xs text-blue-700 mb-2">
                Estos ajustes controlan las reglas de negocio que se aplican a los pedidos.
              </p>
              <ul className="text-xs text-blue-700 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>
    </Card>
  );
};

export default OrderSettingsCard;