import React, { useState, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, FileText, Loader2, Download } from 'lucide-react';
import { useCnabStore } from '../hooks/useCnabStore';
import { toast } from 'sonner';
import cnabService from '../services/cnabService';
import { CnabRemessaExportAgent } from '../utils/CnabRemessaExportAgent';

const RemessaDetailsModal = ({ isOpen, onClose, remessaId, details, loading }) => {
  const { paymentMode, selectedBank } = useCnabStore();
  const isTed = paymentMode === 'TED';
  const [downloading, setDownloading] = useState(false);
  const exportAgent = new CnabRemessaExportAgent();

  // Função para formatar CPF/CNPJ
  const formatDoc = (doc) => {
    if (!doc || doc === '---') return '---';
    const clean = String(doc).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 doc;
  };

  // Handler para download do arquivo REM
  const handleDownloadRem = useCallback(async () => {
    if (!remessaId) {
      toast.error('Número de remessa não informado');
      return;
    }

    setDownloading(true);
    try {
      // 1. Validação via Agente
      const validation = exportAgent.validateExport({ n_remessa: remessaId }, selectedBank, paymentMode);
      if (!validation.valid) {
        toast.error(`Erro de validação: ${validation.errors.join(', ')}`);
        return;
      }

      // 2. Determinação de Banco e Tipo via Agente
      const { bank, type } = exportAgent.determineBankAndType(
        { n_remessa: remessaId },
        selectedBank,
        paymentMode
      );

      // 3. Consulta lista de arquivos
      toast.loading('Consultando arquivos disponíveis...');
      const filesList = await cnabService.getRemessaFilesList(bank, paymentMode);
      
      if (!filesList || !filesList.arquivos || filesList.arquivos.length === 0) {
        toast.dismiss();
        toast.error('Arquivo não encontrado', {
          description: `Nenhum arquivo REM disponível para o banco ${bank} no modo ${paymentMode}. Verifique se a remessa foi gerada corretamente.`
        });
        return;
      }

      // 4. Busca nome do arquivo via Agente (passa o objeto com arquivos)
      const filename = exportAgent.findFilenameInList(filesList, type, remessaId);

      if (!filename) {
        toast.dismiss();
        const totalArquivos = filesList.arquivos.length;
        toast.error('Arquivo REM não encontrado', {
          description: `Não foi possível localizar o arquivo para a remessa #${remessaId}. Foram encontrados ${totalArquivos} arquivo(s) disponível(is), mas nenhum corresponde a esta remessa. Verifique se o número da remessa está correto.`
        });
        return;
      }

      // 5. Download do arquivo encontrado
      toast.dismiss();
      toast.loading(`Baixando arquivo ${filename}...`);
      const blob = await cnabService.exportRemessaFile(bank, paymentMode, filename);
      
      if (!blob) {
        toast.dismiss();
        toast.error('Erro ao baixar arquivo', {
          description: `Não foi possível baixar o conteúdo do arquivo ${filename}. O arquivo pode estar corrompido ou não estar mais disponível no servidor.`
        });
        return;
      }

      // 6. Faz o download
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
      
      toast.dismiss();
      toast.success('Download concluído!', {
        description: `Arquivo ${filename} baixado com sucesso.`
      });
    } catch (error) {
      console.error('[RemessaDetailsModal] Erro ao baixar arquivo:', error);
      toast.dismiss();
      
      // Mensagens de erro mais específicas
      if (error.response?.status === 404) {
        toast.error('Arquivo não encontrado no servidor', {
          description: `O arquivo REM para a remessa #${remessaId} não foi encontrado no servidor. Verifique se a remessa foi gerada e está disponível.`
        });
      } else if (error.response?.status === 403) {
        toast.error('Acesso negado', {
          description: 'Você não tem permissão para acessar este arquivo. Entre em contato com o administrador.'
        });
      } else {
        toast.error('Erro ao baixar arquivo REM', {
          description: error.message || 'Ocorreu um erro inesperado ao tentar baixar o arquivo. Tente novamente mais tarde.'
        });
      }
    } finally {
      setDownloading(false);
    }
  }, [remessaId, selectedBank, paymentMode, exportAgent]);

  if (!isOpen) return null;

  return (
    <AnimatePresence>
      <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={onClose}
          className="absolute inset-0 bg-black/80 backdrop-blur-sm"
        />
        
        <motion.div
          initial={{ opacity: 0, scale: 0.95, y: 20 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.95, y: 20 }}
          className="bg-white dark:bg-[#1b1b1b] border border-slate-200 dark:border-zinc-800 w-full max-w-5xl rounded-[2.5rem] shadow-2xl relative overflow-hidden flex flex-col max-h-[90vh]"
        >
          {/* Header */}
          <div className="p-8 border-b border-slate-200 dark:border-zinc-800 flex justify-between items-center bg-slate-50 dark:bg-zinc-900/50">
            <div>
              <h2 className="text-[clamp(1rem,1.5vw,1.375rem)] font-bold text-slate-900 dark:text-white tracking-tighter">Remessa - <span className="text-emerald-500 font-mono">{remessaId}</span></h2>
              <p className="text-slate-600 dark:text-zinc-300 text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest mt-1">Detalhamento dos favorecidos inclusos no lote ({paymentMode})</p>
            </div>
            <button 
              onClick={onClose}
              className="p-3 hover:bg-slate-100 dark:hover:bg-zinc-800 rounded-2xl text-slate-500 dark:text-zinc-500 hover:text-slate-900 dark:hover:text-white transition-all"
            >
              <X size={24} />
            </button>
          </div>

          {/* Table Content */}
          <div className="flex-1 overflow-auto custom-scrollbar p-1">
            {loading ? (
              <div className="py-20 flex flex-col items-center justify-center gap-4 text-slate-500 dark:text-zinc-600">
                <Loader2 className="animate-spin" size={32} />
                <span className="text-[clamp(0.875rem,1vw,0.9375rem)] text-slate-600 dark:text-zinc-300 font-bold uppercase tracking-widest">Buscando registros...</span>
              </div>
            ) : details.length === 0 ? (
              <div className="py-20 flex flex-col items-center justify-center gap-4 text-slate-500 dark:text-zinc-600">
                <FileText size={48} className="opacity-30" />
                <span className="text-[clamp(0.875rem,1vw,0.9375rem)] text-slate-600 dark:text-zinc-300 font-bold uppercase tracking-widest">Nenhum registro encontrado</span>
              </div>
            ) : (
              <table className="w-full text-left">
                <thead className="sticky top-0 z-10">
                  <tr className="bg-[#151515] dark:bg-[#151515] text-slate-700 dark:text-zinc-300 text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-[0.2em] border-b border-zinc-800">
                    <th className="px-8 py-5">Nome Favorecido</th>
                    <th className="px-6 py-5">Documento</th>
                    {isTed ? (
                        <>
                            <th className="px-4 py-5">Banco</th>
                            <th className="px-4 py-5">Agência</th>
                            <th className="px-4 py-5">Conta</th>
                        </>
                    ) : (
                        <th className="px-6 py-5">Chave PIX</th>
                    )}
                    <th className="px-8 py-5 text-right">Valor Pagamento</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200 dark:divide-zinc-800/30 text-slate-700 dark:text-zinc-300">
                  {details.map((row, idx) => {
                    // Normalizar os dados para aceitar diferentes formatos (snake_case, camelCase, UPPER_CASE)
                    const nomeFavorecido = row.nome_favorecido || row.nome || row.NOME_FAVORECIDO || '---';
                    const documento = row.cpf_cnpj_favorecido || row.documento || row.CPF_CNPJ_FAVORECIDO || '---';
                    const chavePix = row.chave_pix || row.CHAVE_PIX || '---';
                    const valorPagamento = row.valor_pagamento || row.valor || row.VALOR_PAGAMENTO;
                    
                    // Formatação do valor
                    let valorFormatado = 'R$ 0,00';
                    if (valorPagamento) {
                      const numVal = parseFloat(valorPagamento);
                      if (!isNaN(numVal) && numVal > 0) {
                        valorFormatado = `R$ ${numVal.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
                      }
                    }

                    return (
                      <tr key={row.idfavorecido || idx} className="hover:bg-emerald-500/[0.02] transition-colors group">
                        <td className="px-8 py-6 text-[clamp(0.875rem,1vw,0.9375rem)] font-bold truncate uppercase group-hover:text-emerald-400 transition-colors text-slate-700 dark:text-zinc-300">
                          {nomeFavorecido}
                        </td>
                        <td className="px-6 py-6 font-mono text-[clamp(0.875rem,1vw,0.9375rem)] text-slate-600 dark:text-zinc-300">
                          {formatDoc(documento)}
                        </td>
                        
                        {isTed ? (
                          <>
                              <td className="px-4 py-6 font-mono text-[clamp(0.875rem,1vw,0.9375rem)] text-slate-600 dark:text-zinc-300">{row.banco || row.BANCO_FAVORECIDO || '---'}</td>
                              <td className="px-4 py-6 font-mono text-[clamp(0.875rem,1vw,0.9375rem)] text-slate-600 dark:text-zinc-300">{row.agencia || row.AGENCIA_FAVORECIDA || '---'}</td>
                              <td className="px-4 py-6 font-mono text-[clamp(0.875rem,1vw,0.9375rem)] text-slate-600 dark:text-zinc-300">{row.conta || row.CONTA_FAVORECIDA || '---'}</td>
                          </>
                        ) : (
                            <td className="px-6 py-6 font-mono text-[clamp(0.875rem,1vw,0.9375rem)] text-slate-600 dark:text-zinc-300 break-all">{chavePix}</td>
                        )}

                        <td className="px-8 py-6 text-right font-mono text-[clamp(0.875rem,1vw,0.9375rem)] font-bold text-slate-900 dark:text-white">
                          {valorFormatado}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
          </div>

          {/* Footer Info */}
          <div className="p-6 bg-slate-50 dark:bg-[#151515] border-t border-slate-200 dark:border-zinc-800 flex justify-between items-center">
             <div className="text-[clamp(0.75rem,0.9vw,0.8125rem)] text-slate-600 dark:text-zinc-300 font-bold uppercase tracking-widest">
               Exibindo <span className="text-emerald-500">{details.length}</span> de <span className="text-emerald-500">{details.length}</span> registros
             </div>
             <div className="flex items-center gap-3">
               <button 
                 onClick={handleDownloadRem}
                 disabled={downloading}
                 className="flex items-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-500 disabled:bg-emerald-600/50 disabled:cursor-not-allowed text-white rounded-xl text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest transition-all"
               >
                 <Download size={14} />
                 {downloading ? 'Baixando...' : 'Baixar Arquivo REM'}
               </button>
               <button onClick={onClose} className="px-8 py-3 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-xl text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest transition-all">
                  Fechar Visualização
               </button>
             </div>
          </div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
};

export default RemessaDetailsModal;
