"use client";

/*
 * Comprar da XBZ e acompanhar os pedidos.
 *
 * O pedido sai com confirmação: é compra de verdade, e a pessoa vê antes o
 * produto, a cor, a quantidade e quanto vai custar. O número que a XBZ
 * devolve aparece na hora, e a lista abre com os pedidos guardados (sem gastar
 * consulta); "Atualizar da XBZ" pergunta o status de todos de uma vez.
 */

import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { Loader2, PackageSearch, RefreshCcw, Search, Truck, XCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Aviso } from "@/components/ui/aviso";
import { CustomSelect } from "@/components/ui/custom-select";
import { EntradaDecimal } from "@/components/ui/campo-decimal";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import { nomeParaLoja, type CorDoCatalogo, type ModeloDoCatalogo } from "@/lib/xbz/xbz.catalogo";
import type { PedidoXbzResumo } from "@/lib/xbz/xbz.pedido";
import { ROTULO_DO_STATUS, STATUS_FINAIS } from "@/lib/xbz/xbz.status";
import { cancelXbzOrder, createXbzOrder, listXbzOrders, syncXbzAuxiliary, type XbzDashboardState } from "@/lib/xbz/xbz.client";
import { emReais, quando, quantidade } from "./formato";

export type ProdutoParaComprar = { modelo: ModeloDoCatalogo; cor: CorDoCatalogo };

const TOM_DO_STATUS: Record<string, { fundo: string; bolinha: string }> = {
  AGUARDANDO: { fundo: "bg-slate-100 text-slate-600", bolinha: "bg-slate-400" },
  PRODUCAO: { fundo: "bg-[var(--ks-color-primary)]/10 text-[var(--ks-color-primary)]", bolinha: "bg-[var(--ks-color-primary)]" },
  PRONTO: { fundo: "bg-emerald-50 text-emerald-700", bolinha: "bg-emerald-500" },
  ENVIADO: { fundo: "bg-sky-50 text-sky-700", bolinha: "bg-sky-500" },
  FINALIZADO: { fundo: "bg-emerald-50 text-emerald-700", bolinha: "bg-emerald-600" },
  CANCELADO: { fundo: "bg-rose-50 text-rose-600", bolinha: "bg-rose-500" },
};

function novaOrdemDeCompra() {
  const agora = new Date();
  const dois = (valor: number) => String(valor).padStart(2, "0");
  return `OC-${agora.getFullYear()}${dois(agora.getMonth() + 1)}${dois(agora.getDate())}${dois(agora.getHours())}${dois(agora.getMinutes())}${dois(agora.getSeconds())}`;
}

/* A XBZ manda junto uma entrega "XBZ: processo interno", que não é escolha de
   quem compra. */
const opcoesDe = (lista: Array<Record<string, unknown>>) =>
  lista
    .filter((item) => !/processo interno/i.test(String(item.descricao ?? "")))
    .map((item) => ({
      value: String(Number(item.id || 0)),
      label: String(item.razaoSocialNome || item.nomeFantasia || item.nome || item.descricao || item.id || "Sem nome"),
      description: item.nome && item.descricao ? String(item.descricao) : undefined,
    }));

/* A última forma de pagamento e de entrega usada fica lembrada neste
   navegador: marcar a primeira da lista mandava pedido "em dinheiro, retira
   no balcão" sem a pessoa perceber. */
const CHAVE_DA_ULTIMA_COMPRA = "ktalogu:xbz:ultima-compra";

function lerUltimaCompra(): { pagamentoTipoId: number; entregaTipoId: number; transporteId: number } | null {
  try {
    const guardada = JSON.parse(window.localStorage.getItem(CHAVE_DA_ULTIMA_COMPRA) ?? "null") as Record<string, unknown> | null;
    if (!guardada) return null;
    return {
      pagamentoTipoId: Number(guardada.pagamentoTipoId) || 0,
      entregaTipoId: Number(guardada.entregaTipoId) || 0,
      transporteId: Number(guardada.transporteId) || 0,
    };
  } catch {
    return null;
  }
}

