"use client";

/*
 * A central de estoque do estoque novo (v2): Insumos, Produtos prontos,
 * Conferir e Histórico. Toda peça física é um item; o saldo mora na célula
 * da grade (tamanho × cor), e só muda por movimento — por isso cada número
 * tem a sua linha do tempo.
 */

import { useCallback, useEffect, useState } from "react";
import { Boxes, PackageCheck, ScanSearch, History } from "lucide-react";
import { PageHeader } from "@/components/ui/page-header";
import { Aviso } from "@/components/ui/aviso";
import { Abas } from "./primitivos";
import { ListaDeItens } from "./lista-de-itens";
import { GavetaDoItem } from "./gaveta-do-item";
import { FormularioDoItem } from "./formulario-do-item";
import { JanelaDeLancamento, type ModoDoLancamento } from "./lancamento";
import { ConferirEstoque } from "./conferir";
import { LinhaDoTempo } from "./linha-do-tempo";
import { JanelaDaProducao } from "./janela-da-producao";
import { pedirJson, type SituacaoDoEstoque } from "@/lib/estoque/use-estoque-v2";
import type { ItemDoEstoque, Papel } from "@/lib/estoque/tipos";

type Aba = "insumos" | "prontos" | "conferir" | "historico";

const SUBTITULOS: Record<Aba, string> = {
  insumos: "O que vira produto. A composição de cada produto diz quanto sai na venda sob encomenda ou na produção.",
  prontos: "Peças já feitas, na prateleira. A venda tira daqui; a produção põe aqui.",
  conferir: "O que merece um olhar: saldos que não batem, negativos, peças repetidas.",
  historico: "Tudo que entrou e saiu do estoque, com a origem de cada movimento.",
};

function abaDaUrl(): Aba {
  if (typeof window === "undefined") return "insumos";
  const a = new URLSearchParams(window.location.search).get("aba");
  if (a === "prontos" || a === "conferir" || a === "historico" || a === "insumos") return a;
  return "insumos";
}

