import React, { useState, useEffect } from 'react';
import { Card } from '../../../../components/ui/Card';
import { Button } from '../../../../components/ui/Button';
import { Input } from '../../../../components/ui/Input';
import { Select } from '../../../../components/ui/Select';
import { Badge } from '../../../../components/ui/Badge';
import {
  Bell,
  Mail,
  MessageSquare,
  Smartphone,
  Save,
  RotateCcw,
  Clock,
  Globe,
  Volume2,
  VolumeX,
  AlertTriangle,
  TrendingUp,
  Megaphone,
  FileText,
  Moon,
  Sun,
  Settings
} from 'lucide-react';
import { showToast } from '../../../../utils/toast';

// Backend-aligned preference types
export interface NotificationPreferences {
  // Email preferences
  email_enabled: boolean;
  email_alerts: boolean;
  email_marketing: boolean;
  email_reports: boolean;

  // WhatsApp preferences
  whatsapp_enabled: boolean;
  whatsapp_alerts: boolean;
  whatsapp_reports: boolean;

  // Push notification preferences
  push_enabled: boolean;
  push_alerts: boolean;
  push_reports: boolean;

  // Timing preferences
  quiet_hours_start: string;
  quiet_hours_end: string;
  timezone: string;

  // Frequency preferences
  digest_frequency: 'none' | 'daily' | 'weekly';
  max_emails_per_day: number;

  // Language preference
  language: string;
}

interface CommunicationPreferencesProps {
  userEmail?: string;
  userPhone?: string;
  userLanguage?: string;
  userTimezone?: string;
  onSave: (preferences: NotificationPreferences) => Promise<void>;
  onReset: () => void;
  hasChanges: boolean;
  onPreferencesChange?: (preferences: NotificationPreferences) => void;
}