function guardarUltimaCompra(compra: { pagamentoTipoId: number; entregaTipoId: number; transporteId: number }) {
  try {
    window.localStorage.setItem(CHAVE_DA_ULTIMA_COMPRA, JSON.stringify(compra));
  } catch {
    /* Sem armazenamento no navegador, a próxima compra começa em branco. */
  }
}

export function PedidosDaXbz({
  painel,
  produto,
  cotaAcabou,
  aoEscolherProduto,
  aoMudarPainel,
}: {
  painel: XbzDashboardState;
  produto: ProdutoParaComprar | null;
  cotaAcabou: boolean;
  aoEscolherProduto: () => void;
  aoMudarPainel: () => Promise<unknown>;
}) {
  const pagamentos = painel.cache.paymentTypes;
  const entregas = painel.cache.deliveryTypes;
  const transportes = useMemo(() => [...painel.cache.transportadoras, ...painel.cache.gravacoes], [painel.cache.transportadoras, painel.cache.gravacoes]);

  const [codigoDigitado, setCodigoDigitado] = useState("");
  const [rascunho, setRascunho] = useState({
    pedidoLocalId: "",
    ordemDeCompra: novaOrdemDeCompra(),
    pagamentoTipoId: 0,
    entregaTipoId: 0,
    transporteId: 0,
    quantidade: 0,
    detalhes: "",
  });
  const [enviando, setEnviando] = useState(false);
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const [pedidos, setPedidos] = useState<PedidoXbzResumo[]>(painel.pedidos ?? []);
  const [filtro, setFiltro] = useState("TODOS");
  const [dias, setDias] = useState("60");
  const [atualizando, setAtualizando] = useState(false);
  const [cancelando, setCancelando] = useState<string | null>(null);
  const [numeroParaCancelar, setNumeroParaCancelar] = useState("");
  const [trazendoListas, setTrazendoListas] = useState(false);

  useEffect(() => setPedidos(painel.pedidos ?? []), [painel.pedidos]);

  /* Produto escolhido no catálogo: a quantidade já nasce no mínimo da XBZ. */
  useEffect(() => {
    if (!produto) return;
    setCodigoDigitado("");
    setRascunho((atual) => ({
      ...atual,
      quantidade: Math.max(atual.quantidade, produto.cor.pedidoMinimo ?? produto.modelo.pedidoMinimo ?? 1),
    }));
  }, [produto]);

  /* A última compra deste navegador, se as opções ainda existem na XBZ. */
  useEffect(() => {
    const ultima = lerUltimaCompra();
    if (!ultima) return;
    const existe = (lista: Array<Record<string, unknown>>, id: number) => lista.some((item) => Number(item.id) === id);
    setRascunho((atual) => ({
      ...atual,
      pagamentoTipoId: atual.pagamentoTipoId || (existe(pagamentos, ultima.pagamentoTipoId) ? ultima.pagamentoTipoId : 0),
      entregaTipoId: atual.entregaTipoId || (existe(entregas, ultima.entregaTipoId) ? ultima.entregaTipoId : 0),
      transporteId: atual.transporteId || (existe(transportes, ultima.transporteId) ? ultima.transporteId : 0),
    }));
  }, [pagamentos, entregas, transportes]);

  const precisaTransporte = rascunho.entregaTipoId === 30 || rascunho.entregaTipoId === 40;
  const codigoXbz = produto?.cor.codigoXbz ?? codigoDigitado.trim().toUpperCase();
  const listasProntas = pagamentos.length > 0 && entregas.length > 0;
  const cor = produto?.cor ?? null;
  const total = cor?.preco ? Math.round(cor.preco * rascunho.quantidade * 100) / 100 : null;
  const minimo = cor?.pedidoMinimo ?? null;
  const multiplo = cor?.multiploDe ?? null;

  const alertas = useMemo(() => {
    const lista: string[] = [];
    if (!cor || rascunho.quantidade <= 0) return lista;
    if (minimo && rascunho.quantidade < minimo) lista.push(`A XBZ pede no mínimo ${quantidade(minimo)} peças deste produto.`);
    if (multiplo && rascunho.quantidade % multiplo !== 0) lista.push(`A XBZ só vende este produto em múltiplos de ${quantidade(multiplo)}.`);
    if (rascunho.quantidade > cor.estoque) {
      lista.push(
        cor.estoque > 0
          ? `A XBZ tinha ${quantidade(cor.estoque)} peças nesta cor na última atualização do catálogo.`
          : "Esta cor estava sem estoque na última atualização do catálogo."
      );
    } else if (rascunho.quantidade > cor.estoquePrincipal && cor.estoquePrincipal >= 0) {
      lista.push(`Só ${quantidade(cor.estoquePrincipal)} estão no depósito principal: o resto pode demorar mais para sair.`);
    }
    return lista;
  }, [cor, minimo, multiplo, rascunho.quantidade]);

  const podeEnviar =
    listasProntas &&
    !cotaAcabou &&
    Boolean(codigoXbz) &&
    rascunho.quantidade > 0 &&
    rascunho.pagamentoTipoId > 0 &&
    rascunho.entregaTipoId > 0 &&
    Boolean(rascunho.ordemDeCompra.trim()) &&
    (!precisaTransporte || rascunho.transporteId > 0);

  const nomeDe = (lista: Array<Record<string, unknown>>, id: number) => opcoesDe(lista).find((opcao) => Number(opcao.value) === id)?.label ?? "";

  function pedirEnvio() {
    if (!podeEnviar) return;
    const descricao = produto ? `${nomeParaLoja(produto.modelo.nome)}${produto.modelo.cores.length > 1 ? ` (${produto.cor.cor})` : ""}` : `o produto ${codigoXbz}`;
    const partes = [
      total !== null ? `Cerca de ${emReais(total)} (${emReais(cor?.preco ?? null)} cada, pelo catálogo).` : null,
      `Pagamento: ${nomeDe(pagamentos, rascunho.pagamentoTipoId)}. Entrega: ${nomeDe(entregas, rascunho.entregaTipoId)}${
        precisaTransporte ? ` (${nomeDe(transportes, rascunho.transporteId)})` : ""
      }.`,
      ...alertas,
      "É uma compra de verdade na XBZ, no seu CNPJ.",
    ].filter(Boolean);
    setConfirmacao({
      titulo: `Comprar ${quantidade(rascunho.quantidade)} × ${descricao}?`,
      texto: partes.join(" "),
      confirmar: "Sim, enviar pedido",
      aoConfirmar: () => {
        setConfirmacao(null);
        return enviar();
      },
    });
  }

  async function enviar() {
    setEnviando(true);
    try {
      const resposta = await createXbzOrder({
        pedidoLocalId: rascunho.pedidoLocalId || undefined,
        ordemDeCompra: rascunho.ordemDeCompra.trim(),
        pagamentoTipoId: rascunho.pagamentoTipoId,
        entregaTipoId: rascunho.entregaTipoId,
        entregaTransportadoraGravacaoId: precisaTransporte ? rascunho.transporteId : null,
        produtoCodigoXbz: codigoXbz,
        quantidade: rascunho.quantidade,
        detalhes: rascunho.detalhes,
      });
      toast.success(resposta.numero ? `Pedido ${resposta.numero} criado na XBZ.` : "Pedido enviado para a XBZ.");
      guardarUltimaCompra({ pagamentoTipoId: rascunho.pagamentoTipoId, entregaTipoId: rascunho.entregaTipoId, transporteId: rascunho.transporteId });
      const novo = resposta.pedido;
      if (novo) setPedidos((atual) => [novo, ...atual.filter((pedido) => pedido.numero !== novo.numero)]);
      setRascunho((atual) => ({ ...atual, pedidoLocalId: "", ordemDeCompra: novaOrdemDeCompra(), quantidade: 0, detalhes: "" }));
      setCodigoDigitado("");
      void aoMudarPainel();
    } catch (falha) {
      toast.error(falha instanceof Error ? falha.message : "Não foi possível enviar o pedido.");
      void aoMudarPainel();
    } finally {
      setEnviando(false);
    }
  }

  async function atualizarDaXbz() {
    setAtualizando(true);
    try {
      const resposta = await listXbzOrders({ qtd_dias: Number(dias), exibir_finalizados: true, exibir_cancelados: true });
      const daXbz = resposta.pedidos ?? [];
      setPedidos((atual) => {
        const porNumero = new Map(atual.map((pedido) => [pedido.numero, pedido]));
        for (const pedido of daXbz) porNumero.set(pedido.numero, { ...porNumero.get(pedido.numero), ...pedido, pedidoLocalId: pedido.pedidoLocalId ?? porNumero.get(pedido.numero)?.pedidoLocalId ?? null });
        return [...porNumero.values()].sort((a, b) => String(b.emissao ?? "").localeCompare(String(a.emissao ?? "")));
      });
      toast.success(daXbz.length ? `${daXbz.length} pedidos conferidos com a XBZ.` : "A XBZ não tem pedidos nesse período.");
    } catch (falha) {
      toast.error(falha instanceof Error ? falha.message : "Não foi possível falar com a XBZ agora.");
    } finally {
      setAtualizando(false);
      void aoMudarPainel();
    }
  }

  function pedirCancelamento(numero: string) {
    const limpo = numero.trim().toUpperCase();
    if (!limpo) return;
    setConfirmacao({
      titulo: `Cancelar o pedido ${limpo} na XBZ?`,
      texto: "A XBZ só aceita cancelamento enquanto o pedido não entrou em produção. Se já entrou, ela recusa e nada muda.",
      confirmar: "Sim, cancelar",
      tom: "perigo",
      aoConfirmar: async () => {
        setConfirmacao(null);
        setCancelando(limpo);
        try {
          await cancelXbzOrder(limpo);
          toast.success(`Pedido ${limpo}: a XBZ recebeu o cancelamento.`);
          setPedidos((atual) =>
            atual.map((pedido) => (pedido.numero === limpo ? { ...pedido, statusXbz: "PEDIDO CANCELADO", statusMapeado: "CANCELADO" } : pedido))
          );
          setNumeroParaCancelar("");
        } catch (falha) {
          toast.error(falha instanceof Error ? falha.message : "Não foi possível cancelar agora.");
        } finally {
          setCancelando(null);
          void aoMudarPainel();
        }
      },
    });
  }

  const filtrados = filtro === "TODOS" ? pedidos : pedidos.filter((pedido) => pedido.statusMapeado === filtro);
  const emAndamento = pedidos.filter((pedido) => !STATUS_FINAIS.has(pedido.statusMapeado)).length;

  const opcoesDePedidoLocal = useMemo(
    () => [
      { value: "", label: "Compra avulsa (não veio de um pedido meu)" },
      ...(painel.pedidosRecentes ?? []).map((pedido) => ({
        value: pedido.id,
        label: `Pedido ${pedido.numero || "sem número"}${pedido.cliente ? ` · ${pedido.cliente}` : ""}`,
        description: [pedido.criadoEm ? quando(pedido.criadoEm) : null, typeof pedido.valorTotal === "number" ? emReais(pedido.valorTotal) : null]
          .filter(Boolean)
          .join(" · "),
      })),
    ],
    [painel.pedidosRecentes]
  );

  return (
    <div className="space-y-6">
      <div className="ks-surface overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] shadow-sm">
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-subtle)]/30 px-6 py-4">
          <div>
            <h3 className="text-base font-bold text-[var(--ks-color-text-primary)]">Comprar da XBZ</h3>
            <p className="text-sm text-[var(--ks-color-text-soft)]">Escolha o produto no catálogo, diga quantas peças e como paga e recebe.</p>
          </div>
          <Button variant="outline" size="sm" icon={<Search className="h-3.5 w-3.5" />} onClick={aoEscolherProduto}>
            {produto ? "Trocar produto" : "Escolher no catálogo"}
          </Button>
        </div>

        <div className="space-y-5 p-6">
          {produto ? (
            <div className="flex flex-wrap items-center gap-4">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              {produto.cor.imagem ? <img src={produto.cor.imagem} alt="" className="h-16 w-16 rounded-xl border border-slate-100 bg-white object-contain" /> : null}
              <div className="min-w-0 flex-1">
                <p className="font-semibold text-[var(--ks-color-text-primary)]">{nomeParaLoja(produto.modelo.nome)}</p>
                <p className="text-sm text-[var(--ks-color-text-soft)]">
                  {produto.modelo.cores.length > 1 ? `${produto.cor.cor} · ` : ""}
                  {produto.cor.codigoComposto} · {emReais(produto.cor.preco)} cada · {quantidade(produto.cor.estoque)} em estoque
                </p>
              </div>
              {produto.modelo.cores.length > 1 ? <p className="text-xs text-slate-400">Para outra cor, abra o produto no catálogo.</p> : null}
            </div>
          ) : (
            <div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end">
              <Input
                label="Código XBZ do produto"
                placeholder="Ex.: X000493"
                value={codigoDigitado}
                onChange={(evento) => setCodigoDigitado(evento.target.value)}
              />
              <p className="pb-2 text-xs text-slate-400">Ou escolha no catálogo para ver preço, cor e estoque antes de comprar.</p>
            </div>
          )}

          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            <EntradaDecimal
              label="Quantidade de peças"
              valor={rascunho.quantidade}
              aoMudar={(valor) => setRascunho((atual) => ({ ...atual, quantidade: Math.round(valor) }))}
              casas={0}
              zeroVazio
              placeholder={minimo ? `Mínimo ${minimo}` : "0"}
            />
            <CustomSelect
              label="Forma de pagamento"
              value={rascunho.pagamentoTipoId > 0 ? String(rascunho.pagamentoTipoId) : ""}
              onChange={(valor) => setRascunho((atual) => ({ ...atual, pagamentoTipoId: Number(valor) }))}
              options={opcoesDe(pagamentos)}
              placeholder="Escolha"
            />
            <CustomSelect
              label="Forma de entrega"
              value={rascunho.entregaTipoId > 0 ? String(rascunho.entregaTipoId) : ""}
              onChange={(valor) => setRascunho((atual) => ({ ...atual, entregaTipoId: Number(valor) }))}
              options={opcoesDe(entregas)}
              placeholder="Escolha"
            />
            {precisaTransporte ? (
              <CustomSelect
                label={rascunho.entregaTipoId === 40 ? "Empresa de gravação" : "Transportadora"}
                value={rascunho.transporteId > 0 ? String(rascunho.transporteId) : ""}
                onChange={(valor) => setRascunho((atual) => ({ ...atual, transporteId: Number(valor) }))}
                options={opcoesDe(rascunho.entregaTipoId === 40 ? painel.cache.gravacoes : painel.cache.transportadoras)}
                placeholder="Escolha"
                searchable
              />
            ) : null}
            <CustomSelect
              label="Para qual pedido seu"
              value={rascunho.pedidoLocalId}
              onChange={(valor) => setRascunho((atual) => ({ ...atual, pedidoLocalId: valor }))}
              options={opcoesDePedidoLocal}
              placeholder="Compra avulsa (não veio de um pedido meu)"
              searchable
            />
            <Input
              label="Sua ordem de compra"
              value={rascunho.ordemDeCompra}
              onChange={(evento) => setRascunho((atual) => ({ ...atual, ordemDeCompra: evento.target.value }))}
            />
            <div className="md:col-span-2 xl:col-span-3">
              <Input
                label="Observações para a XBZ"
                placeholder="Ex.: gravação em 1 cor, logo enviado por e-mail"
                value={rascunho.detalhes}
                onChange={(evento) => setRascunho((atual) => ({ ...atual, detalhes: evento.target.value }))}
              />
            </div>
          </div>

          {!listasProntas ? (
            <Aviso
              tom="atencao"
              titulo="Faltam as formas de pagamento e de entrega"
              acao={
                <Button
                  size="sm"
                  variant="outline"
                  disabled={trazendoListas || cotaAcabou}
                  onClick={async () => {
                    setTrazendoListas(true);
                    try {
                      await syncXbzAuxiliary();
                      await aoMudarPainel();
                      toast.success("Listas da XBZ atualizadas.");
                    } catch (falha) {
                      toast.error(falha instanceof Error ? falha.message : "Não foi possível falar com a XBZ agora.");
                    } finally {
                      setTrazendoListas(false);
                    }
                  }}
                >
                  {trazendoListas ? <Loader2 className="h-4 w-4 animate-spin" /> : "Buscar agora"}
                </Button>
              }
            >
              Elas chegam da XBZ quando você salva as credenciais. Sem elas, não dá para comprar.
            </Aviso>
          ) : null}

          {alertas.length ? (
            <Aviso tom="atencao">
              {alertas.map((alerta) => (
                <span key={alerta} className="block">
                  {alerta}
                </span>
              ))}
            </Aviso>
          ) : null}

          <div className="flex flex-wrap items-center justify-between gap-3 border-t border-[var(--ks-color-border-subtle)] pt-4">
            <div className="text-sm text-[var(--ks-color-text-soft)]">
              {total !== null ? (
                <>
                  Total estimado <strong className="text-lg tabular-nums text-[var(--ks-color-text-primary)]">{emReais(total)}</strong>
                  <span className="ml-1 text-xs">(o valor final é o da XBZ)</span>
                </>
              ) : cotaAcabou ? (
                "As consultas de hoje na XBZ acabaram: amanhã volta ao normal."
              ) : null}
            </div>
            <Button onClick={pedirEnvio} disabled={!podeEnviar || enviando} icon={enviando ? <Loader2 className="h-4 w-4 animate-spin" /> : <Truck size={16} />}>
              Enviar pedido para a XBZ
            </Button>
          </div>
        </div>
      </div>

      <div className="ks-surface overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] shadow-sm">
        <div className="flex flex-wrap items-center justify-between gap-x-4 gap-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 gap-3">
            <h3 className="text-base font-bold text-[var(--ks-color-text-primary)]">Pedidos na XBZ</h3>
            <div className="flex items-center gap-4 text-xs font-medium text-slate-500">
              <span className="flex items-center gap-1.5">
                <span className="h-1.5 w-1.5 rounded-full bg-[var(--ks-color-primary)]" />
                {emAndamento} em andamento
              </span>
              <span className="flex items-center gap-1.5">
                <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
                {pedidos.filter((pedido) => pedido.statusMapeado === "FINALIZADO").length} finalizados
              </span>
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <CustomSelect
              value={filtro}
              onChange={setFiltro}
              size="sm"
              options={[{ value: "TODOS", label: "Todos" }, ...Object.entries(ROTULO_DO_STATUS).map(([value, label]) => ({ value, label }))]}
            />
            <CustomSelect
              value={dias}
              onChange={setDias}
              size="sm"
              options={[
                { value: "15", label: "Últimos 15 dias" },
                { value: "30", label: "Últimos 30 dias" },
                { value: "60", label: "Últimos 60 dias" },
                { value: "120", label: "Últimos 120 dias" },
              ]}
            />
            <Button
              variant="outline"
              size="sm"
              onClick={() => void atualizarDaXbz()}
              disabled={atualizando || cotaAcabou}
              title="Pergunta à XBZ o status de todos os pedidos do período (uma consulta)"
              icon={atualizando ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCcw className="h-3.5 w-3.5" />}
            >
              Atualizar da XBZ
            </Button>
          </div>
        </div>

        {filtrados.length === 0 ? (
          <div className="flex flex-col items-center justify-center px-6 py-14 text-center">
            <div className="mb-3 rounded-full bg-slate-50 p-4">
              <PackageSearch className="h-8 w-8 text-slate-300" />
            </div>
            <h3 className="text-base font-semibold text-slate-900">{pedidos.length ? "Nenhum pedido nessa situação" : "Nenhum pedido guardado ainda"}</h3>
            <p className="mt-1 max-w-md text-sm text-slate-500">
              Os pedidos feitos por aqui aparecem na hora. Os feitos direto com a XBZ chegam quando você clica em Atualizar da XBZ.
            </p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <div className="min-w-[820px]">
              <div className="grid grid-cols-[150px_minmax(0,1fr)_120px_190px_56px] gap-3 px-6 py-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-400">
                <span>Pedido</span>
                <span>Produto</span>
                <span>Valor</span>
                <span>Situação</span>
                <span />
              </div>
              {filtrados.map((pedido) => {
                const tom = TOM_DO_STATUS[pedido.statusMapeado] ?? TOM_DO_STATUS.AGUARDANDO;
                const final = STATUS_FINAIS.has(pedido.statusMapeado);
                return (
                  <div
                    key={pedido.numero}
                    className="grid grid-cols-[150px_minmax(0,1fr)_120px_190px_56px] items-center gap-3 border-t border-slate-100/60 px-6 py-3 transition-colors hover:bg-[var(--ks-color-bg-subtle)]/50"
                  >
                    <div className="min-w-0">
                      <p className="text-sm font-bold tabular-nums text-[var(--ks-color-text-primary)]">{pedido.numero}</p>
                      <p className="truncate text-[11px] text-slate-400">{quando(pedido.emissao)}</p>
                    </div>
                    <div className="min-w-0">
                      <p className="truncate text-sm font-medium text-[var(--ks-color-text-primary)]">
                        {pedido.quantidade ? `${quantidade(pedido.quantidade)} × ` : ""}
                        {pedido.produto ? nomeParaLoja(pedido.produto) : pedido.codigoXbz || "Produto"}
                      </p>
                      <p className="truncate text-[11px] text-slate-400">
                        {[pedido.codigoComposto, pedido.pagamento, pedido.transportadora || pedido.entrega, pedido.ordemDeCompra].filter(Boolean).join(" · ")}
                      </p>
                    </div>
                    <div className="text-sm font-bold tabular-nums text-[var(--ks-color-text-primary)]">{emReais(pedido.valorTotal)}</div>
                    <div className="min-w-0">
                      <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ${tom.fundo}`}>
                        <span className={`h-1.5 w-1.5 rounded-full ${tom.bolinha}`} />
                        {ROTULO_DO_STATUS[pedido.statusMapeado]}
                      </span>
                      {pedido.statusXbz ? <p className="mt-0.5 truncate text-[11px] text-slate-400" title={pedido.statusXbz}>{pedido.statusXbz.toLowerCase()}</p> : null}
                    </div>
                    <div className="flex justify-end">
                      <Button
                        size="icon"
                        variant="ghost"
                        title={final ? "Pedido encerrado" : "Pedir o cancelamento à XBZ"}
                        disabled={final || cancelando === pedido.numero || cotaAcabou}
                        onClick={() => pedirCancelamento(pedido.numero)}
                      >
                        {cancelando === pedido.numero ? <Loader2 className="h-4 w-4 animate-spin" /> : <XCircle className="h-4 w-4 text-rose-500" />}
                      </Button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        <div className="flex flex-wrap items-center gap-2 border-t border-[var(--ks-color-border-subtle)] px-6 py-4">
          <div className="w-full max-w-xs">
            <Input
              placeholder="Número de um pedido que não está na lista"
              value={numeroParaCancelar}
              onChange={(evento) => setNumeroParaCancelar(evento.target.value)}
            />
          </div>
          <Button
            variant="outline"
            size="sm"
            disabled={!numeroParaCancelar.trim() || Boolean(cancelando) || cotaAcabou}
            onClick={() => pedirCancelamento(numeroParaCancelar)}
            icon={<XCircle className="h-3.5 w-3.5" />}
          >
            Cancelar esse pedido
          </Button>
        </div>
      </div>

      <CaixaDeConfirmacao pedido={confirmacao} ocupado={enviando || Boolean(cancelando)} aoFechar={() => setConfirmacao(null)} />
    </div>
  );
}