export function CentralDeEstoqueV2({ situacao }: { situacao: SituacaoDoEstoque }) {
  const [aba, setAba] = useState<Aba>("insumos");
  const [itens, setItens] = useState<ItemDoEstoque[]>([]);
  const [carregando, setCarregando] = useState(true);
  const [erro, setErro] = useState<string | null>(null);
  const [aberto, setAberto] = useState<string | null>(null);
  const [novo, setNovo] = useState<Papel | null>(null);
  const [lancando, setLancando] = useState<{ item: ItemDoEstoque; modo: ModoDoLancamento; celula?: string | null } | null>(null);
  const [aviso, setAviso] = useState<string | null>(null);
  const [recarregar, setRecarregar] = useState(0);
  const [pendencias, setPendencias] = useState<number | null>(null);
  const [producaoAberta, setProducaoAberta] = useState<string | null>(null);

  useEffect(() => {
    setAba(abaDaUrl());
    /* Link de fora (pedido, conferência): ?item=<id> abre a gaveta do item. */
    const item = new URLSearchParams(window.location.search).get("item");
    if (item && /^[0-9a-f-]{36}$/i.test(item)) setAberto(item);
  }, []);

  const trocarAba = (a: Aba) => {
    setAba(a);
    const url = new URL(window.location.href);
    url.searchParams.set("aba", a);
    window.history.replaceState(window.history.state, "", `${url.pathname}${url.search}`);
  };

  const carregar = useCallback(async () => {
    setCarregando(true);
    try {
      const r = await pedirJson<{ itens: ItemDoEstoque[] }>("/api/estoque/itens");
      setItens(r.itens);
      setErro(null);
    } catch (e) {
      setErro((e as Error).message);
    } finally {
      setCarregando(false);
    }
  }, []);

  useEffect(() => {
    void carregar();
  }, [carregar]);

  /* O número de pendências aparece na aba Conferir antes de abrir. */
  useEffect(() => {
    pedirJson<{ divergencias: unknown[]; sem_celula: unknown[]; negativos: unknown[]; duplicados: unknown[] }>("/api/estoque/conferir")
      .then((r) => setPendencias(r.divergencias.length + r.sem_celula.length + r.negativos.length + r.duplicados.length))
      .catch(() => undefined);
  }, [recarregar]);

  const insumos = itens.filter((i) => i.papel === "insumo");
  const prontos = itens.filter((i) => i.papel === "pronto");

  function mudou() {
    setRecarregar((n) => n + 1);
    void carregar();
  }

  /* "Acertar pela contagem" da conferência: abre a contagem do item já com a célula. */
  async function contar(itemId: string, celulaId?: string | null) {
    let item = itens.find((i) => i.id === itemId);
    if (!item) {
      const r = await pedirJson<{ itens: ItemDoEstoque[] }>(`/api/estoque/itens?id=${itemId}`).catch(() => null);
      item = r?.itens[0];
    }
    if (item) setLancando({ item, modo: "contagem", celula: celulaId ?? null });
  }

  return (
    <div className="space-y-6">
      <PageHeader eyebrow="Produtos" title="Estoque" subtitle={SUBTITULOS[aba]} />

      <Abas<Aba>
        atual={aba}
        aoEscolher={trocarAba}
        abas={[
          { id: "insumos", rotulo: "Insumos", Icone: Boxes, contagem: carregando ? null : insumos.length },
          { id: "prontos", rotulo: "Produtos prontos", Icone: PackageCheck, contagem: carregando ? null : prontos.length },
          { id: "conferir", rotulo: "Conferir", Icone: ScanSearch, contagem: pendencias, alerta: Boolean(pendencias) },
          { id: "historico", rotulo: "Histórico", Icone: History },
        ]}
      />

      {aviso ? (
        <Aviso tom="bom" aoFechar={() => setAviso(null)}>
          {aviso}
        </Aviso>
      ) : null}
      {erro ? <Aviso tom="ruim">{erro}</Aviso> : null}

      {aba === "insumos" || aba === "prontos" ? (
        <ListaDeItens
          key={aba}
          papel={aba === "prontos" ? "pronto" : "insumo"}
          itens={aba === "prontos" ? prontos : insumos}
          carregando={carregando}
          podeEscrever={situacao.podeEscrever}
          podeCadastrar={situacao.podeCadastrar}
          aoAbrir={setAberto}
          aoNovo={() => setNovo(aba === "prontos" ? "pronto" : "insumo")}
          aoLancar={(item, modo) => setLancando({ item, modo })}
        />
      ) : aba === "conferir" ? (
        <ConferirEstoque aoAbrirItem={setAberto} aoContar={(i, c) => void contar(i, c)} recarregar={recarregar} aoContagem={setPendencias} />
      ) : (
        <div className="ks-surface rounded-xl border border-[var(--ks-color-border-subtle)] p-4 shadow-sm sm:p-6">
          <LinhaDoTempo recarregar={recarregar} mostrarItem aoAbrirItem={setAberto} aoAbrirProducao={setProducaoAberta} />
        </div>
      )}

      <GavetaDoItem itemId={aberto} situacao={situacao} aoFechar={() => setAberto(null)} aoMudar={mudou} />

      <FormularioDoItem
        aberto={Boolean(novo)}
        papel={novo ?? "insumo"}
        item={null}
        aoFechar={() => setNovo(null)}
        aoSalvar={(item) => {
          setNovo(null);
          mudou();
          setAberto(item.id);
        }}
      />

      <JanelaDeLancamento
        item={lancando?.item ?? null}
        modo={lancando?.modo ?? null}
        celulaInicial={lancando?.celula ?? null}
        aoFechar={() => setLancando(null)}
        aoConcluir={(mensagem) => {
          setLancando(null);
          setAviso(mensagem);
          mudou();
        }}
      />

      <JanelaDaProducao producaoId={producaoAberta} aoFechar={() => setProducaoAberta(null)} aoMudar={mudou} />
    </div>
  );
}