"use client";

/*
 * O estoque de cada produto na lista de produtos, pela conta do estoque novo
 * (só para empresa no v2; as outras seguem com o "Estoque: N / Sob demanda"
 * de sempre).
 */

import { useEffect, useState } from "react";
import { qtd } from "@/lib/estoque/regras";
import type { EstoqueDoProdutoNaLista } from "@/lib/estoque/tipos";

export function useEstoqueDaLista(ligado: boolean, ids: string[]) {
  const [mapa, setMapa] = useState<Record<string, EstoqueDoProdutoNaLista>>({});
  const chave = ligado ? ids.join(",") : "";
  useEffect(() => {
    if (!chave) return;
    let vivo = true;
    const lista = chave.split(",");
    (async () => {
      for (let i = 0; i < lista.length; i += 300) {
        const r = await fetch("/api/estoque/produtos", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ ids: lista.slice(i, i + 300) }),
        }).catch(() => null);
        const j = (await r?.json().catch(() => null)) as { v2?: boolean; produtos?: Record<string, EstoqueDoProdutoNaLista> } | null;
        if (!vivo || !j?.v2) return;
        setMapa((a) => ({ ...a, ...(j.produtos ?? {}) }));
      }
    })();
    return () => {
      vivo = false;
    };
  }, [chave]);
  return mapa;
}

/** A bolinha + o texto, no mesmo lugar do "Estoque: N" antigo. */
export function EstoqueNaLista({ info }: { info: EstoqueDoProdutoNaLista }) {
  let cor = "bg-slate-300";
  let texto = "Não controla";
  if (info.modo === "pronto") {
    const saldo = info.saldo ?? 0;
    cor = saldo > 0 && !info.zeradas ? "bg-emerald-500" : saldo > 0 ? "bg-violet-500" : "bg-rose-500";
    texto = `Pronto: ${qtd(saldo)}${info.zeradas && saldo > 0 ? ` (${info.zeradas} zerada${info.zeradas > 1 ? "s" : ""})` : ""}`;
  } else if (info.modo === "encomenda") {
    if (info.dependeDaVariacao) {
      cor = "bg-sky-500";
      texto = "Sob encomenda · pela variação";
    } else if (info.daPara !== null) {
      cor = info.daPara > 0 ? "bg-sky-500" : info.limita ? "bg-rose-500" : "bg-violet-500";
      texto = `Sob encomenda · dá para ${qtd(info.daPara)}`;
    } else {
      cor = "bg-sky-500";
      texto = "Sob encomenda";
    }
  }
  return (
    <>
      <span className={`h-1.5 w-1.5 rounded-full ${cor}`} />
      <span>{texto}</span>
    </>
  );
}