import React, { useState, useEffect, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Link, useSearchParams } from 'react-router-dom';
import { transactionService, accountService, categoryService, costCenterService, transferDetectionService } from '../services/api';
import { useFormatters } from '../hooks';
import Modal from '../components/Modal';
import Toast from '../components/Toast';
import CreateRecurrenceModal from '../components/CreateRecurrenceModal';
import IconSelector from '../components/IconSelector';
import CategorySelector from '../components/CategorySelector';
import ConfirmModal from '../components/ConfirmModal';

export default function Transactions() {
  const { t, i18n } = useTranslation();
  const { currency: formatCurrency, date: formatDate } = useFormatters();
  
  // Helper para locale dinâmico
  const getLocale = () => i18n.language === 'pt-BR' ? 'pt-BR' : i18n.language === 'es' ? 'es-ES' : 'en-US';
  const [searchParams, setSearchParams] = useSearchParams();
  const highlightedRef = useRef(null);

  // Estado para destacar transação
  const [highlightedTransactionId, setHighlightedTransactionId] = useState(null);

  // Mobile detection
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  // Estados principais
  const [weeklyData, setWeeklyData] = useState(null);
  const [accounts, setAccounts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [costCenters, setCostCenters] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Estado de divisa selecionada
  const [selectedCurrency, setSelectedCurrency] = useState(null);
  const [availableCurrencies, setAvailableCurrencies] = useState([]);

  // Estados de paginação
  const [page, setPage] = useState(1);
  const [perPage] = useState(5); // Semanas por página

  // Estados de filtro
  const [filters, setFilters] = useState({
    account_id: '',
    category_id: '',
    cost_center_id: '',
    type: '',
    status: '',
    search: '',
    start_date: '',
    end_date: '',
    date_field: 'effective_date', // Ordenar por data efetiva (com fallback para planejada)
  });

  // Estados de modal
  const [showModal, setShowModal] = useState(false);
  const [showDetailModal, setShowDetailModal] = useState(false);
  const [showCompleteModal, setShowCompleteModal] = useState(false);
  const [showTransferModal, setShowTransferModal] = useState(false);
  const [showSplitModal, setShowSplitModal] = useState(false);
  const [showRecurrenceModal, setShowRecurrenceModal] = useState(false);
  const [recurrenceTransaction, setRecurrenceTransaction] = useState(null);
  const [editingTransaction, setEditingTransaction] = useState(null);
  const [selectedTransaction, setSelectedTransaction] = useState(null);
  const [formData, setFormData] = useState({
    account_id: '',
    category_id: '',
    cost_center_id: '',
    type: 'debit',
    planned_amount: '',
    amount: '',
    description: '',
    notes: '',
    planned_date: new Date().toISOString().split('T')[0],
    effective_date: '',
    status: 'pending',
    reference: '',
  });

  // Estados de toast
  const [toast, setToast] = useState({ show: false, message: '', type: 'success' });

  // Estados de complete
  const [completeData, setCompleteData] = useState({
    amount: '',
    effective_date: new Date().toISOString().split('T')[0],
  });

  // Estados de transferência
  const [transferData, setTransferData] = useState({
    from_account_id: '',
    to_account_id: '',
    amount: '',
    description: '',
    date: new Date().toISOString().split('T')[0],
    notes: '',
  });

  // Estados de divisão
  const [splitData, setSplitData] = useState({
    splits: [
      { category_id: '', amount: '', description: '' },
      { category_id: '', amount: '', description: '' },
    ],
  });

  // Estados de semanas expandidas
  const [expandedWeeks, setExpandedWeeks] = useState({});

  // Estado para transferências expandidas
  const [expandedTransfers, setExpandedTransfers] = useState({});

  // Estado para filtros colapsados
  const [filtersExpanded, setFiltersExpanded] = useState(false);

  // Estados de categorização em lote
  const [showBatchModal, setShowBatchModal] = useState(false);
  const [batchPreview, setBatchPreview] = useState(null);
  const [selectedTransactionIds, setSelectedTransactionIds] = useState(new Set());
  const [loadingBatch, setLoadingBatch] = useState(false);
  const [executingBatch, setExecutingBatch] = useState(false);
  const [batchFormData, setBatchFormData] = useState({
    category_id: '',
    cost_center_id: '',
    add_keyword: true,
  });

  // Estados de converter para transferência
  const [showConvertTransferModal, setShowConvertTransferModal] = useState(false);
  const [convertTransferData, setConvertTransferData] = useState({
    source: null,
    pairs: [],
    loading: false,
    selectedPairId: null,
  });

  // Estados de conciliar com passivo
  const [showReconcileLiabilityModal, setShowReconcileLiabilityModal] = useState(false);
  const [reconcileLiabilityData, setReconcileLiabilityData] = useState({
    transaction: null,
    installments: [],
    loading: false,
    selectedInstallmentId: null,
  });

  // Estados de criação rápida (inline no modal de transação)
  const [showQuickCategoryModal, setShowQuickCategoryModal] = useState(false);
  const [showQuickCostCenterModal, setShowQuickCostCenterModal] = useState(false);
  const [quickCategoryData, setQuickCategoryData] = useState({
    name: '',
    parent_id: '',
    type: 'both',
    icon: 'bi-tag',
  });
  const [quickCostCenterData, setQuickCostCenterData] = useState({
    name: '',
    code: '',
  });
  const [savingQuickItem, setSavingQuickItem] = useState(false);
  const [quickCreateSource, setQuickCreateSource] = useState('form'); // 'form' ou 'batch'

  // Estado para modal de confirmação
  const [confirmModal, setConfirmModal] = useState({
    show: false,
    message: '',
    onConfirm: null,
    variant: 'danger',
  });

  // Estado para modal de categorização rápida individual
  const [showQuickCategorizeModal, setShowQuickCategorizeModal] = useState(false);
  const [quickCategorizeData, setQuickCategorizeData] = useState({
    transaction: null,
    category_id: '',
    cost_center_id: '',
    add_keyword: true,
  });
  const [savingQuickCategorize, setSavingQuickCategorize] = useState(false);

  // Calcular se há filtros ativos (excluindo date_field que é sempre preenchido)
  const hasActiveFilters = Object.entries(filters).some(([key, v]) => key !== 'date_field' && v !== '');
  const activeFiltersCount = Object.entries(filters).filter(([key, v]) => key !== 'date_field' && v !== '').length;

  // Carregar dados iniciais
  const loadData = useCallback(async () => {
    try {
      setLoading(true);
      const [accountsRes, categoriesRes, costCentersRes] = await Promise.all([
        accountService.getAll(),
        categoryService.getAll({ flat: true }),
        costCenterService.getAll(),
      ]);
      
      setAccounts(Array.isArray(accountsRes) ? accountsRes : (accountsRes.data || []));
      setCategories(Array.isArray(categoriesRes) ? categoriesRes : (categoriesRes.data || []));
      setCostCenters(Array.isArray(costCentersRes) ? costCentersRes : (costCentersRes.data || []));
    } catch (err) {
      setError(err.response?.data?.message || 'Error loading data');
    } finally {
      setLoading(false);
    }
  }, []);

  // Carregar transações por semana
  const loadWeeklyData = useCallback(async () => {
    try {
      setLoading(true);
      const params = {
        ...filters,
        page,
        per_page: perPage,
        currency: selectedCurrency,
      };
      
      // Remover params vazios
      Object.keys(params).forEach(key => {
        if (params[key] === '' || params[key] === null) {
          delete params[key];
        }
      });

      const response = await transactionService.getByWeek(params);
      setWeeklyData(response);
      
      // Atualizar divisas disponíveis
      if (response.currencies && response.currencies.length > 0) {
        setAvailableCurrencies(response.currencies);
        // Se não tem divisa selecionada, usar a primeira
        if (!selectedCurrency && response.currencies.length > 0) {
          setSelectedCurrency(response.currencies[0]);
        }
      }
      
      // Expandir a primeira semana por padrão
      if (response.data && selectedCurrency && response.data[selectedCurrency]?.weeks?.length > 0) {
        const firstWeek = response.data[selectedCurrency].weeks[0]?.year_week;
        if (firstWeek && !expandedWeeks[firstWeek]) {
          setExpandedWeeks(prev => ({ ...prev, [firstWeek]: true }));
        }
      }
    } catch (err) {
      setError(err.response?.data?.message || 'Error loading transactions');
    } finally {
      setLoading(false);
    }
  }, [filters, page, perPage, selectedCurrency, expandedWeeks]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  useEffect(() => {
    loadWeeklyData();
  }, [filters, page, selectedCurrency]); // eslint-disable-line react-hooks/exhaustive-deps

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

  // Efeito para destacar transação via URL
  useEffect(() => {
    const highlightId = searchParams.get('highlight');
    if (highlightId) {
      const id = parseInt(highlightId, 10);
      setHighlightedTransactionId(id);
      
      // Buscar transação para encontrar a semana correta
      transactionService.getById(id).then(transaction => {
        if (transaction && transaction.effective_date) {
          // Calcular year_week da transação
          const date = new Date(transaction.effective_date);
          const year = date.getFullYear();
          const startOfYear = new Date(year, 0, 1);
          const days = Math.floor((date - startOfYear) / (24 * 60 * 60 * 1000));
          const week = Math.ceil((days + startOfYear.getDay() + 1) / 7);
          const yearWeek = `${year}-W${String(week).padStart(2, '0')}`;
          
          // Expandir a semana da transação
          setExpandedWeeks(prev => ({ ...prev, [yearWeek]: true }));
          
          // Scroll para a transação após um pequeno delay
          setTimeout(() => {
            if (highlightedRef.current) {
              highlightedRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
          }, 500);
        }
      }).catch(err => {
        console.error('Error fetching transaction for highlight:', err);
      });
      
      // Limpar o parâmetro da URL após 5 segundos
      setTimeout(() => {
        setHighlightedTransactionId(null);
        searchParams.delete('highlight');
        setSearchParams(searchParams, { replace: true });
      }, 5000);
    }
  }, [searchParams, setSearchParams]);

  // Handlers de filtro
  const handleFilterChange = (e) => {
    const { name, value } = e.target;
    setFilters(prev => ({ ...prev, [name]: value }));
    setPage(1); // Reset para primeira página ao filtrar
  };

  const clearFilters = () => {
    setFilters({
      account_id: '',
      category_id: '',
      cost_center_id: '',
      type: '',
      status: '',
      search: '',
      start_date: '',
      end_date: '',
    });
    setPage(1);
  };

  // Toggle expansão de semana
  const toggleWeekExpansion = (yearWeek) => {
    setExpandedWeeks(prev => ({
      ...prev,
      [yearWeek]: !prev[yearWeek]
    }));
  };

  // Handlers de formulário
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const resetForm = () => {
    setFormData({
      account_id: accounts[0]?.id || '',
      category_id: '',
      cost_center_id: '',
      type: 'debit',
      planned_amount: '',
      amount: '',
      description: '',
      notes: '',
      planned_date: new Date().toISOString().split('T')[0],
      effective_date: '',
      status: 'pending',
      reference: '',
    });
    setEditingTransaction(null);
  };

  const openNewModal = () => {
    resetForm();
    setShowModal(true);
  };

  const openEditModal = (transaction) => {
    setEditingTransaction(transaction);
    setFormData({
      account_id: transaction.account?.id || '',
      category_id: transaction.category?.id || '',
      cost_center_id: transaction.cost_center?.id || '',
      type: transaction.type,
      planned_amount: transaction.planned_amount,
      amount: transaction.amount || '',
      description: transaction.description,
      notes: transaction.notes || '',
      planned_date: transaction.planned_date,
      effective_date: transaction.effective_date || '',
      status: transaction.status,
      reference: transaction.reference || '',
    });
    setShowModal(true);
  };

  const openDetailModal = async (transaction) => {
    try {
      const detail = await transactionService.getById(transaction.id);
      setSelectedTransaction(detail);
      setShowDetailModal(true);
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  const openCompleteModal = (transaction) => {
    setSelectedTransaction(transaction);
    setCompleteData({
      amount: transaction.planned_amount,
      effective_date: new Date().toISOString().split('T')[0],
    });
    setShowCompleteModal(true);
  };

  // Salvar transação
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const dataToSend = {
        ...formData,
        planned_amount: parseFloat(formData.planned_amount),
        amount: formData.amount ? parseFloat(formData.amount) : null,
        category_id: formData.category_id || null,
        cost_center_id: formData.cost_center_id || null,
        effective_date: formData.effective_date || null,
        reference: formData.reference || null,
        notes: formData.notes || null,
      };

      if (editingTransaction) {
        await transactionService.update(editingTransaction.id, dataToSend);
        showToast(t('transactions.updated'), 'success');
      } else {
        await transactionService.create(dataToSend);
        showToast(t('transactions.created'), 'success');
      }
      setShowModal(false);
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  // Marcar como concluída
  const handleComplete = async () => {
    try {
      await transactionService.complete(selectedTransaction.id, {
        amount: parseFloat(completeData.amount),
        effective_date: completeData.effective_date,
      });
      showToast(t('transactions.completed'), 'success');
      setShowCompleteModal(false);
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  // Cancelar transação
  const handleCancel = async (transaction) => {
    setConfirmModal({
      show: true,
      message: t('transactions.confirmCancel'),
      variant: 'warning',
      onConfirm: async () => {
        setConfirmModal(prev => ({ ...prev, show: false }));
        try {
          await transactionService.cancel(transaction.id);
          showToast(t('transactions.cancelled'), 'success');
          loadWeeklyData();
        } catch (err) {
          showToast(err.response?.data?.message || t('common.error'), 'danger');
        }
      }
    });
  };

  // Reverter para pendente
  const handleRevert = async (transaction) => {
    try {
      await transactionService.revert(transaction.id);
      showToast(t('transactions.reverted'), 'success');
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  // Duplicar transação
  const handleDuplicate = async (transaction) => {
    try {
      await transactionService.duplicate(transaction.id);
      showToast(t('transactions.duplicated'), 'success');
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  // Excluir transação
  const handleDelete = async (transaction) => {
    setConfirmModal({
      show: true,
      message: t('transactions.confirmDelete'),
      variant: 'danger',
      onConfirm: async () => {
        setConfirmModal(prev => ({ ...prev, show: false }));
        try {
          await transactionService.delete(transaction.id);
          showToast(t('transactions.deleted'), 'success');
          loadWeeklyData();
        } catch (err) {
          showToast(err.response?.data?.message || t('common.error'), 'danger');
        }
      }
    });
  };

  // ========================================
  // CRIAÇÃO RÁPIDA DE CATEGORIA/CENTRO DE CUSTO
  // ========================================
  const openQuickCategoryModal = () => {
    setQuickCategoryData({
      name: '',
      parent_id: '',
      type: formData.type === 'debit' ? 'expense' : formData.type === 'credit' ? 'income' : 'both',
      icon: 'bi-tag',
    });
    setQuickCreateSource('form');
    setShowQuickCategoryModal(true);
  };

  // Abrir modal de criação rápida de categoria (do batch modal)
  const openQuickCategoryModalForBatch = () => {
    setQuickCategoryData({
      name: '',
      parent_id: '',
      type: 'both',
      icon: 'bi-tag',
    });
    setQuickCreateSource('batch');
    setShowQuickCategoryModal(true);
  };

  const handleQuickCategorySubmit = async (e) => {
    e.preventDefault();
    try {
      setSavingQuickItem(true);
      const result = await categoryService.create(quickCategoryData);
      const newCategory = result.data || result;
      
      // Recarregar categorias
      const categoriesRes = await categoryService.getAll({ flat: true });
      setCategories(Array.isArray(categoriesRes) ? categoriesRes : (categoriesRes.data || []));
      
      // Selecionar a nova categoria (form ou batch)
      if (quickCreateSource === 'batch') {
        setBatchFormData(prev => ({ ...prev, category_id: newCategory.id }));
      } else {
        setFormData(prev => ({ ...prev, category_id: newCategory.id }));
      }
      
      showToast(t('categories.createSuccess'), 'success');
      setShowQuickCategoryModal(false);
    } catch (err) {
      showToast(err.response?.data?.message || t('categories.createError'), 'danger');
    } finally {
      setSavingQuickItem(false);
    }
  };

  const openQuickCostCenterModal = () => {
    setQuickCostCenterData({
      name: '',
      code: '',
    });
    setQuickCreateSource('form');
    setShowQuickCostCenterModal(true);
  };

  // Abrir modal de criação rápida de centro de custo (do batch modal)
  const openQuickCostCenterModalForBatch = () => {
    setQuickCostCenterData({
      name: '',
      code: '',
    });
    setQuickCreateSource('batch');
    setShowQuickCostCenterModal(true);
  };

  const handleQuickCostCenterSubmit = async (e) => {
    e.preventDefault();
    try {
      setSavingQuickItem(true);
      const result = await costCenterService.create(quickCostCenterData);
      const newCostCenter = result.data || result;
      
      // Recarregar centros de custo
      const costCentersRes = await costCenterService.getAll();
      setCostCenters(Array.isArray(costCentersRes) ? costCentersRes : (costCentersRes.data || []));
      
      // Selecionar o novo centro de custo (form ou batch)
      if (quickCreateSource === 'batch') {
        setBatchFormData(prev => ({ ...prev, cost_center_id: newCostCenter.id }));
      } else {
        setFormData(prev => ({ ...prev, cost_center_id: newCostCenter.id }));
      }
      
      showToast(t('costCenters.createSuccess'), 'success');
      setShowQuickCostCenterModal(false);
    } catch (err) {
      showToast(err.response?.data?.message || t('costCenters.createError'), 'danger');
    } finally {
      setSavingQuickItem(false);
    }
  };

  // ========================================
  // CATEGORIZAÇÃO RÁPIDA INDIVIDUAL
  // ========================================
  const openQuickCategorizeModal = (transaction) => {
    setQuickCategorizeData({
      transaction: transaction,
      category_id: transaction.category_id || '',
      cost_center_id: transaction.cost_center_id || '',
      add_keyword: true,
    });
    setShowQuickCategorizeModal(true);
  };

  const handleQuickCategorizeSubmit = async (e) => {
    e.preventDefault();
    try {
      setSavingQuickCategorize(true);
      
      const updateData = {
        category_id: quickCategorizeData.category_id || null,
        cost_center_id: quickCategorizeData.cost_center_id || null,
      };

      // Se add_keyword está ativo e há descrição original, criar keyword
      if (quickCategorizeData.add_keyword && quickCategorizeData.transaction.original_description) {
        // Atualizar transação e criar keyword via batch com uma única transação
        await categoryService.batchCategorize({
          transaction_ids: [quickCategorizeData.transaction.id],
          category_id: updateData.category_id,
          cost_center_id: updateData.cost_center_id,
          add_keyword: true,
        });
      } else {
        // Apenas atualizar a transação
        await transactionService.update(quickCategorizeData.transaction.id, updateData);
      }

      showToast(t('transactions.categorized'), 'success');
      setShowQuickCategorizeModal(false);
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    } finally {
      setSavingQuickCategorize(false);
    }
  };

  // ========================================
  // EFETIVAÇÃO RÁPIDA
  // ========================================
  const handleQuickComplete = async (transaction) => {
    try {
      await transactionService.quickComplete(transaction.id, {
        amount: transaction.planned_amount,
        effective_date: new Date().toISOString().split('T')[0],
      });
      showToast(t('transactions.quickCompleted'), 'success');
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  // ========================================
  // TRANSFERÊNCIA ENTRE CONTAS
  // ========================================
  const openTransferModal = () => {
    setTransferData({
      from_account_id: accounts[0]?.id || '',
      to_account_id: accounts[1]?.id || '',
      amount: '',
      description: '',
      date: new Date().toISOString().split('T')[0],
      notes: '',
    });
    setShowTransferModal(true);
  };

  const handleTransferChange = (e) => {
    const { name, value } = e.target;
    setTransferData(prev => ({ ...prev, [name]: value }));
  };

  const handleTransferSubmit = async () => {
    try {
      await transactionService.transfer({
        ...transferData,
        amount: parseFloat(transferData.amount),
      });
      showToast(t('transactions.transferCreated'), 'success');
      setShowTransferModal(false);
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  // ========================================
  // DIVISÃO DE TRANSAÇÕES
  // ========================================
  const openSplitModal = (transaction) => {
    setSelectedTransaction(transaction);
    const originalAmount = parseFloat(transaction.amount || transaction.planned_amount);
    setSplitData({
      splits: [
        { category_id: '', amount: (originalAmount / 2).toFixed(2), description: '' },
        { category_id: '', amount: (originalAmount / 2).toFixed(2), description: '' },
      ],
    });
    setShowSplitModal(true);
  };

  // RECORRÊNCIA
  // ========================================
  const openRecurrenceModal = (transaction) => {
    setRecurrenceTransaction(transaction);
    setShowRecurrenceModal(true);
  };

  const handleRecurrenceSuccess = (result) => {
    showToast(t('recurring.createSuccess'), 'success');
    loadData();
  };

  const handleSplitChange = (index, field, value) => {
    setSplitData(prev => {
      const newSplits = [...prev.splits];
      newSplits[index] = { ...newSplits[index], [field]: value };
      return { splits: newSplits };
    });
  };

  const addSplitRow = () => {
    setSplitData(prev => ({
      splits: [...prev.splits, { category_id: '', amount: '', description: '' }],
    }));
  };

  const removeSplitRow = (index) => {
    if (splitData.splits.length <= 2) return;
    setSplitData(prev => ({
      splits: prev.splits.filter((_, i) => i !== index),
    }));
  };

  const handleSplitSubmit = async () => {
    try {
      const splitsToSend = splitData.splits.map(s => ({
        category_id: s.category_id || null,
        amount: parseFloat(s.amount),
        description: s.description || null,
      }));
      await transactionService.split(selectedTransaction.id, splitsToSend);
      showToast(t('transactions.splitCreated'), 'success');
      setShowSplitModal(false);
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  const handleUnsplit = async (transaction) => {
    setConfirmModal({
      show: true,
      message: t('transactions.unsplitConfirm'),
      variant: 'warning',
      onConfirm: async () => {
        setConfirmModal(prev => ({ ...prev, show: false }));
        try {
          await transactionService.unsplit(transaction.id);
          showToast(t('transactions.unsplitSuccess'), 'success');
          loadWeeklyData();
        } catch (err) {
          showToast(err.response?.data?.message || t('common.error'), 'danger');
        }
      }
    });
  };

  // ========================================
  // DESVINCULAR TRANSFERÊNCIA
  // ========================================
  const toggleTransferExpanded = (transferId) => {
    setExpandedTransfers(prev => ({
      ...prev,
      [transferId]: !prev[transferId]
    }));
  };

  const handleUnlinkTransfer = async (transfer) => {
    setConfirmModal({
      show: true,
      message: t('transactions.unlinkTransferConfirm'),
      variant: 'warning',
      onConfirm: async () => {
        setConfirmModal(prev => ({ ...prev, show: false }));
        try {
          await transactionService.unlinkTransfer(transfer.debit_transaction_id || transfer.id);
          showToast(t('transactions.unlinkTransferSuccess'), 'success');
          loadWeeklyData();
        } catch (err) {
          showToast(err.response?.data?.message || t('common.error'), 'danger');
        }
      }
    });
  };

  // Converter transação em transferência
  const openConvertTransferModal = async (transaction) => {
    setShowConvertTransferModal(true);
    setConvertTransferData({
      source: transaction,
      pairs: [],
      loading: true,
      selectedPairId: null,
    });

    try {
      const result = await transferDetectionService.findPairs(transaction.id);
      setConvertTransferData(prev => ({
        ...prev,
        source: result.source,
        pairs: result.pairs,
        loading: false,
      }));
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
      setShowConvertTransferModal(false);
    }
  };

  const handleConvertToTransfer = async () => {
    const { source, selectedPairId } = convertTransferData;
    if (!source || !selectedPairId) return;

    try {
      // Determinar qual é o débito e qual é o crédito
      const debitId = source.type === 'debit' ? source.id : selectedPairId;
      const creditId = source.type === 'credit' ? source.id : selectedPairId;

      await transferDetectionService.confirm(debitId, creditId);
      showToast(t('transactions.convertToTransferSuccess'), 'success');
      setShowConvertTransferModal(false);
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  // Conciliar com passivo
  const openReconcileLiabilityModal = async (transaction) => {
    // Só transações de débito podem ser conciliadas
    if (transaction.type !== 'debit') {
      showToast(t('transactions.onlyDebitCanReconcile'), 'warning');
      return;
    }

    // Já está conciliada?
    if (transaction.is_reconciled) {
      showToast(t('transactions.alreadyReconciled'), 'warning');
      return;
    }

    setShowReconcileLiabilityModal(true);
    setReconcileLiabilityData({
      transaction,
      installments: [],
      loading: true,
      selectedInstallmentId: null,
    });

    try {
      const result = await transactionService.findLiabilityInstallments(transaction.id);
      setReconcileLiabilityData(prev => ({
        ...prev,
        transaction: result.transaction,
        installments: result.installments,
        loading: false,
      }));
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
      setShowReconcileLiabilityModal(false);
    }
  };

  const handleReconcileWithLiability = async () => {
    const { transaction, selectedInstallmentId } = reconcileLiabilityData;
    if (!transaction || !selectedInstallmentId) return;

    try {
      await transactionService.reconcileWithLiability(transaction.id, selectedInstallmentId);
      showToast(t('transactions.reconcileSuccess'), 'success');
      setShowReconcileLiabilityModal(false);
      loadWeeklyData();
    } catch (err) {
      showToast(err.response?.data?.message || t('common.error'), 'danger');
    }
  };

  // Toast helper
  const showToast = (message, type) => {
    setToast({ show: true, message, type });
  };

  // Obter moeda da conta
  const getAccountCurrency = (accountId) => {
    if (!accounts || !Array.isArray(accounts)) return 'EUR';
    const account = accounts.find(a => a.id === parseInt(accountId));
    return account?.currency || 'EUR';
  };

  // Obter categorias pai (sem parent_id)
  const parentCategories = Array.isArray(categories) ? categories.filter(c => !c.parent_id) : [];

  // Obter subcategorias de uma categoria pai
  const getSubcategories = (parentId) => {
    if (!categories || !Array.isArray(categories)) return [];
    return categories.filter(c => c.parent_id === parentId);
  };

  // Status badge
  const getStatusBadge = (status) => {
    const colors = {
      pending: 'warning',
      completed: 'success',
      cancelled: 'secondary',
      effective: 'success',
      scheduled: 'primary',
    };
    const labels = {
      pending: t('transactions.status.pending'),
      completed: t('transactions.status.completed'),
      cancelled: t('transactions.status.cancelled'),
      effective: t('transactions.status.effective'),
      scheduled: t('transactions.status.scheduled'),
    };
    return <span className={`badge bg-${colors[status]}`}>{labels[status]}</span>;
  };

  // Type badge
  const getTypeBadge = (type) => {
    const colors = { credit: 'success', debit: 'danger' };
    const labels = { credit: t('transactions.type.credit'), debit: t('transactions.type.debit') };
    return <span className={`badge bg-${colors[type]}`}>{labels[type]}</span>;
  };

  // Formatar nome da semana
  const formatWeekName = (week) => {
    const startDate = new Date(week.start_date);
    const endDate = new Date(week.end_date);
    const startDay = startDate.getDate();
    const endDay = endDate.getDate();
    const startMonth = startDate.toLocaleDateString(getLocale(), { month: 'short' });
    const endMonth = endDate.toLocaleDateString(getLocale(), { month: 'short' });
    
    if (startMonth === endMonth) {
      return `${startDay} - ${endDay} ${startMonth}`;
    }
    return `${startDay} ${startMonth} - ${endDay} ${endMonth}`;
  };

  // Funções de seleção de transações
  const getAllVisibleTransactionIds = () => {
    const ids = [];
    weeks.forEach(week => {
      week.transactions?.forEach(t => ids.push(t.id));
    });
    return ids;
  };

  const handleToggleTransaction = (id) => {
    setSelectedTransactionIds(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const handleSelectAllVisible = () => {
    const allIds = getAllVisibleTransactionIds();
    if (selectedTransactionIds.size === allIds.length) {
      setSelectedTransactionIds(new Set());
    } else {
      setSelectedTransactionIds(new Set(allIds));
    }
  };

  // Funções de categorização em lote
  const handleOpenBatchModal = () => {
    // Permitir abrir modal se há transações selecionadas OU se há filtros ativos
    if (selectedTransactionIds.size === 0 && !hasActiveFilters) {
      showToast(t('transactions.noTransactionsSelected'), 'warning');
      return;
    }
    setShowBatchModal(true);
    setBatchFormData({
      category_id: '',
      cost_center_id: '',
      add_keyword: !!filters.search,
    });
  };

  const handleCloseBatchModal = () => {
    setShowBatchModal(false);
    setBatchFormData({
      category_id: '',
      cost_center_id: '',
      add_keyword: true,
    });
  };

  const handleExecuteBatchManual = async () => {
    if (!batchFormData.category_id && !batchFormData.cost_center_id) {
      showToast(t('transactions.batchSelectRequired'), 'warning');
      return;
    }

    // Obter IDs selecionados
    const selectedIds = Array.from(selectedTransactionIds);
    
    // Verificar se há transações selecionadas ou filtros ativos
    if (selectedIds.length === 0 && !hasActiveFilters) {
      showToast(t('transactions.noTransactionsSelected'), 'warning');
      return;
    }

    setExecutingBatch(true);
    try {
      const response = await categoryService.categorizeBatchManual(
        batchFormData.category_id || null,
        batchFormData.cost_center_id || null,
        filters, // Enviar filtros sempre
        batchFormData.add_keyword,
        selectedIds.length > 0 ? selectedIds : null // Só enviar IDs se houver seleção
      );
      if (response.success) {
        let message = `${response.data.updated} ${t('transactions.batchUpdated')}`;
        if (response.data.keyword_added) {
          message += ` • ${t('transactions.keywordAdded')}: "${response.data.keyword_text}"`;
        }
        showToast(message, 'success');
        handleCloseBatchModal();
        setSelectedTransactionIds(new Set());
        loadWeeklyData();
      }
    } catch (error) {
      showToast(error.response?.data?.message || t('categories.batchError'), 'error');
    } finally {
      setExecutingBatch(false);
    }
  };

  // Obter dados da divisa atual
  const currentCurrencyData = weeklyData?.data?.[selectedCurrency];
  const pagination = currentCurrencyData?.pagination;
  const weeks = currentCurrencyData?.weeks || [];

  // Calcular totais gerais
  const totalStats = weeks.reduce((acc, week) => ({
    credits: acc.credits + (week.summary?.credits?.total || 0),
    debits: acc.debits + (week.summary?.debits?.total || 0),
    pending: acc.pending + (week.summary?.pending?.total || 0),
    transactions: acc.transactions + (week.summary?.total_transactions || 0),
  }), { credits: 0, debits: 0, pending: 0, transactions: 0 });

  if (error) {
    return (
      <div className="alert alert-danger">
        <i className="bi bi-exclamation-triangle me-2"></i>
        {error}
      </div>
    );
  }

  return (
    <div className="txn-page">
      {/* Header compacto */}
      <div className="txn-header">
        <div className="txn-header-title">
          <i className="bi bi-arrow-left-right" style={{ fontSize: '1.5rem', color: '#3b82f6' }}></i>
          <div>
            <h1>{t('transactions.title')}</h1>
            <span className="subtitle">{totalStats.transactions} {t('transactions.items')} • {selectedCurrency || 'EUR'}</span>
          </div>
        </div>
        <div className="txn-header-actions">
          {hasActiveFilters && (
            <button 
              className={`btn btn-sm ${selectedTransactionIds.size > 0 ? 'btn-warning' : 'btn-outline-warning'}`}
              onClick={handleOpenBatchModal}
              disabled={selectedTransactionIds.size === 0}
            >
              <i className="bi bi-lightning-charge"></i>
              <span className="d-none d-md-inline ms-1">
                {t('categories.batchCategorize')} {selectedTransactionIds.size > 0 && `(${selectedTransactionIds.size})`}
              </span>
            </button>
          )}
          <Link to="/import" className="btn btn-outline-primary btn-sm">
            <i className="bi bi-upload"></i>
            <span className="d-none d-md-inline ms-1">{t('nav.import')}</span>
          </Link>
          <button className="btn btn-outline-info btn-sm" onClick={openTransferModal}>
            <i className="bi bi-arrow-left-right"></i>
            <span className="d-none d-md-inline ms-1">{t('transactions.transfer')}</span>
          </button>
          <button className="btn btn-primary btn-sm" onClick={openNewModal}>
            <i className="bi bi-plus-lg"></i>
            <span className="d-none d-md-inline ms-1">{t('transactions.new')}</span>
          </button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="txn-stats">
        <div className="txn-stat-card">
          <div className="txn-stat-icon credit">
            <i className="bi bi-arrow-down-circle"></i>
          </div>
          <div className="txn-stat-content">
            <div className="txn-stat-label">{t('transactions.credits')}</div>
            <div className="txn-stat-value positive">+{formatCurrency(totalStats.credits, selectedCurrency)}</div>
          </div>
        </div>
        <div className="txn-stat-card">
          <div className="txn-stat-icon debit">
            <i className="bi bi-arrow-up-circle"></i>
          </div>
          <div className="txn-stat-content">
            <div className="txn-stat-label">{t('transactions.debits')}</div>
            <div className="txn-stat-value negative">-{formatCurrency(totalStats.debits, selectedCurrency)}</div>
          </div>
        </div>
        <div className="txn-stat-card">
          <div className="txn-stat-icon balance">
            <i className="bi bi-wallet2"></i>
          </div>
          <div className="txn-stat-content">
            <div className="txn-stat-label">{t('transactions.balance')}</div>
            <div className={`txn-stat-value ${totalStats.credits - totalStats.debits >= 0 ? 'positive' : 'negative'}`}>
              {totalStats.credits - totalStats.debits >= 0 ? '+' : ''}{formatCurrency(totalStats.credits - totalStats.debits, selectedCurrency)}
            </div>
          </div>
        </div>
        <div className="txn-stat-card">
          <div className="txn-stat-icon pending">
            <i className="bi bi-clock-history"></i>
          </div>
          <div className="txn-stat-content">
            <div className="txn-stat-label">{t('transactions.pending')}</div>
            <div className="txn-stat-value">{formatCurrency(totalStats.pending, selectedCurrency)}</div>
          </div>
        </div>
      </div>

      {/* Currency Tabs */}
      {availableCurrencies.length > 1 && (
        <div className="txn-currency-tabs">
          {availableCurrencies.map(currency => (
            <button
              key={currency}
              className={`txn-currency-tab ${selectedCurrency === currency ? 'active' : ''}`}
              onClick={() => { setSelectedCurrency(currency); setPage(1); }}
            >
              {currency}
              {weeklyData?.data?.[currency]?.total_transactions && (
                <span className="count">{weeklyData.data[currency].total_transactions}</span>
              )}
            </button>
          ))}
        </div>
      )}

      {/* Filtros colapsáveis */}
      <div className="txn-filters">
        <div className="txn-filters-toggle" onClick={() => setFiltersExpanded(!filtersExpanded)}>
          <div className="txn-filters-toggle-left">
            <i className={`bi ${filtersExpanded ? 'bi-chevron-down' : 'bi-chevron-right'}`}></i>
            <span><i className="bi bi-funnel me-2"></i>{t('common.filters')}</span>
          </div>
          <div className="txn-filters-active">
            {activeFiltersCount > 0 && (
              <span className="txn-filter-tag">{activeFiltersCount} {t('common.active')}</span>
            )}
            {filters.search && <span className="txn-filter-tag">"{filters.search}"</span>}
          </div>
        </div>
        {filtersExpanded && (
          <div className="txn-filters-body">
            {/* Row 1: Busca principal */}
            <div className="row g-3 mb-3">
              <div className="col-12 col-md-6">
                <label className="form-label">{t('common.search')}</label>
                <input 
                  type="text" 
                  className="form-control" 
                  name="search" 
                  value={filters.search} 
                  onChange={handleFilterChange}
                  placeholder={t('transactions.searchPlaceholder')}
                />
              </div>
              <div className="col-6 col-md-3">
                <label className="form-label">{t('transactions.startDate')}</label>
                <input type="date" className="form-control" name="start_date" value={filters.start_date} onChange={handleFilterChange} />
              </div>
              <div className="col-6 col-md-3">
                <label className="form-label">{t('transactions.endDate')}</label>
                <input type="date" className="form-control" name="end_date" value={filters.end_date} onChange={handleFilterChange} />
              </div>
            </div>
            
            {/* Row 2: Filtros principales */}
            <div className="row g-3 mb-3">
              <div className="col-6 col-md-2">
                <label className="form-label">{t('transactions.account')}</label>
                <select className="form-select" name="account_id" value={filters.account_id} onChange={handleFilterChange}>
                  <option value="">{t('common.all')}</option>
                  {accounts.map(account => (
                    <option key={account.id} value={account.id}>{account.name}</option>
                  ))}
                </select>
              </div>
              <div className="col-6 col-md-3">
                <label className="form-label">{t('transactions.category')}</label>
                <CategorySelector
                  categories={categories}
                  value={filters.category_id}
                  onChange={handleFilterChange}
                  placeholder={t('common.all')}
                  showUncategorized={true}
                />
              </div>
              <div className="col-6 col-md-2">
                <label className="form-label">{t('transactions.costCenter')}</label>
                <select className="form-select" name="cost_center_id" value={filters.cost_center_id} onChange={handleFilterChange}>
                  <option value="">{t('common.all')}</option>
                  {costCenters.map(cc => (
                    <option key={cc.id} value={cc.id}>{cc.name}</option>
                  ))}
                </select>
              </div>
              <div className="col-6 col-md-2">
                <label className="form-label">{t('transactions.type.label')}</label>
                <select className="form-select" name="type" value={filters.type} onChange={handleFilterChange}>
                  <option value="">{t('common.all')}</option>
                  <option value="credit">{t('transactions.type.credit')}</option>
                  <option value="debit">{t('transactions.type.debit')}</option>
                </select>
              </div>
              <div className="col-6 col-md-2">
                <label className="form-label">{t('transactions.status.label')}</label>
                <select className="form-select" name="status" value={filters.status} onChange={handleFilterChange}>
                  <option value="">{t('common.all')}</option>
                  <option value="pending">{t('transactions.status.pending')}</option>
                  <option value="completed">{t('transactions.status.completed')}</option>
                  <option value="cancelled">{t('transactions.status.cancelled')}</option>
                </select>
              </div>
              <div className="col-6 col-md-1 d-flex align-items-end">
                <button className="btn btn-outline-secondary w-100" onClick={clearFilters} title={t('common.clearFilters')}>
                  <i className="bi bi-x-lg"></i>
                </button>
              </div>
            </div>
            
            {/* Row 3: Ações */}
            <div className="d-flex justify-content-end">
              <button 
                className="btn btn-warning" 
                onClick={handleOpenBatchModal}
                title={t('categories.batchCategorize')}
              >
                <i className="bi bi-lightning-charge me-1"></i>
                {t('categories.batchCategorize')}
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Loading */}
      {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>
      )}

      {/* Empty State */}
      {!loading && weeks.length === 0 && (
        <div className="txn-empty">
          <i className="bi bi-inbox"></i>
          <p>{t('transactions.empty')}</p>
        </div>
      )}

      {/* Weeks List */}
      {!loading && weeks.length > 0 && (
        <div className="txn-weeks-container">
          {weeks.map((week) => (
            <div key={week.year_week} className={`txn-week ${expandedWeeks[week.year_week] ? 'expanded' : ''}`}>
              {/* Week Header */}
              <div className="txn-week-header" onClick={() => toggleWeekExpansion(week.year_week)}>
                <div className="txn-week-left">
                  <div className="txn-week-chevron">
                    <i className="bi bi-chevron-right"></i>
                  </div>
                  <div className="txn-week-info">
                    <h3>
                      {t('transactions.week')} {week.week_number}
                      <div className="txn-week-badges">
                        <span className="txn-week-badge count">{week.summary.total_transactions}</span>
                        {week.summary.overdue_count > 0 && (
                          <span className="txn-week-badge overdue">{week.summary.overdue_count} {t('transactions.overdue')}</span>
                        )}
                      </div>
                    </h3>
                    <div className="dates">{formatWeekName(week)}</div>
                  </div>
                </div>
                
                {/* Week Summary */}
                <div className="txn-week-summary">
                  <div className="txn-week-stat">
                    <div className="txn-week-stat-label">{t('transactions.credits')}</div>
                    <div className="txn-week-stat-value credit">+{formatCurrency(week.summary.credits.total, selectedCurrency)}</div>
                  </div>
                  <div className="txn-week-stat">
                    <div className="txn-week-stat-label">{t('transactions.debits')}</div>
                    <div className="txn-week-stat-value debit">-{formatCurrency(week.summary.debits.total, selectedCurrency)}</div>
                  </div>
                  <div className="txn-week-stat">
                    <div className="txn-week-stat-label">{t('transactions.balance')}</div>
                    <div className={`txn-week-stat-value ${week.summary.balance >= 0 ? 'balance-pos' : 'balance-neg'}`}>
                      {week.summary.balance >= 0 ? '+' : ''}{formatCurrency(week.summary.balance, selectedCurrency)}
                    </div>
                  </div>
                  {week.summary.pending.count > 0 && (
                    <div className="txn-week-stat">
                      <div className="txn-week-stat-label">{t('transactions.pending')}</div>
                      <div className="txn-week-stat-value pending">{formatCurrency(week.summary.pending.total, selectedCurrency)}</div>
                    </div>
                  )}
                </div>
              </div>

              {/* Week Transactions */}
              {expandedWeeks[week.year_week] && (
                <div className="txn-week-body">
                  {isMobile ? (
                    // Mobile: Cards Layout
                    <div className="d-flex flex-column gap-2 p-2">
                      {week.transactions.map(transaction => (
                        <div 
                          key={transaction.id}
                          ref={transaction.id === highlightedTransactionId ? highlightedRef : null}
                          className={`card border-secondary ${transaction.is_overdue ? 'border-danger' : ''} ${transaction.id === highlightedTransactionId ? 'border-primary' : ''} ${hasActiveFilters && selectedTransactionIds.has(transaction.id) ? 'bg-primary bg-opacity-10' : ''}`}
                          style={{ background: '#0f172a', cursor: 'pointer' }}
                        >
                          <div className="card-body p-3">
                            {/* Header: Date + Type Badge + Status */}
                            <div className="d-flex justify-content-between align-items-start mb-2">
                              <div className="d-flex align-items-center gap-2">
                                {hasActiveFilters && (
                                  <input
                                    type="checkbox"
                                    className="form-check-input"
                                    checked={selectedTransactionIds.has(transaction.id)}
                                    onChange={() => handleToggleTransaction(transaction.id)}
                                    onClick={(e) => e.stopPropagation()}
                                  />
                                )}
                                <span className="text-slate-400" style={{ fontSize: '0.75rem' }}>
                                  {formatDate(transaction.effective_date || transaction.planned_date)}
                                  {transaction.is_overdue && <i className="bi bi-exclamation-triangle text-danger ms-1"></i>}
                                </span>
                              </div>
                              <div className="d-flex gap-1">
                                <span className={`badge ${transaction.type === 'credit' ? 'bg-success' : 'bg-danger'} bg-opacity-25 ${transaction.type === 'credit' ? 'text-success' : 'text-danger'}`} style={{ fontSize: '0.65rem' }}>
                                  {transaction.type === 'credit' ? t('transactions.type.credit') : t('transactions.type.debit')}
                                </span>
                                <span className={`badge ${
                                  transaction.status === 'completed' ? 'bg-success' :
                                  transaction.status === 'pending' ? 'bg-warning' :
                                  transaction.status === 'cancelled' ? 'bg-secondary' : 'bg-info'
                                } bg-opacity-25 text-${
                                  transaction.status === 'completed' ? 'success' :
                                  transaction.status === 'pending' ? 'warning' :
                                  transaction.status === 'cancelled' ? 'secondary' : 'info'
                                }`} style={{ fontSize: '0.65rem' }}>
                                  {t(`transactions.status.${transaction.status}`)}
                                </span>
                              </div>
                            </div>

                            {/* Description + Transfer/Reconciled badges */}
                            <div className="mb-2" onClick={() => openDetailModal(transaction)}>
                              <div className="d-flex align-items-center gap-1 mb-1">
                                {transaction.is_transfer && <i className="bi bi-arrow-left-right text-info"></i>}
                                {transaction.is_reconciled && <i className="bi bi-link-45deg text-success" title={t('transactions.reconciled')}></i>}
                                <span className="text-white fw-medium" style={{ fontSize: '0.85rem' }}>
                                  {transaction.description}
                                </span>
                              </div>
                              {transaction.original_description && transaction.original_description !== transaction.description && (
                                <div className="text-slate-400" style={{ fontSize: '0.65rem' }}>
                                  <i className="bi bi-bank me-1"></i>
                                  {transaction.original_description.substring(0, 60)}{transaction.original_description.length > 60 ? '...' : ''}
                                </div>
                              )}
                            </div>

                            {/* Account + Category */}
                            <div className="d-flex flex-wrap gap-2 mb-2">
                              <span className="badge bg-secondary" style={{ fontSize: '0.7rem' }}>
                                <i className="bi bi-wallet2 me-1"></i>
                                {transaction.account?.name}
                              </span>
                              {transaction.category && (
                                <span 
                                  className="badge"
                                  style={{ 
                                    backgroundColor: transaction.category.color + '20', 
                                    color: transaction.category.color,
                                    fontSize: '0.7rem'
                                  }}
                                >
                                  <i className={`bi ${transaction.category.icon} me-1`}></i>
                                  {transaction.category.name}
                                </span>
                              )}
                            </div>

                            {/* Amount + Actions */}
                            <div className="d-flex justify-content-between align-items-center pt-2" style={{ borderTop: '1px solid #334155' }}>
                              <div className={`fw-bold ${transaction.type === 'credit' ? 'text-success' : 'text-danger'}`} style={{ fontSize: '1rem' }}>
                                {transaction.type === 'credit' ? '+' : '-'}
                                {formatCurrency(transaction.amount || transaction.planned_amount, selectedCurrency)}
                              </div>
                              <div className="dropdown" onClick={(e) => e.stopPropagation()}>
                                <button className="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                  <i className="bi bi-three-dots-vertical"></i>
                                </button>
                                <ul className="dropdown-menu dropdown-menu-end shadow-sm">
                                  {/* Ações de Status */}
                                  {transaction.status === 'pending' && (
                                    <>
                                      <li className="dropdown-header small text-muted">{t('transactions.status.label')}</li>
                                      <li>
                                        <button className="dropdown-item" onClick={() => openCompleteModal(transaction)}>
                                          <i className="bi bi-check-circle text-success me-2"></i>
                                          {t('transactions.markComplete')}
                                        </button>
                                      </li>
                                      <li>
                                        <button className="dropdown-item" onClick={() => handleQuickComplete(transaction)}>
                                          <i className="bi bi-lightning-fill text-warning me-2"></i>
                                          {t('transactions.quickComplete')}
                                        </button>
                                      </li>
                                      <li><hr className="dropdown-divider" /></li>
                                    </>
                                  )}
                                  {transaction.status === 'completed' && (
                                    <>
                                      <li className="dropdown-header small text-muted">{t('transactions.status.label')}</li>
                                      <li>
                                        <button className="dropdown-item" onClick={() => handleRevert(transaction)}>
                                          <i className="bi bi-arrow-counterclockwise text-warning me-2"></i>
                                          {t('transactions.revert')}
                                        </button>
                                      </li>
                                      <li><hr className="dropdown-divider" /></li>
                                    </>
                                  )}
                                  
                                  {/* Ações Principais */}
                                  <li>
                                    <button className="dropdown-item" onClick={() => openQuickCategorizeModal(transaction)}>
                                      <i className="bi bi-tags text-success me-2"></i>
                                      {t('transactions.quickCategorize')}
                                    </button>
                                  </li>
                                  <li>
                                    <button className="dropdown-item" onClick={() => openEditModal(transaction)}>
                                      <i className="bi bi-pencil text-primary me-2"></i>
                                      {t('common.edit')}
                                    </button>
                                  </li>
                                  <li>
                                    <button className="dropdown-item" onClick={() => handleDuplicate(transaction)}>
                                      <i className="bi bi-copy text-info me-2"></i>
                                      {t('transactions.duplicate')}
                                    </button>
                                  </li>
                                  
                                  {/* Dividir transação */}
                                  {!transaction.is_transfer && !transaction.split_parent_id && (
                                    <li>
                                      <button className="dropdown-item" onClick={() => openSplitModal(transaction)}>
                                        <i className="bi bi-diagram-3 text-secondary me-2"></i>
                                        {t('transactions.split')}
                                      </button>
                                    </li>
                                  )}
                                  
                                  {/* Converter em transferência */}
                                  {!transaction.is_transfer && !transaction.is_split_child && (
                                    <li>
                                      <button className="dropdown-item" onClick={() => openConvertTransferModal(transaction)}>
                                        <i className="bi bi-arrow-left-right text-purple me-2"></i>
                                        {t('transactions.convertToTransfer')}
                                      </button>
                                    </li>
                                  )}
                                  
                                  {/* Conciliar com passivo */}
                                  {transaction.type === 'debit' && !transaction.is_reconciled && !transaction.is_transfer && (
                                    <li>
                                      <button className="dropdown-item" onClick={() => openReconcileLiabilityModal(transaction)}>
                                        <i className="bi bi-link-45deg text-purple me-2"></i>
                                        {t('transactions.reconcileWithLiability')}
                                      </button>
                                    </li>
                                  )}

                                  {/* Criar Recorrência */}
                                  {!transaction.is_transfer && !transaction.recurring_instance_id && (
                                    <li>
                                      <button className="dropdown-item" onClick={() => openRecurrenceModal(transaction)}>
                                        <i className="bi bi-calendar-check text-info me-2"></i>
                                        {t('recurring.makeRecurring')}
                                      </button>
                                    </li>
                                  )}
                                  
                                  {/* Cancelar */}
                                  {transaction.status === 'pending' && (
                                    <li>
                                      <button className="dropdown-item" onClick={() => handleCancel(transaction)}>
                                        <i className="bi bi-x-circle text-secondary me-2"></i>
                                        {t('transactions.cancel')}
                                      </button>
                                    </li>
                                  )}
                                  
                                  <li><hr className="dropdown-divider" /></li>
                                  <li>
                                    <button className="dropdown-item text-danger" onClick={() => handleDelete(transaction)}>
                                      <i className="bi bi-trash me-2"></i>
                                      {t('common.delete')}
                                    </button>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    // Desktop: Table Layout
                  <table className="txn-table">
                    <thead>
                      <tr>
                        {hasActiveFilters && (
                          <th style={{ width: '40px' }} className="text-center col-checkbox">
                            <input
                              type="checkbox"
                              className="form-check-input"
                              checked={week.transactions?.length > 0 && week.transactions.every(t => selectedTransactionIds.has(t.id))}
                              onChange={() => {
                                const weekIds = week.transactions?.map(t => t.id) || [];
                                const allSelected = weekIds.every(id => selectedTransactionIds.has(id));
                                setSelectedTransactionIds(prev => {
                                  const next = new Set(prev);
                                  weekIds.forEach(id => allSelected ? next.delete(id) : next.add(id));
                                  return next;
                                });
                              }}
                            />
                          </th>
                        )}
                        <th style={{ width: '90px' }} className="col-date">{t('transactions.date')}</th>
                        <th className="col-description">{t('transactions.description')}</th>
                        <th style={{ width: '120px' }} className="col-account">{t('transactions.account')}</th>
                        <th style={{ width: '140px' }} className="col-category">{t('transactions.category')}</th>
                        <th style={{ width: '110px' }} className="text-end col-amount">{t('transactions.amount')}</th>
                        <th style={{ width: '70px' }} className="text-center col-type">{t('transactions.type.label')}</th>
                        <th style={{ width: '80px' }} className="text-center col-status">{t('transactions.status.label')}</th>
                        <th style={{ width: '40px' }} className="text-center col-actions"></th>
                      </tr>
                    </thead>
                    <tbody>
                      {week.transactions.map(transaction => (
                        <tr 
                          key={transaction.id} 
                          ref={transaction.id === highlightedTransactionId ? highlightedRef : null}
                          className={`${transaction.is_overdue ? 'overdue' : ''} ${transaction.id === highlightedTransactionId ? 'highlighted-transaction' : ''} ${hasActiveFilters && selectedTransactionIds.has(transaction.id) ? 'selected-row' : ''}`}
                        >
                          {hasActiveFilters && (
                            <td className="text-center col-checkbox">
                              <input
                                type="checkbox"
                                className="form-check-input"
                                checked={selectedTransactionIds.has(transaction.id)}
                                onChange={() => handleToggleTransaction(transaction.id)}
                              />
                            </td>
                          )}
                          <td className="col-date">
                            <span className="txn-date">
                              {formatDate(transaction.effective_date || transaction.planned_date)}
                              {transaction.is_overdue && <i className="bi bi-exclamation-triangle overdue-icon"></i>}
                            </span>
                          </td>
                          <td className="col-description">
                            <div className="d-flex align-items-center gap-1">
                              {transaction.is_transfer && <span className="txn-transfer-badge"><i className="bi bi-arrow-left-right"></i></span>}
                              {transaction.is_reconciled && (
                                <span className="txn-reconciled-badge" title={t('transactions.reconciled')}>
                                  <i className="bi bi-link-45deg"></i>
                                </span>
                              )}
                              <span className="txn-description" onClick={() => openDetailModal(transaction)}>
                                {transaction.description}
                              </span>
                            </div>
                            {transaction.original_description && transaction.original_description !== transaction.description && (
                              <div className="txn-original-desc">
                                <i className="bi bi-bank"></i>
                                {transaction.original_description.substring(0, 45)}{transaction.original_description.length > 45 ? '...' : ''}
                              </div>
                            )}
                          </td>
                          <td className="col-account"><span className="txn-account">{transaction.account?.name}</span></td>
                          <td className="col-category">
                            {transaction.category && (
                              <span 
                                className="txn-category-badge"
                                style={{ backgroundColor: transaction.category.color + '20', color: transaction.category.color }}
                              >
                                <i className={`bi ${transaction.category.icon}`}></i>
                                {transaction.category.name}
                              </span>
                            )}
                          </td>
                          <td className="col-amount">
                            <span className={`txn-amount ${transaction.type}`}>
                              {transaction.type === 'credit' ? '+' : '-'}
                              {formatCurrency(transaction.amount || transaction.planned_amount, selectedCurrency)}
                            </span>
                          </td>
                          <td className="text-center col-type">
                            <span className={`txn-type-badge ${transaction.type}`}>
                              {transaction.type === 'credit' ? t('transactions.type.credit') : t('transactions.type.debit')}
                            </span>
                          </td>
                          <td className="text-center col-status">
                            <span className={`txn-status-badge ${transaction.status}`}>
                              {t(`transactions.status.${transaction.status}`)}
                            </span>
                          </td>
                          <td className="text-center col-actions">
                            <div className="dropdown">
                              <button className="txn-actions-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i className="bi bi-three-dots-vertical"></i>
                              </button>
                              <ul className="dropdown-menu dropdown-menu-end shadow-sm">
                                {/* Ações de Status */}
                                {transaction.status === 'pending' && (
                                  <>
                                    <li className="dropdown-header small text-muted">{t('transactions.status.label')}</li>
                                    <li>
                                      <button className="dropdown-item" onClick={() => openCompleteModal(transaction)}>
                                        <i className="bi bi-check-circle text-success me-2"></i>
                                        {t('transactions.markComplete')}
                                      </button>
                                    </li>
                                    <li>
                                      <button className="dropdown-item" onClick={() => handleQuickComplete(transaction)}>
                                        <i className="bi bi-lightning-fill text-warning me-2"></i>
                                        {t('transactions.quickComplete')}
                                      </button>
                                    </li>
                                    <li><hr className="dropdown-divider" /></li>
                                  </>
                                )}
                                {transaction.status === 'completed' && (
                                  <>
                                    <li className="dropdown-header small text-muted">{t('transactions.status.label')}</li>
                                    <li>
                                      <button className="dropdown-item" onClick={() => handleRevert(transaction)}>
                                        <i className="bi bi-arrow-counterclockwise text-warning me-2"></i>
                                        {t('transactions.revert')}
                                      </button>
                                    </li>
                                    <li><hr className="dropdown-divider" /></li>
                                  </>
                                )}
                                
                                {/* Ações Principais */}
                                <li>
                                  <button className="dropdown-item" onClick={() => openQuickCategorizeModal(transaction)}>
                                    <i className="bi bi-tags text-success me-2"></i>
                                    {t('transactions.quickCategorize')}
                                  </button>
                                </li>
                                <li>
                                  <button className="dropdown-item" onClick={() => openEditModal(transaction)}>
                                    <i className="bi bi-pencil text-primary me-2"></i>
                                    {t('common.edit')}
                                  </button>
                                </li>
                                <li>
                                  <button className="dropdown-item" onClick={() => handleDuplicate(transaction)}>
                                    <i className="bi bi-copy text-info me-2"></i>
                                    {t('transactions.duplicate')}
                                  </button>
                                </li>
                                
                                {/* Dividir transação */}
                                {!transaction.is_transfer && !transaction.split_parent_id && (
                                  <li>
                                    <button className="dropdown-item" onClick={() => openSplitModal(transaction)}>
                                      <i className="bi bi-diagram-3 text-secondary me-2"></i>
                                      {t('transactions.split')}
                                    </button>
                                  </li>
                                )}
                                
                                {/* Converter em transferência */}
                                {!transaction.is_transfer && !transaction.is_split_child && (
                                  <li>
                                    <button className="dropdown-item" onClick={() => openConvertTransferModal(transaction)}>
                                      <i className="bi bi-arrow-left-right text-purple me-2"></i>
                                      {t('transactions.convertToTransfer')}
                                    </button>
                                  </li>
                                )}
                                
                                {/* Conciliar com passivo */}
                                {transaction.type === 'debit' && !transaction.is_reconciled && !transaction.is_transfer && (
                                  <li>
                                    <button className="dropdown-item" onClick={() => openReconcileLiabilityModal(transaction)}>
                                      <i className="bi bi-link-45deg text-purple me-2"></i>
                                      {t('transactions.reconcileWithLiability')}
                                    </button>
                                  </li>
                                )}

                                {/* Criar Recorrência */}
                                {!transaction.is_transfer && !transaction.recurring_instance_id && (
                                  <li>
                                    <button className="dropdown-item" onClick={() => openRecurrenceModal(transaction)}>
                                      <i className="bi bi-calendar-check text-info me-2"></i>
                                      {t('recurring.makeRecurring')}
                                    </button>
                                  </li>
                                )}
                                
                                {/* Cancelar */}
                                {transaction.status === 'pending' && (
                                  <li>
                                    <button className="dropdown-item" onClick={() => handleCancel(transaction)}>
                                      <i className="bi bi-x-circle text-secondary me-2"></i>
                                      {t('transactions.cancel')}
                                    </button>
                                  </li>
                                )}
                                
                                <li><hr className="dropdown-divider" /></li>
                                <li>
                                  <button className="dropdown-item text-danger" onClick={() => handleDelete(transaction)}>
                                    <i className="bi bi-trash me-2"></i>
                                    {t('common.delete')}
                                  </button>
                                </li>
                              </ul>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                  )}

                  {/* Transferências Agrupadas */}
                  {week.transfers && week.transfers.length > 0 && (
                    <div className="txn-transfers-section">
                      <h6 className="txn-transfers-title">
                        <i className="bi bi-arrow-left-right"></i>
                        {t('transactions.transfers')} ({week.transfers.length})
                      </h6>
                      <div className="txn-transfers-list">
                        {week.transfers.map(transfer => (
                          <div key={transfer.id} className={`txn-transfer-item ${expandedTransfers[transfer.id] ? 'expanded' : ''}`}>
                            <div className="txn-transfer-main" onClick={() => toggleTransferExpanded(transfer.id)}>
                              <div className="txn-transfer-info">
                                <span className="txn-transfer-expand">
                                  <i className={`bi ${expandedTransfers[transfer.id] ? 'bi-chevron-down' : 'bi-chevron-right'}`}></i>
                                </span>
                                <span className="txn-transfer-icon">
                                  <i className="bi bi-arrow-left-right"></i>
                                </span>
                                <div className="txn-transfer-details">
                                  <div className="txn-transfer-accounts">
                                    <span className="from">{transfer.from_account?.name || '?'}</span>
                                    <i className="bi bi-arrow-right"></i>
                                    <span className="to">{transfer.to_account?.name || '?'}</span>
                                  </div>
                                  <div className="txn-transfer-meta">
                                    {formatDate(transfer.effective_date || transfer.planned_date)}
                                    {transfer.description && <span className="separator">•</span>}
                                    {transfer.description && <span>{transfer.description}</span>}
                                  </div>
                                </div>
                              </div>
                              <div className="txn-transfer-amount">
                                {formatCurrency(transfer.amount, selectedCurrency)}
                              </div>
                            </div>
                            
                            {/* Detalhes expandidos */}
                            {expandedTransfers[transfer.id] && (
                              <div className="txn-transfer-expanded">
                                <div className="txn-transfer-transactions">
                                  {/* Transação de Débito */}
                                  <div className="txn-transfer-txn debit">
                                    <div className="txn-transfer-txn-header">
                                      <span className="txn-transfer-txn-type debit">
                                        <i className="bi bi-arrow-up"></i> {t('transactions.type.debit')}
                                      </span>
                                      <span className="txn-transfer-txn-id">ID: {transfer.debit_transaction_id || '-'}</span>
                                    </div>
                                    <div className="txn-transfer-txn-body">
                                      <div className="txn-transfer-txn-account">
                                        <i className="bi bi-wallet2"></i>
                                        {transfer.from_account?.name || '?'}
                                      </div>
                                      <div className="txn-transfer-txn-amount debit">
                                        -{formatCurrency(transfer.amount, selectedCurrency)}
                                      </div>
                                    </div>
                                  </div>
                                  
                                  {/* Transação de Crédito */}
                                  <div className="txn-transfer-txn credit">
                                    <div className="txn-transfer-txn-header">
                                      <span className="txn-transfer-txn-type credit">
                                        <i className="bi bi-arrow-down"></i> {t('transactions.type.credit')}
                                      </span>
                                      <span className="txn-transfer-txn-id">ID: {transfer.credit_transaction_id || '-'}</span>
                                    </div>
                                    <div className="txn-transfer-txn-body">
                                      <div className="txn-transfer-txn-account">
                                        <i className="bi bi-wallet2"></i>
                                        {transfer.to_account?.name || '?'}
                                      </div>
                                      <div className="txn-transfer-txn-amount credit">
                                        +{formatCurrency(transfer.amount, selectedCurrency)}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                
                                {/* Ações */}
                                <div className="txn-transfer-actions">
                                  <button 
                                    className="btn btn-outline-warning btn-sm"
                                    onClick={(e) => { e.stopPropagation(); handleUnlinkTransfer(transfer); }}
                                  >
                                    <i className="bi bi-link-45deg me-1"></i>
                                    {t('transactions.unlinkTransfer')}
                                  </button>
                                </div>
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>
          ))}

          {/* Pagination */}
          {pagination && pagination.total_pages > 1 && (
            <div className={`txn-pagination ${isMobile ? 'mobile' : ''}`}>
              <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>
                <i className="bi bi-chevron-left"></i>
              </button>
              {isMobile ? (
                // Mobile: Mostrar apenas 3 páginas (anterior, atual, próxima)
                <>
                  {page > 1 && (
                    <button onClick={() => setPage(page - 1)}>
                      {page - 1}
                    </button>
                  )}
                  <button className="active">
                    {page}
                  </button>
                  {page < pagination.total_pages && (
                    <button onClick={() => setPage(page + 1)}>
                      {page + 1}
                    </button>
                  )}
                  {/* Info de página */}
                  <span className="page-info">
                    / {pagination.total_pages}
                  </span>
                </>
              ) : (
                // Desktop: Mostrar até 7 páginas
                Array.from({ length: Math.min(pagination.total_pages, 7) }, (_, i) => {
                  let pageNum;
                  if (pagination.total_pages <= 7) {
                    pageNum = i + 1;
                  } else if (page <= 4) {
                    pageNum = i + 1;
                  } else if (page >= pagination.total_pages - 3) {
                    pageNum = pagination.total_pages - 6 + i;
                  } else {
                    pageNum = page - 3 + i;
                  }
                  return (
                    <button key={pageNum} className={page === pageNum ? 'active' : ''} onClick={() => setPage(pageNum)}>
                      {pageNum}
                    </button>
                  );
                })
              )}
              <button onClick={() => setPage(p => Math.min(pagination.total_pages, p + 1))} disabled={page === pagination.total_pages}>
                <i className="bi bi-chevron-right"></i>
              </button>
            </div>
          )}
        </div>
      )}

      {/* Modal de Criar/Editar */}
      <Modal
        show={showModal}
        onClose={() => setShowModal(false)}
        title={editingTransaction ? t('transactions.edit') : t('transactions.new')}
        size="lg"
      >
        <form onSubmit={handleSubmit}>
          <div className="row g-3">
            {/* Conta */}
            <div className="col-md-6">
              <label className="form-label">{t('transactions.account')} *</label>
              <select
                className="form-select"
                name="account_id"
                value={formData.account_id}
                onChange={handleInputChange}
                required
              >
                <option value="">{t('common.select')}</option>
                {accounts.map(account => (
                  <option key={account.id} value={account.id}>
                    {account.name} ({account.currency})
                  </option>
                ))}
              </select>
            </div>

            {/* Tipo */}
            <div className="col-md-6">
              <label className="form-label">{t('transactions.type.label')} *</label>
              <div className="btn-group w-100">
                <button
                  type="button"
                  className={`btn ${formData.type === 'debit' ? 'btn-danger' : 'btn-outline-danger'}`}
                  onClick={() => setFormData(prev => ({ ...prev, type: 'debit' }))}
                >
                  <i className="bi bi-arrow-up me-1"></i>
                  {t('transactions.type.debit')}
                </button>
                <button
                  type="button"
                  className={`btn ${formData.type === 'credit' ? 'btn-success' : 'btn-outline-success'}`}
                  onClick={() => setFormData(prev => ({ ...prev, type: 'credit' }))}
                >
                  <i className="bi bi-arrow-down me-1"></i>
                  {t('transactions.type.credit')}
                </button>
              </div>
            </div>

            {/* Descrição */}
            <div className="col-12">
              <label className="form-label">{t('transactions.description')} *</label>
              <input
                type="text"
                className="form-control"
                name="description"
                value={formData.description}
                onChange={handleInputChange}
                required
                maxLength={255}
              />
            </div>

            {/* Valor Planejado */}
            <div className="col-md-6">
              <label className="form-label">{t('transactions.plannedAmount')} *</label>
              <div className="input-group">
                <span className="input-group-text">
                  {formData.account_id ? getAccountCurrency(formData.account_id) : '€'}
                </span>
                <input
                  type="number"
                  className="form-control"
                  name="planned_amount"
                  value={formData.planned_amount}
                  onChange={handleInputChange}
                  required
                  min="0"
                  step="0.01"
                />
              </div>
            </div>

            {/* Data Planejada */}
            <div className="col-md-6">
              <label className="form-label">{t('transactions.plannedDate')} *</label>
              <input
                type="date"
                className="form-control"
                name="planned_date"
                value={formData.planned_date}
                onChange={handleInputChange}
                required
              />
            </div>

            {/* Categoria */}
            <div className="col-md-6">
              <label className="form-label">{t('transactions.category')}</label>
              <CategorySelector
                categories={categories}
                value={formData.category_id}
                onChange={handleInputChange}
                onAddNew={openQuickCategoryModal}
                placeholder={t('common.none')}
              />
            </div>

            {/* Centro de Custo */}
            <div className="col-md-6">
              <label className="form-label">{t('transactions.costCenter')}</label>
              <div className="input-group">
                <select
                  className="form-select"
                  name="cost_center_id"
                  value={formData.cost_center_id}
                  onChange={handleInputChange}
                >
                  <option value="">{t('common.none')}</option>
                  {costCenters.map(cc => (
                    <option key={cc.id} value={cc.id}>{cc.name}</option>
                  ))}
                </select>
                <button
                  type="button"
                  className="btn btn-outline-primary"
                  onClick={openQuickCostCenterModal}
                  title={t('costCenters.newCostCenter')}
                >
                  <i className="bi bi-plus-lg"></i>
                </button>
              </div>
            </div>

            {/* Referência */}
            <div className="col-md-6">
              <label className="form-label">{t('transactions.reference')}</label>
              <input
                type="text"
                className="form-control"
                name="reference"
                value={formData.reference}
                onChange={handleInputChange}
                maxLength={100}
                placeholder={t('transactions.referencePlaceholder')}
              />
            </div>

            {/* Status */}
            <div className="col-md-6">
              <label className="form-label">{t('transactions.status.label')}</label>
              <select
                className="form-select"
                name="status"
                value={formData.status}
                onChange={handleInputChange}
              >
                <option value="pending">{t('transactions.status.pending')}</option>
                <option value="completed">{t('transactions.status.completed')}</option>
                <option value="cancelled">{t('transactions.status.cancelled')}</option>
              </select>
            </div>

            {/* Campos de Efetivação (se não pendente) */}
            {formData.status === 'completed' && (
              <>
                <div className="col-md-6">
                  <label className="form-label">{t('transactions.effectiveAmount')}</label>
                  <div className="input-group">
                    <span className="input-group-text">
                      {formData.account_id ? getAccountCurrency(formData.account_id) : '€'}
                    </span>
                    <input
                      type="number"
                      className="form-control"
                      name="amount"
                      value={formData.amount}
                      onChange={handleInputChange}
                      min="0"
                      step="0.01"
                      placeholder={formData.planned_amount}
                    />
                  </div>
                  <small className="text-muted">{t('transactions.leaveEmptyForPlanned')}</small>
                </div>

                <div className="col-md-6">
                  <label className="form-label">{t('transactions.effectiveDate')}</label>
                  <input
                    type="date"
                    className="form-control"
                    name="effective_date"
                    value={formData.effective_date}
                    onChange={handleInputChange}
                  />
                </div>
              </>
            )}

            {/* Notas */}
            <div className="col-12">
              <label className="form-label">{t('transactions.notes')}</label>
              <textarea
                className="form-control"
                name="notes"
                value={formData.notes}
                onChange={handleInputChange}
                rows={2}
              />
            </div>
          </div>

          <div className="d-flex justify-content-end gap-2 mt-4">
            <button type="button" className="btn btn-secondary" onClick={() => setShowModal(false)}>
              {t('common.cancel')}
            </button>
            <button type="submit" className="btn btn-primary">
              <i className="bi bi-check-lg me-1"></i>
              {editingTransaction ? t('common.save') : t('common.create')}
            </button>
          </div>
        </form>
      </Modal>

      {/* Modal de Detalhes */}
      <Modal
        show={showDetailModal}
        onClose={() => setShowDetailModal(false)}
        title={t('transactions.details')}
      >
        {selectedTransaction && (
          <div>
            <div className="row g-3">
              <div className="col-6">
                <strong>{t('transactions.description')}</strong>
                <p>{selectedTransaction.description}</p>
              </div>
              <div className="col-6">
                <strong>{t('transactions.account')}</strong>
                <p>{selectedTransaction.account?.name}</p>
              </div>
              {selectedTransaction.original_description && selectedTransaction.original_description !== selectedTransaction.description && (
                <div className="col-12">
                  <strong>{t('transactions.originalDescription')}</strong>
                  <p className="text-muted bg-light p-2 rounded" style={{ fontFamily: 'monospace', fontSize: '0.9em' }}>
                    <i className="bi bi-bank me-2"></i>
                    {selectedTransaction.original_description}
                  </p>
                </div>
              )}
              <div className="col-6">
                <strong>{t('transactions.type.label')}</strong>
                <p>{getTypeBadge(selectedTransaction.type)}</p>
              </div>
              <div className="col-6">
                <strong>{t('transactions.status.label')}</strong>
                <p>{getStatusBadge(selectedTransaction.status)}</p>
              </div>
              <div className="col-6">
                <strong>{t('transactions.plannedAmount')}</strong>
                <p>{formatCurrency(selectedTransaction.planned_amount, selectedTransaction.account?.currency || 'EUR')}</p>
              </div>
              <div className="col-6">
                <strong>{t('transactions.plannedDate')}</strong>
                <p>{formatDate(selectedTransaction.planned_date)}</p>
              </div>
              {selectedTransaction.status === 'completed' && (
                <>
                  <div className="col-6">
                    <strong>{t('transactions.effectiveAmount')}</strong>
                    <p>{formatCurrency(selectedTransaction.amount, selectedTransaction.account?.currency || 'EUR')}</p>
                  </div>
                  <div className="col-6">
                    <strong>{t('transactions.effectiveDate')}</strong>
                    <p>{formatDate(selectedTransaction.effective_date)}</p>
                  </div>
                </>
              )}
              {selectedTransaction.category && (
                <div className="col-6">
                  <strong>{t('transactions.category')}</strong>
                  <p>
                    <span 
                      className="badge"
                      style={{ 
                        backgroundColor: selectedTransaction.category.color + '20',
                        color: selectedTransaction.category.color,
                      }}
                    >
                      <i className={`bi ${selectedTransaction.category.icon} me-1`}></i>
                      {selectedTransaction.category.parent?.name 
                        ? `${selectedTransaction.category.parent.name} > ${selectedTransaction.category.name}`
                        : selectedTransaction.category.name
                      }
                    </span>
                  </p>
                </div>
              )}
              {selectedTransaction.cost_center && (
                <div className="col-6">
                  <strong>{t('transactions.costCenter')}</strong>
                  <p>
                    <span 
                      className="badge"
                      style={{ 
                        backgroundColor: selectedTransaction.cost_center.color + '20',
                        color: selectedTransaction.cost_center.color,
                      }}
                    >
                      {selectedTransaction.cost_center.name}
                    </span>
                  </p>
                </div>
              )}
              {selectedTransaction.reference && (
                <div className="col-12">
                  <strong>{t('transactions.reference')}</strong>
                  <p>{selectedTransaction.reference}</p>
                </div>
              )}
              {selectedTransaction.notes && (
                <div className="col-12">
                  <strong>{t('transactions.notes')}</strong>
                  <p className="text-muted">{selectedTransaction.notes}</p>
                </div>
              )}
            </div>
            <div className="d-flex justify-content-end mt-4">
              <button className="btn btn-secondary" onClick={() => setShowDetailModal(false)}>
                {t('common.close')}
              </button>
            </div>
          </div>
        )}
      </Modal>

      {/* Modal de Completar */}
      <Modal
        show={showCompleteModal}
        onClose={() => setShowCompleteModal(false)}
        title={t('transactions.markComplete')}
      >
        {selectedTransaction && (
          <div>
            <p className="text-muted mb-3">
              {t('transactions.completeDescription', { description: selectedTransaction.description })}
            </p>
            <div className="row g-3">
              <div className="col-md-6">
                <label className="form-label">{t('transactions.effectiveAmount')}</label>
                <div className="input-group">
                  <span className="input-group-text">
                    {selectedTransaction.account?.currency || 'EUR'}
                  </span>
                  <input
                    type="number"
                    className="form-control"
                    value={completeData.amount}
                    onChange={(e) => setCompleteData(prev => ({ ...prev, amount: e.target.value }))}
                    min="0"
                    step="0.01"
                  />
                </div>
              </div>
              <div className="col-md-6">
                <label className="form-label">{t('transactions.effectiveDate')}</label>
                <input
                  type="date"
                  className="form-control"
                  value={completeData.effective_date}
                  onChange={(e) => setCompleteData(prev => ({ ...prev, effective_date: e.target.value }))}
                />
              </div>
            </div>
            <div className="d-flex justify-content-end gap-2 mt-4">
              <button className="btn btn-secondary" onClick={() => setShowCompleteModal(false)}>
                {t('common.cancel')}
              </button>
              <button className="btn btn-success" onClick={handleComplete}>
                <i className="bi bi-check-lg me-1"></i>
                {t('transactions.complete')}
              </button>
            </div>
          </div>
        )}
      </Modal>

      {/* Toast */}
      <Toast
        show={toast.show}
        message={toast.message}
        type={toast.type}
        onClose={() => setToast(prev => ({ ...prev, show: false }))}
      />

      {/* Modal de Confirmação */}
      <ConfirmModal
        show={confirmModal.show}
        message={confirmModal.message}
        variant={confirmModal.variant}
        onConfirm={confirmModal.onConfirm}
        onCancel={() => setConfirmModal(prev => ({ ...prev, show: false }))}
      />

      {/* Modal de Transferência */}
      <Modal
        show={showTransferModal}
        onHide={() => setShowTransferModal(false)}
        title={t('transactions.transfer')}
        size="lg"
      >
        <div className="modal-body">
          <div className="alert alert-info">
            <i className="bi bi-info-circle me-2"></i>
            {t('transactions.transferInfo')}
          </div>
          <div className="row g-3">
            <div className="col-md-6">
              <label className="form-label">{t('transactions.sourceAccount')} *</label>
              <select
                className="form-select"
                value={transferData.from_account_id}
                onChange={(e) => setTransferData(prev => ({ ...prev, from_account_id: e.target.value }))}
                required
              >
                <option value="">{t('common.select')}</option>
                {accounts.map(acc => (
                  <option key={acc.id} value={acc.id}>{acc.name} ({acc.currency})</option>
                ))}
              </select>
            </div>
            <div className="col-md-6">
              <label className="form-label">{t('transactions.destinationAccount')} *</label>
              <select
                className="form-select"
                value={transferData.to_account_id}
                onChange={(e) => setTransferData(prev => ({ ...prev, to_account_id: e.target.value }))}
                required
              >
                <option value="">{t('common.select')}</option>
                {accounts.filter(acc => acc.id !== parseInt(transferData.from_account_id)).map(acc => (
                  <option key={acc.id} value={acc.id}>{acc.name} ({acc.currency})</option>
                ))}
              </select>
            </div>
            <div className="col-md-6">
              <label className="form-label">{t('transactions.amount')} *</label>
              <input
                type="number"
                className="form-control"
                value={transferData.amount}
                onChange={(e) => setTransferData(prev => ({ ...prev, amount: e.target.value }))}
                min="0.01"
                step="0.01"
                required
              />
            </div>
            <div className="col-md-6">
              <label className="form-label">{t('transactions.date')} *</label>
              <input
                type="date"
                className="form-control"
                value={transferData.date}
                onChange={(e) => setTransferData(prev => ({ ...prev, date: e.target.value }))}
                required
              />
            </div>
            <div className="col-12">
              <label className="form-label">{t('transactions.description')}</label>
              <input
                type="text"
                className="form-control"
                value={transferData.description}
                onChange={(e) => setTransferData(prev => ({ ...prev, description: e.target.value }))}
                placeholder={t('transactions.transferDescription')}
              />
            </div>
          </div>
          <div className="d-flex justify-content-end gap-2 mt-4">
            <button className="btn btn-secondary" onClick={() => setShowTransferModal(false)}>
              {t('common.cancel')}
            </button>
            <button 
              className="btn btn-success" 
              onClick={handleTransferSubmit}
              disabled={!transferData.from_account_id || !transferData.to_account_id || !transferData.amount || !transferData.date}
            >
              <i className="bi bi-arrow-left-right me-1"></i>
              {t('transactions.transfer')}
            </button>
          </div>
        </div>
      </Modal>

      {/* Modal de Divisão */}
      <Modal
        show={showSplitModal}
        onHide={() => setShowSplitModal(false)}
        title={t('transactions.splitTransaction')}
        size="lg"
      >
        {selectedTransaction && (
          <div className="modal-body">
            <div className="alert alert-warning">
              <i className="bi bi-exclamation-triangle me-2"></i>
              {t('transactions.splitWarning')}
            </div>
            <div className="mb-3">
              <strong>{t('transactions.originalAmount')}:</strong>{' '}
              <span className={selectedTransaction.type === 'debit' ? 'text-danger' : 'text-success'}>
                {selectedTransaction.type === 'debit' ? '-' : '+'}
                {formatCurrency(selectedTransaction.amount, selectedTransaction.account?.currency || 'EUR')}
              </span>
            </div>
            <div className="mb-3">
              <strong>{t('transactions.description')}:</strong> {selectedTransaction.description}
            </div>
            <hr />
            <div className="mb-3 d-flex justify-content-between align-items-center">
              <h6 className="mb-0">{t('transactions.splits')}</h6>
              <button
                className="btn btn-sm btn-outline-primary"
                onClick={() => setSplitData(prev => ({ splits: [...prev.splits, { category_id: '', amount: '' }] }))}
              >
                <i className="bi bi-plus-lg me-1"></i>
                {t('transactions.addSplit')}
              </button>
            </div>
            {splitData.splits.map((split, index) => (
              <div key={index} className="row g-2 mb-2 align-items-end">
                <div className="col-md-6">
                  <label className="form-label">{t('transactions.category')}</label>
                  <select
                    className="form-select"
                    value={split.category_id}
                    onChange={(e) => {
                      const newSplits = [...splitData.splits];
                      newSplits[index].category_id = e.target.value;
                      setSplitData({ splits: newSplits });
                    }}
                  >
                    <option value="">{t('common.select')}</option>
                    {categories.filter(c => 
                      c.type === 'both' || 
                      (selectedTransaction.type === 'debit' && c.type === 'expense') ||
                      (selectedTransaction.type === 'credit' && c.type === 'income')
                    ).map(cat => (
                      <option key={cat.id} value={cat.id}>{cat.name}</option>
                    ))}
                  </select>
                </div>
                <div className="col-md-4">
                  <label className="form-label">{t('transactions.amount')}</label>
                  <input
                    type="number"
                    className="form-control"
                    value={split.amount}
                    onChange={(e) => {
                      const newSplits = [...splitData.splits];
                      newSplits[index].amount = e.target.value;
                      setSplitData({ splits: newSplits });
                    }}
                    min="0.01"
                    step="0.01"
                  />
                </div>
                <div className="col-md-2">
                  <button
                    className="btn btn-outline-danger w-100"
                    onClick={() => {
                      const newSplits = splitData.splits.filter((_, i) => i !== index);
                      setSplitData({ splits: newSplits });
                    }}
                    disabled={splitData.splits.length <= 2}
                  >
                    <i className="bi bi-trash"></i>
                  </button>
                </div>
              </div>
            ))}
            <div className="mt-3 p-3 bg-light rounded">
              <div className="d-flex justify-content-between">
                <span>{t('transactions.totalSplits')}:</span>
                <strong className={
                  splitData.splits.reduce((sum, s) => sum + (parseFloat(s.amount) || 0), 0) === parseFloat(selectedTransaction.amount)
                    ? 'text-success' : 'text-danger'
                }>
                  {formatCurrency(splitData.splits.reduce((sum, s) => sum + (parseFloat(s.amount) || 0), 0), selectedTransaction.account?.currency || 'EUR')}
                </strong>
              </div>
              <div className="d-flex justify-content-between">
                <span>{t('transactions.remaining')}:</span>
                <strong>
                  {formatCurrency(
                    parseFloat(selectedTransaction.amount) - splitData.splits.reduce((sum, s) => sum + (parseFloat(s.amount) || 0), 0),
                    selectedTransaction.account?.currency || 'EUR'
                  )}
                </strong>
              </div>
            </div>
            <div className="d-flex justify-content-end gap-2 mt-4">
              <button className="btn btn-secondary" onClick={() => setShowSplitModal(false)}>
                {t('common.cancel')}
              </button>
              <button 
                className="btn btn-primary" 
                onClick={handleSplitSubmit}
                disabled={
                  splitData.splits.length < 2 || 
                  splitData.splits.some(s => !s.amount || parseFloat(s.amount) <= 0) ||
                  Math.abs(splitData.splits.reduce((sum, s) => sum + (parseFloat(s.amount) || 0), 0) - parseFloat(selectedTransaction.amount)) > 0.01
                }
              >
                <i className="bi bi-diagram-3 me-1"></i>
                {t('transactions.split')}
              </button>
            </div>
          </div>
        )}
      </Modal>

      {/* Modal de Categorização em Lote Manual */}
      {showBatchModal && (
        <div className="modal show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
          <div className="modal-dialog modal-dialog-centered">
            <div className="modal-content border-0" style={{ background: '#1e293b' }}>
              <div className="modal-header border-secondary">
                <h5 className="modal-title text-white">
                  <i className="bi bi-tags-fill me-2 text-warning"></i>
                  {t('transactions.batchCategorizeManual')}
                </h5>
                <button type="button" className="btn-close btn-close-white" onClick={handleCloseBatchModal}></button>
              </div>
              <div className="modal-body">
                {/* Info das transações selecionadas */}
                <div className="alert mb-4 py-3" style={{ background: '#0f172a', border: '1px solid #334155' }}>
                  <div className="d-flex align-items-center">
                    <div className="me-3">
                      <i className={`bi ${selectedTransactionIds.size > 0 ? 'bi-check2-square' : 'bi-funnel'} text-warning`} style={{ fontSize: '2rem' }}></i>
                    </div>
                    <div>
                      {selectedTransactionIds.size > 0 ? (
                        <>
                          <h5 className="mb-1 text-white">
                            {selectedTransactionIds.size} {t('transactions.transactionsSelected')}
                          </h5>
                          <small className="text-slate-400">
                            {t('transactions.batchWillApplySelected')}
                          </small>
                        </>
                      ) : (
                        <>
                          <h5 className="mb-1 text-white">
                            {t('transactions.batchAllFiltered')}
                          </h5>
                          <small className="text-slate-400">
                            {t('transactions.batchWillApplyFiltered')}
                          </small>
                        </>
                      )}
                    </div>
                  </div>
                </div>

                {/* Formulário de Categorização */}
                <div className="mb-4">
                  <label className="form-label text-slate-300">
                    <i className="bi bi-folder me-1"></i>
                    {t('categories.category')}
                  </label>
                  <div className="input-group">
                    <CategorySelector
                      categories={categories}
                      value={batchFormData.category_id}
                      onChange={(e) => setBatchFormData({ ...batchFormData, category_id: e.target.value })}
                      placeholder={t('transactions.selectCategory')}
                    />
                    <button
                      type="button"
                      className="btn btn-outline-primary"
                      onClick={openQuickCategoryModalForBatch}
                      title={t('categories.newCategory')}
                    >
                      <i className="bi bi-plus-lg"></i>
                    </button>
                  </div>
                </div>

                <div className="mb-4">
                  <label className="form-label text-slate-300">
                    <i className="bi bi-building me-1"></i>
                    {t('costCenters.costCenter')}
                  </label>
                  <div className="input-group">
                    <select
                      className="form-select"
                      value={batchFormData.cost_center_id}
                      onChange={(e) => setBatchFormData({ ...batchFormData, cost_center_id: e.target.value })}
                      style={{ background: '#0f172a', color: '#e2e8f0', border: '1px solid #334155' }}
                    >
                      <option value="">{t('transactions.selectCostCenter')}</option>
                      {costCenters.map(cc => (
                        <option key={cc.id} value={cc.id}>{cc.name}</option>
                      ))}
                    </select>
                    <button
                      type="button"
                      className="btn btn-outline-primary"
                      onClick={openQuickCostCenterModalForBatch}
                      title={t('costCenters.newCostCenter')}
                        >
                          <i className="bi bi-plus-lg"></i>
                        </button>
                      </div>
                    </div>

                    {/* Opção de adicionar keyword */}
                    {filters.search && (
                      <div className="form-check mb-3 p-3 rounded" style={{ background: '#0f172a', border: '1px solid #334155' }}>
                        <input
                          type="checkbox"
                          className="form-check-input"
                          id="addKeywordCheck"
                          checked={batchFormData.add_keyword}
                          onChange={(e) => setBatchFormData({ ...batchFormData, add_keyword: e.target.checked })}
                        />
                        <label className="form-check-label text-slate-300" htmlFor="addKeywordCheck">
                          <i className="bi bi-key me-1 text-warning"></i>
                          {t('transactions.addAsKeyword')}
                          <span className="badge bg-warning ms-2">
                            "{filters.search}"
                          </span>
                        </label>
                        <div className="text-slate-500 small mt-1">
                          {t('transactions.addAsKeywordHelp')}
                        </div>
                      </div>
                    )}

                    {/* Aviso se nada selecionado */}
                    {!batchFormData.category_id && !batchFormData.cost_center_id && (
                      <div className="alert alert-warning py-2">
                        <i className="bi bi-exclamation-triangle me-2"></i>
                        <small>{t('transactions.batchSelectRequired')}</small>
                      </div>
                    )}
              </div>
              <div className="modal-footer border-secondary">
                <button type="button" className="btn btn-outline-secondary" onClick={handleCloseBatchModal}>
                  {t('common.cancel')}
                </button>
                <button
                  type="button"
                  className="btn btn-warning"
                  onClick={handleExecuteBatchManual}
                  disabled={executingBatch || (!batchFormData.category_id && !batchFormData.cost_center_id)}
                >
                  {executingBatch ? (
                    <>
                      <span className="spinner-border spinner-border-sm me-2" role="status"></span>
                      {t('common.processing')}
                    </>
                  ) : (
                    <>
                      <i className="bi bi-check2-all me-2"></i>
                      {t('common.applyToSelected')} ({selectedTransactionIds.size})
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Converter para Transferência */}
      <Modal
        show={showConvertTransferModal}
        onHide={() => setShowConvertTransferModal(false)}
        title={
          <>
            <i className="bi bi-arrow-left-right me-2 text-purple"></i>
            {t('transactions.convertToTransfer')}
          </>
        }
        size="lg"
      >
        {convertTransferData.loading ? (
          <div className="text-center py-5">
            <div className="spinner-border text-info" role="status">
              <span className="visually-hidden">Loading...</span>
            </div>
            <p className="text-slate-400 mt-3">{t('common.loading')}</p>
          </div>
        ) : (
          <div className="convert-transfer-modal">
            {/* Transação Origem */}
            {convertTransferData.source && (
              <div className="card mb-4" style={{ background: 'rgba(15, 23, 42, 0.8)', border: '1px solid rgba(99, 102, 241, 0.3)' }}>
                <div className="card-header" style={{ background: 'rgba(99, 102, 241, 0.2)', borderBottom: '1px solid rgba(99, 102, 241, 0.3)' }}>
                  <h6 className="mb-0 text-white">
                    <i className="bi bi-bookmark-fill me-2 text-indigo-400"></i>
                    {t('transactions.sourceTransaction')}
                  </h6>
                </div>
                <div className="card-body">
                  <div className="row">
                    <div className="col-md-6">
                      <p className="mb-1">
                        <strong className="text-slate-300">{t('transactions.description')}:</strong>{' '}
                        <span className="text-white">{convertTransferData.source.description}</span>
                      </p>
                      <p className="mb-1">
                        <strong className="text-slate-300">{t('accounts.account')}:</strong>{' '}
                        <span className="text-cyan-400">{convertTransferData.source.account_name}</span>
                      </p>
                    </div>
                    <div className="col-md-6">
                      <p className="mb-1">
                        <strong className="text-slate-300">{t('transactions.amount')}:</strong>{' '}
                        <span className={convertTransferData.source.type === 'credit' ? 'text-success' : 'text-danger'}>
                          {convertTransferData.source.type === 'credit' ? '+' : '-'}
                          {formatCurrency(convertTransferData.source.amount, 'EUR')}
                        </span>
                      </p>
                      <p className="mb-1">
                        <strong className="text-slate-300">{t('transactions.date')}:</strong>{' '}
                        <span className="text-white">{formatDate(convertTransferData.source.date)}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Lista de possíveis pares */}
            <h6 className="text-white mb-3">
              <i className="bi bi-search me-2"></i>
              {t('transactions.selectPairTransaction')}
            </h6>

            {convertTransferData.pairs.length === 0 ? (
              <div className="alert alert-warning">
                <i className="bi bi-exclamation-triangle me-2"></i>
                {t('transactions.noPairsFound')}
              </div>
            ) : (
              <div className="transfer-pairs-list" style={{ maxHeight: '350px', overflowY: 'auto' }}>
                {convertTransferData.pairs.map((pair) => (
                  <div
                    key={pair.id}
                    className={`card mb-2 transfer-pair-item ${convertTransferData.selectedPairId === pair.id ? 'selected' : ''}`}
                    style={{
                      background: convertTransferData.selectedPairId === pair.id 
                        ? 'rgba(99, 102, 241, 0.25)' 
                        : 'rgba(30, 41, 59, 0.6)',
                      border: convertTransferData.selectedPairId === pair.id 
                        ? '2px solid rgba(99, 102, 241, 0.7)' 
                        : '1px solid rgba(71, 85, 105, 0.5)',
                      cursor: 'pointer',
                      transition: 'all 0.2s ease',
                    }}
                    onClick={() => setConvertTransferData(prev => ({ ...prev, selectedPairId: pair.id }))}
                  >
                    <div className="card-body py-3">
                      <div className="d-flex justify-content-between align-items-start">
                        <div className="flex-grow-1">
                          <div className="d-flex align-items-center gap-2 mb-2">
                            <span className={`badge ${pair.confidence.level === 'high' ? 'bg-success' : pair.confidence.level === 'medium' ? 'bg-warning text-dark' : 'bg-secondary'}`}>
                              {pair.confidence.percentage}%
                            </span>
                            <span className="text-white fw-medium">{pair.description}</span>
                          </div>
                          <div className="small text-slate-400">
                            <span className="me-3">
                              <i className="bi bi-wallet2 me-1"></i>
                              {pair.account_name}
                            </span>
                            <span className="me-3">
                              <i className="bi bi-calendar me-1"></i>
                              {formatDate(pair.date)}
                              {pair.days_diff > 0 && (
                                <span className="text-slate-500 ms-1">
                                  ({pair.days_diff} {pair.days_diff === 1 ? t('common.day') : t('common.days')})
                                </span>
                              )}
                            </span>
                          </div>
                        </div>
                        <div className="text-end">
                          <div className={pair.type === 'credit' ? 'text-success fs-5' : 'text-danger fs-5'}>
                            {pair.type === 'credit' ? '+' : '-'}
                            {formatCurrency(pair.amount, 'EUR')}
                          </div>
                          {convertTransferData.selectedPairId === pair.id && (
                            <i className="bi bi-check-circle-fill text-success mt-1"></i>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Botões de ação */}
            <div className="d-flex justify-content-end gap-2 mt-4">
              <button className="btn btn-secondary" onClick={() => setShowConvertTransferModal(false)}>
                {t('common.cancel')}
              </button>
              <button 
                className="btn btn-primary" 
                onClick={handleConvertToTransfer}
                disabled={!convertTransferData.selectedPairId}
              >
                <i className="bi bi-link-45deg me-1"></i>
                {t('transactions.linkAsTransfer')}
              </button>
            </div>
          </div>
        )}
      </Modal>

      {/* Modal de Conciliar com Passivo */}
      <Modal
        show={showReconcileLiabilityModal}
        onHide={() => setShowReconcileLiabilityModal(false)}
        title={
          <>
            <i className="bi bi-link-45deg me-2 text-purple"></i>
            {t('transactions.reconcileWithLiability')}
          </>
        }
        size="lg"
      >
        {reconcileLiabilityData.loading ? (
          <div className="text-center py-5">
            <div className="spinner-border text-info" role="status">
              <span className="visually-hidden">Loading...</span>
            </div>
            <p className="text-slate-400 mt-3">{t('common.loading')}</p>
          </div>
        ) : (
          <div className="reconcile-liability-modal">
            {/* Transação */}
            {reconcileLiabilityData.transaction && (
              <div className="card mb-4" style={{ background: 'rgba(15, 23, 42, 0.8)', border: '1px solid rgba(239, 68, 68, 0.3)' }}>
                <div className="card-header" style={{ background: 'rgba(239, 68, 68, 0.15)', borderBottom: '1px solid rgba(239, 68, 68, 0.3)' }}>
                  <h6 className="mb-0 text-white">
                    <i className="bi bi-receipt me-2 text-red-400"></i>
                    {t('transactions.transaction')}
                  </h6>
                </div>
                <div className="card-body">
                  <div className="row">
                    <div className="col-md-8">
                      <p className="mb-1 text-white">{reconcileLiabilityData.transaction.description}</p>
                    </div>
                    <div className="col-md-4 text-end">
                      <span className="text-danger fs-5">
                        -{formatCurrency(reconcileLiabilityData.transaction.amount, selectedCurrency)}
                      </span>
                      <br />
                      <small className="text-slate-400">{formatDate(reconcileLiabilityData.transaction.date)}</small>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Lista de parcelas compatíveis */}
            <h6 className="text-white mb-3">
              <i className="bi bi-search me-2"></i>
              {t('transactions.selectLiabilityInstallment')}
            </h6>

            {reconcileLiabilityData.installments.length === 0 ? (
              <div className="alert alert-warning">
                <i className="bi bi-exclamation-triangle me-2"></i>
                {t('transactions.noInstallmentsFound')}
              </div>
            ) : (
              <div className="liability-installments-list" style={{ maxHeight: '350px', overflowY: 'auto' }}>
                {reconcileLiabilityData.installments.map((installment) => (
                  <div
                    key={installment.id}
                    className={`card mb-2 installment-item ${reconcileLiabilityData.selectedInstallmentId === installment.id ? 'selected' : ''}`}
                    style={{
                      background: reconcileLiabilityData.selectedInstallmentId === installment.id 
                        ? 'rgba(168, 85, 247, 0.25)' 
                        : 'rgba(30, 41, 59, 0.6)',
                      border: reconcileLiabilityData.selectedInstallmentId === installment.id 
                        ? '2px solid rgba(168, 85, 247, 0.7)' 
                        : '1px solid rgba(71, 85, 105, 0.5)',
                      cursor: 'pointer',
                      transition: 'all 0.2s ease',
                    }}
                    onClick={() => setReconcileLiabilityData(prev => ({ ...prev, selectedInstallmentId: installment.id }))}
                  >
                    <div className="card-body py-3">
                      <div className="d-flex justify-content-between align-items-start">
                        <div className="flex-grow-1">
                          <div className="d-flex align-items-center gap-2 mb-2">
                            <span className={`badge ${installment.confidence.level === 'high' ? 'bg-success' : installment.confidence.level === 'medium' ? 'bg-warning text-dark' : 'bg-secondary'}`}>
                              {installment.confidence.percentage}%
                            </span>
                            <span className="text-white fw-medium">{installment.liability_name}</span>
                            {installment.creditor && (
                              <span className="text-slate-400 small">({installment.creditor})</span>
                            )}
                          </div>
                          <div className="small text-slate-400">
                            <span className="me-3">
                              <i className="bi bi-hash me-1"></i>
                              {t('liabilities.installment')} {installment.installment_number}
                            </span>
                            <span className="me-3">
                              <i className="bi bi-calendar me-1"></i>
                              {formatDate(installment.due_date)}
                              {installment.days_diff > 0 && (
                                <span className="text-slate-500 ms-1">
                                  ({installment.days_diff} {installment.days_diff === 1 ? t('common.day') : t('common.days')})
                                </span>
                              )}
                            </span>
                            {installment.status === 'overdue' && (
                              <span className="badge bg-danger">{t('liabilities.overdue')}</span>
                            )}
                          </div>
                        </div>
                        <div className="text-end">
                          <div className="text-danger fs-5">
                            {formatCurrency(installment.installment_amount, selectedCurrency)}
                          </div>
                          {installment.amount_diff > 0 && (
                            <small className="text-slate-500">
                              {t('common.difference')}: {formatCurrency(installment.amount_diff, selectedCurrency)}
                            </small>
                          )}
                          {installment.has_overpayment && (
                            <div className="mt-1">
                              <small className="text-warning">
                                <i className="bi bi-exclamation-triangle me-1"></i>
                                {t('transactions.overpayment')}: +{formatCurrency(installment.overpayment, selectedCurrency)}
                              </small>
                            </div>
                          )}
                          {reconcileLiabilityData.selectedInstallmentId === installment.id && (
                            <i className="bi bi-check-circle-fill text-success mt-1 d-block"></i>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Botões de ação */}
            <div className="d-flex justify-content-end gap-2 mt-4">
              <button className="btn btn-secondary" onClick={() => setShowReconcileLiabilityModal(false)}>
                {t('common.cancel')}
              </button>
              <button 
                className="btn btn-primary" 
                onClick={handleReconcileWithLiability}
                disabled={!reconcileLiabilityData.selectedInstallmentId}
              >
                <i className="bi bi-link-45deg me-1"></i>
                {t('transactions.reconcile')}
              </button>
            </div>
          </div>
        )}
      </Modal>

      {/* Modal de Criar Recorrência */}
      <CreateRecurrenceModal
        show={showRecurrenceModal}
        onClose={() => setShowRecurrenceModal(false)}
        transaction={recurrenceTransaction}
        onSuccess={handleRecurrenceSuccess}
      />

      {/* Modal de Criação Rápida de Categoria */}
      <Modal
        show={showQuickCategoryModal}
        onClose={() => setShowQuickCategoryModal(false)}
        title={t('categories.newCategory')}
        size="md"
      >
        <form onSubmit={handleQuickCategorySubmit}>
          <div className="mb-3">
            <label className="form-label">{t('categories.categoryName')} *</label>
            <input
              type="text"
              className="form-control"
              value={quickCategoryData.name}
              onChange={(e) => setQuickCategoryData(prev => ({ ...prev, name: e.target.value }))}
              required
              autoFocus
              placeholder={t('categories.categoryName')}
            />
          </div>

          <div className="mb-3">
            <label className="form-label">{t('categories.parentCategory')}</label>
            <select
              className="form-select"
              value={quickCategoryData.parent_id}
              onChange={(e) => setQuickCategoryData(prev => ({ ...prev, parent_id: e.target.value }))}
            >
              <option value="">{t('categories.noParent')}</option>
              {parentCategories.map(cat => (
                <option key={cat.id} value={cat.id}>{cat.name}</option>
              ))}
            </select>
            <small className="text-muted">{t('transactions.quickCategory.parentHelp')}</small>
          </div>

          <div className="row mb-3">
            <div className="col-6">
              <label className="form-label">{t('transactions.type.label')}</label>
              <select
                className="form-select"
                value={quickCategoryData.type}
                onChange={(e) => setQuickCategoryData(prev => ({ ...prev, type: e.target.value }))}
              >
                <option value="expense">{t('categories.types.expense')}</option>
                <option value="income">{t('categories.types.income')}</option>
                <option value="both">{t('categories.types.both')}</option>
              </select>
            </div>
            <div className="col-6">
              <label className="form-label">{t('common.icon')}</label>
              <IconSelector
                value={quickCategoryData.icon}
                onChange={(icon) => setQuickCategoryData(prev => ({ ...prev, icon }))}
                type="category"
              />
            </div>
          </div>

          <div className="d-flex justify-content-end gap-2">
            <button type="button" className="btn btn-secondary" onClick={() => setShowQuickCategoryModal(false)}>
              {t('common.cancel')}
            </button>
            <button type="submit" className="btn btn-primary" disabled={savingQuickItem}>
              {savingQuickItem ? (
                <><span className="spinner-border spinner-border-sm me-1"></span>{t('common.saving')}</>
              ) : (
                <><i className="bi bi-check-lg me-1"></i>{t('common.create')}</>
              )}
            </button>
          </div>
        </form>
      </Modal>

      {/* Modal de Criação Rápida de Centro de Custo */}
      <Modal
        show={showQuickCostCenterModal}
        onClose={() => setShowQuickCostCenterModal(false)}
        title={t('costCenters.newCostCenter')}
        size="md"
      >
        <form onSubmit={handleQuickCostCenterSubmit}>
          <div className="mb-3">
            <label className="form-label">{t('costCenters.costCenterName')} *</label>
            <input
              type="text"
              className="form-control"
              value={quickCostCenterData.name}
              onChange={(e) => setQuickCostCenterData(prev => ({ ...prev, name: e.target.value }))}
              required
              autoFocus
              placeholder={t('costCenters.costCenterName')}
            />
          </div>

          <div className="mb-3">
            <label className="form-label">{t('costCenters.code')}</label>
            <input
              type="text"
              className="form-control"
              value={quickCostCenterData.code}
              onChange={(e) => setQuickCostCenterData(prev => ({ ...prev, code: e.target.value }))}
              placeholder={t('transactions.quickCostCenter.codePlaceholder')}
            />
            <small className="text-muted">{t('transactions.quickCostCenter.codeHelp')}</small>
          </div>

          <div className="d-flex justify-content-end gap-2">
            <button type="button" className="btn btn-secondary" onClick={() => setShowQuickCostCenterModal(false)}>
              {t('common.cancel')}
            </button>
            <button type="submit" className="btn btn-primary" disabled={savingQuickItem}>
              {savingQuickItem ? (
                <><span className="spinner-border spinner-border-sm me-1"></span>{t('common.saving')}</>
              ) : (
                <><i className="bi bi-check-lg me-1"></i>{t('common.create')}</>
              )}
            </button>
          </div>
        </form>
      </Modal>

      {/* Modal de Categorização Rápida Individual */}
      <Modal
        show={showQuickCategorizeModal}
        onClose={() => setShowQuickCategorizeModal(false)}
        title={t('transactions.quickCategorize')}
        size="md"
      >
        <form onSubmit={handleQuickCategorizeSubmit}>
          {quickCategorizeData.transaction && (
            <div className="alert alert-light mb-3">
              <div className="d-flex justify-content-between align-items-center">
                <div>
                  <strong>{quickCategorizeData.transaction.description}</strong>
                  {quickCategorizeData.transaction.original_description && 
                   quickCategorizeData.transaction.original_description !== quickCategorizeData.transaction.description && (
                    <div className="small text-muted mt-1">
                      <i className="bi bi-bank me-1"></i>
                      {quickCategorizeData.transaction.original_description}
                    </div>
                  )}
                </div>
                <span className={`badge ${quickCategorizeData.transaction.type === 'credit' ? 'bg-success' : 'bg-danger'}`}>
                  {quickCategorizeData.transaction.type === 'credit' ? '+' : '-'}
                  {formatCurrency(quickCategorizeData.transaction.amount || quickCategorizeData.transaction.planned_amount, selectedCurrency)}
                </span>
              </div>
            </div>
          )}

          <div className="mb-3">
            <label className="form-label">{t('transactions.category')}</label>
            <CategorySelector
              categories={categories}
              value={quickCategorizeData.category_id}
              onChange={(e) => setQuickCategorizeData(prev => ({ ...prev, category_id: e.target.value }))}
              placeholder={t('transactions.selectCategory')}
            />
          </div>

          <div className="mb-3">
            <label className="form-label">{t('transactions.costCenter')}</label>
            <select
              className="form-select"
              value={quickCategorizeData.cost_center_id}
              onChange={(e) => setQuickCategorizeData(prev => ({ ...prev, cost_center_id: e.target.value }))}
            >
              <option value="">{t('transactions.selectCostCenter')}</option>
              {costCenters.map(cc => (
                <option key={cc.id} value={cc.id}>{cc.name}</option>
              ))}
            </select>
          </div>

          {quickCategorizeData.transaction?.original_description && (
            <div className="form-check mb-3">
              <input
                type="checkbox"
                className="form-check-input"
                id="quickCategorizeAddKeyword"
                checked={quickCategorizeData.add_keyword}
                onChange={(e) => setQuickCategorizeData(prev => ({ ...prev, add_keyword: e.target.checked }))}
              />
              <label className="form-check-label" htmlFor="quickCategorizeAddKeyword">
                {t('transactions.addKeywordForFuture')}
              </label>
              <div className="form-text">{t('transactions.keywordHelp')}</div>
            </div>
          )}

          <div className="d-flex justify-content-end gap-2">
            <button type="button" className="btn btn-secondary" onClick={() => setShowQuickCategorizeModal(false)}>
              {t('common.cancel')}
            </button>
            <button type="submit" className="btn btn-success" disabled={savingQuickCategorize}>
              {savingQuickCategorize ? (
                <><span className="spinner-border spinner-border-sm me-1"></span>{t('common.saving')}</>
              ) : (
                <><i className="bi bi-tags me-1"></i>{t('transactions.categorize')}</>
              )}
            </button>
          </div>
        </form>
      </Modal>
    </div>
  );
}