import { format, ptBR } from "date-fns";

import { useProcessoContext } from "../../context/ProcessoContext";

export function AbaInformacoes() {
  const { processo } = useProcessoContext();

  if (!processo) {
    return <div>Carregando...</div>;
  }

  // Encontrar próxima audiência
  const proximaAudiencia = processo.dadosDatajud?.movimentos?.find((mov) => {
    const isAudiencia =
      mov.nome.toLowerCase().includes("audiência") &&
      mov.complementosTabelados?.some((c) => c.nome === "designada");
    if (!isAudiencia) return false;

    const dataAudiencia = new Date(mov.dataHora);
    return dataAudiencia > new Date();
  });

  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl p-6">
        <h3 className="text-lg font-medium text-gray-900 mb-4">
          Informações do Processo
        </h3>

        {/* Informações Básicas */}
        <div className="grid grid-cols-2 gap-4">
          <InfoItem label="Número do Processo" value={processo.numero} />
          <InfoItem label="Natureza" value={processo.natureza} />
          <InfoItem label="Classe" value={processo.classeProcessual} />
          <InfoItem label="Órgão Julgador" value={processo.orgaoJulgador} />
          <InfoItem
            label="Tribunal"
            value={`${processo.tribunal} (${processo.tribunalUF})`}
          />
          <InfoItem
            label="Valor da Causa"
            value={
              processo.valorCausa
                ? new Intl.NumberFormat("pt-BR", {
                    style: "currency",
                    currency: "BRL",
                  }).format(processo.valorCausa)
                : "Não informado"
            }
          />
        </div>

        {/* Dados do DataJud */}
        <div className="mt-6 p-4 bg-gray-50 rounded-lg">
          <h3 className="text-md font-medium text-gray-900 mb-4">
            Dados do DataJud
          </h3>

          <div className="grid grid-cols-2 gap-4">
            <InfoItem
              label="Classe"
              value={processo.dadosDatajud?.classe?.nome}
            />
            <InfoItem
              label="Data de Ajuizamento"
              value={
                processo.dataAjuizamento
                  ? format(new Date(processo.dataAjuizamento), "dd/MM/yyyy", {
                      locale: ptBR,
                    })
                  : undefined
              }
            />
            <InfoItem label="Grau" value={processo.dadosDatajud?.grau} />
            <InfoItem
              label="Formato"
              value={processo.dadosDatajud?.formato?.nome}
            />
            <InfoItem
              label="Sistema"
              value={processo.dadosDatajud?.sistema?.nome}
            />
            <InfoItem
              label="Órgão Julgador"
              value={processo.dadosDatajud?.orgaoJulgador?.nome}
            />
          </div>

          {/* Assuntos do DataJud */}
          {processo.dadosDatajud?.assuntos &&
            processo.dadosDatajud.assuntos.length > 0 && (
              <div className="mt-4">
                <h4 className="text-sm font-medium text-gray-900 mb-2">
                  Assuntos
                </h4>
                <div className="flex flex-wrap gap-2">
                  {processo.dadosDatajud.assuntos.map((assunto) => (
                    <span
                      key={assunto.codigo}
                      className="inline-flex items-center px-3 py-1 rounded-full text-sm 
                             bg-blue-50 text-blue-700 border border-blue-200"
                    >
                      {assunto.nome}
                    </span>
                  ))}
                </div>
              </div>
            )}
        </div>

        {/* Próxima Audiência */}
        <div className="mt-6 p-4 bg-gray-50 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">Próxima Audiência</h4>
          {proximaAudiencia ? (
            <div className="space-y-2">
              <p className="text-sm text-gray-900">
                <span className="font-medium">Tipo:</span>{" "}
                {proximaAudiencia.nome}
              </p>
              <p className="text-sm text-gray-900">
                <span className="font-medium">Data:</span>{" "}
                {format(
                  new Date(proximaAudiencia.dataHora),
                  "dd/MM/yyyy 'às' HH:mm",
                  { locale: ptBR },
                )}
              </p>
            </div>
          ) : (
            <p className="text-sm text-gray-500">Nenhuma audiência agendada</p>
          )}
        </div>
      </div>
    </div>
  );
}

function InfoItem({
  label,
  value,
}: {
  label: string;
  value: string | null | undefined;
}) {
  return (
    <div>
      <dt className="text-sm font-medium text-gray-500">{label}</dt>
      <dd className="mt-1 text-sm text-gray-900">{value || "Não informado"}</dd>
    </div>
  );
}