"use client";

/*
 * A XBZ dentro da Ktalogu: catálogo, compras e pedidos.
 *
 * Três abas no sublinhado da casa. O catálogo é a cópia do catálogo inteiro
 * da XBZ guardada no servidor (com preço, estoque, peso, medidas, NCM e
 * cores), atualizada a cada 6 horas, como o desenvolvedor da API recomendou:
 * baixar a lista e trabalhar em cima dela, em vez de perguntar a cada busca.
 * Assim as 24 consultas do dia ficam para o que só a XBZ responde: o pedido,
 * o cancelamento e o status.
 */

import { useCallback, useEffect, useState } from "react";
import { Toaster, toast } from "sonner";
import { CheckCircle2, Circle, Loader2, PackageSearch, RefreshCcw, Settings2, ShieldCheck, Truck } from "lucide-react";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Aviso } from "@/components/ui/aviso";
import { CatalogoDaXbz } from "@/components/xbz/catalogo-da-xbz";
import { PedidosDaXbz, type ProdutoParaComprar } from "@/components/xbz/pedidos-da-xbz";
import { quantidade, quando } from "@/components/xbz/formato";
import { getXbzDashboardState, saveXbzCredentials, type SituacaoDoCatalogo, type XbzDashboardState } from "@/lib/xbz/xbz.client";

type Aba = "catalogo" | "pedidos" | "configuracao";

/* A partir daqui o aviso de cota aparece. Abaixo disso o número não ajuda em
   nada e só ocupa a tela com uma preocupação que não é do dono da gráfica. */
const AVISAR_COTA_A_PARTIR_DE = 0.7;

