"use client";

/*
 * Uma produção aberta pela linha do tempo: o que entrou, o que saiu e o
 * botão de desfazer (o banco recusa se as peças prontas já foram vendidas).
 */

import { useEffect, useState } from "react";
import Link from "next/link";
import { Factory, Loader2, Undo2 } from "lucide-react";
import { Janela } from "./gaveta";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import { Aviso } from "@/components/ui/aviso";
import { pedirJson } from "@/lib/estoque/use-estoque-v2";
import { dinheiro, qtd, qtdComSinal } from "@/lib/estoque/regras";
import type { Celula } from "@/lib/estoque/tipos";

type Detalhe = {
  producao: {
    id: string;
    produto_id: string | null;
    produto: string | null;
    quantidade: number;
    custo_unitario: number | null;
    observacao: string | null;
    criado_em: string;
    desfeita_em: string | null;
    celula: Celula | null;
  };
  movimentos: Array<{ id: string; tipo: string; quantidade: number; estorno_de: string | null; celula: Celula | null }>;
};

const DATA = new Intl.DateTimeFormat("pt-BR", { dateStyle: "short", timeStyle: "short" });

export function JanelaDaProducao({ producaoId, aoFechar, aoMudar }: { producaoId: string | null; aoFechar: () => void; aoMudar: () => void }) {
  const [d, setD] = useState<Detalhe | null>(null);
  const [erro, setErro] = useState<string | null>(null);
  const [pergunta, setPergunta] = useState<Confirmacao | null>(null);
  const [ocupado, setOcupado] = useState(false);

  useEffect(() => {
    if (!producaoId) return;
    setD(null);
    setErro(null);
    pedirJson<Detalhe>(`/api/estoque/producao?id=${producaoId}`)
      .then(setD)
      .catch((e) => setErro((e as Error).message));
  }, [producaoId]);

  const originais = (d?.movimentos ?? []).filter((m) => !m.estorno_de);

  return (
    <>
      <Janela
        aberta={Boolean(producaoId)}
        aoFechar={aoFechar}
        titulo={
          <span className="flex items-center gap-2">
            <Factory className="h-5 w-5 text-[var(--ks-color-primary)]" /> Produção
            {d?.producao.desfeita_em ? <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-500">desfeita</span> : null}
          </span>
        }
        texto={
          d
            ? `${d.producao.produto ?? "Produto"} · ${qtd(d.producao.quantidade)} peças · ${DATA.format(new Date(d.producao.criado_em))}${
                d.producao.custo_unitario ? ` · ${dinheiro(d.producao.custo_unitario)} cada` : ""
              }`
            : undefined
        }
        rodape={
          d && !d.producao.desfeita_em ? (
            <button
              type="button"
              className="ks-button ks-button-secondary"
              onClick={() =>
                setPergunta({
                  titulo: "Desfazer esta produção?",
                  texto: `As ${qtd(d.producao.quantidade)} peças saem do produto pronto e os insumos voltam para o estoque. Se alguma peça já foi vendida, o sistema não deixa.`,
                  confirmar: "Desfazer",
                  tom: "perigo",
                  aoConfirmar: async () => {
                    setOcupado(true);
                    try {
                      await pedirJson(`/api/estoque/producao?id=${d.producao.id}`, { method: "DELETE" });
                      setPergunta(null);
                      aoMudar();
                      const novo = await pedirJson<Detalhe>(`/api/estoque/producao?id=${d.producao.id}`);
                      setD(novo);
                    } catch (e) {
                      setPergunta(null);
                      setErro((e as Error).message);
                    } finally {
                      setOcupado(false);
                    }
                  },
                })
              }
            >
              <Undo2 size={15} /> Desfazer produção
            </button>
          ) : null
        }
      >
        {erro ? (
          <Aviso tom="ruim" aoFechar={() => setErro(null)}>
            {erro}
          </Aviso>
        ) : null}
        {!d && !erro ? (
          <div className="flex justify-center py-8">
            <Loader2 className="h-6 w-6 animate-spin text-[var(--ks-color-primary)]" />
          </div>
        ) : d ? (
          <div className="space-y-1">
            {originais.map((m) => (
              <div key={m.id} className="flex items-center justify-between gap-3 border-t border-slate-100/60 py-2 first:border-t-0">
                <span className="text-sm text-[var(--ks-color-text-primary)]">
                  {m.tipo === "producao_entrada" ? "Entrou em " : "Saiu de "}
                  <strong>{m.celula?.rotulo ?? "célula"}</strong>
                </span>
                <span className={`ks-num text-sm font-bold ${m.quantidade > 0 ? "text-emerald-600" : "text-rose-600"}`}>{qtdComSinal(m.quantidade)}</span>
              </div>
            ))}
            {d.producao.observacao ? <p className="pt-2 text-xs italic text-[var(--ks-color-text-soft)]">{d.producao.observacao}</p> : null}
            {d.producao.produto_id ? (
              <p className="pt-3 text-xs">
                <Link href={`/dashboard/products/${d.producao.produto_id}`} className="font-semibold text-[var(--ks-color-primary)] hover:underline">
                  Abrir o produto
                </Link>
              </p>
            ) : null}
          </div>
        ) : null}
      </Janela>
      <CaixaDeConfirmacao pedido={pergunta} ocupado={ocupado} aoFechar={() => setPergunta(null)} />
    </>
  );
}