import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useToast } from '../components/Toast';
import { profileService, subscriptionService } from '../services/api';
import FactoryResetWizard from '../components/FactoryResetWizard';
import ImportBackupModal from '../components/ImportBackupModal';
import CancellationWizard from '../components/CancellationWizard';

// Lista de países com código de telefone (foco: ES, BR, US)
const COUNTRY_CODES = [
  { code: '+34', country: 'ES', flag: '🇪🇸', name: 'España' },
  { code: '+55', country: 'BR', flag: '🇧🇷', name: 'Brasil' },
  { code: '+1', country: 'US', flag: '🇺🇸', name: 'United States' },
  { code: '+44', country: 'GB', flag: '🇬🇧', name: 'United Kingdom' },
  { code: '+33', country: 'FR', flag: '🇫🇷', name: 'France' },
  { code: '+49', country: 'DE', flag: '🇩🇪', name: 'Germany' },
  { code: '+39', country: 'IT', flag: '🇮🇹', name: 'Italy' },
  { code: '+351', country: 'PT', flag: '🇵🇹', name: 'Portugal' },
  { code: '+52', country: 'MX', flag: '🇲🇽', name: 'México' },
  { code: '+54', country: 'AR', flag: '🇦🇷', name: 'Argentina' },
  { code: '+56', country: 'CL', flag: '🇨🇱', name: 'Chile' },
  { code: '+57', country: 'CO', flag: '🇨🇴', name: 'Colombia' },
  { code: '+58', country: 'VE', flag: '🇻🇪', name: 'Venezuela' },
  { code: '+81', country: 'JP', flag: '🇯🇵', name: 'Japan' },
  { code: '+86', country: 'CN', flag: '🇨🇳', name: 'China' },
];

// Lista de países para seleção
const COUNTRIES = [
  { code: 'ES', name: 'España', flag: '🇪🇸' },
  { code: 'BR', name: 'Brasil', flag: '🇧🇷' },
  { code: 'US', name: 'United States', flag: '🇺🇸' },
  { code: 'GB', name: 'United Kingdom', flag: '🇬🇧' },
  { code: 'FR', name: 'France', flag: '🇫🇷' },
  { code: 'DE', name: 'Germany', flag: '🇩🇪' },
  { code: 'IT', name: 'Italy', flag: '🇮🇹' },
  { code: 'PT', name: 'Portugal', flag: '🇵🇹' },
  { code: 'MX', name: 'México', flag: '🇲🇽' },
  { code: 'AR', name: 'Argentina', flag: '🇦🇷' },
  { code: 'CL', name: 'Chile', flag: '🇨🇱' },
  { code: 'CO', name: 'Colombia', flag: '🇨🇴' },
  { code: 'VE', name: 'Venezuela', flag: '🇻🇪' },
  { code: 'JP', name: 'Japan', flag: '🇯🇵' },
  { code: 'CN', name: 'China', flag: '🇨🇳' },
];

// Lista de timezones comuns
const TIMEZONES = [
  { value: 'Europe/Madrid', label: 'Madrid (CET/CEST)' },
  { value: 'Europe/Lisbon', label: 'Lisboa (WET/WEST)' },
  { value: 'Europe/London', label: 'London (GMT/BST)' },
  { value: 'Europe/Paris', label: 'Paris (CET/CEST)' },
  { value: 'Europe/Berlin', label: 'Berlin (CET/CEST)' },
  { value: 'America/Sao_Paulo', label: 'São Paulo (BRT)' },
  { value: 'America/New_York', label: 'New York (EST/EDT)' },
  { value: 'America/Los_Angeles', label: 'Los Angeles (PST/PDT)' },
  { value: 'America/Chicago', label: 'Chicago (CST/CDT)' },
  { value: 'America/Mexico_City', label: 'Ciudad de México (CST)' },
  { value: 'America/Buenos_Aires', label: 'Buenos Aires (ART)' },
  { value: 'America/Santiago', label: 'Santiago (CLT)' },
  { value: 'America/Bogota', label: 'Bogotá (COT)' },
  { value: 'Asia/Tokyo', label: 'Tokyo (JST)' },
  { value: 'Asia/Shanghai', label: 'Shanghai (CST)' },
];

