import React from 'react';
import { useFinanceiroPainel } from '../../hooks/useFinanceiroPainel';
import { CurrencyDollarIcon, ArrowDownCircleIcon, ArrowUpCircleIcon } from '@heroicons/react/24/solid';

export const PainelFinanceiro: React.FC = () => {
  const hoje = new Date();
  const [mes, setMes] = React.useState(hoje.getMonth() + 1);
  const [ano, setAno] = React.useState(hoje.getFullYear());
  const { data, isLoading, error } = useFinanceiroPainel(mes, ano);

  const mesesNomes = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];

  return (
    <div className="border rounded-xl p-6 shadow-lg bg-white dark:bg-gray-900 flex flex-col gap-6 max-w-4xl mx-auto mt-8">
      <h2 className="text-lg font-bold text-gray-800 dark:text-gray-100 mb-2 flex items-center gap-2">
        <CurrencyDollarIcon className="h-6 w-6 text-green-600" /> Painel Financeiro
      </h2>
      <div className="flex items-center gap-4 mb-2">
        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setMes(m => m === 1 ? 12 : m - 1)}>&lt;</button>
        <span className="font-semibold text-lg">{mesesNomes[mes - 1]}/{ano}</span>
        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setMes(m => m === 12 ? 1 : m + 1)}>&gt;</button>
        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setAno(a => a - 1)}>&lt; Ano</button>
        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setAno(a => a + 1)}>Ano &gt;</button>
      </div>
      {isLoading && <div>Carregando dados financeiros...</div>}
      {error && <div className="text-red-600">Erro ao buscar dados financeiros</div>}
      {data && (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <div className="flex flex-col items-center bg-green-50 dark:bg-green-900 rounded-lg p-4">
            <CurrencyDollarIcon className="h-7 w-7 text-green-600 mb-1" />
            <span className="text-xs text-gray-500">Honorários a receber</span>
            <span className="text-lg font-bold text-green-700 dark:text-green-300">R$ {data.honorariosAReceber.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
          </div>
          <div className="flex flex-col items-center bg-blue-50 dark:bg-blue-900 rounded-lg p-4">
            <ArrowUpCircleIcon className="h-7 w-7 text-blue-600 mb-1" />
            <span className="text-xs text-gray-500">Honorários recebidos no mês</span>
            <span className="text-lg font-bold text-blue-700 dark:text-blue-300">R$ {data.honorariosRecebidosMes.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
          </div>
          <div className="flex flex-col items-center bg-red-50 dark:bg-red-900 rounded-lg p-4">
            <ArrowDownCircleIcon className="h-7 w-7 text-red-600 mb-1" />
            <span className="text-xs text-gray-500">Custas a pagar</span>
            <span className="text-lg font-bold text-red-700 dark:text-red-300">R$ {data.custasAPagar.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
          </div>
          <div className="flex flex-col items-center bg-teal-50 dark:bg-teal-900 rounded-lg p-4">
            <ArrowUpCircleIcon className="h-7 w-7 text-teal-600 mb-1" />
            <span className="text-xs text-gray-500">Custas pagas no mês</span>
            <span className="text-lg font-bold text-teal-700 dark:text-teal-300">R$ {data.custasPagasMes.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
          </div>
        </div>
      )}
      {data && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <h3 className="font-semibold mb-2 text-green-700 dark:text-green-300">Honorários recebidos no mês</h3>
            <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
              {data.detalhesHonorarios.length === 0 && <li className="text-gray-400">Nenhum recebimento registrado neste mês.</li>}
              {data.detalhesHonorarios.map((item, idx) => (
                <li key={idx} className="py-2 flex flex-col">
                  <span className="font-bold">Contrato: {item.contrato?.processoId || 'N/A'}</span>
                  <span>Parcela: {item.parcela?.numeroParcela || 'N/A'} - Valor: R$ {Number(item.parcela?.valorPago || item.parcela?.valor || 0).toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
                  <span className="text-gray-500">Pago em: {item.parcela?.dataPagamento ? new Date(item.parcela.dataPagamento).toLocaleDateString('pt-br') : '-'}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h3 className="font-semibold mb-2 text-red-700 dark:text-red-300">Custas pagas no mês</h3>
            <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
              {data.detalhesCustas.length === 0 && <li className="text-gray-400">Nenhuma custa paga neste mês.</li>}
              {data.detalhesCustas.map((c, idx) => (
                <li key={idx} className="py-2 flex flex-col">
                  <span className="font-bold">Processo: {c.processoId || 'N/A'}</span>
                  <span>Tipo: {c.tipo || 'N/A'} - Valor: R$ {Number(c.valor || 0).toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
                  <span className="text-gray-500">Pago em: {c.dataPagamento ? new Date(c.dataPagamento).toLocaleDateString('pt-br') : '-'}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      )}
    </div>
  );
};