import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, FileText, User, History } from 'lucide-react';
import { useCnabStore } from '../hooks/useCnabStore';
import CnabExcelTable from './CnabExcelTable';
import HistoricoPagamentosModal from './HistoricoPagamentosModal';

/**
 * Modal de detalhes por documento (Relatórios).
 * Reutiliza a linha da tabela: parseia nomes_remessa_valores e exibe Nome | Remessa | Valor.
 * Sem rota extra — dados já vêm de getRelatoriosLogs.
 */
const PagamentosDetailsModal = ({ isOpen, onClose, row }) => {
  const { paymentMode } = useCnabStore();
  const [showHistorico, setShowHistorico] = useState(false);

  const formatMoney = React.useCallback((val) => {
    const numVal = parseFloat(val);
    if (isNaN(numVal) || numVal === null || numVal === undefined) return 'R$ 0,00';
    return `R$ ${numVal.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  }, []);

  const formatDoc = React.useCallback((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;
  }, []);

  /** Parseia nomes do backend e retorna array { nome_favorecido, total_pago_neste_nome, pagamentos } com _uniqueId */
  const tableData = React.useMemo(() => {
    // Nova estrutura: row.nomes é um array direto
    // Cada item tem: nome_favorecido, pagamentos (array), qtd_pagamentos, total_pago_neste_nome
    const dataField = row?.nomes;
    if (!dataField) return [];
    try {
      const raw = typeof dataField === 'string'
        ? JSON.parse(dataField)
        : dataField;
      const arr = Array.isArray(raw) ? raw : [];
      return arr.map((item, idx) => {
        // A nova estrutura tem 'pagamentos' diretamente dentro de cada nome
        const pagamentos = item.pagamentos || [];
        return {
          nome: item.nome_favorecido ?? '---',
          valor_total_nome: item.total_pago_neste_nome ?? 0,
          qtd_pagamentos: item.qtd_pagamentos ?? pagamentos.length,
          // Nova estrutura: pagamentos já vem como array
          pagamentos: pagamentos,
          // Mantém compatibilidade com nome antigo para histórico (mapeia pagamentos para remessas)
          remessas: pagamentos.map(pag => ({
            data_pagamento: pag.data_pagamento || '---',
            n_remessa: pag.n_remessa || '---',
            valor: parseFloat(pag.valor || 0)
          })),
          // Também mantém detalhes_pagamentos para compatibilidade
          detalhes_pagamentos: pagamentos,
          _uniqueId: `nomes-${row.cpf_cnpj || row.CHAVE_PIX || 'doc'}-${idx}`,
        };
      });
    } catch (error) {
      console.error('Erro ao parsear nomes:', error);
      return [];
    }
  }, [row]);

  const [selectedNomeForHistorico, setSelectedNomeForHistorico] = useState(null);

  const columns = React.useMemo(
    () => [
      {
        field: 'nome',
        header: 'Nome',
        width: '400px',
        render: (r) => (
          <span className="font-bold text-slate-800 dark:text-zinc-200 uppercase text-[clamp(0.75rem,0.9vw,0.8125rem)] truncate block max-w-[400px]" title={r.nome}>
            {r.nome}
          </span>
        ),
      },
      {
        field: 'valor_total_nome',
        header: 'Valor Total',
        width: '200px',
        render: (r) => (
          <span className="font-mono font-bold text-emerald-500">
            {formatMoney(r.valor_total_nome)}
          </span>
        ),
      },
      {
        field: 'acoes',
        header: 'Ações',
        width: '180px',
        render: (r) => (
          <button
            onClick={(e) => {
              e.stopPropagation();
              setSelectedNomeForHistorico(r);
              setShowHistorico(true);
            }}
            className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-wider transition-all"
          >
            <History size={14} />
            Ver Histórico
          </button>
        ),
      },
    ],
    [formatMoney]
  );

  if (!isOpen) return null;

  const documento = row?.cpf_cnpj ?? '---';
  const valorTotal = parseFloat(row?.valor_total || 0);
  const qtdNomes = row?.qtd_nomes ?? tableData.length;
  const chavePix = row?.CHAVE_PIX;
  const nomeFavorecido = tableData.length > 0 ? tableData[0].nome : 'Favorecido';

  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 }}
          onClick={(e) => e.stopPropagation()}
          className="bg-white dark:bg-[#1b1b1b] border border-slate-200 dark:border-zinc-800 w-full max-w-4xl rounded-[2.5rem] shadow-2xl relative overflow-hidden flex flex-col max-h-[90vh]"
        >
          <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 className="flex items-center gap-4">
              <div className="p-3 bg-emerald-500/10 rounded-2xl border border-emerald-500/20">
                <User className="text-emerald-500" size={24} />
              </div>
              <div>
                <h2 className="text-[clamp(1rem,1.5vw,1.375rem)] font-bold text-slate-900 dark:text-white tracking-tighter">
                  Documento
                </h2>
                <div className="flex flex-wrap items-center gap-3 mt-1.5 text-[clamp(0.75rem,0.9vw,0.8125rem)] font-bold uppercase tracking-widest text-slate-600 dark:text-zinc-300">
                  {chavePix && (
                    <span>
                      {chavePix} <span className="text-emerald-500">QTD. {qtdNomes}</span> TOTAL{' '}
                      <span className="text-emerald-500 font-mono">{formatMoney(valorTotal)}</span>
                    </span>
                  )}
                  {!chavePix && (
                    <span>
                      <span className="text-emerald-500 font-mono">{formatDoc(documento)}</span> <span className="text-emerald-500">QTD. {qtdNomes}</span> TOTAL{' '}
                      <span className="text-emerald-500 font-mono">{formatMoney(valorTotal)}</span>
                    </span>
                  )}
                </div>
              </div>
            </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>

          <div className="flex-1 overflow-auto custom-scrollbar p-6">
            {tableData.length === 0 ? (
              <div className="py-20 flex flex-col items-center justify-center gap-4 text-slate-500 dark:text-zinc-300">
                <FileText size={48} className="opacity-30" />
                <span className="text-[clamp(0.875rem,1vw,0.9375rem)] font-bold uppercase tracking-widest">
                  Nenhum registro encontrado para este documento
                </span>
              </div>
            ) : (
              <div className="space-y-4">
                {/* Indicador de total de registros */}
                <div className="bg-slate-50 dark:bg-[#151515] border border-slate-200 dark:border-zinc-800 rounded-xl px-4 py-2">
                  <span className="text-[clamp(0.75rem,0.9vw,0.8125rem)] text-slate-700 dark:text-zinc-300 font-bold uppercase tracking-widest">
                    TOTAL DE REGISTROS: <span className="text-emerald-500">{tableData.length}</span>
                  </span>
                </div>
                <div className="min-h-[200px]">
                  <CnabExcelTable
                    data={tableData}
                    columns={columns}
                    rowKey="_uniqueId"
                    pageSize={10}
                  />
                </div>
              </div>
            )}
          </div>

          <div className="p-6 bg-slate-50 dark:bg-[#151515] border-t border-slate-200 dark:border-zinc-800 flex justify-between items-center">
            <span className="text-[clamp(0.75rem,0.9vw,0.8125rem)] text-slate-700 dark:text-zinc-300 font-bold uppercase tracking-widest">
              Exibindo <span className="text-emerald-500">{tableData.length}</span> de{' '}
              <span className="text-emerald-500">{tableData.length}</span> registros
            </span>
            <button
              onClick={onClose}
              className="px-8 py-3 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-widest transition-all"
            >
              Fechar Visualização
            </button>
          </div>
        </motion.div>
      </div>

      {/* Modal de Histórico de Pagamentos */}
      <HistoricoPagamentosModal
        isOpen={showHistorico}
        onClose={() => {
          setShowHistorico(false);
          setSelectedNomeForHistorico(null);
        }}
        favorecido={{
          cpf_cnpj: documento,
          nome: selectedNomeForHistorico?.nome || nomeFavorecido,
          CHAVE_PIX: chavePix,
          banco: row?.banco || row?.BANCO_FAVORECIDO,
          // Suporta tanto pagamentos (nova estrutura) quanto detalhes_pagamentos/remessas (estrutura antiga)
          pagamentos: selectedNomeForHistorico?.pagamentos || [],
          detalhes_pagamentos: selectedNomeForHistorico?.detalhes_pagamentos || selectedNomeForHistorico?.pagamentos || [],
          remessas: selectedNomeForHistorico?.remessas || [],
          valor_total_nome: selectedNomeForHistorico?.valor_total_nome || 0,
          ...row
        }}
      />
    </AnimatePresence>
  );
};

export default PagamentosDetailsModal;
