import { buscarSyncIdProgresso } from "@/requests/CRUD/Distribuidores/sincronizacaoDistribuidor";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import { useEffect, useState } from "react";
dayjs.extend(duration);

export default function BoldSyncInfo() {
  const [syncInfo, setSyncInfo] = useState<any>();

  function calcularDiferenca(dataInicial: string, dataFinal: string) {
    const d1 = dayjs(dataInicial);
    const d2 = dayjs(dataFinal);

    // Agora o Webpack reconhecerá que .duration existe no protótipo do dayjs
    const diff = dayjs.duration(d2.diff(d1));

    const h = Math.floor(diff.asHours());
    const m = diff.minutes();
    const s = diff.seconds();

    const partes = [];
    if (h > 0) partes.push(`${h}h`);
    if (h > 0 || m > 0) partes.push(`${m}m`);
    partes.push(`${s}s`);

    return partes.join(" ");
  }

  useEffect(() => {
    buscarSyncIdProgresso({
      distribuidor: "BE",
      status: "completed",
    }).then(setSyncInfo);
  }, []);
  return (
    <>
      <div>
        <span className="text-xs font-semibold text-gray-500">
          Tempo real da última Sincronização:
        </span>
        {syncInfo?.updated_at ? (
          <p className="text-sm text-gray-600">
            {calcularDiferenca(syncInfo.created_at, syncInfo?.updated_at)}
          </p>
        ) : (
          <p className="text-sm text-gray-600">
            Sem registros de sincronização
          </p>
        )}
      </div>
      <div>
        <span className="text-xs font-semibold text-gray-500">
          Kits sincronizados:
        </span>
        {syncInfo?.processed_kits ? (
          <p className="text-sm text-gray-600">{syncInfo.processed_kits}</p>
        ) : (
          <p className="text-sm text-gray-600">
            Sem registros de sincronização
          </p>
        )}
      </div>
    </>
  );
}