"use client";

/*
 * A lista de Insumos e a de Produtos prontos: lista corrida da casa (barra
 * com busca, filtros e contadores; linha inteira clicável que abre a gaveta).
 */

import { useMemo, useState } from "react";
import { Loader2, Plus, Search, PackagePlus, ClipboardCheck, Grid3x3, Package } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Contador, RostoDoItem, Saldo, SeloDaSituacao, situacaoDoSaldo, type Situacao } from "./primitivos";
import { dinheiro, normalizar, resumoDaGrade, unidade } from "@/lib/estoque/regras";
import type { ItemDoEstoque, Papel } from "@/lib/estoque/tipos";

type Filtro = "todos" | "minimo" | "sem" | "grade";

/** A situação do item pela pior célula (uma célula zerada já é aviso). */
export function situacaoDoItem(item: ItemDoEstoque): { situacao: Situacao; zeradas: number; abaixo: number } {
  if (!item.controla) return { situacao: "sem_controle", zeradas: 0, abaixo: 0 };
  const total = item.celulas.reduce((s, c) => s + c.saldo, 0);
  const zeradas = item.celulas.filter((c) => c.saldo <= 0).length;
  const abaixo = item.celulas.filter((c) => c.saldo > 0 && c.minimo !== null && c.saldo <= c.minimo).length;
  if (total < 0) return { situacao: "negativo", zeradas, abaixo };
  if (total === 0 || (item.celulas.length && zeradas === item.celulas.length)) return { situacao: "zerado", zeradas, abaixo };
  if (abaixo > 0 || (item.celulas.length === 1 && situacaoDoSaldo(total, item.minimo) === "minimo")) return { situacao: "minimo", zeradas, abaixo };
  return { situacao: "ok", zeradas, abaixo };
}

