"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import {
  AlertTriangle,
  Ban,
  CheckCircle2,
  Download,
  FileText,
  Inbox,
  ListChecks,
  Loader2,
  MessageSquareReply,
  RefreshCw,
  Search,
  ShieldQuestion,
} from "lucide-react";

import { chaveEmBlocos, dataCurta, documentoFormatado, haQuantoTempo, moeda, pedirFiscal, SeloDoStatus } from "@/components/fiscal/comum";
import { Dica } from "@/components/fiscal/dica";
import { Aviso } from "@/components/ui/aviso";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { PageHeader } from "@/components/ui/page-header";
import { Switch } from "@/components/ui/switch";
import { usePermissoes } from "@/lib/permissoes-do-usuario";

type Emitente = { nome: string | null; razaoSocial: string | null; documento: string | null } | null;

type Recebida = {
  id: string;
  modelo: "nfe" | "nfse";
  chave: string | null;
  status: "autorizada" | "denegada" | "cancelada";
  completa: boolean;
  manifestacao: "nenhuma" | "ciencia" | "confirmada" | "desconhecida" | "nao_realizada" | "recusada";
  manifestada_em: string | null;
  justificativa: string | null;
  emitente: Emitente;
  valor: number;
  emitida_em: string | null;
  vista_em: string | null;
  created_at: string;
};

type Resposta = {
  notas: Recebida[];
  ligado: boolean;
  desde: string | null;
  configurada: boolean;
  podeResponder: boolean;
  podeLigar: boolean;
};

type TipoDeResposta = "ciencia" | "confirmada" | "desconhecida" | "nao_realizada";

const RESPOSTAS: Array<{ chave: TipoDeResposta; rotulo: string; explicacao: string; exigeMotivo: boolean; definitiva: boolean }> = [
  {
    chave: "ciencia",
    rotulo: "Dar ciência",
    explicacao: "Avisa que você viu a nota, sem dizer se concorda. Libera o arquivo completo e pode ser trocada depois.",
    exigeMotivo: false,
    definitiva: false,
  },
  {
    chave: "confirmada",
    rotulo: "Confirmar a compra",
    explicacao: "Você reconhece a operação e confirma que ela aconteceu.",
    exigeMotivo: false,
    definitiva: true,
  },
  {
    chave: "desconhecida",
    rotulo: "Não reconheço",
    explicacao: "Nota emitida no nome da empresa sem que ela tenha comprado nada.",
    exigeMotivo: true,
    definitiva: true,
  },
  {
    chave: "nao_realizada",
    rotulo: "A compra não aconteceu",
    explicacao: "Era para a empresa, mas não se concretizou — mercadoria recusada, por exemplo.",
    exigeMotivo: true,
    definitiva: true,
  },
];

const NOME_DA_RESPOSTA: Record<Recebida["manifestacao"], string> = {
  nenhuma: "Sem resposta",
  ciencia: "Ciência dada",
  confirmada: "Confirmada",
  desconhecida: "Não reconhecida",
  nao_realizada: "Não aconteceu",
  recusada: "Recusada pela SEFAZ",
};

/* As abas da página, no sublinhado da casa (o mesmo desenho do Estoque). */
const ABAS = [
  { chave: "todas", rotulo: "Todas", icone: ListChecks },
  { chave: "sem_resposta", rotulo: "Sem resposta", icone: ShieldQuestion },
  { chave: "respondidas", rotulo: "Respondidas", icone: CheckCircle2 },
  { chave: "canceladas", rotulo: "Canceladas", icone: Ban },
] as const;

