import React, { useMemo } from 'react';
import { motion } from 'framer-motion';
import { 
  Fingerprint, 
  Mail, 
  Search 
} from 'lucide-react';
import CnabExcelTable from '../../components/CnabExcelTable';

const DashboardRelatorios = React.memo(({ 
  logsData, 
  paymentMode, 
  onOpenDetalhes,
  formatMoney,
  formatDoc
}) => {
  const isTed = paymentMode === 'TED';
  const logsColumns = useMemo(() => isTed ? [
    { field: 'cpf_cnpj', header: 'Documento ID', width: '180px', render: (row) => <span className="font-bold text-zinc-200">{formatDoc(row.cpf_cnpj)}</span> },
    { field: 'banco', header: 'Banco', width: '100px', render: (row) => <span className="text-zinc-400 font-mono text-xs">{row.banco || '---'}</span> },
    { field: 'agencia', header: 'Agência', width: '100px', render: (row) => <span className="text-zinc-400 font-mono text-xs">{row.agencia || '---'}</span> },
    { field: 'conta', header: 'Conta', width: '120px', render: (row) => <span className="text-zinc-400 font-mono text-xs">{row.conta || '---'}</span> },
    { field: 'valor_total', header: 'Valor Acumulado', width: '180px', render: (row) => <span className="font-mono font-bold text-emerald-500">{formatMoney(row.valor_total)}</span> },
    { field: 'nomes_e_valores', header: 'Ações', width: '150px', render: (row) => (
      <button 
        onClick={(e) => {
          e.stopPropagation();
          onOpenDetalhes(row);
        }}
        className="flex items-center gap-2 px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 rounded-xl transition-colors text-[9px] font-bold uppercase tracking-widest text-zinc-400 hover:text-white border border-zinc-700"
      >
        <Search size={12} />
        Detalhes
      </button>
    )}
  ] : [
    { field: 'cpf_cnpj', header: 'Documento ID', width: '180px', render: (row) => <span className="font-bold text-zinc-200">{formatDoc(row.cpf_cnpj)}</span> },
    { field: 'qtd_nomes', header: 'Qtd. Nomes', width: '120px', render: (row) => (
      <div className="flex items-center gap-2">
        <span className="px-2 py-0.5 rounded-full bg-zinc-800 text-xs font-bold">{row.qtd_nomes}</span>
      </div>
    )},
    { field: 'valor_total', header: 'Valor Acumulado', width: '180px', render: (row) => <span className="font-mono font-bold text-emerald-500">{formatMoney(row.valor_total)}</span> },
    { field: 'nomes_e_valores', header: 'Ações', width: '150px', render: (row) => (
      <button 
        onClick={(e) => {
          e.stopPropagation();
          onOpenDetalhes(row);
        }}
        className="flex items-center gap-2 px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 rounded-xl transition-colors text-[9px] font-bold uppercase tracking-widest text-zinc-400 hover:text-white border border-zinc-700"
      >
        <Search size={12} />
        Detalhes
      </button>
    )}
  ], [isTed, formatDoc, formatMoney, onOpenDetalhes]);

  return (
    <motion.div 
      key="logs"
      initial={{ opacity: 0, x: 20 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -20 }}
      className="flex-1 space-y-6 overflow-auto custom-scrollbar pr-2 pb-8"
    >
        {/* Cabeçalho de Logs */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="md:col-span-1 bg-zinc-900/40 p-5 rounded-3xl border border-zinc-800 flex items-center gap-4">
                <div className="p-3 bg-blue-500/10 rounded-2xl text-blue-500 border border-blue-500/20">
                    <Fingerprint size={20} />
                </div>
                <div>
                    <p className="text-[9px] font-bold text-zinc-500 uppercase tracking-widest">Inconcistências</p>
                    <p className="text-xl font-bold text-white">Status OK</p>
                </div>
            </div>
            <div className="md:col-span-1 bg-zinc-900/40 p-5 rounded-3xl border border-zinc-800 flex items-center gap-4">
                <div className="p-3 bg-purple-500/10 rounded-2xl text-purple-500 border border-purple-500/20">
                    <Mail size={20} />
                </div>
                <div>
                    <p className="text-[9px] font-bold text-zinc-500 uppercase tracking-widest">E-mails Inválidos</p>
                    <p className="text-xl font-bold text-white">0 Detectados</p>
                </div>
            </div>
            <div className="md:col-span-2 flex items-center px-6 bg-emerald-500/5 rounded-3xl border border-emerald-500/10">
                <p className="text-xs text-emerald-500/70 font-medium italic">
                    O sistema de logs monitora duplicidade de documentos e inconsistências de chaves em tempo real.
                </p>
            </div>
        </div>

        {/* Tabela de Logs Principal */}
        <div className="min-h-[500px]">
            <CnabExcelTable 
                data={logsData}
                columns={logsColumns}
                rowKey="cpf_cnpj"
            />
        </div>
    </motion.div>
  );
});

export default DashboardRelatorios;
