import React, { useState } 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
} from 'lucide-react';
import { Button, Card, Avatar, Input, Select } from '../../../../components/ui';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs';
import { PageHeader } from '../../../../components/layout';
import { useToast } from '../../../../hooks/ui/useToast';
import { useAuthUser, useAuthStore, useAuthActions } from '../../../../stores/auth.store';
import { useAuthProfile, useUpdateProfile, useChangePassword } from '../../../../api/hooks/auth';
import { useCurrentTenant } from '../../../../stores';
import { subscriptionService } from '../../../../api';

// 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;
}

const NewProfileSettingsPage: React.FC = () => {
  const { t } = useTranslation('settings');
  const navigate = useNavigate();
  const { addToast } = useToast();
  const user = useAuthUser();
  const token = useAuthStore((state) => state.token);
  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);

  // 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);
  const [subscriptionStatus, setSubscriptionStatus] = useState<any>(null);

  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]);

  // Load subscription status
  React.useEffect(() => {
    const loadSubscriptionStatus = async () => {
      const tenantId = currentTenant?.id || user?.tenant_id;
      if (tenantId) {
        try {
          const status = await subscriptionService.getSubscriptionStatus(tenantId);
          setSubscriptionStatus(status);
        } catch (error) {
          console.error('Failed to load subscription status:', error);
        }
      }
    };

    loadSubscriptionStatus();
  }, [currentTenant, user]);

  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 {
      await updateProfileMutation.mutateAsync(profileData);

      setIsEditing(false);
      addToast(t('profile.save_changes'), { type: 'success' });
    } catch (error) {
      addToast(t('common.error'), { type: '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: '' });
      addToast(t('profile.password.change_success'), { type: 'success' });
    } catch (error) {
      addToast(t('profile.password.change_error'), { type: '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 {
      await updateProfileMutation.mutateAsync({
        language: preferences.language,
        timezone: preferences.timezone,
        notification_preferences: preferences
      });
    } catch (error) {
      throw error;
    }
  };

  const handleDataExport = async () => {
    setIsExporting(true);
    try {
      const response = await fetch('/api/v1/users/me/export', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      if (!response.ok) {
        throw new Error('Failed to export data');
      }

      const blob = await response.blob();
      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);

      addToast(t('profile.privacy.export_success'), { type: 'success' });
    } catch (err) {
      addToast(t('profile.privacy.export_error'), { type: 'error' });
    } finally {
      setIsExporting(false);
    }
  };

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

    if (!deletePassword) {
      addToast(t('common.error'), { type: 'error' });
      return;
    }

    setIsDeleting(true);
    try {
      const response = await fetch('/api/v1/users/me/delete/request', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          confirm_email: deleteConfirmEmail,
          password: deletePassword,
          reason: deleteReason
        })
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.detail || 'Failed to delete account');
      }

      addToast(t('common.success'), { type: 'success' });

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

  if (profileLoading || !profile) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <PageHeader
          title={t('profile.title')}
          description={t('profile.description')}
        />
        <div className="flex items-center justify-center h-64">
          <div className="w-8 h-8 animate-spin rounded-full border-4 border-[var(--color-primary)] border-t-transparent"></div>
          <span className="ml-2 text-[var(--text-secondary)]">{t('common.loading')}</span>
        </div>
      </div>
    );
  }

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

      {/* Profile Header */}
      <Card className="p-4 sm:p-6">
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
          <div className="relative">
            <Avatar
              src={profile?.avatar || undefined}
              alt={profile?.full_name || `${profileData.first_name} ${profileData.last_name}` || 'Usuario'}
              name={profile?.avatar ? (profile?.full_name || `${profileData.first_name} ${profileData.last_name}`) : undefined}
              size="xl"
              className="w-16 h-16 sm:w-20 sm:h-20"
            />
            <button className="absolute -bottom-1 -right-1 bg-color-primary text-white rounded-full p-2 shadow-lg hover:bg-color-primary-dark transition-colors">
              <Camera className="w-3 h-3 sm:w-4 sm:h-4" />
            </button>
          </div>
          <div className="flex-1 min-w-0">
            <h1 className="text-xl sm:text-2xl font-bold text-text-primary mb-1 truncate">
              {profileData.first_name} {profileData.last_name}
            </h1>
            <p className="text-sm sm:text-base text-text-secondary truncate">{profileData.email}</p>
            {user?.role && (
              <p className="text-xs sm:text-sm text-text-tertiary mt-1">
                {user.role}
              </p>
            )}
            <div className="flex items-center gap-2 mt-2">
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <span className="text-xs sm:text-sm text-text-tertiary">{t('profile.online')}</span>
            </div>
          </div>
        </div>
      </Card>

      {/* Tabs Navigation */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="w-full sm:w-auto overflow-x-auto">
          <TabsTrigger value="personal" className="flex-1 sm:flex-none whitespace-nowrap">
            <User className="w-4 h-4 mr-2" />
            {t('profile.tabs.personal')}
          </TabsTrigger>
          <TabsTrigger value="notifications" className="flex-1 sm:flex-none whitespace-nowrap">
            <Bell className="w-4 h-4 mr-2" />
            {t('profile.tabs.notifications')}
          </TabsTrigger>
          <TabsTrigger value="privacy" className="flex-1 sm:flex-none whitespace-nowrap">
            <Shield className="w-4 h-4 mr-2" />
            {t('profile.tabs.privacy')}
          </TabsTrigger>
        </TabsList>

        {/* Tab 1: Personal Information */}
        <TabsContent value="personal">
          <div className="space-y-6">
            {/* Profile Form */}
            <Card className="p-4 sm:p-6">
              <h2 className="text-base sm:text-lg font-semibold mb-4">{t('profile.personal_info')}</h2>

              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
                <Input
                  label={t('profile.fields.first_name')}
                  value={profileData.first_name}
                  onChange={handleInputChange('first_name')}
                  error={errors.first_name}
                  disabled={!isEditing || isLoading}
                  leftIcon={<User className="w-4 h-4" />}
                />

                <Input
                  label={t('profile.fields.last_name')}
                  value={profileData.last_name}
                  onChange={handleInputChange('last_name')}
                  error={errors.last_name}
                  disabled={!isEditing || isLoading}
                />

                <Input
                  type="email"
                  label={t('profile.fields.email')}
                  value={profileData.email}
                  onChange={handleInputChange('email')}
                  error={errors.email}
                  disabled={!isEditing || isLoading}
                  leftIcon={<Mail className="w-4 h-4" />}
                />

                <Input
                  type="tel"
                  label={t('profile.fields.phone')}
                  value={profileData.phone}
                  onChange={handleInputChange('phone')}
                  error={errors.phone}
                  disabled={!isEditing || isLoading}
                  placeholder="+34 600 000 000"
                  leftIcon={<Phone className="w-4 h-4" />}
                />

                <Select
                  label={t('profile.fields.language')}
                  options={languageOptions}
                  value={profileData.language}
                  onChange={handleSelectChange('language')}
                  disabled={!isEditing || isLoading}
                  leftIcon={<Globe className="w-4 h-4" />}
                />

                <Select
                  label={t('profile.fields.timezone')}
                  options={timezoneOptions}
                  value={profileData.timezone}
                  onChange={handleSelectChange('timezone')}
                  disabled={!isEditing || isLoading}
                  leftIcon={<Clock className="w-4 h-4" />}
                />
              </div>

              <div className="flex gap-3 mt-6 pt-4 border-t flex-wrap">
                {!isEditing ? (
                  <Button
                    variant="outline"
                    onClick={() => setIsEditing(true)}
                    className="flex items-center gap-2"
                  >
                    <User className="w-4 h-4" />
                    {t('profile.edit_profile')}
                  </Button>
                ) : (
                  <>
                    <Button
                      variant="outline"
                      onClick={() => setIsEditing(false)}
                      disabled={isLoading}
                      className="flex items-center gap-2"
                    >
                      <X className="w-4 h-4" />
                      {t('profile.cancel')}
                    </Button>
                    <Button
                      variant="primary"
                      onClick={handleSaveProfile}
                      isLoading={isLoading}
                      loadingText={t('common.saving')}
                      className="flex items-center gap-2"
                    >
                      <Save className="w-4 h-4" />
                      {t('profile.save_changes')}
                    </Button>
                  </>
                )}
                <Button
                  variant="outline"
                  onClick={() => setShowPasswordForm(!showPasswordForm)}
                  className="flex items-center gap-2"
                >
                  <Lock className="w-4 h-4" />
                  {t('profile.change_password')}
                </Button>
              </div>
            </Card>

            {/* Password Change Form */}
            {showPasswordForm && (
              <Card className="p-4 sm:p-6">
                <h2 className="text-base sm:text-lg font-semibold mb-4">{t('profile.password.title')}</h2>

                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6 max-w-4xl">
                  <Input
                    type="password"
                    label={t('profile.password.current_password')}
                    value={passwordData.currentPassword}
                    onChange={handlePasswordChange('currentPassword')}
                    error={errors.currentPassword}
                    disabled={isLoading}
                    leftIcon={<Lock className="w-4 h-4" />}
                  />

                  <Input
                    type="password"
                    label={t('profile.password.new_password')}
                    value={passwordData.newPassword}
                    onChange={handlePasswordChange('newPassword')}
                    error={errors.newPassword}
                    disabled={isLoading}
                    leftIcon={<Lock className="w-4 h-4" />}
                  />

                  <Input
                    type="password"
                    label={t('profile.password.confirm_password')}
                    value={passwordData.confirmPassword}
                    onChange={handlePasswordChange('confirmPassword')}
                    error={errors.confirmPassword}
                    disabled={isLoading}
                    leftIcon={<Lock className="w-4 h-4" />}
                  />
                </div>

                <div className="flex gap-3 pt-6 mt-6 border-t 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')}
                  >
                    {t('profile.password.change_password')}
                  </Button>
                </div>
              </Card>
            )}
          </div>
        </TabsContent>

        {/* Tab 2: Notifications */}
        <TabsContent value="notifications">
          <CommunicationPreferences
            userEmail={profile?.email || ''}
            userPhone={profile?.phone || ''}
            userLanguage={profile?.language || 'es'}
            userTimezone={profile?.timezone || 'Europe/Madrid'}
            onSave={handleSaveNotificationPreferences}
            onReset={() => {}}
            hasChanges={false}
          />
        </TabsContent>

        {/* Tab 3: Privacy & Data */}
        <TabsContent value="privacy">
          <div className="space-y-6">
            {/* 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 */}
            <Card className="p-4 sm:p-6">
              <div className="flex flex-col sm:flex-row items-start justify-between gap-4">
                <div className="flex items-start gap-3 flex-1">
                  <Cookie className="w-5 h-5 text-amber-600 mt-1 flex-shrink-0" />
                  <div>
                    <h3 className="font-semibold text-gray-900 dark:text-white mb-1">
                      {t('profile.privacy.cookie_preferences')}
                    </h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
                      Gestiona tus preferencias de cookies
                    </p>
                  </div>
                </div>
                <Button
                  onClick={() => navigate('/cookie-preferences')}
                  variant="outline"
                  size="sm"
                  className="w-full sm:w-auto"
                >
                  <Cookie className="w-4 h-4 mr-2" />
                  Gestionar
                </Button>
              </div>
            </Card>

            {/* Data Export */}
            <Card className="p-4 sm:p-6">
              <div className="flex items-start gap-3 mb-4">
                <Download className="w-5 h-5 text-green-600 mt-1 flex-shrink-0" />
                <div className="flex-1">
                  <h3 className="font-semibold text-gray-900 dark:text-white mb-1">
                    {t('profile.privacy.export_data')}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                    {t('profile.privacy.export_description')}
                  </p>
                </div>
              </div>

              <Button
                onClick={handleDataExport}
                variant="primary"
                size="sm"
                disabled={isExporting}
                className="w-full sm:w-auto"
              >
                <Download className="w-4 h-4 mr-2" />
                {isExporting ? t('common.loading') : t('profile.privacy.export_button')}
              </Button>
            </Card>

            {/* Account Deletion */}
            <Card className="p-4 sm:p-6 border-red-200 dark:border-red-800">
              <div className="flex items-start gap-3 mb-4">
                <AlertCircle className="w-5 h-5 text-red-600 mt-1 flex-shrink-0" />
                <div className="flex-1">
                  <h3 className="font-semibold text-gray-900 dark:text-white mb-1">
                    {t('profile.privacy.delete_account')}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                    {t('profile.privacy.delete_description')}
                  </p>
                  <p className="text-xs text-red-600 font-semibold">
                    {t('profile.privacy.delete_warning')}
                  </p>
                </div>
              </div>

              <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 w-full sm:w-auto"
              >
                <Trash2 className="w-4 h-4 mr-2" />
                {t('profile.privacy.delete_button')}
              </Button>
            </Card>
          </div>
        </TabsContent>
      </Tabs>

      {/* Delete Account Modal */}
      {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">
              {subscriptionStatus && subscriptionStatus.status === 'active' && (
                <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
                  <div className="flex items-start gap-3">
                    <AlertCircle className="w-5 h-5 text-yellow-600 dark:text-yellow-500 flex-shrink-0 mt-0.5" />
                    <div className="text-sm">
                      <p className="font-semibold text-yellow-900 dark:text-yellow-100 mb-1">
                        Suscripción Activa Detectada
                      </p>
                      <p className="text-yellow-800 dark:text-yellow-200">
                        Tienes una suscripción activa que se cancelará
                      </p>
                    </div>
                  </div>
                </div>
              )}

              <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;