import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import {
  User,
  Mail,
  Phone,
  Lock,
  Globe,
  Clock,
  Camera,
  Save,
  X,
  Bell,
  Shield,
  Download,
  Trash2,
  AlertCircle,
  Cookie,
  ExternalLink,
  Check,
  ChevronDown,
  ChevronUp,
  Info,
  AlertTriangle,
  Star,
  Settings,
  CheckCircle,
  RefreshCw
} from 'lucide-react';
import { Button, Card, Avatar, Input, Select, SettingSection, SettingRow, SettingsSearch, Badge } from '../../../../components/ui';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs';
import { PageHeader } from '../../../../components/layout';
import { showToast } from '../../../../utils/toast';
import { useAuthUser, useAuthActions } from '../../../../stores/auth.store';
import { useAuthProfile, useUpdateProfile, useChangePassword } from '../../../../api/hooks/auth';
import { useCurrentTenant } from '../../../../stores';

// Import the communication preferences component
import CommunicationPreferences, { type NotificationPreferences } from './CommunicationPreferences';

interface ProfileFormData {
  first_name: string;
  last_name: string;
  email: string;
  phone: string;
  language: string;
  timezone: string;
  avatar?: string;
}

interface PasswordData {
  currentPassword: string;
  newPassword: string;
  confirmPassword: string;
}

// Collapsible Section Component (similar to subscription page)
const CollapsibleSection: React.FC<{
  title: string;
  icon: React.ReactNode;
  isOpen: boolean;
  onToggle: () => void;
  children: React.ReactNode;
  showAlert?: boolean;
  className?: string;
}> = ({ title, icon, isOpen, onToggle, children, showAlert = false, className = '' }) => {
  return (
    <Card className={`mb-4 ${showAlert ? 'border-2 border-yellow-200 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/20' : ''} ${className}`}>
      <button
        onClick={onToggle}
        className="w-full flex items-center justify-between p-4 hover:bg-[var(--bg-secondary)] transition-colors"
      >
        <div className="flex items-center gap-3">
          <div className="p-2 rounded-lg bg-[var(--bg-secondary)] flex-shrink-0">
            {icon}
          </div>
          <h3 className="text-lg font-semibold text-[var(--text-primary)]">{title}</h3>
          {showAlert && (
            <Badge variant="warning" className="ml-2">
              <AlertTriangle className="w-3 h-3 mr-1" />
              Requiere Atención
            </Badge>
          )}
        </div>
        {isOpen ? <ChevronUp className="w-5 h-5 text-[var(--text-secondary)]" /> : <ChevronDown className="w-5 h-5 text-[var(--text-secondary)]" />}
      </button>
      
      {isOpen && (
        <div className="p-4 pt-0 border-t border-[var(--border-primary)]">
          {children}
        </div>
      )}
    </Card>
  );
};

// Profile Completion Status Component
const ProfileCompletionStatus: React.FC<{
  completionPercentage: number;
  missingFields: string[];
  onEdit: () => void;
}> = ({ completionPercentage, missingFields, onEdit }) => {
  const getStatusColor = () => {
    if (completionPercentage >= 90) return 'green';
    if (completionPercentage >= 70) return 'yellow';
    return 'red';
  };

  const statusColor = getStatusColor();

  const colorClasses = {
    red: {
      bg: 'bg-red-50 dark:bg-red-900/20',
      border: 'border-red-200 dark:border-red-700',
      text: 'text-red-600 dark:text-red-400',
      icon: 'text-red-500'
    },
    yellow: {
      bg: 'bg-yellow-50 dark:bg-yellow-900/20',
      border: 'border-yellow-200 dark:border-yellow-700',
      text: 'text-yellow-600 dark:text-yellow-400',
      icon: 'text-yellow-500'
    },
    green: {
      bg: 'bg-green-50 dark:bg-green-900/20',
      border: 'border-green-200 dark:border-green-700',
      text: 'text-green-600 dark:text-green-400',
      icon: 'text-green-500'
    }
  };

  const colors = colorClasses[statusColor];

  return (
    <Card className={`p-6 mb-6 ${colors.bg} ${colors.border} border-2`}>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-center">
        <div>
          <h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center gap-2">
            <User className="w-5 h-5 text-blue-500" />
            Perfil Completado
          </h3>
          <Badge variant={statusColor === 'red' ? 'danger' : statusColor === 'yellow' ? 'warning' : 'success'} className="mt-2">
            {Math.round(completionPercentage)}% Completado
          </Badge>
        </div>

        <div className="text-center">
          <p className="text-sm text-[var(--text-secondary)]">Campos Completados</p>
          <p className="font-semibold text-[var(--text-primary)] text-lg">
            {Math.round(completionPercentage)}%
          </p>
        </div>

        <div className="text-center">
          <p className="text-sm text-[var(--text-secondary)]">Campos Faltantes</p>
          <p className="font-semibold text-[var(--text-primary)] text-lg">
            {missingFields.length}
          </p>
        </div>

        <div className="flex flex-col gap-2">
          <Button onClick={onEdit} variant="primary" size="sm" className="w-full">
            <Settings className="w-4 h-4 mr-2" />
            Completar Perfil
          </Button>
        </div>
      </div>

      {missingFields.length > 0 && (
        <div className="mt-4 p-4 bg-gradient-to-r from-blue-600/10 to-cyan-600/10 border border-blue-300/50 rounded-lg">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-blue-500/20 rounded-lg border border-blue-500/30 flex-shrink-0">
              <Info className="w-5 h-5 text-blue-500" />
            </div>
            <div className="flex-1">
              <p className="text-sm font-medium text-blue-700 dark:text-blue-300">
                Campos faltantes: {missingFields.join(', ')}
              </p>
            </div>
          </div>
        </div>
      )}
    </Card>
  );
};

