"use client";

/*
 * A central de estoque: uma casa só para as duas perguntas do dia a dia —
 * "o que eu tenho pronto?" e "o que eu tenho de material?".
 *
 * As duas abas falam o MESMO idioma visual (o card e a tabela da casa):
 * "Prontos" lista só quem controla estoque de acabado, com ajuste e histórico
 * a um clique e o "controlar um produto" num modal de verdade; "Insumos" é a
 * lista de sempre, morando aqui sem cabeçalho duplicado.
 */

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { Loader2, PackageCheck, Boxes, Package, Search, History, Pencil, X, Check } from "lucide-react";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { getSupabaseClient } from "@/lib/supabase";
import { iconeDoProduto } from "@/lib/icone-do-item";
import { getCompanyContext } from "@/lib/company-context";
import { InventoryHistoryModal } from "@/components/products/inventory-history-modal";
import { ListaDeInsumos } from "@/components/producao/lista-de-insumos";
import { useEstoqueV2 } from "@/lib/estoque/use-estoque-v2";
import { CentralDeEstoqueV2 } from "@/components/estoque/central-de-estoque-v2";

type ProdutoControlado = {
  id: string;
  name: string;
  stock: number;
  inventory_scope: "product" | "option" | "variant";
  allow_negative_stock: boolean;
  image_url: string | null;
};

const ROTULO_DA_REGRA: Record<string, string> = {
  product: "Por produto",
  option: "Por opção",
  variant: "Por combinação",
};

const qtdEnxuta = (n: number) =>
  new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 3 }).format(n || 0);

/* Avatar vivo para linha sem foto: a inicial num gradiente saturado da casa,
   estável pelo nome. */
const VIVOS = [
  "bg-gradient-to-br from-violet-500 to-purple-600",
  "bg-gradient-to-br from-sky-500 to-blue-600",
  "bg-gradient-to-br from-emerald-500 to-teal-600",
  "bg-gradient-to-br from-amber-400 to-orange-500",
  "bg-gradient-to-br from-rose-500 to-pink-600",
  "bg-gradient-to-br from-indigo-500 to-violet-600",
];
const corDoNome = (nome: string) => {
  let soma = 0;
  for (let i = 0; i < nome.length; i++) soma += nome.charCodeAt(i);
  return VIVOS[soma % VIVOS.length];
};

/* Empresa no estoque novo (v2) vê a central nova; as outras, a de sempre,
   exatamente como era. Enquanto a pergunta não volta, só o carregando. */
export default function CentralDeEstoquePage() {
  const situacao = useEstoqueV2();
  if (situacao.carregando) {
    return (
      <div className="flex justify-center py-24">
        <Loader2 className="h-8 w-8 animate-spin text-[var(--ks-color-primary)]" />
      </div>
    );
  }
  if (situacao.v2) return <CentralDeEstoqueV2 situacao={situacao} />;
  return <CentralDeEstoqueAntiga />;
}

