import { format } from "date-fns";
import { ptBR } from "date-fns/locale";
import { useProcessoMovimentacoes } from "../../hooks/useProcessoMovimentacoes";

interface MovimentacoesTimelineProps {
  numeroProcesso: string;
  tribunal: string;
}

export function MovimentacoesTimeline({
  numeroProcesso,
  tribunal,
}: MovimentacoesTimelineProps) {
  const { movimentacoes, loading, error } = useProcessoMovimentacoes(
    numeroProcesso,
    tribunal,
  );

  if (loading) {
    return <div className="text-center p-4">Carregando movimentações...</div>;
  }

  if (error) {
    return (
      <div className="text-center p-4 text-red-600">
        Erro ao carregar movimentações
      </div>
    );
  }

  if (!movimentacoes?.length) {
    return (
      <div className="text-center p-4">Nenhuma movimentação encontrada</div>
    );
  }

  return (
    <div className="flow-root">
      <ul role="list" className="-mb-8">
        {movimentacoes.map((mov, idx) => (
          <li key={`${mov.codigo}-${mov.dataHora}`}>
            <div className="relative pb-8">
              {idx !== movimentacoes.length - 1 ? (
                <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" />
              ) : null}
              <div className="relative flex space-x-3">
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
                  <span className="text-xs text-gray-500">{mov.codigo}</span>
                </div>
                <div className="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                  <div>
                    <p className="text-sm text-gray-900">{mov.nome}</p>
                    {mov.complementosTabelados?.map((comp: any) => (
                      <p key={comp.codigo} className="text-sm text-gray-500">
                        {comp.nome}
                      </p>
                    ))}
                  </div>
                  <div className="whitespace-nowrap text-right text-sm text-gray-500">
                    {format(new Date(mov.dataHora), "dd/MM/yyyy 'às' HH:mm", {
                      locale: ptBR,
                    })}
                  </div>
                </div>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}