export default function Profile() {
  const { t, i18n } = useTranslation();
  const { showToast } = useToast();
  
  const [loading, setLoading] = useState(true);
  const [savingProfile, setSavingProfile] = useState(false);
  const [savingPassword, setSavingPassword] = useState(false);
  
  // Dados do perfil
  const [profile, setProfile] = useState({
    first_name: '',
    last_name: '',
    email: '',
    phone_country_code: '+34',
    phone: '',
    accept_whatsapp: false,
    accept_emails: true,
    country: 'ES',
    timezone: 'Europe/Madrid',
    locale: 'es',
  });
  
  // Dados de alteração de senha
  const [passwordData, setPasswordData] = useState({
    current_password: '',
    new_password: '',
    new_password_confirmation: '',
  });
  
  // Erros de validação
  const [profileErrors, setProfileErrors] = useState({});
  const [passwordErrors, setPasswordErrors] = useState({});

  // Modais
  const [showFactoryReset, setShowFactoryReset] = useState(false);
  const [showImportBackup, setShowImportBackup] = useState(false);
  const [showCancellation, setShowCancellation] = useState(false);

  // Subscription data
  const [subscriptionData, setSubscriptionData] = useState(null);

  useEffect(() => {
    loadProfile();
    loadSubscription();
  }, []);

  const loadProfile = async () => {
    try {
      setLoading(true);
      const response = await profileService.get();
      if (response.success) {
        const user = response.data.user;
        setProfile({
          first_name: user.first_name || '',
          last_name: user.last_name || '',
          email: user.email || '',
          phone_country_code: user.phone_country_code || '+34',
          phone: user.phone || '',
          accept_whatsapp: user.accept_whatsapp || false,
          accept_emails: user.accept_emails !== false, // default true
          country: user.country || 'ES',
          timezone: user.timezone || 'Europe/Madrid',
          locale: user.locale || i18n.language || 'es',
        });
      }
    } catch (error) {
      console.error('Error loading profile:', error);
      showToast(t('profile.loadError'), 'error');
    } finally {
      setLoading(false);
    }
  };

  const loadSubscription = async () => {
    try {
      const response = await subscriptionService.getStatus();
      if (response.success) {
        setSubscriptionData(response.data);
      }
    } catch (error) {
      console.error('Error loading subscription:', error);
    }
  };

  const handleProfileChange = (field, value) => {
    setProfile(prev => ({
      ...prev,
      [field]: value,
    }));
    // Limpar erro do campo
    if (profileErrors[field]) {
      setProfileErrors(prev => ({ ...prev, [field]: null }));
    }
  };

  const handlePasswordChange = (field, value) => {
    setPasswordData(prev => ({
      ...prev,
      [field]: value,
    }));
    // Limpar erro do campo
    if (passwordErrors[field]) {
      setPasswordErrors(prev => ({ ...prev, [field]: null }));
    }
  };

  const handleSaveProfile = async (e) => {
    e.preventDefault();
    setProfileErrors({});
    
    // Validação básica
    if (!profile.first_name.trim()) {
      setProfileErrors({ first_name: [t('profile.firstNameRequired')] });
      return;
    }
    if (!profile.last_name.trim()) {
      setProfileErrors({ last_name: [t('profile.lastNameRequired')] });
      return;
    }
    if (!profile.phone.trim()) {
      setProfileErrors({ phone: [t('profile.phoneRequired')] });
      return;
    }
    
    try {
      setSavingProfile(true);
      const response = await profileService.update(profile);
      
      if (response.success) {
        showToast(t('profile.saveSuccess'), 'success');
        // Atualizar idioma se mudou
        if (profile.locale && profile.locale !== i18n.language) {
          i18n.changeLanguage(profile.locale);
        }
      }
    } catch (error) {
      console.error('Error saving profile:', error);
      if (error.response?.data?.errors) {
        setProfileErrors(error.response.data.errors);
      }
      showToast(error.response?.data?.message || t('profile.saveError'), 'error');
    } finally {
      setSavingProfile(false);
    }
  };

  const handleChangePassword = async (e) => {
    e.preventDefault();
    setPasswordErrors({});
    
    // Validação básica no frontend
    if (passwordData.new_password !== passwordData.new_password_confirmation) {
      setPasswordErrors({ new_password_confirmation: [t('profile.passwordMismatch')] });
      return;
    }
    
    if (passwordData.new_password.length < 8) {
      setPasswordErrors({ new_password: [t('profile.passwordTooShort')] });
      return;
    }
    
    try {
      setSavingPassword(true);
      const response = await profileService.update({
        current_password: passwordData.current_password,
        new_password: passwordData.new_password,
        new_password_confirmation: passwordData.new_password_confirmation,
      });
      
      if (response.success) {
        showToast(t('profile.passwordChanged'), 'success');
        // Limpar campos de senha
        setPasswordData({
          current_password: '',
          new_password: '',
          new_password_confirmation: '',
        });
      }
    } catch (error) {
      console.error('Error changing password:', error);
      if (error.response?.data?.errors) {
        setPasswordErrors(error.response.data.errors);
      }
      showToast(error.response?.data?.message || t('profile.passwordError'), 'error');
    } finally {
      setSavingPassword(false);
    }
  };

  if (loading) {
    return (
      <div className="container-fluid py-4">
        <div className="d-flex justify-content-center align-items-center" style={{ minHeight: '400px' }}>
          <div className="spinner-border text-primary" role="status">
            <span className="visually-hidden">{t('common.loading')}</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="container-fluid py-4">
      <div className="row justify-content-center">
        <div className="col-lg-8 col-xl-6">
          {/* Header */}
          <div className="d-flex align-items-center mb-4">
            <i className="bi bi-person-circle fs-2 text-primary me-3"></i>
            <div>
              <h2 className="mb-0">{t('profile.title')}</h2>
              <p className="text-muted mb-0">{t('profile.subtitle')}</p>
            </div>
          </div>

          {/* Dados Pessoais */}
          <div className="card mb-4">
            <div className="card-header">
              <h5 className="mb-0">
                <i className="bi bi-person me-2"></i>
                {t('profile.personalData')}
              </h5>
            </div>
            <div className="card-body">
              <form onSubmit={handleSaveProfile}>
                {/* Nome e Sobrenome */}
                <div className="row">
                  <div className="col-md-6 mb-3">
                    <label htmlFor="first_name" className="form-label">
                      {t('profile.firstName')} <span className="text-danger">*</span>
                    </label>
                    <input
                      type="text"
                      className={`form-control ${profileErrors.first_name ? 'is-invalid' : ''}`}
                      id="first_name"
                      value={profile.first_name}
                      onChange={(e) => handleProfileChange('first_name', e.target.value)}
                      placeholder={t('profile.firstNamePlaceholder')}
                      required
                    />
                    {profileErrors.first_name && (
                      <div className="invalid-feedback">{profileErrors.first_name[0]}</div>
                    )}
                  </div>
                  <div className="col-md-6 mb-3">
                    <label htmlFor="last_name" className="form-label">
                      {t('profile.lastName')} <span className="text-danger">*</span>
                    </label>
                    <input
                      type="text"
                      className={`form-control ${profileErrors.last_name ? 'is-invalid' : ''}`}
                      id="last_name"
                      value={profile.last_name}
                      onChange={(e) => handleProfileChange('last_name', e.target.value)}
                      placeholder={t('profile.lastNamePlaceholder')}
                      required
                    />
                    {profileErrors.last_name && (
                      <div className="invalid-feedback">{profileErrors.last_name[0]}</div>
                    )}
                  </div>
                </div>

                {/* Email */}
                <div className="mb-3">
                  <label htmlFor="email" className="form-label">
                    {t('profile.email')} <span className="text-danger">*</span>
                  </label>
                  <div className="input-group">
                    <span className="input-group-text">
                      <i className="bi bi-envelope"></i>
                    </span>
                    <input
                      type="email"
                      className={`form-control ${profileErrors.email ? 'is-invalid' : ''}`}
                      id="email"
                      value={profile.email}
                      onChange={(e) => handleProfileChange('email', e.target.value)}
                      required
                    />
                    {profileErrors.email && (
                      <div className="invalid-feedback">{profileErrors.email[0]}</div>
                    )}
                  </div>
                </div>

                {/* Telefone */}
                <div className="mb-3">
                  <label htmlFor="phone" className="form-label">
                    {t('profile.phone')} <span className="text-danger">*</span>
                  </label>
                  <div className="input-group">
                    <select
                      className="form-select"
                      style={{ maxWidth: '140px' }}
                      value={profile.phone_country_code}
                      onChange={(e) => handleProfileChange('phone_country_code', e.target.value)}
                    >
                      {COUNTRY_CODES.map(c => (
                        <option key={c.code} value={c.code}>
                          {c.flag} {c.code}
                        </option>
                      ))}
                    </select>
                    <input
                      type="tel"
                      className={`form-control ${profileErrors.phone ? 'is-invalid' : ''}`}
                      id="phone"
                      value={profile.phone}
                      onChange={(e) => handleProfileChange('phone', e.target.value.replace(/\D/g, ''))}
                      placeholder="600 123 456"
                      required
                    />
                    {profileErrors.phone && (
                      <div className="invalid-feedback">{profileErrors.phone[0]}</div>
                    )}
                  </div>
                </div>

                {/* Preferências de Comunicação */}
                <div className="mb-4">
                  <label className="form-label">{t('profile.communicationPreferences')}</label>
                  <div className="card bg-dark">
                    <div className="card-body py-2">
                      <div className="form-check mb-2">
                        <input
                          className="form-check-input"
                          type="checkbox"
                          id="accept_whatsapp"
                          checked={profile.accept_whatsapp}
                          onChange={(e) => handleProfileChange('accept_whatsapp', e.target.checked)}
                        />
                        <label className="form-check-label" htmlFor="accept_whatsapp">
                          <i className="bi bi-whatsapp text-success me-2"></i>
                          {t('profile.acceptWhatsapp')}
                        </label>
                      </div>
                      <div className="form-check">
                        <input
                          className="form-check-input"
                          type="checkbox"
                          id="accept_emails"
                          checked={profile.accept_emails}
                          onChange={(e) => handleProfileChange('accept_emails', e.target.checked)}
                        />
                        <label className="form-check-label" htmlFor="accept_emails">
                          <i className="bi bi-envelope text-info me-2"></i>
                          {t('profile.acceptEmails')}
                        </label>
                      </div>
                    </div>
                  </div>
                  <div className="form-text">{t('profile.communicationNote')}</div>
                </div>

                {/* País e Timezone */}
                <div className="row">
                  <div className="col-md-6 mb-3">
                    <label htmlFor="country" className="form-label">
                      {t('profile.country')}
                    </label>
                    <select
                      className="form-select"
                      id="country"
                      value={profile.country}
                      onChange={(e) => handleProfileChange('country', e.target.value)}
                    >
                      <option value="">{t('profile.selectCountry')}</option>
                      {COUNTRIES.map(c => (
                        <option key={c.code} value={c.code}>
                          {c.flag} {c.name}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="col-md-6 mb-3">
                    <label htmlFor="timezone" className="form-label">
                      {t('profile.timezone')}
                    </label>
                    <select
                      className="form-select"
                      id="timezone"
                      value={profile.timezone}
                      onChange={(e) => handleProfileChange('timezone', e.target.value)}
                    >
                      {TIMEZONES.map(tz => (
                        <option key={tz.value} value={tz.value}>
                          {tz.label}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

                {/* Idioma */}
                <div className="mb-4">
                  <label htmlFor="locale" className="form-label">
                    {t('profile.language')}
                  </label>
                  <select
                    className="form-select"
                    id="locale"
                    value={profile.locale}
                    onChange={(e) => handleProfileChange('locale', e.target.value)}
                  >
                    <option value="es">🇪🇸 Español</option>
                    <option value="pt-BR">🇧🇷 Português (Brasil)</option>
                    <option value="en">🇺🇸 English</option>
                  </select>
                </div>

                {/* Botão Salvar Perfil */}
                <div className="d-flex justify-content-end">
                  <button
                    type="submit"
                    className="btn btn-primary"
                    disabled={savingProfile}
                  >
                    {savingProfile ? (
                      <>
                        <span className="spinner-border spinner-border-sm me-2" role="status"></span>
                        {t('common.saving')}
                      </>
                    ) : (
                      <>
                        <i className="bi bi-check-lg me-2"></i>
                        {t('profile.saveProfile')}
                      </>
                    )}
                  </button>
                </div>
              </form>
            </div>
          </div>

          {/* Alterar Senha */}
          <div className="card">
            <div className="card-header">
              <h5 className="mb-0">
                <i className="bi bi-shield-lock me-2"></i>
                {t('profile.changePassword')}
              </h5>
            </div>
            <div className="card-body">
              <form onSubmit={handleChangePassword}>
                {/* Senha Atual */}
                <div className="mb-3">
                  <label htmlFor="current_password" className="form-label">
                    {t('profile.currentPassword')} <span className="text-danger">*</span>
                  </label>
                  <input
                    type="password"
                    className={`form-control ${passwordErrors.current_password ? 'is-invalid' : ''}`}
                    id="current_password"
                    value={passwordData.current_password}
                    onChange={(e) => handlePasswordChange('current_password', e.target.value)}
                    required
                    autoComplete="current-password"
                  />
                  {passwordErrors.current_password && (
                    <div className="invalid-feedback">{passwordErrors.current_password[0]}</div>
                  )}
                </div>

                {/* Nova Senha */}
                <div className="mb-3">
                  <label htmlFor="new_password" className="form-label">
                    {t('profile.newPassword')} <span className="text-danger">*</span>
                  </label>
                  <input
                    type="password"
                    className={`form-control ${passwordErrors.new_password ? 'is-invalid' : ''}`}
                    id="new_password"
                    value={passwordData.new_password}
                    onChange={(e) => handlePasswordChange('new_password', e.target.value)}
                    required
                    minLength={8}
                    autoComplete="new-password"
                  />
                  {passwordErrors.new_password && (
                    <div className="invalid-feedback">{passwordErrors.new_password[0]}</div>
                  )}
                  <div className="form-text">{t('profile.passwordHint')}</div>
                </div>

                {/* Confirmar Nova Senha */}
                <div className="mb-3">
                  <label htmlFor="new_password_confirmation" className="form-label">
                    {t('profile.confirmPassword')} <span className="text-danger">*</span>
                  </label>
                  <input
                    type="password"
                    className={`form-control ${passwordErrors.new_password_confirmation ? 'is-invalid' : ''}`}
                    id="new_password_confirmation"
                    value={passwordData.new_password_confirmation}
                    onChange={(e) => handlePasswordChange('new_password_confirmation', e.target.value)}
                    required
                    minLength={8}
                    autoComplete="new-password"
                  />
                  {passwordErrors.new_password_confirmation && (
                    <div className="invalid-feedback">{passwordErrors.new_password_confirmation[0]}</div>
                  )}
                </div>

                {/* Botão Alterar Senha */}
                <div className="d-flex justify-content-end">
                  <button
                    type="submit"
                    className="btn btn-warning"
                    disabled={savingPassword}
                  >
                    {savingPassword ? (
                      <>
                        <span className="spinner-border spinner-border-sm me-2" role="status"></span>
                        {t('common.saving')}
                      </>
                    ) : (
                      <>
                        <i className="bi bi-key me-2"></i>
                        {t('profile.changePassword')}
                      </>
                    )}
                  </button>
                </div>
              </form>
            </div>
          </div>

          {/* Seção: Assinatura */}
          {subscriptionData?.has_subscription && subscriptionData?.plan && !subscriptionData?.plan?.is_free && (
            <div className="col-12 mt-4">
              <div className="card shadow-sm">
                <div className="card-header bg-primary text-white">
                  <h5 className="mb-0">
                    <i className="bi bi-credit-card me-2"></i>
                    {t('profile.subscription') || 'Minha Assinatura'}
                  </h5>
                </div>
                <div className="card-body">
                  <div className="row align-items-center">
                    <div className="col-md-8">
                      <div className="d-flex align-items-start mb-3">
                        <i className="bi bi-star-fill text-warning fs-3 me-3"></i>
                        <div>
                          <h6 className="fw-bold mb-1">
                            {subscriptionData.plan.name}
                            <span className="badge bg-success ms-2">{t('common.active') || 'Ativo'}</span>
                          </h6>
                          <p className="text-muted mb-1" style={{ fontSize: '14px' }}>
                            {subscriptionData.plan.formatted_price} / {subscriptionData.plan.billing_period === 'monthly' ? t('common.month') || 'mês' : t('common.year') || 'ano'}
                            <span className="text-warning fw-semibold ms-2">({t('pricing.vatNotIncluded') || '+ IVA'})</span>
                          </p>
                          {subscriptionData.subscription?.current_period_end && (
                            <p className="text-muted mb-0" style={{ fontSize: '13px' }}>
                              <i className="bi bi-calendar-event me-1"></i>
                              {t('profile.renewsOn') || 'Renovação em'}: {new Date(subscriptionData.subscription.current_period_end).toLocaleDateString()}
                            </p>
                          )}
                        </div>
                      </div>

                      <div className="d-flex gap-2 flex-wrap">
                        <button 
                          className="btn btn-sm btn-outline-secondary"
                          onClick={() => window.open('https://www.paypal.com/myaccount/autopay/', '_blank')}
                        >
                          <i className="bi bi-paypal me-1"></i>
                          {t('profile.managePayPal') || 'Gerenciar no PayPal'}
                        </button>
                      </div>
                    </div>

                    <div className="col-md-4 text-md-end mt-3 mt-md-0">
                      <button 
                        className="btn btn-outline-danger w-100"
                        onClick={() => setShowCancellation(true)}
                      >
                        <i className="bi bi-x-circle me-2"></i>
                        {t('profile.cancelSubscription') || 'Cancelar Assinatura'}
                      </button>
                      <small className="text-muted d-block mt-2">
                        {t('profile.cancelAnytime') || 'Cancele a qualquer momento'}
                      </small>
                    </div>
                  </div>

                  {subscriptionData?.guarantee?.within_period && (
                    <div className="alert alert-info mt-3 mb-0">
                      <small>
                        <i className="bi bi-shield-check me-2"></i>
                        <strong>{t('profile.guaranteePeriod') || 'Período de Garantia:'}</strong> Você tem {subscriptionData.guarantee.days_remaining} dia(s) restantes para cancelar com reembolso total (garantia de 7 dias).
                      </small>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}

          {/* Seção: Backup e Factory Reset */}
          <div className="col-12 mt-4">
            <div className="card shadow-sm">
              <div className="card-header bg-danger text-white">
                <h5 className="mb-0">
                  <i className="bi bi-shield-exclamation me-2"></i>
                  {t('profile.dataManagement') || 'Gerenciamento de Dados'}
                </h5>
              </div>
              <div className="card-body">
                <div className="row">
                  {/* Importar Backup */}
                  <div className="col-md-6 mb-3 mb-md-0">
                    <div className="d-flex align-items-start">
                      <i className="bi bi-cloud-upload text-primary fs-3 me-3"></i>
                      <div className="flex-grow-1">
                        <h6 className="fw-bold">{t('profile.importBackup') || 'Importar Backup'}</h6>
                        <p className="text-muted small mb-2">
                          {t('profile.importBackupDesc') || 
                            'Restaure dados de um backup anteriormente exportado. Os dados serão adicionados à sua conta.'}
                        </p>
                        <button 
                          className="btn btn-sm btn-outline-primary"
                          onClick={() => setShowImportBackup(true)}
                        >
                          <i className="bi bi-upload me-1"></i>
                          {t('profile.importBackupBtn') || 'Importar Agora'}
                        </button>
                      </div>
                    </div>
                  </div>

                  {/* Factory Reset */}
                  <div className="col-md-6">
                    <div className="d-flex align-items-start">
                      <i className="bi bi-exclamation-triangle text-danger fs-3 me-3"></i>
                      <div className="flex-grow-1">
                        <h6 className="fw-bold text-danger">
                          {t('profile.factoryReset') || 'Factory Reset'}
                        </h6>
                        <p className="text-muted small mb-2">
                          {t('profile.factoryResetDesc') || 
                            'ATENÇÃO: Deleta permanentemente TODOS os seus dados. Esta ação não pode ser desfeita.'}
                        </p>
                        <button 
                          className="btn btn-sm btn-outline-danger"
                          onClick={() => setShowFactoryReset(true)}
                        >
                          <i className="bi bi-trash me-1"></i>
                          {t('profile.factoryResetBtn') || 'Iniciar Factory Reset'}
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="alert alert-warning mt-3 mb-0">
                  <small>
                    <i className="bi bi-info-circle me-2"></i>
                    {t('profile.dataManagementWarning') || 
                      'Antes de fazer Factory Reset, recomendamos criar um backup dos seus dados para recuperá-los posteriormente se necessário.'}
                  </small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Modais */}
      {showFactoryReset && (
        <FactoryResetWizard onClose={() => setShowFactoryReset(false)} />
      )}
      {showImportBackup && (
        <ImportBackupModal 
          onClose={() => setShowImportBackup(false)}
          onSuccess={() => {
            setShowImportBackup(false);
            // Recarregar dados se necessário
            window.location.reload();
          }}
        />
      )}
      {showCancellation && subscriptionData?.subscription && (
        <CancellationWizard 
          onClose={() => setShowCancellation(false)}
          subscription={subscriptionData.subscription}
        />
      )}
    </div>
  );
}