import { useNavigate } from "react-router-dom";
import { DocumentTextIcon } from "@heroicons/react/24/outline";
import { useProcessosAdministrativos } from "../../hooks/useProcessosAdministrativos";
import { formatCurrency } from "../../utils/format";
import { ProcessoAdministrativo, StatusProcessoAdministrativo } from "../../types/processoAdministrativo";

const statusColor = {
  [StatusProcessoAdministrativo.INICIAL]: 'bg-yellow-100 text-yellow-800',
  [StatusProcessoAdministrativo.EM_ANALISE]: 'bg-blue-100 text-blue-800',
  [StatusProcessoAdministrativo.EM_RECURSO]: 'bg-purple-100 text-purple-800',
  [StatusProcessoAdministrativo.FINALIZADO]: 'bg-green-100 text-green-800',
  [StatusProcessoAdministrativo.ARQUIVADO]: 'bg-gray-100 text-gray-800'
};

export function ProcessoAdministrativoList() {
  console.log('Renderizando ProcessoAdministrativoList');
  const navigate = useNavigate();
  const { processos, isLoading } = useProcessosAdministrativos();

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

  return (
    <div className="px-4 sm:px-6 lg:px-8">
      <div className="sm:flex sm:items-center">
        <div className="sm:flex-auto">
          <h1 className="text-xl font-semibold text-gray-900">Processos Administrativos</h1>
        </div>
        <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
          <button
            type="button"
            onClick={() => navigate("/processos-administrativos/novo")}
            className="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700"
          >
            Novo Processo
          </button>
        </div>
      </div>

      <div className="mt-8 flex flex-col">
        <div className="-mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
              <table className="min-w-full divide-y divide-gray-300">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                      Número/Protocolo
                    </th>
                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                      Órgão
                    </th>
                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                      Status
                    </th>
                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                      Valor Pretensão
                    </th>
                    <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
                      <span className="sr-only">Ações</span>
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200 bg-white">
                  {processos?.map((processo) => (
                    <tr key={processo.id}>
                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-900">
                        {processo.numero}
                      </td>
                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                        {processo.orgao}
                      </td>
                      <td className="whitespace-nowrap px-3 py-4 text-sm">
                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusColor[processo.status]}`}>
                          {processo.status}
                        </span>
                      </td>
                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                        {processo.valorPretensao ? formatCurrency(processo.valorPretensao) : '-'}
                      </td>
                      <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                        <button
                          onClick={() => navigate(`/processos-administrativos/${processo.id}`)}
                          className="text-blue-600 hover:text-blue-900"
                        >
                          Visualizar
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}