import React from "react";
import { useNavigate } from "react-router-dom";
import { Processo } from "../../types/entities";
import { useProcessos } from "../../hooks/useProcessos";
import { formatNumeroProcesso } from "../../utils/formatters";
import { DocumentTextIcon, ClockIcon } from "@heroicons/react/24/outline";

interface ProcessosListProps {
  searchTerm: string;
  onEdit: (processo: Processo) => void;
}

const resultadoLabel = {
  NAO_JULGADO: 'Não Julgado',
  PROCEDENTE: 'Procedente',
  PARCIALMENTE_PROCEDENTE: 'Parcialmente Procedente',
  IMPROCEDENTE: 'Improcedente',
  SEM_ANALISE_MERITO: 'Sem Análise de Mérito'
};

const resultadoColor = {
  NAO_JULGADO: 'bg-gray-100 text-gray-800',
  PROCEDENTE: 'bg-green-100 text-green-800',
  PARCIALMENTE_PROCEDENTE: 'bg-yellow-100 text-yellow-800',
  IMPROCEDENTE: 'bg-red-100 text-red-800',
  SEM_ANALISE_MERITO: 'bg-gray-100 text-gray-800'
};

const getResultadoColor = (resultado: string) => {
  return resultadoColor[resultado as keyof typeof resultadoColor] || 'bg-gray-100 text-gray-800';
};

export const ProcessosList: React.FC<ProcessosListProps> = ({
  searchTerm,
  onEdit,
}) => {
  const navigate = useNavigate();
  const { processos, isLoading } = useProcessos();

  const filteredProcessos = processos.filter(
    (processo) =>
      processo.numero.includes(searchTerm) ||
      processo.nomeContraparte
        ?.toLowerCase()
        .includes(searchTerm.toLowerCase()),
  );

  const getResultadoDisplay = (processo: Processo) => {
    if (!processo.resultado || !resultadoLabel[processo.resultado as keyof typeof resultadoLabel]) {
      return (
        <span className="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">
          Não Julgado
        </span>
      );
    }

    return (
      <span className={`px-2 py-1 text-xs rounded-full ${getResultadoColor(processo.resultado)}`}>
        {resultadoLabel[processo.resultado as keyof typeof resultadoLabel]}
      </span>
    );
  };

  if (isLoading) {
    return <div className="animate-pulse">Carregando...</div>;
  }

  return (
    <div className="overflow-x-auto">
      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead className="bg-gray-50">
          <tr>
            <th
              scope="col"
              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"
            >
              Processo
            </th>
            <th
              scope="col"
              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"
            >
              Natureza
            </th>
            <th
              scope="col"
              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"
            >
              Parte
            </th>
            <th
              scope="col"
              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"
            >
              Status
            </th>
            <th
              scope="col"
              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"
            >
              Próximos Prazos
            </th>
            <th
              scope="col"
              className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
            >
              Resultado
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200">
          {filteredProcessos.map((processo) => (
            <tr
              key={processo.id}
              onClick={() => navigate(`/processos/${processo.id}`)}
              className="hover:bg-gray-50 cursor-pointer"
            >
              <td className="px-6 py-4">
                <div className="flex items-center">
                  <DocumentTextIcon className="h-10 w-10 text-gray-400" />
                  <div className="ml-4">
                    <div className="text-sm font-medium text-gray-900">
                      {formatNumeroProcesso(processo.numero)}
                    </div>
                    <div className="text-sm text-gray-500">
                      {processo.orgaoJulgador}
                    </div>
                  </div>
                </div>
              </td>
              <td className="px-6 py-4 text-sm text-gray-500">
                {processo.natureza}
              </td>
              <td className="px-6 py-4">
                <div className="text-sm text-gray-900">
                  {processo.tipoParteCliente === "AUTOR" ? "Autor" : "Réu"}
                </div>
                <div className="text-sm text-gray-500">
                  {processo.nomeContraparte}
                </div>
              </td>
              <td className="px-6 py-4">
                <span
                  className={`px-2 py-1 text-xs rounded-full ${
                    processo.statusAtividade === "ATIVO"
                      ? "bg-green-100 text-green-800"
                      : processo.statusAtividade === "BAIXADO"
                        ? "bg-blue-100 text-blue-800"
                        : processo.statusAtividade === "SUSPENSO"
                          ? "bg-yellow-100 text-yellow-800"
                          : "bg-gray-100 text-gray-800"
                  }`}
                >
                  {processo.statusAtividade}
                </span>
              </td>
              <td className="px-6 py-4">
                {processo.diligencias?.length > 0 ? (
                  <div className="flex items-center text-sm text-gray-500">
                    <ClockIcon className="h-4 w-4 mr-1" />
                    {processo.diligencias.length} prazos
                  </div>
                ) : (
                  <span className="text-sm text-gray-500">Sem prazos</span>
                )}
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                {getResultadoDisplay(processo)}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};