// Enhanced Profile Field Component with inline editing
const ProfileField: React.FC<{
  label: string;
  value: string;
  onChange: (value: string) => void;
  error?: string;
  disabled?: boolean;
  type?: string;
  icon?: React.ReactNode;
  required?: boolean;
  isEditing: boolean;
  fieldType?: 'text' | 'email' | 'tel' | 'select';
  options?: { value: string; label: string }[];
}> = ({
  label,
  value,
  onChange,
  error,
  disabled = false,
  type = 'text',
  icon,
  required = false,
  isEditing,
  fieldType = 'text',
  options = []
}) => {
  const [isFocused, setIsFocused] = useState(false);
  const [localValue, setLocalValue] = useState(value);

  useEffect(() => {
    setLocalValue(value);
  }, [value]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const newValue = e.target.value;
    setLocalValue(newValue);
    onChange(newValue);
  };

  const handleBlur = () => {
    setIsFocused(false);
    if (localValue !== value) {
      // Auto-save logic could go here
    }
  };

  if (fieldType === 'select') {
    return (
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          {icon && <div className="text-[var(--text-tertiary)]">{icon}</div>}
          <label className="text-sm font-medium text-[var(--text-primary)] flex-1">
            {label} {required && <span className="text-red-500">*</span>}
          </label>
        </div>
        {isEditing ? (
          <div className="relative">
            <select
              value={localValue}
              onChange={handleChange}
              onFocus={() => setIsFocused(true)}
              onBlur={handleBlur}
              disabled={disabled}
              className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
                error ? 'border-red-500' : isFocused ? 'border-[var(--color-primary)]' : 'border-[var(--border-primary)]'
              }`}
            >
              {options.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
            {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
          </div>
        ) : (
          <div className="p-2 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
            <p className="text-[var(--text-primary)]">{options.find(opt => opt.value === value)?.label || value}</p>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-2">
        {icon && <div className="text-[var(--text-tertiary)]">{icon}</div>}
        <label className="text-sm font-medium text-[var(--text-primary)] flex-1">
          {label} {required && <span className="text-red-500">*</span>}
        </label>
      </div>
      {isEditing ? (
        <div className="relative">
          <input
            type={type}
            value={localValue}
            onChange={handleChange}
            onFocus={() => setIsFocused(true)}
            onBlur={handleBlur}
            disabled={disabled}
            className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
              error ? 'border-red-500' : isFocused ? 'border-[var(--color-primary)]' : 'border-[var(--border-primary)]'
            }`}
          />
          {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
        </div>
      ) : (
        <div className="p-2 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
          <p className="text-[var(--text-primary)]">{value || <span className="text-[var(--text-tertiary)]">No establecido</span>}</p>
        </div>
      )}
    </div>
  );
};

// Password Strength Meter Component
const PasswordStrengthMeter: React.FC<{ password: string }> = ({ password }) => {
  const getPasswordStrength = (pwd: string) => {
    if (!pwd) return 0;
    let strength = 0;
    if (pwd.length >= 8) strength += 1;
    if (/[A-Z]/.test(pwd)) strength += 1;
    if (/[0-9]/.test(pwd)) strength += 1;
    if (/[^A-Za-z0-9]/.test(pwd)) strength += 1;
    if (pwd.length >= 12) strength += 1;
    return Math.min(5, strength);
  };

  const strength = getPasswordStrength(password);
  const strengthLabels = ['Muy débil', 'Débil', 'Media', 'Fuerte', 'Muy fuerte'];
  const strengthColors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500', 'bg-green-600'];

  return (
    <div className="mt-2">
      <div className="flex justify-between text-xs text-[var(--text-tertiary)] mb-1">
        <span>Débil</span>
        <span>Fuerte</span>
      </div>
      <div className="flex gap-1 h-1 bg-[var(--border-primary)] rounded">
        {[1, 2, 3, 4, 5].map((level) => (
          <div
            key={level}
            className={`flex-1 h-full rounded transition-all ${
              level <= strength ? strengthColors[strength - 1] : 'bg-transparent'
            }`}
          />
        ))}
      </div>
      {password && (
        <p className={`text-xs mt-1 ${strength >= 3 ? 'text-green-600' : strength >= 2 ? 'text-yellow-600' : 'text-red-600'}`}>
          {strengthLabels[strength - 1] || 'Muy débil'}
        </p>
      )}
    </div>
  );
};