function CentralDeEstoqueAntiga() {
  const supabase = useMemo(() => getSupabaseClient(), []);
  const [aba, setAba] = useState<"prontos" | "insumos">(() => {
    if (typeof window !== "undefined" && window.location.search.includes("aba=insumos")) return "insumos";
    return "prontos";
  });

  /* Quem chega pelo atalho antigo (/dashboard/production/materials) entra por
     um desvio: a tela monta antes de o endereco novo valer, e a leitura ali em
     cima ainda nao ve o "aba=insumos". Esta segunda olhada, ja montado,
     corrige — senao a pessoa clica em Insumos e cai em Produtos prontos. */
  useEffect(() => {
    if (window.location.search.includes("aba=insumos")) setAba("insumos");
  }, []);
  const [carregando, setCarregando] = useState(true);
  const [produtos, setProdutos] = useState<ProdutoControlado[]>([]);
  const [semControle, setSemControle] = useState<Array<{ id: string; name: string }>>([]);
  const [busca, setBusca] = useState("");
  const [modalDe, setModalDe] = useState<ProdutoControlado | null>(null);

  /* Modal "controlar um produto": escolher, dar o saldo inicial e ligar. */
  const [controlarAberto, setControlarAberto] = useState(false);
  const [buscaControlar, setBuscaControlar] = useState("");
  const [escolhido, setEscolhido] = useState<{ id: string; name: string } | null>(null);
  const [saldoInicial, setSaldoInicial] = useState("");
  const [ligando, setLigando] = useState(false);
  const [erroControlar, setErroControlar] = useState("");

  const carregar = useCallback(async () => {
    setCarregando(true);
    const { data: { user } } = await supabase.auth.getUser();
    if (!user) { setCarregando(false); return; }
    const ctx = await getCompanyContext(supabase, user);
    const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];
    const { data } = await supabase
      .from("products")
      .select("id,name,stock,inventory_scope,allow_negative_stock,track_inventory,image_url")
      .in("user_id", tenantIds)
      .neq("product_kind", "digital")
      .order("name");
    const linhas = (data as Array<ProdutoControlado & { track_inventory?: boolean }> | null) || [];
    setProdutos(
      linhas
        .filter((p) => p.track_inventory === true)
        .map((p) => ({
          id: p.id,
          name: p.name,
          stock: Number(p.stock) || 0,
          inventory_scope: (p.inventory_scope as ProdutoControlado["inventory_scope"]) || "product",
          allow_negative_stock: Boolean(p.allow_negative_stock),
          image_url: p.image_url || null,
        }))
    );
    setSemControle(linhas.filter((p) => p.track_inventory !== true).map((p) => ({ id: p.id, name: p.name })));
    setCarregando(false);
  }, [supabase]);

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

  function abrirControlar() {
    setBuscaControlar("");
    setEscolhido(null);
    setSaldoInicial("");
    setErroControlar("");
    setControlarAberto(true);
  }

  async function confirmarControlar() {
    if (!escolhido) return;
    setLigando(true);
    setErroControlar("");
    try {
      const res = await fetch("/api/products", {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ id: escolhido.id, patch: { track_inventory: true } }),
      });
      if (!res.ok) {
        const json = (await res.json().catch(() => null)) as { error?: string } | null;
        setErroControlar(json?.error || "Não foi possível ligar o controle deste produto.");
        return;
      }
      const saldo = Number(saldoInicial.replace(",", ".")) || 0;
      if (saldo > 0) {
        const { data: { user } } = await supabase.auth.getUser();
        await supabase.from("inventory_movements").insert({
          product_id: escolhido.id,
          quantity: saldo,
          type: "adjustment_in",
          reference_type: "manual",
          notes: "Saldo inicial (central de estoque)",
          user_id: user?.id,
        });
      }
      setControlarAberto(false);
      await carregar();
    } finally {
      setLigando(false);
    }
  }

  function situacao(p: ProdutoControlado) {
    if (p.stock < 0) return { texto: `Negativo (${qtdEnxuta(p.stock)})`, classe: "bg-red-50 text-red-600" };
    if (p.stock === 0) return { texto: "Esgotado", classe: "bg-red-50 text-red-600" };
    return { texto: "Em estoque", classe: "bg-emerald-50 text-emerald-700" };
  }

  const filtrados = produtos.filter((p) => p.name.toLowerCase().includes(busca.toLowerCase()));
  const candidatos = semControle.filter((p) => p.name.toLowerCase().includes(buscaControlar.toLowerCase()));

  const abas = [
    { id: "prontos" as const, rotulo: "Produtos prontos", icone: PackageCheck },
    { id: "insumos" as const, rotulo: "Insumos", icone: Boxes },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Produtos"
        title="Estoque"
        subtitle={
          aba === "prontos"
            ? "O que está pronto para entregar. A venda baixa, o cancelamento devolve — tudo com histórico."
            : "Os materiais que produzem o resto. A ficha técnica e as opções baixam daqui a cada venda."
        }
      />

      {/* Abas no sublinhado da casa. */}
      <div className="flex items-center gap-6 border-b border-[var(--ks-color-border-subtle)]">
        {abas.map(({ id, rotulo, icone: Icone }) => (
          <button
            key={id}
            type="button"
            onClick={() => setAba(id)}
            className={`flex items-center gap-2 pb-3 -mb-px text-sm font-semibold transition-colors border-b-2 ${
              aba === id
                ? "border-[var(--ks-color-primary)] text-[var(--ks-color-primary)]"
                : "border-transparent text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)]"
            }`}
          >
            <Icone className="w-4 h-4" />
            {rotulo}
          </button>
        ))}
      </div>

      {aba === "insumos" ? (
        <ListaDeInsumos embutida />
      ) : (
        <div className="ks-surface rounded-xl shadow-sm border border-[var(--ks-color-border-subtle)] overflow-hidden">
          <div className="p-4 border-b border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-subtle)]/30 flex flex-wrap items-center gap-x-4 gap-y-3 justify-between">
            <div className="max-w-xs flex-1 min-w-[200px] relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
              <Input
                placeholder="Buscar produtos com controle..."
                value={busca}
                onChange={(e) => setBusca(e.target.value)}
                className="pl-9"
              />
            </div>
            <div className="flex items-center gap-4 text-xs font-medium text-slate-500">
              <span className="flex items-center gap-1.5">
                <span className="w-1.5 h-1.5 rounded-full bg-[var(--ks-color-primary)]" />
                {produtos.length} controlados
              </span>
              <span className="flex items-center gap-1.5">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
                {produtos.filter((p) => p.stock > 0).length} em estoque
              </span>
              <span className="flex items-center gap-1.5">
                <span className="w-1.5 h-1.5 rounded-full bg-rose-500" />
                {produtos.filter((p) => p.stock <= 0).length} esgotados
              </span>
            </div>
            <Button onClick={abrirControlar} icon={<PackageCheck size={16} />}>
              Controlar produto
            </Button>
          </div>

          {carregando ? (
            <div className="flex justify-center py-16">
              <Loader2 className="h-8 w-8 animate-spin text-primary" />
            </div>
          ) : filtrados.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-center">
              <div className="bg-slate-50 p-4 rounded-full mb-3">
                <Package className="h-8 w-8 text-slate-300" />
              </div>
              <h3 className="text-lg font-medium text-slate-900">
                {busca ? "Nenhum produto encontrado" : "Nenhum produto com estoque de pronta-entrega"}
              </h3>
              <p className="text-slate-500 max-w-sm mt-1 mb-4">
                Quem produz sob demanda controla os insumos da ficha. Para estocar produto pronto,
                ligue o controle aqui.
              </p>
              <Button variant="outline" onClick={abrirControlar}>
                Controlar produto
              </Button>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <div className="min-w-[680px]">
                <div className="grid grid-cols-[minmax(0,1fr)_130px_110px_140px_92px] gap-3 px-6 py-3 text-[10px] uppercase tracking-[0.14em] text-slate-400 font-semibold">
                  <span>Produto</span>
                  <span>Regra</span>
                  <span>Saldo</span>
                  <span>Situação</span>
                  <span />
                </div>
                {filtrados.map((p) => {
                  const s = situacao(p);
                  return (
                    <div
                      key={p.id}
                      onClick={() => setModalDe(p)}
                      title="Ver estoque e histórico"
                      className="grid grid-cols-[minmax(0,1fr)_130px_110px_140px_92px] gap-3 items-center px-6 py-3.5 border-t border-slate-100/60 hover:bg-[var(--ks-color-bg-subtle)]/50 transition-colors cursor-pointer"
                    >
                      <div className="flex items-center gap-3 min-w-0">
                        {p.image_url ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img
                            src={p.image_url}
                            alt=""
                            className="h-9 w-9 rounded-xl object-cover border border-slate-100 shrink-0"
                          />
                        ) : iconeDoProduto(p.name) ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img
                            src={iconeDoProduto(p.name) as string}
                            alt=""
                            className="h-10 w-10 object-contain shrink-0"
                          />
                        ) : (
                          <span
                            className={`h-9 w-9 rounded-xl flex items-center justify-center text-sm font-bold text-white shadow-sm shrink-0 ${corDoNome(p.name)}`}
                          >
                            {p.name.trim().charAt(0).toUpperCase()}
                          </span>
                        )}
                        <div className="min-w-0">
                          <p className="font-semibold text-sm text-[var(--ks-color-text-primary)] truncate">{p.name}</p>
                          {p.allow_negative_stock && (
                            <p className="text-[11px] text-slate-400">venda sem saldo liberada</p>
                          )}
                        </div>
                      </div>
                      <div>
                        <span
                          className={`text-xs font-medium px-2.5 py-1 rounded-full ${
                            p.inventory_scope === "product"
                              ? "bg-slate-100 text-slate-600"
                              : "bg-[var(--ks-color-primary)]/10 text-[var(--ks-color-primary)]"
                          }`}
                        >
                          {ROTULO_DA_REGRA[p.inventory_scope] || "Por produto"}
                        </span>
                      </div>
                      <div>
                        <span className="text-base font-bold tabular-nums text-[var(--ks-color-text-primary)]">
                          {qtdEnxuta(p.stock)}
                        </span>
                        <span className="ml-1 text-xs text-slate-400">un</span>
                      </div>
                      <div>
                        <span className={`inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full ${s.classe}`}>
                          <span className={`w-1.5 h-1.5 rounded-full ${p.stock > 0 ? "bg-emerald-500" : "bg-rose-500"}`} />
                          {s.texto}
                        </span>
                      </div>
                      <div className="flex items-center justify-end gap-1">
                        <Button
                          size="icon"
                          variant="ghost"
                          title="Estoque: ajuste e histórico"
                          onClick={(e) => { e.stopPropagation(); setModalDe(p); }}
                        >
                          <History className="h-4 w-4 text-emerald-600" />
                        </Button>
                        <Link
                          href={`/dashboard/products/${p.id}`}
                          title="Abrir produto"
                          onClick={(e) => e.stopPropagation()}
                          className="h-9 w-9 inline-flex items-center justify-center rounded-lg hover:bg-slate-100 transition-colors"
                        >
                          <Pencil className="h-4 w-4 text-slate-500" />
                        </Link>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Modal: começar a controlar um produto. */}
      {controlarAberto && (
        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4" onClick={() => !ligando && setControlarAberto(false)}>
          <div
            className="bg-white rounded-2xl shadow-xl w-full max-w-lg overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-start justify-between px-6 pt-5 pb-3">
              <div>
                <h3 className="text-lg font-bold text-[var(--ks-color-text-primary)]">Controlar estoque de um produto</h3>
                <p className="text-sm text-[var(--ks-color-text-soft)]">
                  Escolha o produto, diga quanto tem na prateleira e pronto — a venda passa a baixar sozinha.
                </p>
              </div>
              <button
                type="button"
                className="p-1.5 rounded-full text-slate-400 hover:bg-slate-100 hover:text-slate-600"
                onClick={() => !ligando && setControlarAberto(false)}
              >
                <X className="w-4 h-4" />
              </button>
            </div>

            <div className="px-6 pb-2 space-y-3">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Buscar produto sem controle..."
                  value={buscaControlar}
                  onChange={(e) => setBuscaControlar(e.target.value)}
                  className="pl-9"
                  autoFocus
                />
              </div>
              <div className="max-h-56 overflow-y-auto rounded-xl border border-[var(--ks-color-border-subtle)] divide-y divide-[var(--ks-color-border-subtle)]">
                {candidatos.length === 0 ? (
                  <p className="p-4 text-sm text-slate-500 text-center">Nenhum produto sem controle com esse nome.</p>
                ) : (
                  candidatos.slice(0, 60).map((p) => (
                    <button
                      key={p.id}
                      type="button"
                      onClick={() => setEscolhido(p)}
                      className={`w-full flex items-center justify-between gap-3 px-4 py-2.5 text-left text-sm transition-colors ${
                        escolhido?.id === p.id
                          ? "bg-[var(--ks-color-primary)]/5 text-[var(--ks-color-primary)] font-semibold"
                          : "hover:bg-slate-50 text-slate-700"
                      }`}
                    >
                      <span className="truncate">{p.name}</span>
                      {escolhido?.id === p.id && <Check className="w-4 h-4 shrink-0" />}
                    </button>
                  ))
                )}
              </div>

              {escolhido && (
                <div className="flex items-center gap-3 rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-subtle)]/40 px-4 py-3">
                  <div className="flex-1">
                    <label className="text-xs font-medium text-[var(--ks-color-text-soft)]">Quantas unidades prontas você tem hoje? (opcional)</label>
                    <Input
                      type="text"
                      inputMode="decimal"
                      placeholder="0"
                      value={saldoInicial}
                      onChange={(e) => setSaldoInicial(e.target.value)}
                      className="mt-1 h-9 w-32"
                    />
                  </div>
                  <p className="text-[11px] text-[var(--ks-color-text-muted)] max-w-[180px]">
                    Regra fina (por opção ou combinação) se ajusta depois, dentro do produto.
                  </p>
                </div>
              )}

              {erroControlar && <p className="text-sm text-red-600">{erroControlar}</p>}
            </div>

            <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-subtle)]/30">
              <Button variant="outline" onClick={() => setControlarAberto(false)} disabled={ligando}>
                Cancelar
              </Button>
              <Button onClick={confirmarControlar} disabled={!escolhido || ligando}>
                {ligando ? <Loader2 className="w-4 h-4 animate-spin" /> : "Ligar controle"}
              </Button>
            </div>
          </div>
        </div>
      )}

      {modalDe && (
        <InventoryHistoryModal
          productId={modalDe.id}
          productName={modalDe.name}
          currentStock={modalDe.stock}
          open={Boolean(modalDe)}
          onOpenChange={(open) => {
            if (!open) {
              setModalDe(null);
              carregar();
            }
          }}
          onStockUpdate={(novo) => {
            setProdutos((prev) => prev.map((p) => (p.id === modalDe.id ? { ...p, stock: novo } : p)));
            /* `modalDe` e uma copia do produto tirada na hora de abrir. Sem
               atualizar ela tambem, o saldo da janela ficava no valor de quando
               abriu, e reabrir era o unico jeito de ver o total certo. */
            setModalDe((atual) => (atual && atual.id === modalDe.id ? { ...atual, stock: novo } : atual));
          }}
        />
      )}
    </div>
  );
}