import React, { useState, useMemo } from 'react';
import { 
  Search, 
  // Filter, // Comentado - botão de filtros sem funcionalidade
  Download, 
  Edit2, 
  Trash2, 
  UserPlus,
  Loader2,
  Users,
  AlertCircle,
  X
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { toast } from 'sonner';
import { AnimatePresence } from 'framer-motion';
import DetailsPanel from '../components/DetailsPanel';
import FavorecidoForm from '../components/FavorecidoForm';
import { useCnabStore } from '../hooks/useCnabStore';
import { useFavorecidos } from '../hooks/useFavorecidos';
import ExcelTable from '../components/ExcelTable';
import { motion } from 'framer-motion';
import { getTipoChavePixText } from '../utils/pixUtils';

/**
 * Tela de Gestão de Favorecidos
 */
const FavorecidosView = () => {
  const { paymentMode } = useCnabStore();
  const {
    favorecidos,
    loading,
    searchTerm,
    setSearchTerm,
    selectedFavorecido,
    setSelectedFavorecido,
    handleExport,
    handleDelete,
    handleCreate,
    handleUpdate,
    handleBulkUpdate,
    handleBulkDelete
  } = useFavorecidos();

  // Estados para o formulário
  const [isFormOpen, setIsFormOpen] = useState(false);
  const [editingFavorecido, setEditingFavorecido] = useState(null);
  
  // Estado para filtro ativo dos cards de contagem
  const [activeFilter, setActiveFilter] = useState(null); // 'inativos' | null
  
  // Estados para seleção e edição inline
  const [selectedIds, setSelectedIds] = useState([]);
  const [pendingEdits, setPendingEdits] = useState({}); // { [rowId]: { [field]: value } }

  // Funções de formatação para a tabela
  const formatMoney = (val) => val ? `R$ ${parseFloat(val).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}` : 'R$ 0,00';
  const formatDate = (val) => val ? val : '---';
  const formatDoc = (val) => {
    const clean = String(val || "").replace(/\D/g, "");
    if (clean.length === 11) return clean.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4");
    if (clean.length === 14) return clean.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5");
    return val;
  };

  // Análise de dados para cards de gerenciamento
  const managementStats = useMemo(() => {
    if (!favorecidos || favorecidos.length === 0) {
      return {
        totalFavorecidos: 0,
        totalInativos: 0
      };
    }

    const totalFavorecidos = favorecidos.length;

    // Calcula favorecidos inativos (sem pagamento há 30 dias)
    // Verifica se há data de último pagamento ou usa data de cadastro como referência
    const hoje = new Date();
    const trintaDiasAtras = new Date(hoje);
    trintaDiasAtras.setDate(trintaDiasAtras.getDate() - 30);

    const totalInativos = favorecidos.filter(f => {
      // Verifica se há data de último pagamento
      const dataUltimoPagamento = f.data_ultimo_pagamento || f.DATA_ULTIMO_PAGAMENTO || f.data_pagamento || f.DATA_PAGAMENTO;
      
      if (dataUltimoPagamento) {
        const dataPagamento = new Date(dataUltimoPagamento);
        // Se a data de pagamento for inválida, considera inativo
        if (isNaN(dataPagamento.getTime())) {
          return true;
        }
        // Se não teve pagamento há mais de 30 dias, considera inativo
        return dataPagamento < trintaDiasAtras;
      }
      
      // Se não há data de pagamento, verifica data de cadastro
      const dataCadastro = f.DATA || f.data_cadastro || f.DATA_CADASTRO;
      if (dataCadastro) {
        const dataCad = new Date(dataCadastro);
        if (isNaN(dataCad.getTime())) {
          return true;
        }
        // Se o cadastro foi há mais de 30 dias e não há pagamento, considera inativo
        return dataCad < trintaDiasAtras;
      }
      
      // Se não há nenhuma data, considera inativo por padrão
      return true;
    }).length;

    return {
      totalFavorecidos,
      totalInativos
    };
  }, [favorecidos]);

  // Filtra favorecidos baseado no filtro ativo
  const filteredFavorecidos = useMemo(() => {
    if (!activeFilter) return favorecidos;
    
    // Filtro para inativos
    if (activeFilter === 'inativos') {
      const hoje = new Date();
      const trintaDiasAtras = new Date(hoje);
      trintaDiasAtras.setDate(trintaDiasAtras.getDate() - 30);
      
      return favorecidos.filter(f => {
        const dataUltimoPagamento = f.data_ultimo_pagamento || f.DATA_ULTIMO_PAGAMENTO || f.data_pagamento || f.DATA_PAGAMENTO;
        
        if (dataUltimoPagamento) {
          const dataPagamento = new Date(dataUltimoPagamento);
          if (isNaN(dataPagamento.getTime())) return true;
          return dataPagamento < trintaDiasAtras;
        }
        
        const dataCadastro = f.DATA || f.data_cadastro || f.DATA_CADASTRO;
        if (dataCadastro) {
          const dataCad = new Date(dataCadastro);
          if (isNaN(dataCad.getTime())) return true;
          return dataCad < trintaDiasAtras;
        }
        
        return true;
      });
    }
    
    return favorecidos;
  }, [favorecidos, activeFilter]);

  // Colunas editáveis (campos que podem ser editados inline)
  const editableFields = paymentMode === 'TED' 
    ? ['NOME_FAVORECIDO', 'BANCO_FAVORECIDO', 'AGENCIA_FAVORECIDA', 'CONTA_FAVORECIDA']
    : ['NOME_FAVORECIDO', 'CPF_CNPJ_FAVORECIDO', 'CHAVE_PIX', 'TIPO_CHAVE_PIX'];

  // Handler para edição de célula inline
  const handleCellEdit = (rowId, field, newValue) => {
    // Se houver múltiplos itens selecionados, marca a edição para todos
    if (selectedIds.length > 1) {
      setPendingEdits(prev => {
        const newEdits = { ...prev };
        // Aplica a edição a todos os itens selecionados
        selectedIds.forEach(id => {
          newEdits[id] = {
            ...(newEdits[id] || {}),
            [field]: newValue
          };
        });
        return newEdits;
      });
    } else {
      // Edição única
      setPendingEdits(prev => ({
        ...prev,
        [rowId]: {
          ...(prev[rowId] || {}),
          [field]: newValue
        }
      }));
    }
  };

  // Handler para validar edições pendentes
  const handleValidateEdits = async (options = {}) => {
    if (options && typeof options === 'object' && options.clear) {
      setPendingEdits({});
      toast.info('Edições canceladas');
      return;
    }

    if (Object.keys(pendingEdits).length === 0) {
      toast.info('Nenhuma edição pendente para validar');
      return;
    }

    try {
      // Se houver múltiplos itens selecionados, aplica as edições a todos
      if (selectedIds.length > 1) {
        // Coleta todas as edições feitas em qualquer item selecionado
        const allEdits = {};
        Object.entries(pendingEdits).forEach(([rowId, edits]) => {
          // Só considera edições de itens selecionados
          const isSelected = selectedIds.some(id => String(id) === String(rowId));
          if (isSelected) {
            Object.entries(edits).forEach(([field, value]) => {
              allEdits[field] = value; // Última edição de cada campo vence
            });
          }
        });

        if (Object.keys(allEdits).length === 0) {
          toast.error('Nenhuma edição válida encontrada');
          return;
        }

        // Aplica todas as edições a todos os itens selecionados
        const updates = selectedIds.map(id => {
          const row = filteredFavorecidos.find(f => {
            const rowId = f.idfavorecido || f.id;
            return String(rowId) === String(id);
          });
          if (!row) return null;
          
          return {
            ...row,
            ...allEdits,
            idfavorecido: id,
            id: id
          };
        }).filter(Boolean);

        if (updates.length === 0) {
          toast.error('Nenhuma atualização válida encontrada');
          return;
        }

        await handleBulkUpdate(updates);
      } else {
        // Edição única ou múltiplas edições em um único item
        const updates = Object.entries(pendingEdits).map(([rowId, edits]) => {
          const originalRow = filteredFavorecidos.find(f => {
            const fId = f.idfavorecido || f.id;
            return String(fId) === String(rowId);
          });
          if (!originalRow) return null;

          return {
            ...originalRow,
            ...edits,
            idfavorecido: rowId,
            id: rowId
          };
        }).filter(Boolean);

        if (updates.length === 0) {
          toast.error('Nenhuma atualização válida encontrada');
          return;
        }

        await handleBulkUpdate(updates);
      }

      setPendingEdits({});
      setSelectedIds([]);
      toast.success('Edições validadas e salvas com sucesso!');
    } catch (error) {
      console.error('Erro ao validar edições:', error);
      toast.error('Erro ao salvar edições');
    }
  };

  // Handler para edição via formulário (botão de edição)
  const handleEditSelected = () => {
    if (selectedIds.length === 0) {
      toast.info('Selecione pelo menos um item para editar');
      return;
    }

    if (selectedIds.length === 1) {
      // Edição única via formulário
      const favorecido = filteredFavorecidos.find(f => {
        const fId = f.idfavorecido || f.id;
        return String(fId) === String(selectedIds[0]);
      });
      if (favorecido) {
        setEditingFavorecido(favorecido);
        setIsFormOpen(true);
      }
    } else {
      toast.info('Para edição em massa, use a edição inline nas células');
    }
  };

  // Handler para exclusão em massa
  const handleDeleteSelected = async () => {
    if (selectedIds.length === 0) {
      toast.info('Selecione pelo menos um item para excluir');
      return;
    }

    try {
      await handleBulkDelete(selectedIds);
      setSelectedIds([]);
      setPendingEdits({});
    } catch (error) {
      console.error('Erro ao excluir itens:', error);
    }
  };

  // Definição de colunas baseada no Modo (TED/PIX)
  const columns = paymentMode === 'TED' ? [
    { field: 'NOME_FAVORECIDO', header: 'Nome Favorecido', width: '250px', render: (row) => (
      <p className="font-bold text-slate-800 dark:text-zinc-200 group-hover:text-emerald-500 transition-colors uppercase text-[clamp(0.875rem,1vw,0.9375rem)] truncate">
        {row.NOME_FAVORECIDO || '---'}
      </p>
    )},
    { field: 'CPF_CNPJ_FAVORECIDO', header: 'Documento', width: '180px', render: (row) => formatDoc(row.CPF_CNPJ_FAVORECIDO) },
    { field: 'BANCO_FAVORECIDO', header: 'Banco', width: '150px' },
    { field: 'AGENCIA_FAVORECIDA', header: 'Agência', width: '120px', render: (row) => `${row.AGENCIA_FAVORECIDA}${row.DIGITO_AGENCIA ? `-${row.DIGITO_AGENCIA}` : ''}` },
    { field: 'CONTA_FAVORECIDA', header: 'Conta', width: '150px', render: (row) => `${row.CONTA_FAVORECIDA}-${row.DIGITO_CONTA_FAVORECIDA || '0'}` },
    { field: 'DATA', header: 'Data Cadastro', width: '140px', render: (row) => formatDate(row.DATA) },
    { field: 'status', header: 'Status', width: '100px', render: (row) => (
      <span className={cn(
        "text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest",
        (row.status === 'Ativo' || !row.status) ? 'text-emerald-500' : 'text-rose-500'
      )}>
        {row.status || 'ATIVO'}
      </span>
    )}
  ] : [
    { field: 'NOME_FAVORECIDO', header: 'Nome Favorecido', width: '250px', render: (row) => (
      <p className="font-bold text-slate-800 dark:text-zinc-200 group-hover:text-emerald-500 transition-colors uppercase text-[clamp(0.875rem,1vw,0.9375rem)] truncate">
        {row.NOME_FAVORECIDO || '---'}
      </p>
    )},
    { field: 'CPF_CNPJ_FAVORECIDO', header: 'Documento', width: '180px', render: (row) => formatDoc(row.CPF_CNPJ_FAVORECIDO) },
    { field: 'CHAVE_PIX', header: 'Chave PIX', width: '220px', render: (row) => row.CHAVE_PIX || '---' },
    { field: 'TIPO_CHAVE_PIX', header: 'Tipo Chave', width: '130px', render: (row) => getTipoChavePixText(row.TIPO_CHAVE_PIX || row.tipo_chave_pix || row.tipoPix) }
  ];

  return (
    <div className="space-y-6 animate-in slide-in-from-bottom-4 duration-500 relative h-full flex flex-col overflow-hidden">
      <div className="flex justify-between items-end shrink-0">
        <div>
          <h2 className="text-[clamp(1.25rem,2vw,1.75rem)] font-bold text-slate-900 dark:text-white mb-2 tracking-tighter">
            Gestão de <span className="text-emerald-500">Favorecidos</span>
            <span className="ml-4 text-[clamp(0.75rem,0.9vw,0.8125rem)] bg-zinc-800 dark:bg-zinc-800 text-zinc-300 px-3 py-1 rounded-full border border-zinc-700 font-mono uppercase tracking-widest">
              MODO {paymentMode}
            </span>
          </h2>
          <p className="text-slate-600 dark:text-zinc-300 text-[clamp(0.875rem,1vw,0.9375rem)]">Gerencie os dados dos beneficiários para remessas bancárias.</p>
        </div>
        <div className="flex gap-3">
          <button 
            onClick={handleExport}
            className="flex items-center gap-2 px-5 py-2.5 bg-slate-200 dark:bg-zinc-800 hover:bg-slate-300 dark:hover:bg-zinc-700 text-slate-700 dark:text-zinc-300 rounded-2xl text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest transition-all border border-slate-300 dark:border-zinc-700 active:scale-95 shadow-lg"
          >
            <Download size={16} />
            Exportar
          </button>
          <button 
            onClick={() => {
              setEditingFavorecido(null);
              setIsFormOpen(true);
            }}
            className="flex items-center gap-2 px-6 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-2xl text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest transition-all shadow-xl shadow-emerald-900/20 active:scale-95"
          >
            <UserPlus size={18} />
            Novo Favorecido
          </button>
        </div>
      </div>

      {/* Management Cards - Comentado temporariamente */}
      {/* <div className="grid grid-cols-1 md:grid-cols-2 gap-4 shrink-0">
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white dark:bg-[#1b1b1b] border border-slate-200 dark:border-zinc-800 rounded-2xl p-5 shadow-xl transition-all"
        >
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center">
                <Users size={18} className="text-emerald-500" />
              </div>
              <div>
                <p className="text-slate-600 dark:text-zinc-300 text-[clamp(0.75rem,0.9vw,0.8125rem)] uppercase font-bold tracking-widest">Total Favorecidos Cadastrados</p>
                <p className="text-slate-900 dark:text-white text-[clamp(1.125rem,1.8vw,1.5rem)] font-bold">{managementStats.totalFavorecidos}</p>
              </div>
            </div>
          </div>
          <p className="text-slate-600 dark:text-zinc-300 text-[clamp(0.75rem,0.9vw,0.8125rem)] uppercase tracking-wider">
            Total de favorecidos cadastrados no sistema
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          onClick={() => {
            if (managementStats.totalInativos > 0) {
              setActiveFilter(activeFilter === 'inativos' ? null : 'inativos');
            }
          }}
          className={cn(
            "bg-white dark:bg-[#1b1b1b] border rounded-2xl p-5 shadow-xl transition-all",
            managementStats.totalInativos > 0 ? "cursor-pointer hover:border-rose-500/50 hover:bg-rose-500/5" : "",
            activeFilter === 'inativos' ? "border-rose-500 bg-rose-500/10" : "border-slate-200 dark:border-zinc-800"
          )}
        >
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-rose-500/10 flex items-center justify-center">
                <AlertCircle size={18} className="text-rose-500" />
              </div>
              <div>
                <p className="text-slate-600 dark:text-zinc-300 text-[clamp(0.75rem,0.9vw,0.8125rem)] uppercase font-bold tracking-widest">Favorecidos Inativos</p>
                <p className="text-slate-900 dark:text-white text-[clamp(1.125rem,1.8vw,1.5rem)] font-bold">{managementStats.totalInativos}</p>
              </div>
            </div>
            {managementStats.totalInativos > 0 && (
              <AlertCircle size={16} className="text-rose-500" />
            )}
          </div>
          <p className="text-slate-600 dark:text-zinc-300 text-[clamp(0.75rem,0.9vw,0.8125rem)] uppercase tracking-wider">
            {managementStats.totalInativos > 0 ? "Clique para filtrar" : "Sem pagamento há mais de 30 dias"}
          </p>
        </motion.div>
      </div> */}
      
      {/* Indicador de filtro ativo */}
      {activeFilter && (
        <div className="flex items-center gap-2 shrink-0">
          <button
            onClick={() => setActiveFilter(null)}
            className="flex items-center gap-2 px-4 py-2 bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 rounded-xl text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest hover:bg-emerald-500/20 transition-colors"
          >
            <X size={14} />
            Limpar Filtro: Favorecidos Inativos
          </button>
        </div>
      )}

      {/* Campo de Pesquisa */}
      <div className="bg-white dark:bg-[#1b1b1b] border border-slate-200 dark:border-zinc-800 rounded-3xl p-5 shadow-xl shrink-0">
        <div className="relative w-full group">
          <Search size={18} className="absolute left-5 top-1/2 -translate-y-1/2 text-slate-500 dark:text-zinc-400 group-focus-within:text-emerald-500 transition-colors" />
          <input 
            type="text" 
            placeholder={`Pesquisar por nome, documento ou ${paymentMode === 'PIX' ? 'chave PIX' : 'dados bancários'}...`}
            className="w-full pl-14 pr-5 py-4 bg-slate-50 dark:bg-[#151515] border border-slate-200 dark:border-zinc-800 rounded-2xl text-slate-900 dark:text-zinc-200 focus:outline-none focus:border-emerald-600 focus:ring-1 focus:ring-emerald-600/20 transition-all text-[clamp(0.875rem,1vw,0.9375rem)] group-hover:bg-slate-100 dark:group-hover:bg-[#1a1a1a]"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
        {/* Botão de Filtros comentado - sem funcionalidade no momento */}
        {/* <button className="flex items-center gap-3 px-6 py-4 bg-slate-200 dark:bg-zinc-800 hover:bg-slate-300 dark:hover:bg-zinc-700 text-slate-700 dark:text-zinc-300 rounded-2xl text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest transition-colors border border-slate-300 dark:border-zinc-700">
          <Filter size={16} />
          Filtros
        </button> */}
      </div>

      {/* Table Section */}
      <div className="flex-1 min-h-0">
        {loading ? (
           <div className="bg-white dark:bg-[#1b1b1b] border border-slate-200 dark:border-zinc-800 rounded-3xl h-full flex flex-col items-center justify-center space-y-4 shadow-2xl">
               <Loader2 className="w-10 h-10 text-emerald-500 animate-spin" />
               <p className="text-slate-600 dark:text-zinc-300 font-bold text-[clamp(0.875rem,1vw,0.9375rem)] uppercase tracking-widest">Sincronizando registros...</p>
           </div>
        ) : (
          <>
            {/* Barra de ações quando houver seleção */}
            {selectedIds.length > 0 && (
              <div className="bg-emerald-500/10 border border-emerald-500/30 rounded-2xl p-4 mb-4 flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <span className="text-emerald-400 text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest">
                    {selectedIds.length} item(ns) selecionado(s)
                  </span>
                  {Object.keys(pendingEdits).length > 0 && (
                    <span className="text-amber-400 text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold">
                      • {Object.keys(pendingEdits).length} com edições pendentes
                    </span>
                  )}
                </div>
                <div className="flex items-center gap-2">
                  <button
                    onClick={handleEditSelected}
                    className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-wider transition-all"
                    title={selectedIds.length === 1 ? "Editar via formulário" : "Edição em massa disponível via células"}
                  >
                    <Edit2 size={14} />
                    {selectedIds.length === 1 ? 'Editar' : 'Editar (1)'}
                  </button>
                  <button
                    onClick={handleDeleteSelected}
                    className="flex items-center gap-2 px-4 py-2 bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/30 rounded-xl text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-wider transition-all"
                  >
                    <Trash2 size={14} />
                    Excluir ({selectedIds.length})
                  </button>
                  <button
                    onClick={() => {
                      setSelectedIds([]);
                      setPendingEdits({});
                    }}
                    className="px-4 py-2 bg-slate-200 dark:bg-zinc-800 hover:bg-slate-300 dark:hover:bg-zinc-700 text-slate-700 dark:text-zinc-300 rounded-xl text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-wider transition-all"
                  >
                    <X size={14} />
                  </button>
                </div>
              </div>
            )}

            <ExcelTable 
              data={filteredFavorecidos}
              columns={columns}
              onRowClick={(row) => {
                // Não abre o painel se estiver editando ou se houver seleção
                if (selectedIds.length === 0) {
                  setSelectedFavorecido(row);
                }
              }}
              onDelete={handleDeleteSelected}
              rowKey="idfavorecido"
              selectedIds={selectedIds}
              onSelectionChange={setSelectedIds}
              editableColumns={editableFields}
              onCellEdit={handleCellEdit}
              pendingEdits={pendingEdits}
              showValidationButton={Object.keys(pendingEdits).length > 0}
              onValidateEdits={handleValidateEdits}
              filterDefs={paymentMode === 'TED' ? [
                { field: 'NOME_FAVORECIDO', label: 'Nome Favorecido', type: 'text', placeholder: 'Buscar por nome...' },
                { field: 'CPF_CNPJ_FAVORECIDO', label: 'Documento', type: 'text', placeholder: 'Buscar por CPF/CNPJ...' },
                { field: 'BANCO_FAVORECIDO', label: 'Banco', type: 'select' },
                { field: 'AGENCIA_FAVORECIDA', label: 'Agência', type: 'text', placeholder: 'Buscar por agência...' },
                { field: 'status', label: 'Status', type: 'select' }
              ] : [
                { field: 'NOME_FAVORECIDO', label: 'Nome Favorecido', type: 'text', placeholder: 'Buscar por nome...' },
                { field: 'CPF_CNPJ_FAVORECIDO', label: 'Documento', type: 'text', placeholder: 'Buscar por CPF/CNPJ...' },
                { field: 'CHAVE_PIX', label: 'Chave PIX', type: 'text', placeholder: 'Buscar por chave PIX...' },
                { field: 'TIPO_CHAVE_PIX', label: 'Tipo Chave', type: 'select' }
              ]}
              pageSize={50}
            />
          </>
        )}
      </div>

      {/* Detailed Panel */}
      <AnimatePresence>
        {selectedFavorecido && (
            <>
                <motion.div 
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
                   className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[60] transition-opacity" 
                   onClick={() => setSelectedFavorecido(null)}
                />
                <DetailsPanel 
                   favorecido={selectedFavorecido} 
                   onClose={() => setSelectedFavorecido(null)}
                   onEdit={(favorecido) => {
                     setEditingFavorecido(favorecido);
                     setIsFormOpen(true);
                   }}
                />
            </>
        )}
      </AnimatePresence>

      {/* Formulário de Criação/Edição */}
      <FavorecidoForm
        isOpen={isFormOpen}
        onClose={() => {
          setIsFormOpen(false);
          setEditingFavorecido(null);
        }}
        initialData={editingFavorecido}
        paymentMode={paymentMode}
        onSubmit={async (payload, isEdit) => {
          try {
            if (isEdit) {
              await handleUpdate(payload);
            } else {
              await handleCreate(payload);
            }
          } catch (error) {
            throw error;
          }
        }}
      />
    </div>
  );
};

export default FavorecidosView;