export function ListaDeItens({
  papel,
  itens,
  carregando,
  podeEscrever,
  podeCadastrar,
  aoAbrir,
  aoNovo,
  aoLancar,
}: {
  papel: Papel;
  itens: ItemDoEstoque[];
  carregando: boolean;
  podeEscrever: boolean;
  podeCadastrar: boolean;
  aoAbrir: (id: string) => void;
  aoNovo: () => void;
  aoLancar: (item: ItemDoEstoque, modo: "entrada" | "contagem") => void;
}) {
  const [busca, setBusca] = useState("");
  const [filtro, setFiltro] = useState<Filtro>("todos");

  const comSituacao = useMemo(() => itens.map((i) => ({ item: i, ...situacaoDoItem(i), total: i.celulas.reduce((s, c) => s + c.saldo, 0) })), [itens]);
  const termo = normalizar(busca);
  const visiveis = comSituacao.filter(({ item, situacao, zeradas, abaixo }) => {
    if (termo && !(normalizar(item.nome) ?? "").includes(termo) && !(item.usos ?? []).some((u) => (normalizar(u.produto) ?? "").includes(termo))) return false;
    if (filtro === "minimo") return situacao === "minimo" || abaixo > 0;
    if (filtro === "sem") return situacao === "zerado" || situacao === "negativo" || zeradas > 0;
    if (filtro === "grade") return item.grade.length > 0;
    return true;
  });

  const contagens = {
    total: itens.length,
    ok: comSituacao.filter((x) => x.situacao === "ok").length,
    minimo: comSituacao.filter((x) => x.situacao === "minimo" || x.abaixo > 0).length,
    sem: comSituacao.filter((x) => x.situacao === "zerado" || x.situacao === "negativo" || x.zeradas > 0).length,
    grade: itens.filter((i) => i.grade.length > 0).length,
  };
  const valorEmEstoque = comSituacao.reduce((s, x) => s + Math.max(0, x.total) * x.item.custo_medio, 0);

  const FILTROS: Array<{ id: Filtro; rotulo: string; n: number }> = [
    { id: "todos", rotulo: "Todos", n: contagens.total },
    { id: "minimo", rotulo: "Abaixo do mínimo", n: contagens.minimo },
    { id: "sem", rotulo: "Sem estoque", n: contagens.sem },
    { id: "grade", rotulo: "Com grade", n: contagens.grade },
  ];

  const ehPronto = papel === "pronto";

  return (
    <div className="ks-surface overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] shadow-sm">
      <div className="space-y-3 border-b border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-subtle)]/30 p-4">
        <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
          <div className="relative min-w-[200px] max-w-sm flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <Input
              placeholder={ehPronto ? "Buscar produto pronto…" : "Buscar insumo ou produto que usa…"}
              value={busca}
              onChange={(e) => setBusca(e.target.value)}
              className="pl-9"
            />
          </div>
          <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
            <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs font-medium text-slate-500">
              <Contador cor="bg-emerald-500" numero={contagens.ok} rotulo="em estoque" />
              <Contador cor="bg-violet-500" numero={contagens.minimo} rotulo="no mínimo" />
              <Contador cor="bg-rose-500" numero={contagens.sem} rotulo="sem estoque" />
              <span className="whitespace-nowrap">
                <span className="ks-num font-semibold text-slate-700">{dinheiro(valorEmEstoque)}</span> em estoque
              </span>
            </div>
            {podeCadastrar ? (
              <button type="button" onClick={aoNovo} className="ks-button ks-button-primary">
                <Plus size={16} /> {ehPronto ? "Novo produto pronto" : "Novo insumo"}
              </button>
            ) : null}
          </div>
        </div>
        <div className="-mx-1 flex gap-1 overflow-x-auto px-1 [scrollbar-width:none]">
          {FILTROS.map((f) => (
            <button
              key={f.id}
              type="button"
              onClick={() => setFiltro(f.id)}
              className={`shrink-0 rounded-full px-3 py-1.5 text-[12.5px] font-semibold transition-colors ${
                filtro === f.id ? "bg-[var(--ks-brand-600)] text-white" : "text-[var(--ks-color-text-secondary)] hover:bg-[var(--ks-color-bg-hover)]"
              }`}
            >
              {f.rotulo} <span className="ks-num opacity-70">{f.n}</span>
            </button>
          ))}
        </div>
      </div>

      {carregando && !itens.length ? (
        <div className="flex justify-center py-16">
          <Loader2 className="h-8 w-8 animate-spin text-[var(--ks-color-primary)]" />
        </div>
      ) : visiveis.length === 0 ? (
        <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
          <div className="mb-3 rounded-full bg-slate-50 p-4">
            <Package className="h-8 w-8 text-slate-300" />
          </div>
          <h3 className="text-lg font-medium text-slate-900">
            {busca || filtro !== "todos" ? "Nada com esse filtro" : ehPronto ? "Nenhum produto pronto ainda" : "Nenhum insumo ainda"}
          </h3>
          <p className="mb-4 mt-1 max-w-sm text-sm text-slate-500">
            {ehPronto
              ? "Produto pronto é a peça já feita, na prateleira. Crie aqui ou, no produto do catálogo, aba Estoque, escolha “Produto pronto”."
              : "Insumo é o que vira produto: camiseta lisa, DTF, tinta, caixa. A composição de cada produto diz quanto sai."}
          </p>
        </div>
      ) : (
        <div>
          <div className="hidden grid-cols-[minmax(0,1fr)_150px_130px_120px_150px_88px] gap-3 px-6 py-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-400 lg:grid">
            <span>{ehPronto ? "Produto pronto" : "Insumo"}</span>
            <span>Grade</span>
            <span>Saldo</span>
            <span>Custo médio</span>
            <span>Situação</span>
            <span />
          </div>
          {visiveis.map(({ item, situacao, zeradas, total }) => {
            const usos = item.usos ?? [];
            const sub = ehPronto
              ? usos.length
                ? `vende como ${usos.map((u) => u.produto).slice(0, 2).join(", ")}${usos.length > 2 ? ` +${usos.length - 2}` : ""}`
                : "nenhum produto ligado"
              : usos.length
                ? `usado em ${usos.length} ${usos.length === 1 ? "produto" : "produtos"}`
                : item.controla
                  ? "fora de qualquer composição"
                  : "não controla (só custo)";
            return (
              <div
                key={item.id}
                role="button"
                tabIndex={0}
                onClick={() => aoAbrir(item.id)}
                onKeyDown={(e) => (e.key === "Enter" ? aoAbrir(item.id) : undefined)}
                className="grid cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1.5 border-t border-slate-100/60 px-4 py-3.5 transition-colors hover:bg-[var(--ks-color-bg-subtle)]/50 sm:px-6 lg:grid-cols-[minmax(0,1fr)_150px_130px_120px_150px_88px]"
              >
                <div className="flex min-w-0 items-center gap-3">
                  <RostoDoItem nome={item.nome} papel={item.papel} />
                  <div className="min-w-0">
                    <p className="truncate text-sm font-semibold text-[var(--ks-color-text-primary)]">{item.nome}</p>
                    <p className="truncate text-[11px] text-slate-400">
                      {sub}
                      {item.permitir_negativo ? "" : " · para no zero"}
                    </p>
                  </div>
                </div>
                <div className="hidden text-xs text-[var(--ks-color-text-muted)] lg:block">
                  {item.grade.length ? (
                    <span className="inline-flex items-center gap-1.5">
                      <Grid3x3 size={13} className="text-[var(--ks-color-primary)]" />
                      {resumoDaGrade(item.grade)}
                    </span>
                  ) : (
                    <span className="text-slate-300">sem grade</span>
                  )}
                </div>
                <div className="text-right lg:text-left">
                  <Saldo valor={total} un={item.unidade} />
                  {item.grade.length && zeradas ? (
                    <p className="text-[11px] text-rose-500">
                      {zeradas} de {item.celulas.length} zeradas
                    </p>
                  ) : null}
                </div>
                <div className="hidden text-sm text-[var(--ks-color-text-secondary)] lg:block">
                  <span className="ks-num">{dinheiro(item.custo_medio)}</span>
                  <span className="text-[11px] text-slate-400"> /{unidade(item.unidade)}</span>
                </div>
                <div className="col-span-2 flex items-center justify-between gap-2 lg:col-span-1">
                  <SeloDaSituacao situacao={situacao} />
                  <span className="text-[11px] text-slate-400 lg:hidden">
                    {[item.grade.length ? resumoDaGrade(item.grade) : null, item.custo_medio ? `${dinheiro(item.custo_medio)}/${unidade(item.unidade)}` : null]
                      .filter(Boolean)
                      .join(" · ")}
                  </span>
                </div>
                <div className="col-span-2 hidden items-center justify-end gap-1 lg:col-span-1 lg:flex">
                  {podeEscrever ? (
                    <>
                      <button
                        type="button"
                        title="Entrada"
                        aria-label={`Entrada em ${item.nome}`}
                        onClick={(e) => {
                          e.stopPropagation();
                          aoLancar(item, "entrada");
                        }}
                        className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-emerald-600 transition-colors hover:bg-emerald-50"
                      >
                        <PackagePlus className="h-4 w-4" />
                      </button>
                      <button
                        type="button"
                        title="Contagem"
                        aria-label={`Contagem de ${item.nome}`}
                        onClick={(e) => {
                          e.stopPropagation();
                          aoLancar(item, "contagem");
                        }}
                        className="inline-flex h-9 w-9 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-100"
                      >
                        <ClipboardCheck className="h-4 w-4" />
                      </button>
                    </>
                  ) : null}
                </div>
              </div>
            );
          })}
          <p className="border-t border-slate-100/60 px-6 py-3 text-[11px] text-slate-400">
            Mostrando {visiveis.length} de {itens.length} {itens.length === 1 ? "item" : "itens"} · toque no item para ver a grade, lançar e a linha do tempo
          </p>
        </div>
      )}
    </div>
  );
}