const CommunicationPreferences: React.FC<CommunicationPreferencesProps> = ({
  userEmail = '',
  userPhone = '',
  userLanguage = 'es',
  userTimezone = 'Europe/Madrid',
  onSave,
  onReset,
  hasChanges
}) => {
  
  const [isLoading, setIsLoading] = useState(false);

  const [preferences, setPreferences] = useState<NotificationPreferences>({
    // Email preferences
    email_enabled: true,
    email_alerts: true,
    email_marketing: false,
    email_reports: true,

    // WhatsApp preferences
    whatsapp_enabled: false,
    whatsapp_alerts: false,
    whatsapp_reports: false,

    // Push notification preferences
    push_enabled: true,
    push_alerts: true,
    push_reports: false,

    // Timing preferences
    quiet_hours_start: '22:00',
    quiet_hours_end: '08:00',
    timezone: userTimezone,

    // Frequency preferences
    digest_frequency: 'daily',
    max_emails_per_day: 10,

    // Language preference
    language: userLanguage
  });

  const [contactInfo, setContactInfo] = useState({
    email: userEmail,
    phone: userPhone
  });

  // Language options
  const languageOptions = [
    { value: 'es', label: 'Español' },
    { value: 'en', label: 'English' }
  ];

  // Timezone options
  const timezoneOptions = [
    { value: 'Europe/Madrid', label: 'Madrid (CET/CEST)' },
    { value: 'Atlantic/Canary', label: 'Canarias (WET/WEST)' },
    { value: 'Europe/London', label: 'Londres (GMT/BST)' },
    { value: 'Europe/Paris', label: 'París (CET/CEST)' }
  ];

  // Digest frequency options
  const digestOptions = [
    { value: 'none', label: 'Sin resumen' },
    { value: 'daily', label: 'Resumen diario' },
    { value: 'weekly', label: 'Resumen semanal' }
  ];

  // Max emails per day options
  const maxEmailsOptions = [
    { value: 5, label: '5 emails/día' },
    { value: 10, label: '10 emails/día' },
    { value: 20, label: '20 emails/día' },
    { value: 50, label: '50 emails/día' },
    { value: 100, label: 'Sin límite' }
  ];

  const handlePreferenceChange = (key: keyof NotificationPreferences, value: any) => {
    const newPreferences = {
      ...preferences,
      [key]: value
    };
    setPreferences(newPreferences);
    
    // Notify parent component about changes
    if (onPreferencesChange) {
      onPreferencesChange(newPreferences);
    }
  };

  const handleContactChange = (field: 'email' | 'phone', value: string) => {
    setContactInfo(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSave = async () => {
    try {
      setIsLoading(true);
      await onSave(preferences);
      showToast.success('Preferencias guardadas correctamente');
    } catch (error) {
      showToast.error('Error al guardar las preferencias');
    } finally {
      setIsLoading(false);
    }
  };

  const getChannelIcon = (channel: string) => {
    switch (channel) {
      case 'push':
        return <Bell className="w-4 h-4 text-blue-500" />;
      case 'email':
        return <Mail className="w-4 h-4 text-green-500" />;
      case 'whatsapp':
        return <MessageSquare className="w-4 h-4 text-green-600" />;
      case 'sms':
        return <Smartphone className="w-4 h-4 text-purple-500" />;
      default:
        return <Bell className="w-4 h-4" />;
    }
  };

  const getCategoryIcon = (category: string) => {
    switch (category) {
      case 'alerts':
        return <AlertTriangle className="w-5 h-5 text-red-500" />;
      case 'reports':
        return <TrendingUp className="w-5 h-5 text-blue-500" />;
      case 'marketing':
        return <Megaphone className="w-5 h-5 text-purple-500" />;
      default:
        return <FileText className="w-5 h-5 text-gray-500" />;
    }
  };

  const isQuietHoursEnabled = () => {
    return preferences.quiet_hours_start !== preferences.quiet_hours_end;
  };

  return (
    <div className="space-y-6">
      {/* Action Buttons */}
      <div className="flex justify-end gap-3">
        <Button
          variant="outline"
          onClick={onReset}
          disabled={!hasChanges || isLoading}
          className="flex items-center gap-2"
        >
          <RotateCcw className="w-4 h-4" />
          Restaurar
        </Button>
        <Button
          variant="primary"
          onClick={handleSave}
          disabled={!hasChanges || isLoading}
          isLoading={isLoading}
          loadingText="Guardando..."
          className="flex items-center gap-2"
        >
          <Save className="w-4 h-4" />
          Guardar Cambios
        </Button>
      </div>

      {/* Contact Information */}
      <Card className="p-6">
        <div className="flex items-center gap-3 mb-6">
          <div className="p-2 bg-blue-500/10 rounded-lg">
            <Settings className="w-5 h-5 text-blue-500" />
          </div>
          <div>
            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
              Información de Contacto
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              Configura tus canales de comunicación
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Input
            label="Email"
            type="email"
            value={contactInfo.email}
            onChange={(e) => handleContactChange('email', e.target.value)}
            leftIcon={<Mail className="w-4 h-4" />}
            placeholder="tu-email@ejemplo.com"
          />

          <Input
            label="Teléfono (WhatsApp)"
            type="tel"
            value={contactInfo.phone}
            onChange={(e) => handleContactChange('phone', e.target.value)}
            leftIcon={<MessageSquare className="w-4 h-4" />}
            placeholder="+34 600 123 456"
          />
        </div>
      </Card>

      {/* Global Settings */}
      <Card className="p-6">
        <div className="flex items-center gap-3 mb-6">
          <div className="p-2 bg-purple-500/10 rounded-lg">
            <Globe className="w-5 h-5 text-purple-500" />
          </div>
          <div>
            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
              Configuración General
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              Idioma, zona horaria y configuración de silencio
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Select
            label="Idioma"
            options={languageOptions}
            value={preferences.language}
            onChange={(value) => handlePreferenceChange('language', value)}
            leftIcon={<Globe className="w-4 h-4" />}
          />

          <Select
            label="Zona Horaria"
            options={timezoneOptions}
            value={preferences.timezone}
            onChange={(value) => handlePreferenceChange('timezone', value)}
            leftIcon={<Clock className="w-4 h-4" />}
          />

          <Select
            label="Frecuencia de Resumen"
            options={digestOptions}
            value={preferences.digest_frequency}
            onChange={(value) => handlePreferenceChange('digest_frequency', value)}
            leftIcon={<FileText className="w-4 h-4" />}
          />
        </div>

        {/* Quiet Hours */}
        <div className="mt-6 p-4 bg-[var(--bg-secondary)] rounded-lg">
          <div className="flex items-center gap-3 mb-4">
            {isQuietHoursEnabled() ? (
              <Moon className="w-5 h-5 text-indigo-500" />
            ) : (
              <Sun className="w-5 h-5 text-yellow-500" />
            )}
            <div>
              <h4 className="font-medium text-[var(--text-primary)]">Horas Silenciosas</h4>
              <p className="text-sm text-[var(--text-secondary)]">
                Sin notificaciones durante este periodo
              </p>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Desde
              </label>
              <input
                type="time"
                value={preferences.quiet_hours_start}
                onChange={(e) => handlePreferenceChange('quiet_hours_start', e.target.value)}
                className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                Hasta
              </label>
              <input
                type="time"
                value={preferences.quiet_hours_end}
                onChange={(e) => handlePreferenceChange('quiet_hours_end', e.target.value)}
                className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)]"
              />
            </div>
          </div>
        </div>
      </Card>

      {/* Notification Categories */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Alerts */}
        <Card className="p-6">
          <div className="flex items-center gap-3 mb-6">
            {getCategoryIcon('alerts')}
            <div>
              <h3 className="font-semibold text-[var(--text-primary)]">Alertas</h3>
              <p className="text-sm text-[var(--text-secondary)]">
                Notificaciones urgentes e importantes
              </p>
            </div>
          </div>

          <div className="space-y-4">
            {/* Push Alerts */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                {getChannelIcon('push')}
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  App Push
                </span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.push_alerts}
                  onChange={(e) => handlePreferenceChange('push_alerts', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>

            {/* Email Alerts */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                {getChannelIcon('email')}
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  Email
                </span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.email_alerts}
                  onChange={(e) => handlePreferenceChange('email_alerts', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>

            {/* WhatsApp Alerts */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                {getChannelIcon('whatsapp')}
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  WhatsApp
                </span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.whatsapp_alerts}
                  onChange={(e) => handlePreferenceChange('whatsapp_alerts', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>
          </div>
        </Card>

        {/* Reports */}
        <Card className="p-6">
          <div className="flex items-center gap-3 mb-6">
            {getCategoryIcon('reports')}
            <div>
              <h3 className="font-semibold text-[var(--text-primary)]">Reportes</h3>
              <p className="text-sm text-[var(--text-secondary)]">
                Informes y análisis del negocio
              </p>
            </div>
          </div>

          <div className="space-y-4">
            {/* Push Reports */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                {getChannelIcon('push')}
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  App Push
                </span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.push_reports}
                  onChange={(e) => handlePreferenceChange('push_reports', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>

            {/* Email Reports */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                {getChannelIcon('email')}
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  Email
                </span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.email_reports}
                  onChange={(e) => handlePreferenceChange('email_reports', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>

            {/* WhatsApp Reports */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                {getChannelIcon('whatsapp')}
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  WhatsApp
                </span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.whatsapp_reports}
                  onChange={(e) => handlePreferenceChange('whatsapp_reports', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>
          </div>
        </Card>

        {/* Marketing */}
        <Card className="p-6">
          <div className="flex items-center gap-3 mb-6">
            {getCategoryIcon('marketing')}
            <div>
              <h3 className="font-semibold text-[var(--text-primary)]">Marketing</h3>
              <p className="text-sm text-[var(--text-secondary)]">
                Promociones y campañas
              </p>
            </div>
          </div>

          <div className="space-y-4">
            {/* Email Marketing */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                {getChannelIcon('email')}
                <span className="text-sm font-medium text-[var(--text-primary)]">
                  Email
                </span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.email_marketing}
                  onChange={(e) => handlePreferenceChange('email_marketing', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>

            <div className="text-xs text-[var(--text-tertiary)]">
              Las preferencias de marketing se aplicarán solo a contenido promocional opcional
            </div>
          </div>
        </Card>
      </div>

      {/* Master Channel Controls */}
      <Card className="p-6">
        <div className="flex items-center gap-3 mb-6">
          <div className="p-2 bg-orange-500/10 rounded-lg">
            <Volume2 className="w-5 h-5 text-orange-500" />
          </div>
          <div>
            <h3 className="text-lg font-semibold text-[var(--text-primary)]">
              Control de Canales
            </h3>
            <p className="text-sm text-[var(--text-secondary)]">
              Activar o desactivar canales de comunicación completamente
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {/* Email Master Control */}
          <div className="p-4 border border-[var(--border-primary)] rounded-lg">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-3">
                {getChannelIcon('email')}
                <span className="font-medium text-[var(--text-primary)]">Email</span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.email_enabled}
                  onChange={(e) => handlePreferenceChange('email_enabled', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>
            <div className="mb-3">
              <label className="block text-sm font-medium text-[var(--text-secondary)] mb-1">
                Límite diario
              </label>
              <select
                value={preferences.max_emails_per_day}
                onChange={(e) => handlePreferenceChange('max_emails_per_day', parseInt(e.target.value))}
                disabled={!preferences.email_enabled}
                className="w-full px-3 py-2 border border-[var(--border-primary)] rounded-lg text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] disabled:opacity-50"
              >
                {maxEmailsOptions.map(option => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </div>
            <p className="text-xs text-[var(--text-tertiary)]">
              {preferences.email_enabled ? 'Activado' : 'Desactivado'}
            </p>
          </div>

          {/* Push Master Control */}
          <div className="p-4 border border-[var(--border-primary)] rounded-lg">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-3">
                {getChannelIcon('push')}
                <span className="font-medium text-[var(--text-primary)]">Push</span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.push_enabled}
                  onChange={(e) => handlePreferenceChange('push_enabled', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>
            <p className="text-xs text-[var(--text-tertiary)]">
              {preferences.push_enabled ? 'Notificaciones push activadas' : 'Notificaciones push desactivadas'}
            </p>
          </div>

          {/* WhatsApp Master Control */}
          <div className="p-4 border border-[var(--border-primary)] rounded-lg">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-3">
                {getChannelIcon('whatsapp')}
                <span className="font-medium text-[var(--text-primary)]">WhatsApp</span>
              </div>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={preferences.whatsapp_enabled}
                  onChange={(e) => handlePreferenceChange('whatsapp_enabled', e.target.checked)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-[var(--bg-tertiary)] peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--color-primary)]"></div>
              </label>
            </div>
            {contactInfo.phone ? (
              <p className="text-xs text-[var(--text-secondary)]">
                {contactInfo.phone}
              </p>
            ) : (
              <p className="text-xs text-[var(--color-warning)]">
                Configura tu teléfono arriba
              </p>
            )}
            <p className="text-xs text-[var(--text-tertiary)] mt-1">
              {preferences.whatsapp_enabled ? 'Activado' : 'Desactivado'}
            </p>
          </div>
        </div>
      </Card>

      {/* Status Summary */}
      <Card className="p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)]">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Badge
              variant={preferences.email_enabled || preferences.push_enabled || preferences.whatsapp_enabled ? 'success' : 'warning'}
              size="sm"
            >
              {preferences.email_enabled || preferences.push_enabled || preferences.whatsapp_enabled ? 'Activo' : 'Limitado'}
            </Badge>
            <span className="text-sm text-[var(--text-secondary)]">
              Estado de notificaciones
            </span>
          </div>
          <div className="text-xs text-[var(--text-tertiary)]">
            {[
              preferences.email_enabled && 'Email',
              preferences.push_enabled && 'Push',
              preferences.whatsapp_enabled && 'WhatsApp'
            ].filter(Boolean).join(' • ') || 'Sin canales activos'}
          </div>
        </div>
      </Card>

      {/* Save Changes Banner */}
      {hasChanges && (
        <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-[var(--color-primary)] text-white px-6 py-3 rounded-lg shadow-lg flex items-center space-x-4 z-50">
          <span className="text-sm font-medium">Tienes cambios sin guardar</span>
          <div className="flex space-x-2">
            <Button
              size="sm"
              variant="outline"
              className="bg-white text-[var(--color-primary)] hover:bg-gray-100 border-white"
              onClick={onReset}
              disabled={isLoading}
            >
              Descartar
            </Button>
            <Button
              size="sm"
              variant="secondary"
              className="bg-[var(--color-primary-dark)] hover:bg-[var(--color-primary-darker)] text-white border-transparent"
              onClick={handleSave}
              disabled={isLoading}
              isLoading={isLoading}
            >
              Guardar
            </Button>
          </div>
        </div>
      )}
    </div>
  );
};

export default CommunicationPreferences;