function Passo({ pronto, titulo, detalhe }: { pronto: boolean; titulo: string; detalhe: string }) {
  return (
    <div className="flex items-start gap-3 border-t border-slate-100/60 px-6 py-3.5 first:border-t-0">
      {pronto ? <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" /> : <Circle className="mt-0.5 h-4 w-4 shrink-0 text-slate-300" />}
      <div>
        <p className="text-sm font-semibold text-[var(--ks-color-text-primary)]">{titulo}</p>
        <p className="text-sm text-[var(--ks-color-text-soft)]">{detalhe}</p>
      </div>
    </div>
  );
}

export default function XbzFornecedorPage() {
  const [painel, setPainel] = useState<XbzDashboardState | null>(null);
  const [carregando, setCarregando] = useState(true);
  const [aba, setAba] = useState<Aba>("catalogo");
  const [produto, setProduto] = useState<ProdutoParaComprar | null>(null);
  const [credenciais, setCredenciais] = useState({ cnpj: "", token: "" });
  const [salvando, setSalvando] = useState(false);

  const carregar = useCallback(async () => {
    try {
      const estado = await getXbzDashboardState();
      setPainel(estado);
      setCredenciais((atual) => ({ ...atual, cnpj: atual.cnpj || estado.credentials.cnpj || "" }));
      return estado;
    } catch (falha) {
      toast.error(falha instanceof Error ? falha.message : "Não foi possível abrir a integração com a XBZ.");
      return null;
    }
  }, []);

  useEffect(() => {
    void carregar().then((estado) => {
      if (estado && !estado.credentials.hasToken) setAba("configuracao");
      setCarregando(false);
    });
  }, [carregar]);

  const mudarCatalogo = useCallback((catalogo: SituacaoDoCatalogo) => {
    setPainel((atual) => (atual ? { ...atual, catalogo } : atual));
  }, []);

  async function salvarCredenciais() {
    setSalvando(true);
    try {
      const resposta = await saveXbzCredentials(credenciais.cnpj, credenciais.token);
      const mensagem = typeof resposta.message === "string" ? resposta.message : "";
      if (resposta.conectado) {
        toast.success(mensagem || "Conectado à XBZ.");
        setCredenciais((atual) => ({ ...atual, token: "" }));
      } else {
        toast.error(mensagem || "Os dados foram guardados, mas a XBZ não respondeu.");
      }
      const estado = await carregar();
      if (estado?.credentials.hasToken && resposta.conectado) setAba("catalogo");
    } catch (falha) {
      toast.error(falha instanceof Error ? falha.message : "Não foi possível salvar agora.");
    } finally {
      setSalvando(false);
    }
  }

  if (carregando || !painel) {
    return (
      <div className="space-y-6">
        <Toaster richColors position="top-right" />
        <PageHeader eyebrow="Fornecedores" title="XBZ Brindes" subtitle={carregando ? "Abrindo a integração com a XBZ..." : undefined} />
        {carregando ? (
          <div className="flex justify-center py-20">
            <Loader2 className="h-8 w-8 animate-spin text-[var(--ks-color-primary)]" />
          </div>
        ) : (
          <Aviso
            tom="ruim"
            titulo="A tela da XBZ não abriu"
            acao={
              <Button
                variant="outline"
                onClick={() => {
                  setCarregando(true);
                  void carregar().finally(() => setCarregando(false));
                }}
              >
                Tentar de novo
              </Button>
            }
          >
            Não foi possível carregar a integração agora. Se continuar, confira a conexão com a internet.
          </Aviso>
        )}
      </div>
    );
  }

  const conectado = painel.credentials.hasToken;
  const limite = painel.quota.dailyLimit || 24;
  const usadas = painel.quota.used || 0;
  const restantes = Math.max(0, limite - usadas);
  const cotaAcabou = restantes <= 0;
  const cotaApertada = limite > 0 && usadas / limite >= AVISAR_COTA_A_PARTIR_DE;
  const listasProntas = painel.cache.paymentTypes.length > 0 && painel.cache.deliveryTypes.length > 0;
  const abas: Array<{ id: Aba; rotulo: string; icone: typeof PackageSearch; contagem?: number }> = [
    { id: "catalogo", rotulo: "Catálogo", icone: PackageSearch },
    { id: "pedidos", rotulo: "Pedidos", icone: Truck, contagem: (painel.pedidos ?? []).filter((pedido) => pedido.statusMapeado !== "FINALIZADO" && pedido.statusMapeado !== "CANCELADO").length },
    { id: "configuracao", rotulo: "Configuração", icone: Settings2 },
  ];

  return (
    <div className="space-y-6 pb-10">
      <Toaster richColors position="top-right" />
      <PageHeader
        eyebrow="Fornecedores"
        title="XBZ Brindes"
        subtitle="O catálogo da XBZ com preço e estoque, a compra e o acompanhamento dos pedidos, sem sair da Ktalogu."
        actions={
          <Button variant="outline" onClick={() => void carregar().then(() => toast.success("Painel atualizado."))} icon={<RefreshCcw size={16} />}>
            Atualizar painel
          </Button>
        }
      />

      {/* O contador cru ("Usadas: 0/24") ficava sempre na tela e não dizia nada
          a quem só quer comprar brinde. O aviso aparece quando começa a
          apertar, e explica de quem é o limite. */}
      {conectado && cotaAcabou ? (
        <Aviso tom="ruim" titulo="As consultas de hoje na XBZ acabaram">
          A XBZ libera {limite} consultas por dia para cada CNPJ: o limite é dela, não da Ktalogu. A busca no catálogo continua
          funcionando com a cópia guardada; comprar, cancelar e conferir status voltam amanhã.
        </Aviso>
      ) : conectado && cotaApertada ? (
        <Aviso tom="atencao" titulo={`Restam ${restantes} das ${limite} consultas de hoje na XBZ`}>
          O limite é da XBZ, por CNPJ. A busca no catálogo não gasta consulta; pedido, cancelamento e status gastam.
        </Aviso>
      ) : null}

      <div className="flex items-center gap-6 border-b border-[var(--ks-color-border-subtle)]">
        {abas.map(({ id, rotulo, icone: Icone, contagem }) => (
          <button
            key={id}
            type="button"
            onClick={() => setAba(id)}
            className={`-mb-px flex items-center gap-2 border-b-2 pb-3 text-sm font-semibold transition-colors ${
              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="h-4 w-4" />
            {rotulo}
            {contagem ? (
              <span className="rounded-full bg-[var(--ks-color-primary)]/10 px-1.5 py-0.5 text-[10px] font-bold text-[var(--ks-color-primary)]">{contagem}</span>
            ) : null}
          </button>
        ))}
      </div>

      {aba === "catalogo" ? (
        <CatalogoDaXbz
          catalogoInicial={painel.catalogo ?? null}
          margemInicial={painel.margemDeVenda ?? null}
          conectado={conectado}
          aoMudarCatalogo={mudarCatalogo}
          aoComprar={(modelo, cor) => {
            setProduto({ modelo, cor });
            setAba("pedidos");
          }}
        />
      ) : aba === "pedidos" ? (
        <PedidosDaXbz painel={painel} produto={produto} cotaAcabou={cotaAcabou} aoEscolherProduto={() => setAba("catalogo")} aoMudarPainel={carregar} />
      ) : (
        <div className="grid gap-6 xl:grid-cols-12">
          <div className="ks-surface space-y-4 rounded-xl border border-[var(--ks-color-border-subtle)] p-6 shadow-sm xl:col-span-5">
            <div>
              <h3 className="text-base font-bold text-[var(--ks-color-text-primary)]">Sua conta na XBZ</h3>
              <p className="text-sm text-[var(--ks-color-text-soft)]">O CNPJ cadastrado na XBZ e o token que ela manda para você.</p>
            </div>
            <Input
              label="CNPJ cadastrado na XBZ"
              placeholder="Somente números"
              value={credenciais.cnpj}
              onChange={(evento) => setCredenciais((atual) => ({ ...atual, cnpj: evento.target.value }))}
            />
            <Input
              label="Token"
              type="password"
              placeholder={painel.credentials.tokenMasked || "A XBZ envia esse código para você"}
              value={credenciais.token}
              onChange={(evento) => setCredenciais((atual) => ({ ...atual, token: evento.target.value }))}
            />
            <p className="text-xs text-[var(--ks-color-text-soft)]">
              Ao salvar, a Ktalogu já confere com a XBZ se os dados estão certos e traz as formas de entrega, de pagamento e as transportadoras.
            </p>
            <Button
              onClick={() => void salvarCredenciais()}
              disabled={salvando || !credenciais.cnpj.trim() || !credenciais.token.trim()}
              icon={salvando ? <Loader2 className="h-4 w-4 animate-spin" /> : <ShieldCheck size={16} />}
            >
              Salvar e conectar
            </Button>
          </div>

          <div className="ks-surface overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] shadow-sm xl:col-span-7">
            <div className="border-b border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-subtle)]/30 px-6 py-4">
              <h3 className="text-base font-bold text-[var(--ks-color-text-primary)]">Como está a integração</h3>
            </div>
            <Passo
              pronto={conectado}
              titulo="Conta da XBZ ligada"
              detalhe={conectado ? `CNPJ ${painel.credentials.cnpj}.` : "Falta salvar o CNPJ e o token ao lado."}
            />
            <Passo
              pronto={listasProntas}
              titulo="Formas de entrega e de pagamento"
              detalhe={
                listasProntas
                  ? `${painel.cache.deliveryTypes.length} de entrega, ${painel.cache.paymentTypes.length} de pagamento, ${painel.cache.transportadoras.length} transportadoras e ${painel.cache.gravacoes.length} empresas de gravação.`
                  : "Chegam sozinhas quando você salva as credenciais."
              }
            />
            <Passo
              pronto={Boolean(painel.catalogo?.atualizadoEm)}
              titulo="Catálogo da XBZ guardado"
              detalhe={
                painel.catalogo?.atualizadoEm
                  ? `${quantidade(painel.catalogo.modelos)} produtos em ${quantidade(painel.catalogo.itens)} cores, com preço e estoque de ${quando(painel.catalogo.atualizadoEm)}. Atualiza sozinho a cada 6 horas, quando alguém busca.`
                  : "Chega na primeira busca, na aba Catálogo (leva uns 30 segundos)."
              }
            />
            <Passo
              pronto={Boolean(painel.ultimaSincronizacao)}
              titulo="Status dos pedidos"
              detalhe={
                painel.ultimaSincronizacao
                  ? `Última conferência automática: ${quando(painel.ultimaSincronizacao)}. Acontece de madrugada, uma vez por dia, quando há pedido em aberto.`
                  : "A conferência automática acontece de madrugada, uma vez por dia, quando há pedido em aberto."
              }
            />
            <div className="border-t border-[var(--ks-color-border-subtle)] px-6 py-4 text-xs leading-5 text-[var(--ks-color-text-soft)]">
              A XBZ libera {limite} consultas por dia para cada CNPJ{conectado ? ` (hoje: ${usadas} usadas)` : ""}. O catálogo inteiro vem numa consulta só e a busca é
              feita aqui, então as consultas ficam para comprar, cancelar e conferir status.
            </div>
          </div>
        </div>
      )}
    </div>
  );
}