import React from 'react';
import { Smartphone, RefreshCw, Clock } from 'lucide-react';
import { Card, Input } 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 });
  };

  return (
    <Card className="p-6">
      <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-6 flex items-center">
        <Smartphone className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
        Punto de Venta (POS)
      </h3>

      <div className="space-y-6">
        {/* Sync Settings */}
        <div>
          <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="space-y-4 pl-6">
            <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 con el sistema central"
            />

            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="auto_sync_products"
                  checked={settings.auto_sync_products}
                  onChange={handleChange('auto_sync_products')}
                  disabled={disabled}
                  className="rounded border-[var(--border-primary)]"
                />
                <label htmlFor="auto_sync_products" className="text-sm text-[var(--text-secondary)]">
                  Sincronización automática de productos
                </label>
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="auto_sync_transactions"
                  checked={settings.auto_sync_transactions}
                  onChange={handleChange('auto_sync_transactions')}
                  disabled={disabled}
                  className="rounded border-[var(--border-primary)]"
                />
                <label htmlFor="auto_sync_transactions" className="text-sm text-[var(--text-secondary)]">
                  Sincronización automática de transacciones
                </label>
              </div>
            </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">
            <Smartphone 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">
                Integración POS
              </h5>
              <p className="text-xs text-blue-700 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 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>
    </Card>
  );
};

export default POSSettingsCard;
