"use client";

/*
 * Receber compra de item com grade (estoque novo): em quais células a
 * mercadoria entrou. "Chegaram 30 camisetas lisas" vira P/Branca 10,
 * M/Branca 10, G/Preta 10 — cada uma entra na sua célula, com o custo da
 * compra. Item sem grade não usa isto (entra na célula única, como sempre).
 */

import { useEffect, useState } from "react";
import { Grid3x3 } from "lucide-react";
import { CampoNumero } from "./primitivos";
import { desenharGrade, qtd, resumoDaGrade } from "@/lib/estoque/regras";
import type { Celula, EixoDaGrade } from "@/lib/estoque/tipos";

export type ItemDaCompraNoEstoque = {
  linha_id: string;
  celula_id: string | null;
  item: { id: string; nome: string; unidade: string; grade: EixoDaGrade[]; papel: string; celulas: Celula[] } | null;
};

/** Pergunta ao servidor (uma vez por compra) quais linhas entram em item com grade. */
export function useEstoqueDaCompra(compraId: string | null) {
  const [linhas, setLinhas] = useState<{ compra: string; mapa: Record<string, ItemDaCompraNoEstoque> }>({ compra: "", mapa: {} });
  useEffect(() => {
    if (!compraId) return;
    let vivo = true;
    fetch(`/api/estoque/compra/${compraId}`, { cache: "no-store" })
      .then((r) => (r.ok ? r.json() : null))
      .then((j: { v2?: boolean; linhas?: ItemDaCompraNoEstoque[] } | null) => {
        if (!vivo) return;
        const mapa: Record<string, ItemDaCompraNoEstoque> = {};
        if (j?.v2) for (const l of j.linhas ?? []) mapa[l.linha_id] = l;
        setLinhas({ compra: compraId, mapa });
      })
      .catch(() => undefined);
    return () => {
      vivo = false;
    };
  }, [compraId]);
  return compraId && linhas.compra === compraId ? linhas.mapa : {};
}

export function GradeDoRecebimento({
  item,
  valores,
  aoMudar,
  maximo,
}: {
  item: NonNullable<ItemDaCompraNoEstoque["item"]>;
  valores: Record<string, number>;
  aoMudar: (valores: Record<string, number>) => void;
  maximo: number;
}) {
  const grade = desenharGrade(item.grade, item.celulas);
  const total = Object.values(valores).reduce((s, n) => s + (n > 0 ? n : 0), 0);
  const campo = (c: Celula | null, rotulo: string) =>
    c ? (
      <CampoNumero
        valor={valores[c.celula_id] ?? 0}
        aoMudar={(n) => aoMudar({ ...valores, [c.celula_id]: n })}
        rotulo={`Chegou em ${rotulo}`}
      />
    ) : (
      <span className="block text-center text-xs text-slate-300">—</span>
    );
  return (
    <div className="mt-3 rounded-xl bg-[var(--ks-brand-50)]/60 p-3">
      <p className="flex flex-wrap items-center gap-1.5 text-xs font-semibold text-[var(--ks-brand-700)]">
        <Grid3x3 size={13} /> {item.nome} tem grade {resumoDaGrade(item.grade)}: diga quanto entrou em cada célula
        <span className={`ml-auto ks-num ${total > maximo + 1e-9 ? "text-rose-600" : ""}`}>
          {qtd(total)} de {qtd(maximo)}
        </span>
      </p>
      <div className="mt-2 overflow-x-auto">
        <table className="border-separate border-spacing-1.5">
          {grade.eixoDasColunas ? (
            <thead>
              <tr>
                <th />
                {grade.colunas.map((c) => (
                  <th key={String(c)} className="text-right text-[11px] font-semibold text-[var(--ks-color-text-secondary)]">
                    {c}
                  </th>
                ))}
              </tr>
            </thead>
          ) : null}
          <tbody>
            {grade.linhas.map((l) => (
              <tr key={String(l.valor)}>
                <td className="pr-1 text-xs font-bold text-[var(--ks-color-text-primary)]">{l.valor}</td>
                {l.celulas.map((x) => (
                  <td key={String(x.coluna)} className="w-[92px] min-w-[80px]">
                    {campo(x.celula, [l.valor, x.coluna].filter(Boolean).join(" / "))}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {total > maximo + 1e-9 ? <p className="mt-1 text-xs text-rose-600">Passou do que falta receber: o sistema só aceita até {qtd(maximo)}.</p> : null}
    </div>
  );
}