import { useState, lazy, Suspense, useEffect } from "react";
import { Tab } from "@headlessui/react";
import { PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
import { formatCurrency, formatDate } from "../../utils/format";
import { useCustasProcessuais } from "../../hooks/useCustasProcessuais";
import { useHonorarios } from "../../hooks/useHonorarios";
import { useProcessoContext } from "../../context/ProcessoContext";
import api from "../../services/api"; // Adicionar esta importação

// Corrigir importações lazy
const DialogCustaProcessual = lazy(() =>
  import("./dialogs/DialogCustaProcessual").then((module) => ({
    default: module.default,
  })),
);
const DialogHonorario = lazy(() =>
  import("./dialogs/DialogHonorario").then((module) => ({
    default: module.default,
  })),
);
const DialogParcela = lazy(() =>
  import("./dialogs/DialogParcela").then((module) => ({
    default: module.DialogParcela, // Usar .DialogParcela em vez de .default
  })),
);

const getParcelaStatus = (parcela: any) => {
  if (parcela.status === "PAGO") return "PAGO";
  if (parcela.valorPago && parcela.valorPago > 0) return "PARCIALMENTE_PAGO";
  return parcela.status;
};

export default function AbaFinanceiro() {
  const { processo, refreshProcesso } = useProcessoContext();

  // Verificar se processo existe antes de usar
  useEffect(() => {
    if (!processo) {
      refreshProcesso();
    }
  }, [processo, refreshProcesso]);

  // Restante do estado
  const [tabValue, setTabValue] = useState(0);
  const [custaDialogOpen, setCustaDialogOpen] = useState(false);
  const [honorarioDialogOpen, setHonorarioDialogOpen] = useState(false);
  const [editingCusta, setEditingCusta] = useState(null);
  const [editingHonorario, setEditingHonorario] = useState(null);
  const [confirmDelete, setConfirmDelete] = useState({
    show: false,
    type: null,
    id: null,
  });
  const [editingParcela, setEditingParcela] = useState<any>(null);
  const [parcelaDialogOpen, setParcelaDialogOpen] = useState(false);
  const [parcelaTipo, setParcelaTipo] = useState<"honorario" | "custa">(
    "honorario",
  );

  // Inicializar hooks com ID do processo
  const { addCusta, updateCusta, deleteCusta } = useCustasProcessuais(
    processo?.id,
  );
  const { addHonorario, updateHonorario, deleteHonorario } = useHonorarios(
    processo?.id,
  );

  // Se não houver processo, mostrar loading
  if (!processo) {
    return <div className="flex justify-center p-8">Carregando...</div>;
  }

  const handleSaveCusta = async (data: any) => {
    try {
      if (editingCusta) {
        await updateCusta({ id: editingCusta.id, data });
      } else {
        await addCusta(data);
      }
      setCustaDialogOpen(false);
      setEditingCusta(null);
      await refreshProcesso(); // Use refreshProcesso instead of window.location.reload()
    } catch (error) {
      console.error("Erro ao salvar custa:", error);
    }
  };

  const handleSaveHonorario = async (data: any) => {
    try {
      if (editingHonorario) {
        await updateHonorario({ id: editingHonorario.id, data });
      } else {
        await addHonorario(data);
      }
      setHonorarioDialogOpen(false);
      setEditingHonorario(null);
      await refreshProcesso(); // Use refreshProcesso instead of window.location.reload()
    } catch (error) {
      console.error("Erro ao salvar honorário:", error);
    }
  };

  const handleDelete = async () => {
    try {
      if (confirmDelete.type === "custa") {
        await deleteCusta(confirmDelete.id);
      } else if (confirmDelete.type === "honorario") {
        await deleteHonorario(confirmDelete.id);
      }
      setConfirmDelete({ show: false, type: null, id: null });
      await refreshProcesso(); // Use refreshProcesso instead of window.location.reload()
    } catch (error) {
      console.error("Erro ao excluir:", error);
    }
  };

  const handleUpdateParcela = async (data: any) => {
    try {
      if (parcelaTipo === "honorario") {
        // Remover /api do início pois já está configurado no baseURL do axios
        await api.put(`/honorarios/parcelas/${editingParcela.id}`, {
          status: data.status,
          dataPagamento: data.dataPagamento,
          valorPago: Number(data.valorPago),
          comprovante: data.comprovante,
          observacoes: data.observacoes,
        });
      }

      setParcelaDialogOpen(false);
      setEditingParcela(null);
      await refreshProcesso();
    } catch (error) {
      console.error("Erro ao atualizar parcela:", error);
    }
  };

  const getStatusBadgeClasses = (status: string) => {
    const baseClasses = "px-2 py-1 text-xs font-medium rounded-full";
    switch (status) {
      case "PENDENTE":
        return `${baseClasses} bg-yellow-100 text-yellow-800`;
      case "PAGO":
        return `${baseClasses} bg-green-100 text-green-800`;
      case "VENCIDO":
        return `${baseClasses} bg-red-100 text-red-800`;
      case "CANCELADO":
        return `${baseClasses} bg-gray-100 text-gray-800`;
      default:
        return `${baseClasses} bg-gray-100 text-gray-800`;
    }
  };

  return (
    <div className="py-4">
      <Tab.Group>
        <Tab.List className="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
          <Tab
            className={({ selected }) =>
              `w-full rounded-lg py-2.5 text-sm font-medium leading-5 ${
                selected
                  ? "bg-white text-blue-700 shadow"
                  : "text-gray-600 hover:bg-white/[0.12] hover:text-blue-600"
              }`
            }
          >
            Custas Processuais
          </Tab>
          <Tab
            className={({ selected }) =>
              `w-full rounded-lg py-2.5 text-sm font-medium leading-5 ${
                selected
                  ? "bg-white text-blue-700 shadow"
                  : "text-gray-600 hover:bg-white/[0.12] hover:text-blue-600"
              }`
            }
          >
            Honorários
          </Tab>
        </Tab.List>

        <Tab.Panels className="mt-4">
          <Tab.Panel className="bg-white rounded-xl p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-medium text-gray-900">
                Custas Processuais
              </h3>
              <button
                onClick={() => {
                  setEditingCusta(null);
                  setCustaDialogOpen(true);
                }}
                className="inline-flex items-center px-4 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded-lg"
              >
                <PlusIcon className="h-4 w-4 mr-2" />
                Nova Custa
              </button>
            </div>

            {processo.custas?.length > 0 ? (
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200">
                  <thead>
                    <tr>
                      <th
                        scope="col"
                        className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                      >
                        Tipo
                      </th>
                      <th
                        scope="col"
                        className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                      >
                        Descrição
                      </th>
                      <th
                        scope="col"
                        className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                      >
                        Valor
                      </th>
                      <th
                        scope="col"
                        className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                      >
                        Status
                      </th>
                      <th
                        scope="col"
                        className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                      >
                        Ações
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {processo.custas.map((custa) => (
                      <tr key={custa.id} className="hover:bg-gray-50">
                        <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
                          {custa.tipo.replace(/_/g, " ")}
                        </td>
                        <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
                          {custa.descricao}
                        </td>
                        <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900 text-right">
                          {formatCurrency(custa.valor)}
                        </td>
                        <td className="px-4 py-2 whitespace-nowrap">
                          <span className={getStatusBadgeClasses(custa.status)}>
                            {custa.status}
                          </span>
                        </td>
                        <td className="px-4 py-2 whitespace-nowrap text-right">
                          <div className="flex justify-end space-x-2">
                            <button
                              onClick={() => {
                                setEditingCusta(custa);
                                setCustaDialogOpen(true);
                              }}
                              className="p-1 text-blue-600 hover:bg-blue-50 rounded"
                            >
                              <PencilIcon className="h-4 w-4" />
                            </button>
                            <button
                              onClick={() =>
                                setConfirmDelete({
                                  show: true,
                                  type: "custa",
                                  id: custa.id,
                                })
                              }
                              className="p-1 text-red-600 hover:bg-red-50 rounded"
                            >
                              <TrashIcon className="h-4 w-4" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ) : (
              <div className="text-center py-8 text-gray-500">
                Nenhuma custa processual registrada
              </div>
            )}
          </Tab.Panel>

          <Tab.Panel className="bg-white rounded-xl p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-medium text-gray-900">Honorários</h3>
              <button
                onClick={() => {
                  setEditingHonorario(null);
                  setHonorarioDialogOpen(true);
                }}
                className="inline-flex items-center px-4 py-2 text-sm text-blue-600 hover:bg-blue-50 rounded-lg"
              >
                <PlusIcon className="h-4 w-4 mr-2" />
                Novo Honorário
              </button>
            </div>

            {processo.honorarios?.map((honorario) => (
              <div
                key={honorario.id}
                className="mb-6 p-4 bg-white rounded-lg shadow"
              >
                <div className="flex justify-between items-center">
                  <h4 className="text-lg font-medium text-gray-900">
                    {honorario.formaPagamento === "VISTA"
                      ? "Pagamento à Vista"
                      : honorario.formaPagamento === "PARCELADO"
                        ? `Parcelado em ${honorario.numeroParcelas}x`
                        : "Percentual da Causa"}
                  </h4>
                  <div className="flex items-center space-x-2">
                    <span className={getStatusBadgeClasses(honorario.status)}>
                      {honorario.status}
                    </span>
                    <button
                      onClick={() => {
                        setEditingHonorario(honorario);
                        setHonorarioDialogOpen(true);
                      }}
                      className="p-1 text-blue-600 hover:bg-blue-50 rounded"
                    >
                      <PencilIcon className="h-4 w-4" />
                    </button>
                    <button
                      onClick={() =>
                        setConfirmDelete({
                          show: true,
                          type: "honorario",
                          id: honorario.id,
                        })
                      }
                      className="p-1 text-red-600 hover:bg-red-50 rounded"
                    >
                      <TrashIcon className="h-4 w-4" />
                    </button>
                  </div>
                </div>
                <div className="mt-4">
                  <p className="text-sm text-gray-700">
                    {honorario.valorFixo
                      ? `Valor: ${formatCurrency(honorario.valorFixo)}`
                      : `Percentual: ${honorario.percentualCausa}%`}
                  </p>
                  {honorario.formaPagamento === "PARCELADO" && (
                    <>
                      <p className="text-sm text-gray-700">
                        Entrada: {formatCurrency(honorario.valorEntrada)}
                      </p>
                      <p className="text-sm text-gray-700">
                        Parcelas: {honorario.numeroParcelas}x de{" "}
                        {formatCurrency(honorario.valorParcela)}
                      </p>
                    </>
                  )}
                  <p className="text-sm text-gray-500">
                    Vencimento: {formatDate(honorario.dataVencimento)}
                  </p>
                </div>
                {honorario.parcelas && (
                  <div className="mt-4 overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead>
                        <tr>
                          <th
                            scope="col"
                            className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Parcela
                          </th>
                          <th
                            scope="col"
                            className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Valor
                          </th>
                          <th
                            scope="col"
                            className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Vencimento
                          </th>
                          <th
                            scope="col"
                            className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Status
                          </th>
                          <th
                            scope="col"
                            className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Ações
                          </th>
                          <th
                            scope="col"
                            className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Valor Pago
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {honorario.parcelas.map((parcela) => (
                          <tr key={parcela.id} className="hover:bg-gray-50">
                            <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
                              {parcela.numeroParcela}
                            </td>
                            <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900 text-right">
                              {formatCurrency(parcela.valor)}
                            </td>
                            <td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
                              {formatDate(parcela.vencimento)}
                            </td>
                            <td className="px-4 py-2 whitespace-nowrap">
                              <span
                                className={getStatusBadgeClasses(
                                  parcela.status,
                                )}
                              >
                                {parcela.status}
                              </span>
                            </td>
                            <td className="px-4 py-2 whitespace-nowrap text-right">
                              <div className="flex space-x-2">
                                <button
                                  onClick={() => {
                                    setEditingParcela(parcela);
                                    setParcelaTipo("honorario");
                                    setParcelaDialogOpen(true);
                                  }}
                                  className="p-1 text-blue-600 hover:bg-blue-50 rounded"
                                >
                                  <PencilIcon className="h-4 w-4" />
                                </button>
                              </div>
                            </td>
                            <td className="px-4 py-2 whitespace-nowrap text-xs text-gray-500">
                              {parcela.valorPago > 0 &&
                                parcela.valorPago < parcela.valor &&
                                `Pago: ${formatCurrency(parcela.valorPago)}`}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            ))}
          </Tab.Panel>
        </Tab.Panels>
      </Tab.Group>

      {confirmDelete.show && (
        <div className="fixed inset-0 z-50 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center">
            <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div>
            <div className="relative inline-block p-6 bg-white rounded-lg text-left shadow-xl">
              <div className="sm:flex sm:items-start">
                <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0">
                  <TrashIcon className="h-6 w-6 text-red-600" />
                </div>
                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                  <h3 className="text-lg font-medium text-gray-900">
                    Confirmar exclusão
                  </h3>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">
                      Tem certeza que deseja excluir este{" "}
                      {confirmDelete.type === "custa"
                        ? "registro de custa"
                        : "honorário"}
                      ? Esta ação não pode ser desfeita.
                    </p>
                  </div>
                </div>
              </div>
              <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  onClick={handleDelete}
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 sm:ml-3 sm:w-auto sm:text-sm"
                >
                  Excluir
                </button>
                <button
                  type="button"
                  onClick={() =>
                    setConfirmDelete({ show: false, type: null, id: null })
                  }
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm"
                >
                  Cancelar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      <Suspense
        fallback={<div className="flex justify-center p-8">Carregando...</div>}
      >
        {custaDialogOpen && (
          <DialogCustaProcessual
            key="custa-dialog" // Adicionar key única
            open={custaDialogOpen}
            onClose={() => {
              setCustaDialogOpen(false);
              setEditingCusta(null);
            }}
            onSave={handleSaveCusta}
            editingCusta={editingCusta}
          />
        )}

        {honorarioDialogOpen && (
          <DialogHonorario
            key="honorario-dialog" // Adicionar key única
            open={honorarioDialogOpen}
            onClose={() => {
              setHonorarioDialogOpen(false);
              setEditingHonorario(null);
            }}
            onSave={handleSaveHonorario}
            editingHonorario={editingHonorario}
          />
        )}

        {parcelaDialogOpen && (
          <DialogParcela
            key="parcela-dialog" // Adicionar key única
            isOpen={parcelaDialogOpen}
            onClose={() => {
              setParcelaDialogOpen(false);
              setEditingParcela(null);
            }}
            onSave={handleUpdateParcela}
            parcela={editingParcela}
            tipo={parcelaTipo}
          />
        )}
      </Suspense>
    </div>
  );
}