"use client";
/*
* A gaveta de um item do estoque: a grade com o saldo de cada célula, os
* botões do dia a dia (Entrada, Contagem, Perda, Registrar produção), quem
* usa o item e a linha do tempo com a origem de cada movimento.
*
* Produto pronto: cada célula mostra qual variação do catálogo sai dela.
*/
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import Link from "next/link";
import {
ClipboardCheck,
Factory,
Loader2,
PackageMinus,
PackagePlus,
Pencil,
Settings2,
ExternalLink,
History,
Grid3x3,
Boxes,
Undo2,
} from "lucide-react";
import { Gaveta } from "./gaveta";
import { JanelaDeLancamento, type ModoDoLancamento } from "./lancamento";
import { FormularioDoItem } from "./formulario-do-item";
import { RegistrarProducao } from "./registrar-producao";
import { LinhaDoTempo } from "./linha-do-tempo";
import { JanelaDaProducao } from "./janela-da-producao";
import { RostoDoItem, Saldo, SeloDaSituacao, situacaoDoSaldo } from "./primitivos";
import { ModalDeInsumo } from "@/components/producao/modal-de-insumo";
import { Aviso } from "@/components/ui/aviso";
import { pedirJson, type SituacaoDoEstoque } from "@/lib/estoque/use-estoque-v2";
import {
celulaDaEscolha,
combinacoesParaAGrade,
desenharGrade,
dinheiro,
escolhasDaCombinacao,
qtd,
resumoDaGrade,
textoDaCombinacao,
textoQuandoSai,
unidade,
normalizar,
valoresDaCelula,
} from "@/lib/estoque/regras";
import type { AtributoDoProduto, Celula, ItemDoEstoque, LinhaDoMapa } from "@/lib/estoque/tipos";
type ProdutoLigado = { id: string; nome: string; atributos: AtributoDoProduto[]; mapa: LinhaDoMapa[] };
type ProducaoRecente = { id: string; quantidade: number; criado_em: string; desfeita_em: string | null; produto: string | null; celula: Celula | null };
const DATA = new Intl.DateTimeFormat("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
function Secao({ Icone, titulo, texto, acao, children }: { Icone: typeof Boxes; titulo: string; texto?: string; acao?: ReactNode; children: ReactNode }) {
return (
{titulo}
{texto ?
{texto}
: null}
{acao}
{children}
);
}
export function GavetaDoItem({
itemId,
situacao,
aoFechar,
aoMudar,
}: {
itemId: string | null;
situacao: SituacaoDoEstoque;
aoFechar: () => void;
/** O item mudou (saldo, dados): a lista recarrega. */
aoMudar: () => void;
}) {
const [item, setItem] = useState(null);
const [erro, setErro] = useState(null);
const [aviso, setAviso] = useState(null);
const [lancamento, setLancamento] = useState<{ modo: ModoDoLancamento; celula?: string | null } | null>(null);
const [editando, setEditando] = useState(false);
const [dadosDeCompra, setDadosDeCompra] = useState(false);
const [produzindo, setProduzindo] = useState(false);
const [celulaEscolhida, setCelulaEscolhida] = useState(null);
const [recarregar, setRecarregar] = useState(0);
const [ligados, setLigados] = useState([]);
const [producoes, setProducoes] = useState([]);
const [producaoAberta, setProducaoAberta] = useState(null);
const carregar = useCallback(async () => {
if (!itemId) return;
try {
const r = await pedirJson<{ itens: ItemDoEstoque[] }>(`/api/estoque/itens?id=${itemId}`);
setItem(r.itens[0] ?? null);
if (!r.itens[0]) setErro("Item não encontrado.");
} catch (e) {
setErro((e as Error).message);
}
}, [itemId]);
useEffect(() => {
setItem(null);
setErro(null);
setAviso(null);
setCelulaEscolhida(null);
setLigados([]);
setProducoes([]);
void carregar();
}, [carregar]);
/* Produto pronto: os produtos do catálogo que saem dele, com atributos e
troca manual, para cada célula dizer qual variação a usa. */
const idsLigados = useMemo(() => (item?.usos ?? []).filter((u) => u.como === "pronto").map((u) => u.produto_id), [item]);
useEffect(() => {
if (!item || item.papel !== "pronto") return;
let vivo = true;
Promise.all(
idsLigados.slice(0, 6).map((id) =>
pedirJson<{ produto: { id: string; nome: string; mapa: LinhaDoMapa[] }; atributos: AtributoDoProduto[] }>(`/api/estoque/produto/${id}`)
.then((r) => ({ id, nome: r.produto.nome, atributos: r.atributos, mapa: r.produto.mapa }))
.catch(() => null)
)
).then((lista) => vivo && setLigados(lista.filter((x): x is ProdutoLigado => Boolean(x))));
pedirJson<{ producoes: ProducaoRecente[] }>(`/api/estoque/producao?item=${item.id}`)
.then((r) => vivo && setProducoes(r.producoes ?? []))
.catch(() => undefined);
return () => {
vivo = false;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [item?.id, item?.papel, idsLigados.join(","), recarregar]);
const quemUsaACelula = useMemo(() => {
const mapa = new Map();
if (!item) return mapa;
for (const p of ligados) {
for (const comb of combinacoesParaAGrade(p.atributos, item.grade)) {
const r = celulaDaEscolha(item.grade, item.celulas, escolhasDaCombinacao(comb), p.mapa);
if (!r.celula) continue;
const arr = mapa.get(r.celula.celula_id) ?? [];
/* Variação com o mesmo nome da célula: basta o nome do produto. */
const mesma = normalizar(textoDaCombinacao(comb)) === normalizar(valoresDaCelula(r.celula));
/* Um produto só e a variação com o mesmo nome da célula: nada a dizer
(a seção "Vendido como" já mostra o produto). */
if (mesma && ligados.length === 1) continue;
const texto = mesma ? p.nome : `${p.nome}: ${textoDaCombinacao(comb)}`;
if (!arr.includes(texto)) arr.push(texto);
mapa.set(r.celula.celula_id, arr);
}
}
return mapa;
}, [item, ligados]);
function depoisDeMexer(mensagem: string) {
setLancamento(null);
setAviso(mensagem);
setRecarregar((n) => n + 1);
void carregar();
aoMudar();
}
const grade = item ? desenharGrade(item.grade, item.celulas) : null;
const saldoTotal = item ? item.celulas.reduce((s, c) => s + c.saldo, 0) : 0;
const pode = situacao.podeEscrever;
function quadrado(c: Celula | null, rotulo: string) {
if (!c) return
{item.papel === "pronto"
? "Nenhum produto ligado ainda. Abra o produto, aba Estoque, e escolha “Produto pronto”."
: "Nenhuma composição usa este insumo. Ele só se mexe por entrada, contagem e perda."}
) : null}
setCelulaEscolhida(null)} className="ks-button ks-button-ghost ks-button-sm">
Ver o item todo
) : null
}
>
)}
setLancamento(null)}
aoConcluir={depoisDeMexer}
/>
setEditando(false)}
aoSalvar={(novo) => {
setEditando(false);
setItem(novo);
setAviso("Dados salvos.");
aoMudar();
}}
/>
{item && item.papel === "insumo" ? (
/* O modal de sempre é z-50; o embrulho o põe acima da gaveta. */