const NewProfileSettingsPage: React.FC = () => {
  const { t } = useTranslation('settings');
  const navigate = useNavigate();

  const user = useAuthUser();
  const { logout } = useAuthActions();
  const currentTenant = useCurrentTenant();

  const { data: profile, isLoading: profileLoading } = useAuthProfile();
  const updateProfileMutation = useUpdateProfile();
  const changePasswordMutation = useChangePassword();

  const [activeTab, setActiveTab] = useState('personal');
  const [isEditing, setIsEditing] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [showPasswordForm, setShowPasswordForm] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  // Collapsible section states (similar to subscription page)
  const [showPersonalInfo, setShowPersonalInfo] = useState(true);
  const [showSecurity, setShowSecurity] = useState(false);
  const [showNotifications, setShowNotifications] = useState(false);
  const [showPrivacy, setShowPrivacy] = useState(false);

  // Export & Delete states
  const [isExporting, setIsExporting] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [deleteConfirmEmail, setDeleteConfirmEmail] = useState('');
  const [deletePassword, setDeletePassword] = useState('');
  const [deleteReason, setDeleteReason] = useState('');
  const [isDeleting, setIsDeleting] = useState(false);

  // Profile completion tracking
  const [completionPercentage, setCompletionPercentage] = useState(0);
  const [missingFields, setMissingFields] = useState<string[]>([]);

  // Notification preferences tracking
  const [notificationPreferences, setNotificationPreferences] = useState<NotificationPreferences | null>(null);
  const [notificationHasChanges, setNotificationHasChanges] = useState(false);

  const [profileData, setProfileData] = useState<ProfileFormData>({
    first_name: '',
    last_name: '',
    email: '',
    phone: '',
    language: 'es',
    timezone: 'Europe/Madrid'
  });

  const [passwordData, setPasswordData] = useState<PasswordData>({
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  // Update profile data when profile is loaded
  React.useEffect(() => {
    if (profile) {
      setProfileData({
        first_name: profile.first_name || '',
        last_name: profile.last_name || '',
        email: profile.email || '',
        phone: profile.phone || '',
        language: profile.language || 'es',
        timezone: profile.timezone || 'Europe/Madrid',
        avatar: profile.avatar || ''
      });
    }
  }, [profile]);

  // Calculate profile completion percentage
  useEffect(() => {
    if (profile) {
      const requiredFields = ['first_name', 'last_name', 'email', 'phone', 'language', 'timezone'];
      const completedFields = requiredFields.filter(field => {
        const value = profile[field as keyof typeof profile];
        return value && value.toString().trim() !== '';
      });
      
      const percentage = (completedFields.length / requiredFields.length) * 100;
      setCompletionPercentage(percentage);
      
      const missing = requiredFields.filter(field => {
        const value = profile[field as keyof typeof profile];
        return !value || value.toString().trim() === '';
      });
      
      setMissingFields(missing.map(field => {
        const fieldNames: Record<string, string> = {
          first_name: 'Nombre',
          last_name: 'Apellido',
          email: 'Email',
          phone: 'Teléfono',
          language: 'Idioma',
          timezone: 'Zona Horaria'
        };
        return fieldNames[field] || field;
      }));
    }
  }, [profile]);

  // Track when notification preferences change
  const handleNotificationPreferencesChange = (preferences: NotificationPreferences) => {
    // Compare with stored preferences to detect changes
    if (notificationPreferences) {
      const hasChanges = JSON.stringify(preferences) !== JSON.stringify(notificationPreferences);
      setNotificationHasChanges(hasChanges);
    } else {
      // First time setting preferences
      setNotificationHasChanges(true);
    }
  };

  // Initialize notification preferences from profile data
  useEffect(() => {
    if (profile?.notification_preferences) {
      setNotificationPreferences(profile.notification_preferences);
    } else {
      // Set default preferences if none exist
      const defaultPreferences: NotificationPreferences = {
        email_enabled: true,
        email_alerts: true,
        email_marketing: false,
        email_reports: true,
        whatsapp_enabled: false,
        whatsapp_alerts: false,
        whatsapp_reports: false,
        push_enabled: true,
        push_alerts: true,
        push_reports: false,
        quiet_hours_start: '22:00',
        quiet_hours_end: '08:00',
        timezone: profile?.timezone || 'Europe/Madrid',
        digest_frequency: 'daily',
        max_emails_per_day: 10,
        language: profile?.language || 'es'
      };
      setNotificationPreferences(defaultPreferences);
    }
  }, [profile]);

  const languageOptions = [
    { value: 'es', label: 'Español' },
    { value: 'eu', label: 'Euskara' },
    { value: 'en', label: 'English' }
  ];

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

  const validateProfile = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!profileData.first_name.trim()) {
      newErrors.first_name = t('profile.fields.first_name') + ' ' + t('common.required');
    }

    if (!profileData.last_name.trim()) {
      newErrors.last_name = t('profile.fields.last_name') + ' ' + t('common.required');
    }

    if (!profileData.email.trim()) {
      newErrors.email = t('profile.fields.email') + ' ' + t('common.required');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(profileData.email)) {
      newErrors.email = t('common.error');
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const validatePassword = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!passwordData.currentPassword) {
      newErrors.currentPassword = t('profile.password.current_password') + ' ' + t('common.required');
    }

    if (!passwordData.newPassword) {
      newErrors.newPassword = t('profile.password.new_password') + ' ' + t('common.required');
    } else if (passwordData.newPassword.length < 8) {
      newErrors.newPassword = t('profile.password.password_requirements');
    }

    if (passwordData.newPassword !== passwordData.confirmPassword) {
      newErrors.confirmPassword = t('common.error');
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSaveProfile = async () => {
    if (!validateProfile()) return;

    setIsLoading(true);

    try {
      // Map the form fields to the expected API format
      // The API expects 'full_name' instead of separate 'first_name' and 'last_name'
      const profileUpdateData = {
        full_name: `${profileData.first_name} ${profileData.last_name}`.trim(),
        phone: profileData.phone,
        language: profileData.language,
        timezone: profileData.timezone
      };

      await updateProfileMutation.mutateAsync(profileUpdateData);

      setIsEditing(false);
      showToast.success(t('profile.save_changes'));
    } catch (error) {
      showToast.error(t('common.error'));
    } finally {
      setIsLoading(false);
    }
  };

  const handleChangePasswordSubmit = async () => {
    if (!validatePassword()) return;

    setIsLoading(true);

    try {
      await changePasswordMutation.mutateAsync({
        current_password: passwordData.currentPassword,
        new_password: passwordData.newPassword,
        confirm_password: passwordData.confirmPassword
      });

      setShowPasswordForm(false);
      setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
      showToast.success(t('profile.password.change_success'));
    } catch (error) {
      showToast.error(t('profile.password.change_error'));
    } finally {
      setIsLoading(false);
    }
  };

  const handleInputChange = (field: keyof ProfileFormData) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setProfileData(prev => ({ ...prev, [field]: e.target.value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleSelectChange = (field: keyof ProfileFormData) => (value: string) => {
    setProfileData(prev => ({ ...prev, [field]: value }));
  };

  const handlePasswordChange = (field: keyof PasswordData) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setPasswordData(prev => ({ ...prev, [field]: e.target.value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleSaveNotificationPreferences = async (preferences: NotificationPreferences) => {
    try {
      setIsLoading(true);
      await updateProfileMutation.mutateAsync({
        notification_preferences: preferences
      });
      
      // Update the stored preferences to track future changes
      setNotificationPreferences(preferences);
      setNotificationHasChanges(false);
      
      showToast.success(t('profile.notifications.save_success', 'Preferencias de notificación guardadas correctamente'));
    } catch (error) {
      showToast.error(t('profile.notifications.save_error', 'Error al guardar las preferencias de notificación'));
    } finally {
      setIsLoading(false);
    }
  };

  const handleNotificationReset = () => {
    // Reset to initial state
    if (notificationPreferences) {
      // This would typically reset the form to the saved preferences
      // For now, we'll just reset the change tracking
      setNotificationHasChanges(false);
    }
  };

  const handleDataExport = async () => {
    setIsExporting(true);
    try {
      const { authService } = await import('../../../../api');
      const exportData = await authService.exportMyData();

      // Convert to blob and download
      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `my_data_export_${new Date().toISOString().split('T')[0]}.json`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);

      showToast.success(t('profile.privacy.export_success'));
    } catch (err) {
      showToast.error(t('profile.privacy.export_error'));
    } finally {
      setIsExporting(false);
    }
  };

  const handleAccountDeletion = async () => {
    if (deleteConfirmEmail.toLowerCase() !== user?.email?.toLowerCase()) {
      showToast.error(t('common.error'));
      return;
    }

    if (!deletePassword) {
      showToast.error(t('common.error'));
      return;
    }

    setIsDeleting(true);
    try {
      const { authService } = await import('../../../../api');
      await authService.deleteAccount(deleteConfirmEmail, deletePassword, deleteReason);

      showToast.success(t('common.success'));

      setTimeout(() => {
        logout();
        navigate('/');
      }, 2000);
    } catch (err: any) {
      showToast.error(err.message || t('common.error'));
    } finally {
      setIsDeleting(false);
    }
  };

  if (profileLoading || !profile) {
    return (
      <div className="p-6 space-y-6">
        <PageHeader
          title={t('profile.title')}
          description={t('profile.description')}
        />
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="flex flex-col items-center gap-4">
            <RefreshCw className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
            <p className="text-[var(--text-secondary)]">{t('common.loading')}</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 space-y-6">
      <PageHeader
        title={t('profile.title')}
        description={t('profile.description')}
      />

      {/* NEW: Profile Completion Status Banner - Always Visible */}
      <ProfileCompletionStatus
        completionPercentage={completionPercentage}
        missingFields={missingFields}
        onEdit={() => {
          setActiveTab('personal');
          setShowPersonalInfo(true);
          setIsEditing(true);
        }}
      />

      {/* Profile Header Card removed as requested */}

      {/* Search Bar removed as requested */}

      {/* NEW: Collapsible Sections (similar to subscription page) */}
      <div className="space-y-4">
        {/* Personal Information Section */}
        <CollapsibleSection
          title={t('profile.tabs.personal')}
          icon={<User className="w-5 h-5 text-blue-500" />}
          isOpen={showPersonalInfo}
          onToggle={() => setShowPersonalInfo(!showPersonalInfo)}
          showAlert={completionPercentage < 90}
        >
          <div className="space-y-6">
            {/* Spacing between content blocks */}
            <div className="h-6"></div>

            {/* Enhanced Profile Form with Inline Editing */}
            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
              <div className="flex items-start gap-4 mb-4">
                <div className="p-3 bg-blue-500/10 rounded-lg border border-blue-500/20 flex-shrink-0">
                  <User className="w-6 h-6 text-blue-500" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-[var(--text-primary)] mb-2">{t('profile.personal_info')}</h4>
                  <p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
                    {t('profile.personal_info_description') || 'Your personal information and account details'}
                  </p>
                  <div className="flex gap-2 flex-wrap">
                    {!isEditing ? (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => setIsEditing(true)}
                      >
                        <User className="w-4 h-4 mr-2" />
                        {t('profile.edit_profile')}
                      </Button>
                    ) : (
                      <>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => setIsEditing(false)}
                          disabled={isLoading}
                        >
                          <X className="w-4 h-4 mr-1" />
                          {t('profile.cancel')}
                        </Button>
                        <Button
                          variant="primary"
                          size="sm"
                          onClick={handleSaveProfile}
                          isLoading={isLoading}
                          loadingText={t('common.saving')}
                        >
                          <Save className="w-4 h-4 mr-1" />
                          {t('profile.save_changes')}
                        </Button>
                      </>
                    )}
                  </div>
                </div>
              </div>

              {/* Real-time validation feedback */}
              {isEditing && Object.keys(errors).length > 0 && (
                <div className="mb-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
                  <div className="flex items-center gap-2">
                    <AlertTriangle className="w-4 h-4 text-yellow-600" />
                    <p className="text-sm text-yellow-700 dark:text-yellow-300">
                      Por favor, corrige los errores antes de guardar
                    </p>
                  </div>
                </div>
              )}

              {/* Enhanced Profile Fields with Inline Editing */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
                <ProfileField
                  label={t('profile.fields.first_name')}
                  value={profileData.first_name}
                  onChange={(value) => handleInputChange('first_name')({ target: { value } } as any)}
                  error={errors.first_name}
                  disabled={isLoading}
                  icon={<User className="w-4 h-4" />}
                  required
                  isEditing={isEditing}
                />

                <ProfileField
                  label={t('profile.fields.last_name')}
                  value={profileData.last_name}
                  onChange={(value) => handleInputChange('last_name')({ target: { value } } as any)}
                  error={errors.last_name}
                  disabled={isLoading}
                  icon={<User className="w-4 h-4" />}
                  required
                  isEditing={isEditing}
                />

                <ProfileField
                  label={t('profile.fields.email')}
                  value={profileData.email}
                  onChange={(value) => handleInputChange('email')({ target: { value } } as any)}
                  error={errors.email}
                  disabled={isLoading}
                  icon={<Mail className="w-4 h-4" />}
                  required
                  isEditing={isEditing}
                  type="email"
                />

                <ProfileField
                  label={t('profile.fields.phone')}
                  value={profileData.phone}
                  onChange={(value) => handleInputChange('phone')({ target: { value } } as any)}
                  error={errors.phone}
                  disabled={isLoading}
                  icon={<Phone className="w-4 h-4" />}
                  isEditing={isEditing}
                  type="tel"
                />

                <ProfileField
                  label={t('profile.fields.language')}
                  value={profileData.language}
                  onChange={(value) => handleSelectChange('language')(value)}
                  error={errors.language}
                  disabled={isLoading}
                  icon={<Globe className="w-4 h-4" />}
                  isEditing={isEditing}
                  fieldType="select"
                  options={languageOptions}
                />

                <ProfileField
                  label={t('profile.fields.timezone')}
                  value={profileData.timezone}
                  onChange={(value) => handleSelectChange('timezone')(value)}
                  error={errors.timezone}
                  disabled={isLoading}
                  icon={<Clock className="w-4 h-4" />}
                  isEditing={isEditing}
                  fieldType="select"
                  options={timezoneOptions}
                />
              </div>

              {/* Save status indicator */}
              {isEditing && (
                <div className="mt-4 flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
                  {isLoading ? (
                    <>
                      <RefreshCw className="w-4 h-4 animate-spin" />
                      <span>Guardando cambios...</span>
                    </>
                  ) : (
                    <>
                      <CheckCircle className="w-4 h-4 text-green-500" />
                      <span>Los cambios se guardarán automáticamente al hacer clic en Guardar</span>
                    </>
                  )}
                </div>
              )}
            </div>
          </div>
        </CollapsibleSection>

        {/* Security Section */}
        <CollapsibleSection
          title="Security"
          icon={<Lock className="w-5 h-5 text-red-500" />}
          isOpen={showSecurity}
          onToggle={() => setShowSecurity(!showSecurity)}
        >
          <div className="space-y-6">
            {/* Spacing between content blocks */}
            <div className="h-6"></div>

            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
              <div className="flex items-start gap-4 mb-4">
                <div className="p-3 bg-red-500/10 rounded-lg border border-red-500/20 flex-shrink-0">
                  <Lock className="w-6 h-6 text-red-500" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-[var(--text-primary)] mb-2">Manage your password and security settings</h4>
                  <p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
                    Update your password to keep your account secure
                  </p>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setShowPasswordForm(!showPasswordForm)}
                  >
                    <Lock className="w-4 h-4 mr-2" />
                    {t('profile.change_password')}
                  </Button>
                </div>
              </div>

              {showPasswordForm && (
                <div className="mt-6 space-y-6">
                  {/* Password Requirements Info */}
                  <div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg">
                    <div className="flex items-start gap-3">
                      <Info className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                      <div>
                        <h4 className="font-semibold text-[var(--text-primary)] mb-2">
                          Requisitos de Contraseña
                        </h4>
                        <ul className="text-sm text-[var(--text-secondary)] space-y-1">
                          <li className="flex items-center gap-2">
                            <span className="w-1.5 h-1.5 bg-[var(--text-tertiary)] rounded-full"></span>
                            Mínimo 8 caracteres
                          </li>
                          <li className="flex items-center gap-2">
                            <span className="w-1.5 h-1.5 bg-[var(--text-tertiary)] rounded-full"></span>
                            Al menos una mayúscula
                          </li>
                          <li className="flex items-center gap-2">
                            <span className="w-1.5 h-1.5 bg-[var(--text-tertiary)] rounded-full"></span>
                            Al menos un número
                          </li>
                          <li className="flex items-center gap-2">
                            <span className="w-1.5 h-1.5 bg-[var(--text-tertiary)] rounded-full"></span>
                            Caracter especial recomendado
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {/* Enhanced Password Fields */}
                  <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
                    <div className="space-y-2">
                      <label className="text-sm font-medium text-[var(--text-primary)] flex items-center gap-1">
                        <Lock className="w-4 h-4 text-[var(--text-tertiary)]" />
                        {t('profile.password.current_password')}
                        <span className="text-red-500">*</span>
                      </label>
                      <div className="relative">
                        <input
                          type="password"
                          value={passwordData.currentPassword}
                          onChange={handlePasswordChange('currentPassword')}
                          disabled={isLoading}
                          className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
                            errors.currentPassword ? 'border-red-500' : 'border-[var(--border-primary)]'
                          }`}
                          placeholder="••••••••"
                        />
                        {errors.currentPassword && (
                          <p className="text-xs text-red-500 mt-1">{errors.currentPassword}</p>
                        )}
                      </div>
                    </div>

                    <div className="space-y-2">
                      <label className="text-sm font-medium text-[var(--text-primary)] flex items-center gap-1">
                        <Lock className="w-4 h-4 text-[var(--text-tertiary)]" />
                        {t('profile.password.new_password')}
                        <span className="text-red-500">*</span>
                      </label>
                      <div className="relative">
                        <input
                          type="password"
                          value={passwordData.newPassword}
                          onChange={handlePasswordChange('newPassword')}
                          disabled={isLoading}
                          className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
                            errors.newPassword ? 'border-red-500' : 'border-[var(--border-primary)]'
                          }`}
                          placeholder="••••••••"
                        />
                        {errors.newPassword && (
                          <p className="text-xs text-red-500 mt-1">{errors.newPassword}</p>
                        )}
                      </div>
                      {/* Password Strength Meter */}
                      <PasswordStrengthMeter password={passwordData.newPassword} />
                    </div>

                    <div className="space-y-2">
                      <label className="text-sm font-medium text-[var(--text-primary)] flex items-center gap-1">
                        <Lock className="w-4 h-4 text-[var(--text-tertiary)]" />
                        {t('profile.password.confirm_password')}
                        <span className="text-red-500">*</span>
                      </label>
                      <div className="relative">
                        <input
                          type="password"
                          value={passwordData.confirmPassword}
                          onChange={handlePasswordChange('confirmPassword')}
                          disabled={isLoading}
                          className={`w-full px-3 py-2 border rounded-lg bg-[var(--bg-primary)] text-[var(--text-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all text-sm ${
                            errors.confirmPassword ? 'border-red-500' : 'border-[var(--border-primary)]'
                          }`}
                          placeholder="••••••••"
                        />
                        {errors.confirmPassword && (
                          <p className="text-xs text-red-500 mt-1">{errors.confirmPassword}</p>
                        )}
                        {/* Password Match Indicator */}
                        {passwordData.confirmPassword && passwordData.newPassword && (
                          <div className="mt-2 flex items-center gap-2 text-xs">
                            {passwordData.newPassword === passwordData.confirmPassword ? (
                              <>
                                <CheckCircle className="w-3 h-3 text-green-500" />
                                <span className="text-green-600">Las contraseñas coinciden</span>
                              </>
                            ) : (
                              <>
                                <AlertCircle className="w-3 h-3 text-red-500" />
                                <span className="text-red-600">Las contraseñas no coinciden</span>
                              </>
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Enhanced Action Buttons */}
                  <div className="flex gap-3 pt-4 border-t border-[var(--border-primary)] flex-wrap">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setShowPasswordForm(false);
                        setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
                        setErrors({});
                      }}
                      disabled={isLoading}
                    >
                      {t('profile.cancel')}
                    </Button>
                    <Button
                      variant="primary"
                      onClick={handleChangePasswordSubmit}
                      isLoading={isLoading}
                      loadingText={t('common.saving')}
                      disabled={!passwordData.currentPassword || !passwordData.newPassword || passwordData.newPassword !== passwordData.confirmPassword}
                    >
                      <Check className="w-4 h-4 mr-2" />
                      {t('profile.password.change_password')}
                    </Button>
                  </div>

                  {/* Security Tip */}
                  <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg text-sm">
                    <div className="flex items-start gap-2">
                      <Shield className="w-4 h-4 text-yellow-600 mt-0.5 flex-shrink-0" />
                      <p className="text-yellow-700 dark:text-yellow-300">
                        <strong>Consejo de seguridad:</strong> Usa una contraseña única que no utilices en otros servicios. Considera usar un gestor de contraseñas para mayor seguridad.
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </CollapsibleSection>

        {/* Notifications Section */}
        <CollapsibleSection
          title={t('profile.tabs.notifications')}
          icon={<Bell className="w-5 h-5 text-orange-500" />}
          isOpen={showNotifications}
          onToggle={() => setShowNotifications(!showNotifications)}
        >
          <div className="space-y-6">
            {/* Spacing between content blocks */}
            <div className="h-6"></div>

            <CommunicationPreferences
              userEmail={profile?.email || ''}
              userPhone={profile?.phone || ''}
              userLanguage={profile?.language || 'es'}
              userTimezone={profile?.timezone || 'Europe/Madrid'}
              onSave={handleSaveNotificationPreferences}
              onReset={handleNotificationReset}
              onPreferencesChange={handleNotificationPreferencesChange}
              hasChanges={notificationHasChanges}
            />
          </div>
        </CollapsibleSection>

        {/* Privacy & Data Section */}
        <CollapsibleSection
          title={t('profile.tabs.privacy')}
          icon={<Shield className="w-5 h-5 text-purple-500" />}
          isOpen={showPrivacy}
          onToggle={() => setShowPrivacy(!showPrivacy)}
        >
          <div className="space-y-6">
            {/* Spacing between content blocks */}
            <div className="h-6"></div>

            {/* GDPR Rights Information */}
            <Card className="p-4 sm:p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
              <div className="flex items-start gap-3">
                <Shield className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                <div>
                  <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
                    {t('profile.privacy.gdpr_rights')}
                  </h3>
                  <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                    {t('profile.privacy.gdpr_description')}
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <a
                      href="/privacy"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline inline-flex items-center gap-1"
                    >
                      {t('profile.privacy.privacy_policy')}
                      <ExternalLink className="w-3 h-3" />
                    </a>
                    <span className="text-gray-400">•</span>
                    <a
                      href="/terms"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline inline-flex items-center gap-1"
                    >
                      {t('profile.privacy.terms')}
                      <ExternalLink className="w-3 h-3" />
                    </a>
                  </div>
                </div>
              </div>
            </Card>

            {/* Cookie Preferences */}
            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
              <div className="flex items-start gap-4">
                <div className="p-3 bg-yellow-500/10 rounded-lg border border-yellow-500/20 flex-shrink-0">
                  <Cookie className="w-6 h-6 text-yellow-500" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-[var(--text-primary)] mb-2">{t('profile.privacy.cookie_preferences')}</h4>
                  <p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
                    Gestiona tus preferencias de cookies
                  </p>
                  <Button
                    onClick={() => navigate('/cookie-preferences')}
                    variant="outline"
                    size="sm"
                  >
                    <Cookie className="w-4 h-4 mr-2" />
                    Gestionar
                  </Button>
                </div>
              </div>
            </div>

            {/* Data Export */}
            <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
              <div className="flex items-start gap-4">
                <div className="p-3 bg-green-500/10 rounded-lg border border-green-500/20 flex-shrink-0">
                  <Download className="w-6 h-6 text-green-500" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-[var(--text-primary)] mb-2">{t('profile.privacy.export_data')}</h4>
                  <p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
                    {t('profile.privacy.export_description')}
                  </p>
                  <Button
                    onClick={handleDataExport}
                    variant="primary"
                    size="sm"
                    disabled={isExporting}
                  >
                    <Download className="w-4 h-4 mr-2" />
                    {isExporting ? t('common.loading') : t('profile.privacy.export_button')}
                  </Button>
                </div>
              </div>
            </div>

            {/* Account Deletion */}
            <div className="p-6 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
              <div className="flex items-start gap-4">
                <div className="p-3 bg-red-500/10 rounded-lg border border-red-500/20 flex-shrink-0">
                  <AlertCircle className="w-6 h-6 text-red-500" />
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold text-[var(--text-primary)] mb-2">{t('profile.privacy.delete_account')}</h4>
                  <p className="text-sm text-[var(--text-secondary)] mb-4 leading-relaxed">
                    {t('profile.privacy.delete_description')}
                  </p>
                  <p className="text-xs text-red-600 font-semibold mb-4">
                    {t('profile.privacy.delete_warning')}
                  </p>
                  <Button
                    onClick={() => setShowDeleteModal(true)}
                    variant="outline"
                    size="sm"
                    className="border-red-300 text-red-600 hover:bg-red-50 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/20"
                  >
                    <Trash2 className="w-4 h-4 mr-2" />
                    {t('profile.privacy.delete_button')}
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </CollapsibleSection>
      </div>

      {/* Delete Account Modal (updated to match subscription page style) */}
      {showDeleteModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <Card className="max-w-md w-full p-4 sm:p-6 max-h-[90vh] overflow-y-auto">
            <div className="flex items-start gap-3 mb-4">
              <AlertCircle className="w-6 h-6 text-red-600 flex-shrink-0" />
              <div>
                <h2 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2">
                  {t('profile.privacy.delete_account')}?
                </h2>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  {t('profile.privacy.delete_warning')}
                </p>
              </div>
            </div>

            <div className="space-y-4">
              <Input
                label="Confirma tu email"
                type="email"
                placeholder={user?.email || ''}
                value={deleteConfirmEmail}
                onChange={(e) => setDeleteConfirmEmail(e.target.value)}
                required
              />

              <Input
                label="Introduce tu contraseña"
                type="password"
                placeholder="••••••••"
                value={deletePassword}
                onChange={(e) => setDeletePassword(e.target.value)}
                required
                leftIcon={<Lock className="w-4 h-4" />}
              />

              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Motivo (opcional)
                </label>
                <textarea
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
                  rows={3}
                  placeholder="Ayúdanos a mejorar..."
                  value={deleteReason}
                  onChange={(e) => setDeleteReason(e.target.value)}
                />
              </div>
            </div>

            <div className="flex gap-3 mt-6 flex-wrap">
              <Button
                onClick={() => {
                  setShowDeleteModal(false);
                  setDeleteConfirmEmail('');
                  setDeletePassword('');
                  setDeleteReason('');
                }}
                variant="outline"
                className="flex-1"
                disabled={isDeleting}
              >
                {t('common.cancel')}
              </Button>
              <Button
                onClick={handleAccountDeletion}
                variant="primary"
                className="flex-1 bg-red-600 hover:bg-red-700 text-white"
                disabled={isDeleting || !deleteConfirmEmail || !deletePassword}
              >
                {isDeleting ? t('common.loading') : t('common.delete')}
              </Button>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
};

export default NewProfileSettingsPage;