import React from 'react';
import { Smartphone, RefreshCw, Clock, Info } from 'lucide-react';
import { Input, SettingSection, SettingRow } from '../../../../../components/ui';
import type { POSSettings } from '../../../../../api/types/settings';

interface POSSettingsCardProps {
  settings: POSSettings;
  onChange: (settings: POSSettings) => void;
  disabled?: boolean;
}

const POSSettingsCard: React.FC<POSSettingsCardProps> = ({
  settings,
  onChange,
  disabled = false,
}) => {
  const handleChange = (field: keyof POSSettings) => (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const value = e.target.type === 'checkbox' ? e.target.checked :
                  e.target.type === 'number' ? parseInt(e.target.value, 10) :
                  e.target.value;
    onChange({ ...settings, [field]: value });
  };

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

  return (
    <SettingSection
      title="Punto de Venta (POS)"
      description="Configure POS system sync settings and integration options"
      icon={<Smartphone className="w-5 h-5" />}
    >
      <div className="divide-y divide-[var(--border-primary)]">
        {/* Sync Settings */}
        <div className="p-4 sm:p-6">
          <h4 className="text-sm font-semibold text-[var(--text-secondary)] mb-4 flex items-center">
            <RefreshCw className="w-4 h-4 mr-2" />
            Sincronización
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Input
              type="number"
              label="Intervalo de Sincronización (minutos)"
              value={settings.sync_interval_minutes}
              onChange={handleChange('sync_interval_minutes')}
              disabled={disabled}
              min={1}
              max={60}
              step={1}
              placeholder="5"
              helperText="Frecuencia con la que se sincroniza el POS"
            />
          </div>
        </div>

        {/* Auto-sync Options */}
        <SettingRow
          label="Sincronización automática de productos"
          description="Automatically sync product changes to POS terminals"
          icon={<RefreshCw className="w-4 h-4" />}
          type="toggle"
          checked={settings.auto_sync_products}
          onToggle={handleToggleChange('auto_sync_products')}
          disabled={disabled}
          helpText="When enabled, product updates are immediately pushed to POS"
        />

        <SettingRow
          label="Sincronización automática de transacciones"
          description="Automatically sync transactions from POS terminals"
          icon={<RefreshCw className="w-4 h-4" />}
          type="toggle"
          checked={settings.auto_sync_transactions}
          onToggle={handleToggleChange('auto_sync_transactions')}
          disabled={disabled}
          helpText="When enabled, sales are automatically synced from POS"
        />

        {/* 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">
                Integración POS
              </h5>
              <p className="text-xs text-blue-700 dark:text-blue-300 mb-2">
                Estos ajustes controlan cómo se sincroniza la información entre el sistema central
                y los terminales de punto de venta.
              </p>
              <ul className="text-xs text-blue-700 dark:text-blue-300 space-y-1 list-disc list-inside">
                <li>Un intervalo más corto mantiene los datos más actualizados pero consume más recursos</li>
                <li>La sincronización automática garantiza que los cambios se reflejen inmediatamente</li>
                <li>Desactivar la sincronización automática requiere sincronización manual</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </SettingSection>
  );
};

export default POSSettingsCard;