export default function NotasRecebidasCliente() {
  const { pode } = usePermissoes();
  const [dados, setDados] = useState<Resposta | null>(null);
  const [carregando, setCarregando] = useState(true);
  const [buscando, setBuscando] = useState(false);
  const [erro, setErro] = useState<string | null>(null);
  const [aviso, setAviso] = useState<string | null>(null);
  const [aba, setAba] = useState<(typeof ABAS)[number]["chave"]>("todas");
  const [termo, setTermo] = useState("");
  const [respondendo, setRespondendo] = useState<Recebida | null>(null);
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const [ligando, setLigando] = useState(false);

  const carregar = useCallback(
    async (marcarVistas = false) => {
      setCarregando(true);
      setErro(null);
      try {
        const busca = new URLSearchParams({ situacao: aba });
        if (termo.trim()) busca.set("q", termo.trim());
        if (marcarVistas) busca.set("marcarVistas", "1");
        setDados(await pedirFiscal<Resposta>(`/api/fiscal/recebidas?${busca.toString()}`));
      } catch (e) {
        setErro(e instanceof Error ? e.message : "Não foi possível carregar as notas recebidas.");
      } finally {
        setCarregando(false);
      }
    },
    [aba, termo]
  );

  useEffect(() => {
    const relogio = setTimeout(() => void carregar(true), termo ? 350 : 0);
    return () => clearTimeout(relogio);
  }, [carregar, termo]);

  const buscarAgora = async () => {
    setBuscando(true);
    setErro(null);
    setAviso(null);
    try {
      const resultado = await pedirFiscal<Resposta & { novas: number; atualizadas: number; esperarSegundos: number | null }>(
        "/api/fiscal/recebidas",
        { method: "POST", json: { buscarAgora: true } }
      );
      setDados((antes) => ({ ...(antes as Resposta), ...resultado }));
      if (resultado.novas > 0) setAviso(`${resultado.novas} ${resultado.novas === 1 ? "nota nova" : "notas novas"} chegaram.`);
      else if (resultado.esperarSegundos)
        setAviso(
          `A Secretaria da Fazenda limita quantas vezes cada empresa pode consultar. Dá para pedir de novo em ${Math.ceil(resultado.esperarSegundos / 60)} min.`
        );
      else setAviso("Nenhuma nota nova por enquanto.");
    } catch (e) {
      setErro(e instanceof Error ? e.message : "Não foi possível buscar agora.");
    } finally {
      setBuscando(false);
    }
  };

  const ligarRecebimento = async (ligado: boolean) => {
    setLigando(true);
    setErro(null);
    try {
      const resultado = await pedirFiscal<Resposta>("/api/fiscal/recebidas", { method: "PUT", json: { ligado } });
      setDados((antes) => ({ ...(antes as Resposta), ...resultado }));
      setAviso(
        ligado
          ? "Pronto. A partir de agora as notas emitidas contra o seu CNPJ aparecem aqui sozinhas."
          : "Busca desligada. As notas já trazidas continuam guardadas."
      );
    } catch (e) {
      setErro(e instanceof Error ? e.message : "Não foi possível mudar isso agora.");
    } finally {
      setLigando(false);
    }
  };

  const notas = useMemo(() => dados?.notas ?? [], [dados]);
  const semResposta = useMemo(() => notas.filter((n) => n.manifestacao === "nenhuma" && n.status !== "cancelada").length, [notas]);
  const completas = useMemo(() => notas.filter((n) => n.completa).length, [notas]);

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Notas fiscais"
        title="Notas recebidas"
        subtitle="As notas que outras empresas emitiram contra o CNPJ da sua empresa: compras, devoluções e remessas."
      />

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

      {dados && !dados.configurada ? (
        <Aviso tom="atencao" titulo="Configure as notas fiscais primeiro">
          O recebimento usa o mesmo certificado digital da emissão. Termine a configuração em Notas fiscais → Configuração.
        </Aviso>
      ) : null}

      {/* Ligar/desligar a busca automática */}
      {dados?.configurada ? (
        <section className="flex flex-col gap-4 rounded-2xl bg-[var(--ks-color-bg-elevated)] px-5 py-4 shadow-[0_10px_30px_rgba(26,26,43,0.06)] sm:flex-row sm:items-center sm:justify-between">
          <div className="flex items-start gap-4">
            <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-500 to-indigo-600 text-white shadow-[0_10px_24px_rgba(14,116,244,0.3)]">
              <Inbox size={22} />
            </span>
            <div className="min-w-0">
              <p className="flex items-center text-sm font-bold text-[var(--ks-color-text-primary)]">
                Buscar sozinho as notas contra o meu CNPJ
                <Dica titulo="Como funciona">
                  A Secretaria da Fazenda guarda as notas que terceiros emitem contra a sua empresa e as entrega em duas etapas: primeiro
                  um resumo (quem emitiu, valor e chave) e, depois que você responde, o arquivo completo que vale para o contador.
                </Dica>
              </p>
              <p className="mt-0.5 text-sm text-[var(--ks-color-text-muted)]">
                {dados.ligado
                  ? `Ligado${dados.desde ? ` — trazendo notas a partir de ${dataCurta(`${dados.desde}T12:00:00Z`)}` : ""}.`
                  : "Desligado. Ligue para descobrir compras lançadas no nome da empresa sem você saber."}
              </p>
            </div>
          </div>
          {dados.podeLigar ? (
            <div className="flex items-center gap-3">
              {ligando ? <Loader2 size={16} className="animate-spin text-[var(--ks-color-text-soft)]" /> : null}
              <Switch
                checked={dados.ligado}
                disabled={ligando}
                onCheckedChange={(valor) => {
                  if (valor) return void ligarRecebimento(true);
                  setConfirmacao({
                    titulo: "Desligar a busca de notas recebidas?",
                    texto: "As notas já trazidas continuam aqui, mas as novas deixam de aparecer.",
                    confirmar: "Desligar",
                    aoConfirmar: () => {
                      setConfirmacao(null);
                      void ligarRecebimento(false);
                    },
                  });
                }}
              />
            </div>
          ) : (
            <span className="text-xs text-[var(--ks-color-text-soft)]">Só quem configura notas fiscais liga isto.</span>
          )}
        </section>
      ) : null}

      {/* Abas no sublinhado da casa, fora da superfície — como no Estoque. */}
      <div className="flex items-center gap-6 overflow-x-auto border-b border-[var(--ks-color-border-subtle)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        {ABAS.map(({ chave, rotulo, icone: Icone }) => {
          const ativa = aba === chave;
          return (
            <button
              key={chave}
              type="button"
              onClick={() => setAba(chave)}
              className={`-mb-px flex shrink-0 items-center gap-2 whitespace-nowrap border-b-2 pb-3 text-sm font-semibold transition-colors ${
                ativa
                  ? "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}
              {chave === "sem_resposta" && semResposta > 0 ? (
                <span className="ks-num rounded-full bg-amber-500/15 px-1.5 text-[11px] font-bold text-amber-700">{semResposta}</span>
              ) : null}
            </button>
          );
        })}
      </div>

      <div className="ks-surface overflow-hidden rounded-xl border border-[var(--ks-color-border-subtle)] shadow-sm">
        {/* A barra do Estoque: busca, contadores de relance e a ação principal. */}
        <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="relative min-w-[200px] max-w-xs flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
            <Input placeholder="Buscar por fornecedor, CNPJ ou chave" value={termo} onChange={(e) => setTermo(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="h-1.5 w-1.5 rounded-full bg-[var(--ks-color-primary)]" />
              <span className="ks-num">{notas.length}</span> {notas.length === 1 ? "nota" : "notas"}
            </span>
            <span className="flex items-center gap-1.5">
              <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
              <span className="ks-num">{semResposta}</span> sem resposta
            </span>
            <span className="flex items-center gap-1.5">
              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
              <span className="ks-num">{completas}</span> com arquivo completo
            </span>
            {carregando && dados ? <Loader2 className="h-4 w-4 animate-spin text-[var(--ks-color-primary)]" /> : null}
          </div>
          {dados?.ligado ? (
            <button type="button" onClick={() => void buscarAgora()} disabled={buscando} className="ks-button ks-button-primary">
              {buscando ? <Loader2 size={16} className="animate-spin" /> : <RefreshCw size={16} />}
              Buscar agora
            </button>
          ) : null}
        </div>

        {carregando && !dados ? (
          <div className="flex items-center justify-center py-16">
            <Loader2 size={22} className="animate-spin text-[var(--ks-color-text-soft)]" />
          </div>
        ) : notas.length === 0 ? (
          <div className="px-6 py-14 text-center">
            <span className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-soft)]">
              <Inbox size={26} />
            </span>
            <p className="mt-4 text-base font-bold text-[var(--ks-color-text-primary)]">
              {dados?.ligado ? "Nenhuma nota recebida por aqui" : "A busca ainda não está ligada"}
            </p>
            <p className="mx-auto mt-1 max-w-md text-sm leading-6 text-[var(--ks-color-text-muted)]">
              {dados?.ligado
                ? "Quando um fornecedor emitir uma nota para o CNPJ da empresa, ela aparece aqui sozinha — e o sino avisa."
                : "Ligue acima para o sistema trazer as notas que outras empresas emitem no nome da sua."}
            </p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <div className="min-w-[900px]">
              <div className="grid grid-cols-[minmax(0,1.3fr)_minmax(0,1.1fr)_100px_120px_170px_120px] gap-3 px-6 py-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-400">
                <span>Fornecedor</span>
                <span>Nota</span>
                <span>Emitida</span>
                <span className="text-right">Valor</span>
                <span>Resposta</span>
                <span />
              </div>
              {notas.map((nota) => {
                const fornecedor = nota.emitente?.nome || nota.emitente?.razaoSocial || "Fornecedor não identificado";
                const respondida = nota.manifestacao !== "nenhuma";
                /* Responder é a ação da linha inteira, quando cabe: nota de produto, permissão, e resposta ainda aberta. */
                const podeResponderEsta = nota.modelo === "nfe" && Boolean(dados?.podeResponder) && ["nenhuma", "ciencia"].includes(nota.manifestacao);
                return (
                  <div
                    key={nota.id}
                    onClick={podeResponderEsta ? () => setRespondendo(nota) : undefined}
                    title={podeResponderEsta ? "Responder ao fornecedor" : undefined}
                    className={`grid grid-cols-[minmax(0,1.3fr)_minmax(0,1.1fr)_100px_120px_170px_120px] items-center gap-3 border-t border-slate-100/60 px-6 py-3.5 transition-colors hover:bg-[var(--ks-color-bg-subtle)]/50 ${
                      podeResponderEsta ? "cursor-pointer" : ""
                    } ${!nota.vista_em ? "bg-violet-500/[0.04]" : ""}`}
                  >
                    <div className="flex min-w-0 items-center gap-3">
                      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-sky-500 to-indigo-600 text-sm font-bold text-white shadow-sm">
                        {fornecedor.trim().charAt(0).toUpperCase()}
                      </span>
                      <div className="min-w-0">
                        <p className="truncate text-sm font-semibold text-[var(--ks-color-text-primary)]">{fornecedor}</p>
                        <p className="truncate text-[11px] text-[var(--ks-color-text-soft)]">
                          {nota.emitente?.documento ? documentoFormatado(nota.emitente.documento) : "sem CNPJ no resumo"} · {haQuantoTempo(nota.created_at)}
                        </p>
                      </div>
                    </div>
                    <div className="min-w-0">
                      <p className="flex items-center gap-2 text-sm text-[var(--ks-color-text-primary)]">
                        {nota.modelo === "nfe" ? "Nota de produto" : "Nota de serviço"}
                        <SeloDoStatus
                          tom={nota.status === "autorizada" ? "bom" : nota.status === "cancelada" ? "neutro" : "ruim"}
                          rotulo={nota.status === "autorizada" ? "Autorizada" : nota.status === "cancelada" ? "Cancelada pelo emissor" : "Denegada"}
                        />
                      </p>
                      <p className="truncate font-mono text-[11px] text-[var(--ks-color-text-soft)]" title={nota.chave ? chaveEmBlocos(nota.chave) : undefined}>
                        {nota.chave ? chaveEmBlocos(nota.chave) : "sem chave no resumo"}
                      </p>
                    </div>
                    <div className="text-sm text-[var(--ks-color-text-muted)]">{nota.emitida_em ? dataCurta(nota.emitida_em) : "—"}</div>
                    <div className="ks-num text-right text-sm font-semibold text-[var(--ks-color-text-primary)]">{moeda(nota.valor)}</div>
                    <div>
                      <SeloDoStatus
                        tom={respondida ? "bom" : "atencao"}
                        rotulo={NOME_DA_RESPOSTA[nota.manifestacao]}
                        titulo={nota.manifestada_em ? `Respondida em ${dataCurta(nota.manifestada_em)}` : undefined}
                      />
                      <p className="mt-1 text-[11px] text-[var(--ks-color-text-soft)]" title={nota.completa ? "O XML autorizado, que vale para a contabilidade." : "A SEFAZ só libera o arquivo completo depois da sua resposta."}>
                        {nota.completa ? "Arquivo completo" : "Só o resumo"}
                      </p>
                    </div>
                    <div className="flex items-center justify-end gap-1">
                      {podeResponderEsta ? (
                        <button
                          type="button"
                          onClick={(e) => {
                            e.stopPropagation();
                            setRespondendo(nota);
                          }}
                          className="ks-button ks-button-ghost ks-button-sm"
                          title={nota.manifestacao === "nenhuma" ? "Responder ao fornecedor" : "Mudar a resposta"}
                        >
                          <MessageSquareReply size={15} />
                        </button>
                      ) : null}
                      <a
                        href={`/api/fiscal/recebidas/${nota.id}/arquivo?tipo=xml`}
                        onClick={(e) => e.stopPropagation()}
                        className="ks-button ks-button-ghost ks-button-sm"
                        title={nota.completa ? "Baixar o XML autorizado" : "Baixar o resumo da SEFAZ (não vale para escrituração)"}
                      >
                        <Download size={15} />
                      </a>
                      {nota.completa ? (
                        <a
                          href={`/api/fiscal/recebidas/${nota.id}/arquivo?tipo=pdf`}
                          target="_blank"
                          rel="noopener noreferrer"
                          onClick={(e) => e.stopPropagation()}
                          className="ks-button ks-button-ghost ks-button-sm"
                          title="Abrir a DANFE"
                        >
                          <FileText size={15} />
                        </a>
                      ) : null}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>

      {respondendo ? (
        <ModalDeResposta
          nota={respondendo}
          aoFechar={() => setRespondendo(null)}
          aoResponder={() => {
            setRespondendo(null);
            void carregar();
          }}
          podeResponder={Boolean(dados?.podeResponder) && pode("fiscal.recebidas")}
        />
      ) : null}

      <CaixaDeConfirmacao pedido={confirmacao} aoFechar={() => setConfirmacao(null)} />
    </div>
  );
}

function ModalDeResposta({
  nota,
  aoFechar,
  aoResponder,
  podeResponder,
}: {
  nota: Recebida;
  aoFechar: () => void;
  aoResponder: () => void;
  podeResponder: boolean;
}) {
  const [escolha, setEscolha] = useState<TipoDeResposta>("ciencia");
  const [motivo, setMotivo] = useState("");
  const [enviando, setEnviando] = useState(false);
  const [erro, setErro] = useState<string | null>(null);

  const regra = RESPOSTAS.find((r) => r.chave === escolha);
  const motivoLimpo = motivo.replace(/\s+/g, " ").trim();
  const faltaMotivo = Boolean(regra?.exigeMotivo) && (motivoLimpo.length < 15 || motivoLimpo.length > 255);

  const enviar = async () => {
    setEnviando(true);
    setErro(null);
    try {
      await pedirFiscal(`/api/fiscal/recebidas/${nota.id}`, { method: "POST", json: { resposta: escolha, motivo: motivoLimpo || null } });
      aoResponder();
    } catch (e) {
      setErro(e instanceof Error ? e.message : "A SEFAZ não aceitou a resposta.");
    } finally {
      setEnviando(false);
    }
  };

  return (
    <Dialog open onOpenChange={(v) => !v && aoFechar()}>
      <DialogContent className="w-[calc(100vw-24px)] max-w-[540px] rounded-[24px] border-0 bg-[var(--ks-color-bg-elevated)] p-0">
        <div className="space-y-5 p-6">
          <div>
            <DialogTitle className="text-xl font-extrabold tracking-tight text-[var(--ks-color-text-primary)]">
              Responder ao fornecedor
            </DialogTitle>
            <DialogDescription className="mt-1 text-sm leading-6 text-[var(--ks-color-text-muted)]">
              A SEFAZ registra a sua posição sobre esta nota e libera o arquivo completo, que é o que o contador precisa.
            </DialogDescription>
          </div>

          <div className="rounded-2xl bg-[var(--ks-color-bg-inset)] p-4">
            <p className="text-sm font-bold text-[var(--ks-color-text-primary)]">
              {nota.emitente?.nome || nota.emitente?.razaoSocial || "Fornecedor"}
            </p>
            <p className="text-xs text-[var(--ks-color-text-muted)]">
              {nota.emitente?.documento ? documentoFormatado(nota.emitente.documento) : ""} · {moeda(nota.valor)}
              {nota.emitida_em ? ` · ${dataCurta(nota.emitida_em)}` : ""}
            </p>
          </div>

          <div className="space-y-2">
            {RESPOSTAS.map((resposta) => {
              const marcada = escolha === resposta.chave;
              return (
                <button
                  key={resposta.chave}
                  type="button"
                  onClick={() => setEscolha(resposta.chave)}
                  className={`w-full rounded-2xl px-4 py-3 text-left transition ${
                    marcada
                      ? "bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-[0_12px_28px_rgba(124,58,237,0.28)]"
                      : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-primary)] hover:bg-[var(--ks-color-bg-hover)]"
                  }`}
                >
                  <span className="flex items-center gap-2 text-sm font-bold">
                    {resposta.rotulo}
                    {resposta.definitiva ? (
                      <span
                        className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.08em] ${
                          marcada ? "bg-white/20 text-white" : "bg-rose-500/10 text-rose-700"
                        }`}
                      >
                        Não tem volta
                      </span>
                    ) : null}
                  </span>
                  <span className={`mt-0.5 block text-[13px] leading-5 ${marcada ? "text-white/85" : "text-[var(--ks-color-text-muted)]"}`}>
                    {resposta.explicacao}
                  </span>
                </button>
              );
            })}
          </div>

          {regra?.exigeMotivo ? (
            <label className="block space-y-2">
              <span className="text-sm font-semibold text-[var(--ks-color-text-primary)]">Motivo (vai para a SEFAZ)</span>
              <textarea
                value={motivo}
                onChange={(e) => setMotivo(e.target.value.slice(0, 255))}
                rows={3}
                placeholder="Ex.: Não reconhecemos esta operação; não houve compra deste fornecedor."
                className="ks-field resize-none"
              />
              <span className="block text-xs text-[var(--ks-color-text-muted)]">
                {motivoLimpo.length}/255 · a SEFAZ exige de 15 a 255 letras.
              </span>
            </label>
          ) : null}

          {regra?.definitiva ? (
            <Aviso tom="atencao" titulo="Confira antes de enviar">
              Depois de enviada, esta resposta não pode ser desfeita nem trocada.
            </Aviso>
          ) : null}
          {erro ? <Aviso tom="ruim">{erro}</Aviso> : null}

          <div className="flex flex-wrap justify-end gap-2">
            <button type="button" onClick={aoFechar} className="ks-button ks-button-soft">
              Fechar
            </button>
            <button
              type="button"
              onClick={() => void enviar()}
              disabled={enviando || faltaMotivo || !podeResponder}
              className="ks-button ks-button-primary"
            >
              {enviando ? <Loader2 size={16} className="animate-spin" /> : <CheckCircle2 size={16} />}
              Enviar resposta
            </button>
          </div>
          {!podeResponder ? (
            <p className="flex items-center gap-1.5 text-xs text-[var(--ks-color-text-soft)]">
              <AlertTriangle size={13} /> Você não tem permissão para responder notas recebidas.
            </p>
          ) : null}
        </div>
      </DialogContent>
    </Dialog>
  );
}