import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { accountService, liabilityAccountService, assetAccountService } from '../services/api';
import { useToast } from '../components/Toast';
import { ConfirmModal } from '../components/Modal';
import IconSelector from '../components/IconSelector';
import CurrencySelector from '../components/CurrencySelector';
import { useFormatters } from '../hooks';
import AssetWizard from '../components/AssetWizard';
import AccountWizard from '../components/AccountWizard';

const Accounts = () => {
  const { t } = useTranslation();
  const toast = useToast();
  const navigate = useNavigate();
  const { currency: formatCurrencyHook } = useFormatters();
  const [accounts, setAccounts] = useState([]);
  const [liabilityAccounts, setLiabilityAccounts] = useState([]);
  const [assetAccounts, setAssetAccounts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [showAdjustModal, setShowAdjustModal] = useState(false);
  const [showAssetWizard, setShowAssetWizard] = useState(false);
  const [showAccountWizard, setShowAccountWizard] = useState(false);
  const [editingAccount, setEditingAccount] = useState(null);
  const [showAssetDetail, setShowAssetDetail] = useState(false);
  const [selectedAsset, setSelectedAsset] = useState(null);
  const [editingAsset, setEditingAsset] = useState(null);
  const [adjustAccount, setAdjustAccount] = useState(null);
  const [targetBalance, setTargetBalance] = useState('');
  const [adjusting, setAdjusting] = useState(false);
  const [selectedAccount, setSelectedAccount] = useState(null);
  const [saving, setSaving] = useState(false);
  const [recalculating, setRecalculating] = useState(false);
  const [filter, setFilter] = useState({ type: '', is_active: '' });
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  const [activeTab, setActiveTab] = useState('accounts'); // 'accounts', 'liabilities' ou 'assets'

  const [formData, setFormData] = useState({
    name: '',
    type: 'checking',
    bank_name: '',
    account_number: '',
    initial_balance: '0',
    credit_limit: '',
    currency: 'BRL',
    color: '#1E40AF',
    icon: 'bi-bank',
    description: '',
    is_active: true,
    include_in_total: true,
  });

  const accountTypes = accountService.types;
  const accountIcons = accountService.icons;

  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  useEffect(() => {
    loadAccounts();
  }, [filter]);

  const loadAccounts = async () => {
    try {
      setLoading(true);
      
      // Recalcular saldos automaticamente antes de carregar
      await accountService.recalculateAllBalances();
      
      const params = {};
      if (filter.type) params.type = filter.type;
      if (filter.is_active !== '') params.is_active = filter.is_active;
      
      // Carregar contas normais e passivas em paralelo
      const [accountsResponse, liabilityResponse, assetResponse] = await Promise.all([
        accountService.getAll(params),
        liabilityAccountService.getAll({ is_active: filter.is_active || undefined }),
        assetAccountService.getAll({ status: filter.is_active === '1' ? 'active' : undefined })
      ]);
      
      if (accountsResponse.success) {
        setAccounts(accountsResponse.data);
      }
      if (liabilityResponse.success) {
        setLiabilityAccounts(liabilityResponse.data);
      }
      if (assetResponse.success) {
        setAssetAccounts(assetResponse.data);
      }
    } catch (error) {
      toast.error(t('accounts.loadError'));
    } finally {
      setLoading(false);
    }
  };

  const handleOpenModal = (account = null) => {
    if (account) {
      setSelectedAccount(account);
      setFormData({
        name: account.name || '',
        type: account.type || 'checking',
        bank_name: account.bank_name || '',
        account_number: account.account_number || '',
        initial_balance: account.initial_balance?.toString() || '0',
        credit_limit: account.credit_limit?.toString() || '',
        currency: account.currency || 'BRL',
        color: account.color || '#1E40AF',
        icon: account.icon || 'bi-bank',
        description: account.description || '',
        is_active: account.is_active ?? true,
        include_in_total: account.include_in_total ?? true,
      });
    } else {
      setSelectedAccount(null);
      setFormData({
        name: '',
        type: 'checking',
        bank_name: '',
        account_number: '',
        initial_balance: '0',
        credit_limit: '',
        currency: 'BRL',
        color: '#1E40AF',
        icon: 'bi-bank',
        description: '',
        is_active: true,
        include_in_total: true,
      });
    }
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
    setSelectedAccount(null);
  };

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }));

    // Auto-selecionar ícone baseado no tipo
    if (name === 'type' && accountIcons[value]) {
      setFormData(prev => ({
        ...prev,
        icon: accountIcons[value],
      }));
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!formData.name.trim()) {
      toast.error(t('validation.required'));
      return;
    }

    setSaving(true);
    try {
      const data = {
        ...formData,
        initial_balance: parseFloat(formData.initial_balance) || 0,
        credit_limit: formData.credit_limit ? parseFloat(formData.credit_limit) : null,
      };

      let response;
      if (selectedAccount) {
        response = await accountService.update(selectedAccount.id, data);
      } else {
        response = await accountService.create(data);
      }

      if (response.success) {
        toast.success(selectedAccount ? t('accounts.updateSuccess') : t('accounts.createSuccess'));
        handleCloseModal();
        loadAccounts();
      }
    } catch (error) {
      toast.error(error.response?.data?.message || t('accounts.createError'));
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteClick = (account) => {
    setSelectedAccount(account);
    setShowDeleteModal(true);
  };

  const handleDeleteConfirm = async () => {
    if (!selectedAccount) return;

    setSaving(true);
    try {
      const response = await accountService.delete(selectedAccount.id);
      if (response.success) {
        toast.success(t('accounts.deleteSuccess'));
        setShowDeleteModal(false);
        setSelectedAccount(null);
        loadAccounts();
      }
    } catch (error) {
      toast.error(error.response?.data?.message || t('accounts.deleteError'));
    } finally {
      setSaving(false);
    }
  };

  const formatCurrency = (value, currency = 'BRL') => {
    return formatCurrencyHook(value, currency);
  };

  const handleRecalculateBalances = async () => {
    setRecalculating(true);
    try {
      const response = await accountService.recalculateAllBalances();
      if (response.success) {
        const updated = response.data.filter(acc => acc.difference !== 0);
        if (updated.length > 0) {
          toast.success(t('accounts.recalculateSuccess', { count: updated.length }));
        } else {
          toast.info(t('accounts.balancesUpToDate'));
        }
        loadAccounts();
      }
    } catch (error) {
      toast.error(error.response?.data?.message || t('accounts.recalculateError'));
    } finally {
      setRecalculating(false);
    }
  };

  // Abrir modal de ajuste de saldo
  const openAdjustModal = (account) => {
    setAdjustAccount(account);
    setTargetBalance(account.current_balance?.toString() || '0');
    setShowAdjustModal(true);
  };

  // Ajustar saldo da conta
  const handleAdjustBalance = async () => {
    if (!adjustAccount || targetBalance === '') return;
    
    setAdjusting(true);
    try {
      const response = await accountService.adjustBalance(adjustAccount.id, parseFloat(targetBalance));
      if (response.success) {
        toast.success(t('accounts.adjustSuccess'));
        setShowAdjustModal(false);
        loadAccounts();
      }
    } catch (error) {
      toast.error(error.response?.data?.message || t('accounts.adjustError'));
    } finally {
      setAdjusting(false);
    }
  };

  // Abrir modal de detalhes do ativo
  const handleOpenAssetDetail = async (asset) => {
    try {
      const response = await assetAccountService.getById(asset.id);
      if (response.success) {
        setSelectedAsset(response.data);
        setShowAssetDetail(true);
      }
    } catch (error) {
      toast.error('Erro ao carregar detalhes do ativo');
    }
  };

  // Fechar modal de detalhes do ativo
  const handleCloseAssetDetail = () => {
    setShowAssetDetail(false);
    setSelectedAsset(null);
  };

  // Editar ativo
  const handleEditAsset = () => {
    setEditingAsset(selectedAsset);
    setShowAssetDetail(false);
    setShowAssetWizard(true);
  };

  // Callback após salvar/criar ativo
  const handleAssetSuccess = (assetData) => {
    loadAccounts();
    setEditingAsset(null);
    toast.success(editingAsset ? 'Activo actualizado con éxito' : 'Activo creado con éxito');
  };

  // Callback após salvar/criar conta via wizard
  const handleAccountWizardSuccess = (data, destinationType) => {
    loadAccounts();
    setEditingAccount(null);
    
    const isEditing = !!editingAccount;
    
    if (destinationType === 'asset') {
      toast.success(isEditing ? 'Cuenta de ahorro actualizada' : 'Cuenta de ahorro creada como activo');
    } else if (destinationType === 'liability') {
      toast.success(isEditing ? 'Tarjeta de crédito actualizada' : 'Tarjeta de crédito creada como pasivo');
    } else {
      toast.success(isEditing ? t('accounts.updateSuccess') : t('accounts.createSuccess'));
    }
  };

  // Calcula totais agrupados por moeda (incluindo passivos como valor negativo e ativos como positivo)
  const getTotalsByCurrency = () => {
    const totals = {};
    
    // Contas normais
    accounts
      .filter(acc => acc.is_active && acc.include_in_total)
      .forEach(acc => {
        const currency = acc.currency || 'BRL';
        if (!totals[currency]) {
          totals[currency] = 0;
        }
        totals[currency] += parseFloat(acc.current_balance || 0);
      });
    
    // Passivos (como valor negativo - saldo devedor)
    liabilityAccounts
      .filter(acc => acc.is_active && acc.status === 'active')
      .forEach(acc => {
        const currency = acc.currency || 'EUR';
        if (!totals[currency]) {
          totals[currency] = 0;
        }
        // Subtrair o saldo devedor (remaining_balance)
        totals[currency] -= parseFloat(acc.remaining_balance || 0);
      });
    
    // Ativos (como valor positivo - current_value)
    assetAccounts
      .filter(acc => acc.status === 'active')
      .forEach(acc => {
        const currency = acc.currency || 'EUR';
        if (!totals[currency]) {
          totals[currency] = 0;
        }
        // Somar o valor atual do ativo
        totals[currency] += parseFloat(acc.current_value || 0);
      });
    
    return totals;
  };

  // Total de contas ativas (normais + passivas + ativos)
  const getTotalActiveAccounts = () => {
    const normalActive = accounts.filter(a => a.is_active).length;
    const liabilityActive = liabilityAccounts.filter(a => a.is_active).length;
    const assetActive = assetAccounts.filter(a => a.status === 'active').length;
    return normalActive + liabilityActive + assetActive;
  };

  // Total de todas as contas
  const getTotalAccounts = () => {
    return accounts.length + liabilityAccounts.length + assetAccounts.length;
  };

  // Total de ativos por moeda
  const getAssetTotalsByCurrency = () => {
    const totals = {};
    assetAccounts
      .filter(acc => acc.status === 'active')
      .forEach(acc => {
        const currency = acc.currency || 'EUR';
        if (!totals[currency]) {
          totals[currency] = { current: 0, acquisition: 0, count: 0 };
        }
        totals[currency].current += parseFloat(acc.current_value || 0);
        totals[currency].acquisition += parseFloat(acc.acquisition_value || 0);
        totals[currency].count++;
      });
    return totals;
  };

  return (
    <div>
      {/* Header */}
      <div className="d-flex justify-content-between align-items-center mb-4">
        <div>
          <h2 className={`text-white ${isMobile ? 'mb-0 fs-4' : 'mb-1'}`}>
            <i className="bi bi-wallet2 me-2 text-primary"></i>
            {t('nav.accounts')}
          </h2>
          {!isMobile && <p className="text-slate-400 mb-0">{t('accounts.title')}</p>}
        </div>
        <div className="d-flex gap-2">
          {!isMobile && activeTab === 'accounts' && (
            <button 
              className="btn btn-outline-secondary" 
              onClick={handleRecalculateBalances}
              disabled={recalculating}
              title={t('accounts.recalculateBalances')}
            >
              {recalculating ? (
                <span className="spinner-border spinner-border-sm me-2" role="status"></span>
              ) : (
                <i className="bi bi-arrow-repeat me-2"></i>
              )}
              {t('accounts.recalculate')}
            </button>
          )}
          {activeTab === 'accounts' && (
            <button className={`btn btn-primary ${isMobile ? 'btn-sm' : ''}`} onClick={() => setShowAccountWizard(true)}>
              <i className="bi bi-plus-lg me-2"></i>
              {isMobile ? t('common.add') : t('accounts.newAccount')}
            </button>
          )}
          {activeTab === 'liabilities' && (
            <button className={`btn btn-warning ${isMobile ? 'btn-sm' : ''}`} onClick={() => navigate('/liabilities')}>
              <i className="bi bi-gear me-2"></i>
              {isMobile ? t('common.manage') : t('liabilities.manage')}
            </button>
          )}
          {activeTab === 'assets' && (
            <button className={`btn btn-success ${isMobile ? 'btn-sm' : ''}`} onClick={() => setShowAssetWizard(true)}>
              <i className="bi bi-plus-lg me-2"></i>
              {isMobile ? t('common.add') : 'Nuevo Activo'}
            </button>
          )}
        </div>
      </div>

      {/* Tabs - Mobile Optimized */}
      <ul className={`nav nav-tabs mb-4 ${isMobile ? 'nav-fill flex-nowrap overflow-auto' : ''}`} style={{ borderBottom: '1px solid #334155' }}>
        <li className="nav-item">
          <button 
            className={`nav-link ${activeTab === 'accounts' ? 'active bg-primary text-white' : 'text-slate-400'} ${isMobile ? 'px-2 py-2' : ''}`}
            onClick={() => setActiveTab('accounts')}
            style={{ 
              border: 'none', 
              borderRadius: '0.5rem 0.5rem 0 0',
              backgroundColor: activeTab === 'accounts' ? undefined : 'transparent',
              fontSize: isMobile ? '0.75rem' : undefined,
              whiteSpace: 'nowrap'
            }}
          >
            <i className={`bi bi-wallet2 ${isMobile ? '' : 'me-2'}`}></i>
            {isMobile ? '' : t('nav.accounts')} ({accounts.length})
          </button>
        </li>
        <li className="nav-item">
          <button 
            className={`nav-link ${activeTab === 'liabilities' ? 'active bg-warning text-dark' : 'text-slate-400'} ${isMobile ? 'px-2 py-2' : ''}`}
            onClick={() => setActiveTab('liabilities')}
            style={{ 
              border: 'none', 
              borderRadius: '0.5rem 0.5rem 0 0',
              backgroundColor: activeTab === 'liabilities' ? undefined : 'transparent',
              fontSize: isMobile ? '0.75rem' : undefined,
              whiteSpace: 'nowrap'
            }}
          >
            <i className={`bi bi-bank ${isMobile ? '' : 'me-2'}`}></i>
            {isMobile ? '' : t('nav.liabilities')} ({liabilityAccounts.length})
          </button>
        </li>
        <li className="nav-item">
          <button 
            className={`nav-link ${activeTab === 'assets' ? 'active bg-success text-white' : 'text-slate-400'} ${isMobile ? 'px-2 py-2' : ''}`}
            onClick={() => setActiveTab('assets')}
            style={{ 
              border: 'none', 
              borderRadius: '0.5rem 0.5rem 0 0',
              backgroundColor: activeTab === 'assets' ? undefined : 'transparent',
              fontSize: isMobile ? '0.75rem' : undefined,
              whiteSpace: 'nowrap'
            }}
          >
            <i className={`bi bi-graph-up-arrow ${isMobile ? '' : 'me-2'}`}></i>
            {isMobile ? '' : 'Activos'} ({assetAccounts.length})
          </button>
        </li>
      </ul>

      {activeTab === 'accounts' && (
        <>
          {/* Summary Cards */}
      <div className={`row ${isMobile ? 'g-2 mb-3' : 'mb-4'}`}>
        {/* Total por Moeda */}
        <div className="col-md-6">
          <div className={`card border-0 ${!isMobile ? 'h-100' : ''}`} style={{ background: '#1e293b' }}>
            <div className={`card-body ${isMobile ? 'p-3' : ''}`}>
              <div className="d-flex align-items-start">
                <div className={`rounded-circle bg-primary bg-opacity-25 ${isMobile ? 'p-2 me-2' : 'p-3 me-3'}`}>
                  <i className={`bi bi-wallet2 text-primary ${isMobile ? 'fs-5' : 'fs-4'}`}></i>
                </div>
                <div className="flex-grow-1">
                  <p className={`text-slate-400 mb-2 ${isMobile ? '' : 'small'}`} style={isMobile ? { fontSize: '0.75rem' } : undefined}>{t('dashboard.totalBalance')}</p>
                  {Object.keys(getTotalsByCurrency()).length > 0 ? (
                    <div className={`d-flex flex-wrap ${isMobile ? 'gap-2' : 'gap-3'}`}>
                      {Object.entries(getTotalsByCurrency()).map(([currency, total]) => (
                        <div key={currency} className="text-center">
                          <h4 className={`mb-0 ${total >= 0 ? 'text-success' : 'text-danger'} ${isMobile ? 'fs-6' : ''}`} style={isMobile ? { fontSize: '1rem' } : undefined}>
                            {formatCurrency(total, currency)}
                          </h4>
                          <small className="text-slate-500" style={isMobile ? { fontSize: '0.65rem' } : undefined}>{currency}</small>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <h4 className="mb-0 text-slate-500">-</h4>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
        
        {/* Contas Ativas e Total */}
        <div className="col-md-3 col-6">
          <div className={`card border-0 ${!isMobile ? 'h-100' : ''}`} style={{ background: '#1e293b' }}>
            <div className={`card-body ${isMobile ? 'p-3' : ''}`}>
              <div className={`d-flex ${isMobile ? 'flex-column align-items-start' : 'align-items-center'}`}>
                <div className={`rounded-circle bg-success bg-opacity-25 ${isMobile ? 'p-2 mb-2' : 'p-3 me-3'}`}>
                  <i className={`bi bi-check-circle text-success ${isMobile ? 'fs-6' : 'fs-4'}`}></i>
                </div>
                <div>
                  <p className={`text-slate-400 mb-0 ${isMobile ? '' : 'small'}`} style={isMobile ? { fontSize: '0.7rem' } : undefined}>{t('common.active')}</p>
                  <h3 className={`mb-0 text-white ${isMobile ? 'fs-5' : ''}`}>
                    {getTotalActiveAccounts()}
                  </h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="col-md-3 col-6">
          <div className={`card border-0 ${!isMobile ? 'h-100' : ''}`} style={{ background: '#1e293b' }}>
            <div className={`card-body ${isMobile ? 'p-3' : ''}`}>
              <div className={`d-flex ${isMobile ? 'flex-column align-items-start' : 'align-items-center'}`}>
                <div className={`rounded-circle bg-info bg-opacity-25 ${isMobile ? 'p-2 mb-2' : 'p-3 me-3'}`}>
                  <i className={`bi bi-credit-card text-info ${isMobile ? 'fs-6' : 'fs-4'}`}></i>
                </div>
                <div>
                  <p className={`text-slate-400 mb-0 ${isMobile ? '' : 'small'}`} style={isMobile ? { fontSize: '0.7rem' } : undefined}>{t('common.total')}</p>
                  <h3 className={`mb-0 text-white ${isMobile ? 'fs-5' : ''}`}>{getTotalAccounts()}</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Filters */}
      <div className="card border-0 mb-4" style={{ background: '#1e293b' }}>
        <div className="card-body">
          <div className="row g-3">
            <div className="col-md-4">
              <label className="form-label text-slate-400 small">{t('accounts.filterByType')}</label>
              <select 
                className="form-select bg-dark text-white border-secondary"
                value={filter.type}
                onChange={(e) => setFilter(prev => ({ ...prev, type: e.target.value }))}
              >
                <option value="">{t('common.all')}</option>
                {Object.entries(accountTypes).map(([key, label]) => (
                  <option key={key} value={key}>{label}</option>
                ))}
              </select>
            </div>
            <div className="col-md-4">
              <label className="form-label text-slate-400 small">{t('common.status')}</label>
              <select 
                className="form-select bg-dark text-white border-secondary"
                value={filter.is_active}
                onChange={(e) => setFilter(prev => ({ ...prev, is_active: e.target.value }))}
              >
                <option value="">{t('common.all')}</option>
                <option value="1">{t('common.active')}</option>
                <option value="0">{t('common.inactive')}</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      {/* Accounts List */}
      <div className="card border-0" style={{ background: '#1e293b' }}>
        <div className={`card-body ${isMobile ? 'p-2' : 'p-0'}`}>
          {loading ? (
            <div className="text-center py-5">
              <div className="spinner-border text-primary" role="status">
                <span className="visually-hidden">{t('common.loading')}</span>
              </div>
            </div>
          ) : accounts.length === 0 ? (
            <div className="text-center py-5">
              <i className="bi bi-wallet2 display-1 text-slate-600"></i>
              <p className="text-slate-400 mt-3">{t('accounts.noAccounts')}</p>
              <button className="btn btn-primary" onClick={() => setShowAccountWizard(true)}>
                <i className="bi bi-plus-lg me-2"></i>
                {t('accounts.newAccount')}
              </button>
            </div>
          ) : isMobile ? (
            /* Mobile: Cards Layout */
            <div className="d-flex flex-column gap-2">
              {accounts.map((account) => (
                <div 
                  key={account.id} 
                  className="p-3 rounded"
                  style={{ 
                    background: '#0f172a',
                    border: '1px solid #334155'
                  }}
                >
                  <div className="d-flex justify-content-between align-items-start mb-2">
                    <div className="d-flex align-items-center flex-grow-1">
                      <div 
                        className="rounded-circle d-flex align-items-center justify-content-center me-2"
                        style={{ 
                          width: '36px', 
                          height: '36px', 
                          backgroundColor: account.color + '25',
                        }}
                      >
                        <i className={`bi ${account.icon}`} style={{ color: account.color, fontSize: '1rem' }}></i>
                      </div>
                      <div className="flex-grow-1">
                        <div className="text-white fw-medium" style={{ fontSize: '0.9rem' }}>{account.name}</div>
                        {account.account_number && (
                          <small className="text-slate-400" style={{ fontSize: '0.7rem' }}>Nº {account.account_number}</small>
                        )}
                      </div>
                    </div>
                    <div className="d-flex gap-1">
                      <button 
                        className="btn btn-link text-success p-1"
                        onClick={() => openAdjustModal(account)}
                        style={{ fontSize: '1rem' }}
                      >
                        <i className="bi bi-sliders"></i>
                      </button>
                      <button 
                        className="btn btn-link text-info p-1"
                        onClick={() => {
                          setEditingAccount(account);
                          setShowAccountWizard(true);
                        }}
                        style={{ fontSize: '1rem' }}
                      >
                        <i className="bi bi-pencil"></i>
                      </button>
                      <button 
                        className="btn btn-link text-danger p-1"
                        onClick={() => handleDeleteClick(account)}
                        style={{ fontSize: '1rem' }}
                      >
                        <i className="bi bi-trash"></i>
                      </button>
                    </div>
                  </div>
                  <div className="d-flex justify-content-between align-items-center">
                    <div className="d-flex gap-2 align-items-center">
                      <span className="badge" style={{ backgroundColor: '#334155', fontSize: '0.65rem' }}>
                        {accountTypes[account.type] || account.type}
                      </span>
                      {account.is_active ? (
                        <span className="badge bg-success" style={{ fontSize: '0.65rem' }}>{t('common.active')}</span>
                      ) : (
                        <span className="badge bg-secondary" style={{ fontSize: '0.65rem' }}>{t('common.inactive')}</span>
                      )}
                    </div>
                    <div className={`fw-bold ${parseFloat(account.current_balance) >= 0 ? 'text-success' : 'text-danger'}`} style={{ fontSize: '0.95rem' }}>
                      {formatCurrency(account.current_balance, account.currency)}
                    </div>
                  </div>
                  {account.bank_name && (
                    <div className="mt-2 pt-2" style={{ borderTop: '1px solid #334155' }}>
                      <small className="text-slate-400" style={{ fontSize: '0.7rem' }}>
                        <i className="bi bi-bank me-1"></i>{account.bank_name}
                      </small>
                    </div>
                  )}
                </div>
              ))}
            </div>
          ) : (
            /* Desktop: Table Layout */
            <div className="table-responsive">
              <table className="table table-hover mb-0" style={{ '--bs-table-bg': 'transparent', backgroundColor: 'transparent' }}>
                <thead style={{ backgroundColor: 'transparent' }}>
                  <tr style={{ borderBottom: '1px solid #334155', backgroundColor: 'transparent' }}>
                    <th className="text-slate-400 fw-normal py-3 ps-4" style={{ backgroundColor: 'transparent' }}>{t('accounts.accountName')}</th>
                    <th className="text-slate-400 fw-normal py-3" style={{ backgroundColor: 'transparent' }}>{t('common.type')}</th>
                    <th className="text-slate-400 fw-normal py-3" style={{ backgroundColor: 'transparent' }}>{t('accounts.bankName')}</th>
                    <th className="text-slate-400 fw-normal py-3 text-end" style={{ backgroundColor: 'transparent' }}>{t('accounts.currentBalance')}</th>
                    <th className="text-slate-400 fw-normal py-3 text-center" style={{ backgroundColor: 'transparent' }}>{t('common.status')}</th>
                    <th className="text-slate-400 fw-normal py-3 text-end pe-4" style={{ backgroundColor: 'transparent' }}>{t('common.actions')}</th>
                  </tr>
                </thead>
                <tbody style={{ backgroundColor: 'transparent' }}>
                  {accounts.map((account) => (
                    <tr key={account.id} style={{ borderBottom: '1px solid #334155', backgroundColor: 'transparent' }}>
                      <td className="py-3 ps-4" style={{ backgroundColor: 'transparent' }}>
                        <div className="d-flex align-items-center">
                          <div 
                            className="rounded-circle d-flex align-items-center justify-content-center me-3"
                            style={{ 
                              width: '40px', 
                              height: '40px', 
                              backgroundColor: account.color + '25',
                            }}
                          >
                            <i className={`bi ${account.icon}`} style={{ color: account.color }}></i>
                          </div>
                          <div>
                            <div className="text-white fw-medium">{account.name}</div>
                            {account.account_number && (
                              <small className="text-slate-400">Nº {account.account_number}</small>
                            )}
                          </div>
                        </div>
                      </td>
                      <td className="py-3" style={{ backgroundColor: 'transparent' }}>
                        <span className="badge" style={{ backgroundColor: '#334155' }}>
                          {accountTypes[account.type] || account.type}
                        </span>
                      </td>
                      <td className="py-3 text-slate-300" style={{ backgroundColor: 'transparent' }}>{account.bank_name || '-'}</td>
                      <td className={`py-3 text-end fw-medium ${parseFloat(account.current_balance) >= 0 ? 'text-success' : 'text-danger'}`} style={{ backgroundColor: 'transparent' }}>
                        {formatCurrency(account.current_balance, account.currency)}
                      </td>
                      <td className="py-3 text-center" style={{ backgroundColor: 'transparent' }}>
                        {account.is_active ? (
                          <span className="badge bg-success">{t('common.active')}</span>
                        ) : (
                          <span className="badge bg-secondary">{t('common.inactive')}</span>
                        )}
                      </td>
                      <td className="py-3 text-end pe-4" style={{ backgroundColor: 'transparent' }}>
                        <button 
                          className="btn btn-link text-success p-1 me-1"
                          onClick={() => openAdjustModal(account)}
                          title={t('accounts.adjustBalance')}
                        >
                          <i className="bi bi-sliders"></i>
                        </button>
                        <button 
                          className="btn btn-link text-info p-1 me-1"
                          onClick={() => {
                            setEditingAccount(account);
                            setShowAccountWizard(true);
                          }}
                          title={t('common.edit')}
                        >
                          <i className="bi bi-pencil"></i>
                        </button>
                        <button 
                          className="btn btn-link text-danger p-1"
                          onClick={() => handleDeleteClick(account)}
                          title={t('common.delete')}
                        >
                          <i className="bi bi-trash"></i>
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
        </>
      )}

      {/* Tab de Passivos */}
      {activeTab === 'liabilities' && (
        <>
          {/* Liability Accounts Section */}
          {liabilityAccounts.length > 0 ? (
        <div className="card border-0" style={{ background: '#1e293b' }}>
          <div className={`card-body ${isMobile ? 'p-2' : 'p-0'}`}>
            {isMobile ? (
              // Mobile: Cards Layout
              <div className="d-flex flex-column gap-2">
                {liabilityAccounts.map((liability) => (
                  <div 
                    key={`liability-${liability.id}`}
                    className="card border-secondary"
                    style={{ cursor: 'pointer', background: '#0f172a' }}
                    onClick={() => navigate('/liabilities')}
                  >
                    <div className="card-body p-3">
                      {/* Header with Icon and Name */}
                      <div className="d-flex align-items-start gap-2 mb-2">
                        <div 
                          className="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                          style={{ 
                            width: '35px', 
                            height: '35px', 
                            backgroundColor: (liability.color || '#DC2626') + '25',
                          }}
                        >
                          <i className={`bi ${liability.icon || 'bi-file-earmark-text'} fs-6`} style={{ color: liability.color || '#DC2626' }}></i>
                        </div>
                        <div className="flex-grow-1" style={{ minWidth: 0 }}>
                          <div className="text-white fw-medium mb-1" style={{ fontSize: '0.85rem' }}>
                            {liability.name}
                          </div>
                          {liability.contract_number && (
                            <div className="text-slate-400 mb-1" style={{ fontSize: '0.65rem' }}>
                              Nº {liability.contract_number}
                            </div>
                          )}
                        </div>
                        <div>
                          {liability.status === 'active' ? (
                            <span className="badge bg-primary" style={{ fontSize: '0.65rem' }}>
                              {t('common.active')}
                            </span>
                          ) : liability.status === 'paid_off' ? (
                            <span className="badge bg-success" style={{ fontSize: '0.65rem' }}>
                              {t('liabilities.paid')}
                            </span>
                          ) : (
                            <span className="badge bg-secondary" style={{ fontSize: '0.65rem' }}>
                              {liability.status}
                            </span>
                          )}
                        </div>
                      </div>
                      
                      {/* Creditor */}
                      {liability.creditor && (
                        <div className="text-slate-400 mb-2" style={{ fontSize: '0.7rem' }}>
                          <i className="bi bi-building me-1"></i>
                          {liability.creditor}
                        </div>
                      )}
                      
                      {/* Amounts */}
                      <div className="d-flex justify-content-between align-items-center mb-2 pt-2" style={{ borderTop: '1px solid #334155' }}>
                        <div>
                          <div className="text-slate-400" style={{ fontSize: '0.65rem' }}>Principal</div>
                          <div className="text-slate-300 fw-medium" style={{ fontSize: '0.75rem' }}>
                            {formatCurrency(liability.principal_amount, liability.currency)}
                          </div>
                        </div>
                        <div className="text-end">
                          <div className="text-slate-400" style={{ fontSize: '0.65rem' }}>Saldo Devedor</div>
                          <div className="text-danger fw-medium" style={{ fontSize: '0.75rem' }}>
                            -{formatCurrency(liability.remaining_balance, liability.currency)}
                          </div>
                        </div>
                      </div>
                      
                      {/* Progress Bar */}
                      <div>
                        <div className="d-flex justify-content-between align-items-center mb-1">
                          <span className="text-slate-400" style={{ fontSize: '0.65rem' }}>Progresso</span>
                          <span className="text-slate-400 fw-medium" style={{ fontSize: '0.7rem' }}>
                            {liability.progress_percentage || 0}%
                          </span>
                        </div>
                        <div className="progress" style={{ height: '6px', backgroundColor: '#334155' }}>
                          <div 
                            className="progress-bar bg-success" 
                            style={{ width: `${liability.progress_percentage || 0}%` }}
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              // Desktop: Table Layout
              <div className="table-responsive">
                <table className="table table-hover mb-0" style={{ '--bs-table-bg': 'transparent', backgroundColor: 'transparent' }}>
                  <thead style={{ backgroundColor: 'transparent' }}>
                    <tr style={{ borderBottom: '1px solid #334155', backgroundColor: 'transparent' }}>
                      <th className="text-slate-400 fw-normal py-3 ps-4" style={{ backgroundColor: 'transparent' }}>{t('liabilities.contractName')}</th>
                      <th className="text-slate-400 fw-normal py-3" style={{ backgroundColor: 'transparent' }}>{t('liabilities.creditor')}</th>
                      <th className="text-slate-400 fw-normal py-3 text-end" style={{ backgroundColor: 'transparent' }}>{t('liabilities.principal')}</th>
                      <th className="text-slate-400 fw-normal py-3 text-end" style={{ backgroundColor: 'transparent' }}>{t('liabilities.remaining')}</th>
                      <th className="text-slate-400 fw-normal py-3 text-center" style={{ backgroundColor: 'transparent' }}>{t('liabilities.progress')}</th>
                      <th className="text-slate-400 fw-normal py-3 text-center" style={{ backgroundColor: 'transparent' }}>{t('common.status')}</th>
                    </tr>
                  </thead>
                  <tbody style={{ backgroundColor: 'transparent' }}>
                    {liabilityAccounts.map((liability) => (
                      <tr 
                        key={`liability-${liability.id}`} 
                        style={{ borderBottom: '1px solid #334155', backgroundColor: 'transparent', cursor: 'pointer' }}
                        onClick={() => navigate('/liabilities')}
                      >
                        <td className="py-3 ps-4" style={{ backgroundColor: 'transparent' }}>
                          <div className="d-flex align-items-center">
                            <div 
                              className="rounded-circle d-flex align-items-center justify-content-center me-3"
                              style={{ 
                                width: '40px', 
                                height: '40px', 
                                backgroundColor: (liability.color || '#DC2626') + '25',
                              }}
                            >
                              <i className={`bi ${liability.icon || 'bi-file-earmark-text'}`} style={{ color: liability.color || '#DC2626' }}></i>
                            </div>
                            <div>
                              <div className="text-white fw-medium">{liability.name}</div>
                              {liability.contract_number && (
                                <small className="text-slate-400">Nº {liability.contract_number}</small>
                              )}
                            </div>
                          </div>
                        </td>
                        <td className="py-3 text-slate-300" style={{ backgroundColor: 'transparent' }}>{liability.creditor || '-'}</td>
                        <td className="py-3 text-end text-slate-300" style={{ backgroundColor: 'transparent' }}>
                          {formatCurrency(liability.principal_amount, liability.currency)}
                        </td>
                        <td className="py-3 text-end fw-medium text-danger" style={{ backgroundColor: 'transparent' }}>
                          -{formatCurrency(liability.remaining_balance, liability.currency)}
                        </td>
                        <td className="py-3 text-center" style={{ backgroundColor: 'transparent' }}>
                          <div className="d-flex align-items-center justify-content-center gap-2">
                            <div className="progress" style={{ width: '80px', height: '6px', backgroundColor: '#334155' }}>
                              <div 
                                className="progress-bar bg-success" 
                                style={{ width: `${liability.progress_percentage || 0}%` }}
                              ></div>
                            </div>
                            <small className="text-slate-400">{liability.progress_percentage || 0}%</small>
                          </div>
                        </td>
                        <td className="py-3 text-center" style={{ backgroundColor: 'transparent' }}>
                          {liability.status === 'active' ? (
                            <span className="badge bg-primary">{t('common.active')}</span>
                          ) : liability.status === 'paid_off' ? (
                            <span className="badge bg-success">{t('liabilities.paid')}</span>
                          ) : (
                            <span className="badge bg-secondary">{liability.status}</span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className="card border-0" style={{ background: '#1e293b' }}>
          <div className="card-body text-center py-5">
            <i className="bi bi-bank display-1 text-slate-600"></i>
            <p className="text-slate-400 mt-3">{t('liabilities.noLiabilities')}</p>
            <button className="btn btn-primary" onClick={() => navigate('/liabilities')}>
              <i className="bi bi-plus-lg me-2"></i>
              {t('liabilities.import')}
            </button>
          </div>
        </div>
      )}
        </>
      )}

      {/* Tab de Ativos */}
      {activeTab === 'assets' && (
        <>
          {/* Summary Cards de Ativos */}
          <div className={`row ${isMobile ? 'g-2 mb-3' : 'mb-4'}`}>
            {Object.entries(getAssetTotalsByCurrency()).map(([currency, data]) => (
              <div className="col-md-4" key={currency}>
                <div className={`card border-0 ${!isMobile ? 'h-100' : ''}`} style={{ background: '#1e293b' }}>
                  <div className={`card-body ${isMobile ? 'p-3' : ''}`}>
                    <div className="d-flex justify-content-between align-items-start">
                      <div>
                        <p className={`text-slate-400 mb-1 ${isMobile ? '' : 'small'}`} style={isMobile ? { fontSize: '0.7rem' } : undefined}>
                          Activos ({currency}) - {data.count} items
                        </p>
                        <h4 className={`mb-0 text-success ${isMobile ? 'fs-5' : ''}`}>
                          {formatCurrency(data.current, currency)}
                        </h4>
                        {data.current !== data.acquisition && (
                          <small className={`${data.current > data.acquisition ? 'text-success' : 'text-danger'}`}>
                            <i className={`bi ${data.current > data.acquisition ? 'bi-arrow-up' : 'bi-arrow-down'} me-1`}></i>
                            {((data.current - data.acquisition) / data.acquisition * 100).toFixed(1)}% desde compra
                          </small>
                        )}
                      </div>
                      <div className={`rounded-circle bg-success bg-opacity-25 ${isMobile ? 'p-2' : 'p-3'}`}>
                        <i className={`bi bi-graph-up-arrow text-success ${isMobile ? 'fs-5' : 'fs-4'}`}></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
            {Object.keys(getAssetTotalsByCurrency()).length === 0 && (
              <div className="col-12">
                <div className="card border-0" style={{ background: '#1e293b' }}>
                  <div className={`card-body ${isMobile ? 'p-3' : ''} text-center`}>
                    <i className="bi bi-graph-up-arrow text-slate-600 fs-1 mb-2"></i>
                    <p className="text-slate-400 mb-0">No hay activos registrados</p>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Lista de Ativos */}
          <div className="card border-0" style={{ background: '#1e293b' }}>
            <div className={`card-body ${isMobile ? 'p-2' : 'p-0'}`}>
              {assetAccounts.length === 0 ? (
                <div className="text-center py-5">
                  <i className="bi bi-graph-up-arrow display-1 text-slate-600"></i>
                  <p className="text-slate-400 mt-3">No hay activos registrados</p>
                  <button className="btn btn-success" onClick={() => setShowAssetWizard(true)}>
                    <i className="bi bi-plus-lg me-2"></i>
                    Crear Activo
                  </button>
                </div>
              ) : isMobile ? (
                // Mobile: Cards Layout para Ativos
                <div className="d-flex flex-column gap-2">
                  {assetAccounts.map((asset) => (
                    <div 
                      key={`asset-${asset.id}`}
                      className="card border-secondary"
                      style={{ cursor: 'pointer', background: '#0f172a' }}
                    >
                      <div className="card-body p-3">
                        {/* Header with Icon and Name */}
                        <div className="d-flex align-items-start gap-2 mb-2">
                          <div 
                            className="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                            style={{ 
                              width: '35px', 
                              height: '35px', 
                              backgroundColor: (asset.color || '#10B981') + '25',
                            }}
                          >
                            <i className={`bi bi-${asset.asset_type === 'real_estate' ? 'house' : asset.asset_type === 'vehicle' ? 'truck' : asset.asset_type === 'investment' ? 'graph-up' : 'box'} fs-6`} style={{ color: asset.color || '#10B981' }}></i>
                          </div>
                          <div className="flex-grow-1" style={{ minWidth: 0 }}>
                            <div className="text-white fw-medium mb-1" style={{ fontSize: '0.85rem' }}>
                              {asset.name}
                            </div>
                            <div className="text-slate-400" style={{ fontSize: '0.65rem' }}>
                              {assetAccountService.statuses[asset.asset_type] || asset.asset_type}
                            </div>
                          </div>
                          <div>
                            <span className={`badge ${asset.status === 'active' ? 'bg-success' : 'bg-secondary'}`} style={{ fontSize: '0.65rem' }}>
                              {asset.status === 'active' ? 'Activo' : asset.status}
                            </span>
                          </div>
                        </div>
                        
                        {/* Values */}
                        <div className="d-flex justify-content-between align-items-center pt-2" style={{ borderTop: '1px solid #334155' }}>
                          <div>
                            <div className="text-slate-400" style={{ fontSize: '0.65rem' }}>Valor Actual</div>
                            <div className="text-success fw-bold" style={{ fontSize: '0.9rem' }}>
                              {formatCurrency(asset.current_value, asset.currency)}
                            </div>
                          </div>
                          <div className="text-end">
                            <div className="text-slate-400" style={{ fontSize: '0.65rem' }}>Rentabilidad</div>
                            <div className={`fw-medium ${parseFloat(asset.current_value) >= parseFloat(asset.acquisition_value) ? 'text-success' : 'text-danger'}`} style={{ fontSize: '0.8rem' }}>
                              {asset.acquisition_value > 0 ? (
                                <>
                                  <i className={`bi ${parseFloat(asset.current_value) >= parseFloat(asset.acquisition_value) ? 'bi-arrow-up' : 'bi-arrow-down'} me-1`}></i>
                                  {(((parseFloat(asset.current_value) - parseFloat(asset.acquisition_value)) / parseFloat(asset.acquisition_value)) * 100).toFixed(1)}%
                                </>
                              ) : '-'}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                // Desktop: Table Layout para Ativos
                <div className="table-responsive">
                  <table className="table table-hover mb-0" style={{ '--bs-table-bg': 'transparent', backgroundColor: 'transparent' }}>
                    <thead style={{ backgroundColor: 'transparent' }}>
                      <tr style={{ borderBottom: '1px solid #334155', backgroundColor: 'transparent' }}>
                        <th className="text-slate-400 fw-normal py-3 ps-4" style={{ backgroundColor: 'transparent' }}>Nombre</th>
                        <th className="text-slate-400 fw-normal py-3" style={{ backgroundColor: 'transparent' }}>Tipo</th>
                        <th className="text-slate-400 fw-normal py-3 text-end" style={{ backgroundColor: 'transparent' }}>Adquisición</th>
                        <th className="text-slate-400 fw-normal py-3 text-end" style={{ backgroundColor: 'transparent' }}>Valor Actual</th>
                        <th className="text-slate-400 fw-normal py-3 text-center" style={{ backgroundColor: 'transparent' }}>Rentabilidad</th>
                        <th className="text-slate-400 fw-normal py-3 text-center" style={{ backgroundColor: 'transparent' }}>{t('common.status')}</th>
                      </tr>
                    </thead>
                    <tbody style={{ backgroundColor: 'transparent' }}>
                      {assetAccounts.map((asset) => {
                        const gainLoss = parseFloat(asset.current_value) - parseFloat(asset.acquisition_value);
                        const gainLossPercent = asset.acquisition_value > 0 ? (gainLoss / parseFloat(asset.acquisition_value)) * 100 : 0;
                        return (
                          <tr 
                            key={`asset-${asset.id}`} 
                            style={{ borderBottom: '1px solid #334155', backgroundColor: 'transparent', cursor: 'pointer' }}
                            onClick={() => handleOpenAssetDetail(asset)}
                            className="asset-row-hover"
                          >
                            <td className="py-3 ps-4" style={{ backgroundColor: 'transparent' }}>
                              <div className="d-flex align-items-center">
                                <div 
                                  className="rounded-circle d-flex align-items-center justify-content-center me-3"
                                  style={{ 
                                    width: '40px', 
                                    height: '40px', 
                                    backgroundColor: (asset.color || '#10B981') + '25',
                                  }}
                                >
                                  <i className={`bi bi-${asset.asset_type === 'real_estate' ? 'house' : asset.asset_type === 'vehicle' ? 'truck' : asset.asset_type === 'investment' ? 'graph-up' : 'box'}`} style={{ color: asset.color || '#10B981' }}></i>
                                </div>
                                <div>
                                  <div className="text-white fw-medium">{asset.name}</div>
                                  {asset.description && (
                                    <small className="text-slate-400">{asset.description.substring(0, 30)}</small>
                                  )}
                                </div>
                              </div>
                            </td>
                            <td className="py-3" style={{ backgroundColor: 'transparent' }}>
                              <span className="badge" style={{ backgroundColor: '#334155' }}>
                                {asset.asset_type === 'real_estate' ? 'Inmueble' : 
                                 asset.asset_type === 'vehicle' ? 'Vehículo' : 
                                 asset.asset_type === 'investment' ? 'Inversión' : 
                                 asset.asset_type === 'equipment' ? 'Equipamiento' : 
                                 asset.asset_type === 'receivable' ? 'Crédito' : 
                                 asset.asset_type === 'cash' ? 'Efectivo' : 
                                 asset.asset_type}
                              </span>
                            </td>
                            <td className="py-3 text-end text-slate-300" style={{ backgroundColor: 'transparent' }}>
                              {formatCurrency(asset.acquisition_value, asset.currency)}
                            </td>
                            <td className="py-3 text-end fw-medium text-success" style={{ backgroundColor: 'transparent' }}>
                              {formatCurrency(asset.current_value, asset.currency)}
                            </td>
                            <td className="py-3 text-center" style={{ backgroundColor: 'transparent' }}>
                              <span className={`fw-medium ${gainLoss >= 0 ? 'text-success' : 'text-danger'}`}>
                                <i className={`bi ${gainLoss >= 0 ? 'bi-arrow-up' : 'bi-arrow-down'} me-1`}></i>
                                {gainLossPercent.toFixed(1)}%
                              </span>
                            </td>
                            <td className="py-3 text-center" style={{ backgroundColor: 'transparent' }}>
                              <span className={`badge ${asset.status === 'active' ? 'bg-success' : 'bg-secondary'}`}>
                                {asset.status === 'active' ? 'Activo' : asset.status === 'disposed' ? 'Vendido' : asset.status}
                              </span>
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </>
      )}

      {/* Asset Wizard Modal */}
      <AssetWizard 
        isOpen={showAssetWizard}
        onClose={() => {
          setShowAssetWizard(false);
          setEditingAsset(null);
        }}
        onSuccess={handleAssetSuccess}
        asset={editingAsset}
      />

      {/* Account Wizard Modal */}
      <AccountWizard
        isOpen={showAccountWizard}
        onClose={() => {
          setShowAccountWizard(false);
          setEditingAccount(null);
        }}
        onSuccess={handleAccountWizardSuccess}
        account={editingAccount}
      />

      {/* Modal de Criar/Editar */}
      {showModal && (
        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
          <div className="modal-dialog modal-lg modal-dialog-centered">
            <div className="modal-content" style={{ background: '#1e293b' }}>
              <div className="modal-header border-bottom" style={{ borderColor: '#334155 !important' }}>
                <h5 className="modal-title text-white">
                  <i className={`bi ${selectedAccount ? 'bi-pencil' : 'bi-plus-circle'} me-2`}></i>
                  {selectedAccount ? t('accounts.editAccount') : t('accounts.newAccount')}
                </h5>
                <button type="button" className="btn-close btn-close-white" onClick={handleCloseModal}></button>
              </div>
              <form onSubmit={handleSubmit}>
                <div className="modal-body">
                  <div className="row g-3">
                    {/* Nome */}
                    <div className="col-md-8">
                      <label className="form-label text-slate-300">{t('accounts.accountName')} *</label>
                      <input
                        type="text"
                        className="form-control bg-dark text-white border-secondary"
                        name="name"
                        value={formData.name}
                        onChange={handleChange}
                        placeholder="Ex: Conta Principal, Cartão Nubank..."
                        required
                      />
                    </div>

                    {/* Tipo */}
                    <div className="col-md-4">
                      <label className="form-label text-slate-300">{t('common.type')} *</label>
                      <select
                        className="form-select bg-dark text-white border-secondary"
                        name="type"
                        value={formData.type}
                        onChange={handleChange}
                        required
                      >
                        {Object.entries(accountTypes).map(([key, label]) => (
                          <option key={key} value={key}>{label}</option>
                        ))}
                      </select>
                    </div>

                    {/* Banco */}
                    <div className="col-md-6">
                      <label className="form-label text-slate-300">{t('accounts.bankName')}</label>
                      <input
                        type="text"
                        className="form-control bg-dark text-white border-secondary"
                        name="bank_name"
                        value={formData.bank_name}
                        onChange={handleChange}
                        placeholder="Ex: Banco do Brasil, Nubank..."
                      />
                    </div>

                    {/* Número da Conta */}
                    <div className="col-md-6">
                      <label className="form-label text-slate-300">{t('accounts.accountNumber')}</label>
                      <input
                        type="text"
                        className="form-control bg-dark text-white border-secondary"
                        name="account_number"
                        value={formData.account_number}
                        onChange={handleChange}
                        placeholder="Ex: 12345-6"
                      />
                    </div>

                    {/* Saldo Inicial */}
                    <div className="col-md-4">
                      <label className="form-label text-slate-300">{t('accounts.initialBalance')}</label>
                      <input
                        type="number"
                        step="0.01"
                        className="form-control bg-dark text-white border-secondary"
                        name="initial_balance"
                        value={formData.initial_balance}
                        onChange={handleChange}
                      />
                    </div>

                    {/* Limite de Crédito (para cartões) */}
                    {(formData.type === 'credit_card' || formData.type === 'liability') && (
                      <div className="col-md-4">
                        <label className="form-label text-slate-300">{t('accounts.creditLimit')}</label>
                        <input
                          type="number"
                          step="0.01"
                          className="form-control bg-dark text-white border-secondary"
                          name="credit_limit"
                          value={formData.credit_limit}
                          onChange={handleChange}
                        />
                      </div>
                    )}

                    {/* Moeda */}
                    <div className="col-md-4">
                      <label className="form-label text-slate-300">{t('accounts.currency')}</label>
                      <CurrencySelector
                        value={formData.currency}
                        onChange={(currency) => setFormData(prev => ({ ...prev, currency }))}
                      />
                    </div>

                    {/* Cor */}
                    <div className="col-md-3">
                      <label className="form-label text-slate-300">{t('common.color')}</label>
                      <input
                        type="color"
                        className="form-control form-control-color bg-dark border-secondary w-100"
                        name="color"
                        value={formData.color}
                        onChange={handleChange}
                      />
                    </div>

                    {/* Ícone */}
                    <div className="col-md-5">
                      <label className="form-label text-slate-300">{t('common.icon')}</label>
                      <IconSelector
                        value={formData.icon}
                        onChange={(icon) => setFormData(prev => ({ ...prev, icon }))}
                        type="account"
                      />
                    </div>

                    {/* Descrição */}
                    <div className="col-12">
                      <label className="form-label text-slate-300">{t('common.description')}</label>
                      <textarea
                        className="form-control bg-dark text-white border-secondary"
                        name="description"
                        value={formData.description}
                        onChange={handleChange}
                        rows="2"
                        placeholder={t('accounts.descriptionPlaceholder')}
                      ></textarea>
                    </div>

                    {/* Checkboxes */}
                    <div className="col-md-6">
                      <div className="form-check">
                        <input
                          type="checkbox"
                          className="form-check-input"
                          id="is_active"
                          name="is_active"
                          checked={formData.is_active}
                          onChange={handleChange}
                        />
                        <label className="form-check-label text-slate-300" htmlFor="is_active">
                          {t('common.active')}
                        </label>
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-check">
                        <input
                          type="checkbox"
                          className="form-check-input"
                          id="include_in_total"
                          name="include_in_total"
                          checked={formData.include_in_total}
                          onChange={handleChange}
                        />
                        <label className="form-check-label text-slate-300" htmlFor="include_in_total">
                          {t('accounts.includeInTotal')}
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="modal-footer border-top" style={{ borderColor: '#334155 !important' }}>
                  <button type="button" className="btn btn-outline-light" onClick={handleCloseModal}>
                    {t('common.cancel')}
                  </button>
                  <button type="submit" className="btn btn-primary" disabled={saving}>
                    {saving ? (
                      <>
                        <span className="spinner-border spinner-border-sm me-2"></span>
                        {t('common.loading')}
                      </>
                    ) : (
                      <>
                        <i className="bi bi-check-lg me-2"></i>
                        {selectedAccount ? t('common.save') : t('common.create')}
                      </>
                    )}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Ajuste de Saldo */}
      {showAdjustModal && adjustAccount && (
        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
          <div className="modal-dialog modal-dialog-centered">
            <div className="modal-content" style={{ background: '#1e293b', border: '1px solid #334155' }}>
              <div className="modal-header border-0">
                <h5 className="modal-title text-white">
                  <i className="bi bi-sliders me-2 text-success"></i>
                  {t('accounts.adjustBalance')}
                </h5>
                <button 
                  type="button" 
                  className="btn-close btn-close-white" 
                  onClick={() => setShowAdjustModal(false)}
                ></button>
              </div>
              <div className="modal-body">
                <div className="alert alert-info bg-info bg-opacity-10 border-info">
                  <i className="bi bi-info-circle me-2"></i>
                  {t('accounts.adjustInfo')}
                </div>
                <div className="mb-3">
                  <label className="form-label text-white">{t('accounts.accountName')}</label>
                  <input 
                    type="text" 
                    className="form-control bg-dark text-white border-secondary" 
                    value={adjustAccount.name} 
                    disabled 
                  />
                </div>
                <div className="mb-3">
                  <label className="form-label text-white">{t('accounts.currentBalance')}</label>
                  <input 
                    type="text" 
                    className="form-control bg-dark text-white border-secondary" 
                    value={formatCurrency(adjustAccount.current_balance, adjustAccount.currency)} 
                    disabled 
                  />
                </div>
                <div className="mb-3">
                  <label className="form-label text-white">
                    {t('accounts.targetBalance')} <span className="text-danger">*</span>
                  </label>
                  <input 
                    type="number" 
                    step="0.01"
                    className="form-control bg-dark text-white border-secondary" 
                    value={targetBalance}
                    onChange={(e) => setTargetBalance(e.target.value)}
                    placeholder={t('accounts.targetBalancePlaceholder')}
                  />
                  <small className="text-muted">
                    {t('accounts.targetBalanceHelp')}
                  </small>
                </div>
              </div>
              <div className="modal-footer border-0">
                <button 
                  type="button" 
                  className="btn btn-secondary" 
                  onClick={() => setShowAdjustModal(false)}
                >
                  {t('common.cancel')}
                </button>
                <button 
                  type="button" 
                  className="btn btn-success"
                  onClick={handleAdjustBalance}
                  disabled={adjusting || targetBalance === ''}
                >
                  {adjusting ? (
                    <>
                      <span className="spinner-border spinner-border-sm me-2"></span>
                      {t('common.loading')}
                    </>
                  ) : (
                    <>
                      <i className="bi bi-check-lg me-2"></i>
                      {t('accounts.adjust')}
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Detalhes do Ativo */}
      {showAssetDetail && selectedAsset && (
        <div className="modal fade show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.8)' }}>
          <div className="modal-dialog modal-lg modal-dialog-centered">
            <div className="modal-content" style={{ backgroundColor: '#1e293b', border: '1px solid #334155' }}>
              <div className="modal-header border-0">
                <div className="d-flex align-items-center">
                  <div 
                    className="rounded-circle d-flex align-items-center justify-content-center me-3"
                    style={{ 
                      width: '48px', 
                      height: '48px', 
                      backgroundColor: (selectedAsset.color || '#10B981') + '25',
                    }}
                  >
                    <i className={`bi bi-${selectedAsset.asset_type === 'real_estate' ? 'house' : selectedAsset.asset_type === 'vehicle' ? 'truck' : selectedAsset.asset_type === 'investment' ? 'graph-up' : 'box'} fs-4`} style={{ color: selectedAsset.color || '#10B981' }}></i>
                  </div>
                  <div>
                    <h5 className="modal-title text-white mb-0">{selectedAsset.name}</h5>
                    {selectedAsset.description && (
                      <small className="text-slate-400">{selectedAsset.description}</small>
                    )}
                  </div>
                </div>
                <button type="button" className="btn-close btn-close-white" onClick={handleCloseAssetDetail}></button>
              </div>
              <div className="modal-body">
                {/* Valores principais */}
                <div className="row g-3 mb-4">
                  <div className="col-md-4">
                    <div className="p-3 rounded" style={{ backgroundColor: '#0f172a' }}>
                      <div className="text-slate-400 small mb-1">Valor de Adquisición</div>
                      <div className="text-white fs-5 fw-bold">
                        {formatCurrency(selectedAsset.acquisition_value, selectedAsset.currency)}
                      </div>
                    </div>
                  </div>
                  <div className="col-md-4">
                    <div className="p-3 rounded" style={{ backgroundColor: '#0f172a' }}>
                      <div className="text-slate-400 small mb-1">Valor Actual</div>
                      <div className="text-success fs-5 fw-bold">
                        {formatCurrency(selectedAsset.current_value, selectedAsset.currency)}
                      </div>
                    </div>
                  </div>
                  <div className="col-md-4">
                    <div className="p-3 rounded" style={{ backgroundColor: '#0f172a' }}>
                      <div className="text-slate-400 small mb-1">Rentabilidad</div>
                      {(() => {
                        const gainLoss = parseFloat(selectedAsset.current_value) - parseFloat(selectedAsset.acquisition_value);
                        const gainLossPercent = selectedAsset.acquisition_value > 0 ? (gainLoss / parseFloat(selectedAsset.acquisition_value)) * 100 : 0;
                        return (
                          <div className={`fs-5 fw-bold ${gainLoss >= 0 ? 'text-success' : 'text-danger'}`}>
                            <i className={`bi ${gainLoss >= 0 ? 'bi-arrow-up' : 'bi-arrow-down'} me-1`}></i>
                            {formatCurrency(Math.abs(gainLoss), selectedAsset.currency)} ({gainLossPercent.toFixed(1)}%)
                          </div>
                        );
                      })()}
                    </div>
                  </div>
                </div>

                {/* Informações detalhadas */}
                <div className="row g-3">
                  <div className="col-12">
                    <h6 className="text-white mb-3">
                      <i className="bi bi-info-circle me-2"></i>
                      Información del Activo
                    </h6>
                  </div>
                  
                  <div className="col-md-6">
                    <div className="mb-3">
                      <span className="text-slate-400 small">Tipo de Activo</span>
                      <div className="text-white">
                        {selectedAsset.asset_type === 'real_estate' ? 'Inmueble' : 
                         selectedAsset.asset_type === 'vehicle' ? 'Vehículo' : 
                         selectedAsset.asset_type === 'investment' ? 'Inversión' : 
                         selectedAsset.asset_type === 'equipment' ? 'Equipamiento' : 
                         selectedAsset.asset_type === 'receivable' ? 'Crédito por Cobrar' : 
                         selectedAsset.asset_type === 'cash' ? 'Efectivo' : 
                         selectedAsset.asset_type}
                      </div>
                    </div>
                  </div>
                  
                  <div className="col-md-6">
                    <div className="mb-3">
                      <span className="text-slate-400 small">Estado</span>
                      <div>
                        <span className={`badge ${selectedAsset.status === 'active' ? 'bg-success' : 'bg-secondary'}`}>
                          {selectedAsset.status === 'active' ? 'Activo' : selectedAsset.status === 'disposed' ? 'Vendido' : selectedAsset.status}
                        </span>
                      </div>
                    </div>
                  </div>
                  
                  {selectedAsset.acquisition_date && (
                    <div className="col-md-6">
                      <div className="mb-3">
                        <span className="text-slate-400 small">Fecha de Adquisición</span>
                        <div className="text-white">
                          {new Date(selectedAsset.acquisition_date).toLocaleDateString('es-ES', { day: '2-digit', month: 'long', year: 'numeric' })}
                        </div>
                      </div>
                    </div>
                  )}
                  
                  {/* Campos específicos por tipo */}
                  {selectedAsset.asset_type === 'real_estate' && (
                    <>
                      {selectedAsset.address && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Dirección</span>
                            <div className="text-white">{selectedAsset.address}</div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.city && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Ciudad</span>
                            <div className="text-white">{selectedAsset.city}</div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.property_area_m2 && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Área</span>
                            <div className="text-white">{selectedAsset.property_area_m2} m²</div>
                          </div>
                        </div>
                      )}
                    </>
                  )}
                  
                  {selectedAsset.asset_type === 'vehicle' && (
                    <>
                      {selectedAsset.vehicle_brand && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Marca/Modelo</span>
                            <div className="text-white">{selectedAsset.vehicle_brand} {selectedAsset.vehicle_model}</div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.vehicle_year && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Año</span>
                            <div className="text-white">{selectedAsset.vehicle_year}</div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.vehicle_plate && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Matrícula</span>
                            <div className="text-white">{selectedAsset.vehicle_plate}</div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.vehicle_mileage && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Kilometraje</span>
                            <div className="text-white">{selectedAsset.vehicle_mileage.toLocaleString()} km</div>
                          </div>
                        </div>
                      )}
                    </>
                  )}
                  
                  {selectedAsset.asset_type === 'investment' && (
                    <>
                      {selectedAsset.investment_type && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Tipo de Inversión</span>
                            <div className="text-white">
                              {selectedAsset.investment_type === 'stocks' ? 'Acciones' :
                               selectedAsset.investment_type === 'bonds' ? 'Bonos' :
                               selectedAsset.investment_type === 'etf' ? 'ETF' :
                               selectedAsset.investment_type === 'mutual_fund' ? 'Fondo Mutuo' :
                               selectedAsset.investment_type === 'crypto' ? 'Criptomoneda' :
                               selectedAsset.investment_type === 'fixed_deposit' ? 'Depósito a Plazo' :
                               selectedAsset.investment_type}
                            </div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.institution && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Institución</span>
                            <div className="text-white">{selectedAsset.institution}</div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.ticker && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Ticker/Símbolo</span>
                            <div className="text-white">{selectedAsset.ticker}</div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.quantity && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Cantidad</span>
                            <div className="text-white">{selectedAsset.quantity}</div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.interest_rate && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Tasa de Interés</span>
                            <div className="text-white">{selectedAsset.interest_rate}%</div>
                          </div>
                        </div>
                      )}
                      {selectedAsset.maturity_date && (
                        <div className="col-md-6">
                          <div className="mb-3">
                            <span className="text-slate-400 small">Fecha de Vencimiento</span>
                            <div className="text-white">
                              {new Date(selectedAsset.maturity_date).toLocaleDateString('es-ES', { day: '2-digit', month: 'long', year: 'numeric' })}
                            </div>
                          </div>
                        </div>
                      )}
                    </>
                  )}
                </div>
              </div>
              <div className="modal-footer border-0">
                <button type="button" className="btn btn-primary me-2" onClick={handleEditAsset}>
                  <i className="bi bi-pencil me-2"></i>
                  Editar
                </button>
                <button type="button" className="btn btn-secondary" onClick={handleCloseAssetDetail}>
                  Cerrar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Confirmação de Exclusão */}
      <ConfirmModal
        show={showDeleteModal}
        onHide={() => setShowDeleteModal(false)}
        onConfirm={handleDeleteConfirm}
        title={t('accounts.deleteAccount')}
        message={t('accounts.deleteConfirm')}
        confirmText={t('common.delete')}
        loading={saving}
      />
    </div>
  );
};

export default Accounts;