"use client";

import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import {
  Bell,
  BellOff,
  Clock,
  Loader2,
  MessageSquareText,
  Plus,
  Search,
  Store,
  Trash2,
  X,
  Zap,
} from "lucide-react";

/*
  As configurações do Chats.

  Elas estavam espalhadas: o chat da loja ligava na personalização do catálogo,
  o expediente não existia, as respostas prontas ficavam escondidas atrás da
  barra "/" e o aviso no aparelho era uma faixa que sumia quando alguém
  dispensava.

  Aqui viram uma tela só, com menu à esquerda e assunto à direita — e não uma
  rolagem única. A diferença não é estética: numa lista corrida a pessoa passa
  reto pelo que veio buscar, e o que ela veio buscar quase sempre é uma coisa
  só ("a que horas eu atendo?"). Com menu, ela chega em um clique e vê o
  assunto inteiro sem rolar.
*/

const DIAS: { chave: string; nome: string }[] = [
  { chave: "seg", nome: "Segunda" },
  { chave: "ter", nome: "Terça" },
  { chave: "qua", nome: "Quarta" },
  { chave: "qui", nome: "Quinta" },
  { chave: "sex", nome: "Sexta" },
  { chave: "sab", nome: "Sábado" },
  { chave: "dom", nome: "Domingo" },
];

export const GUARDA_DO_SILENCIO = "ktl:chats-silencio";

type Secao = "loja" | "horario" | "respostas" | "avisos" | "silencio" | "numeros";

/* O menu, agrupado como a pessoa pensa: primeiro o que a loja promete, depois
   o que ela avisa, e por último o que ela colhe. */
const MENU: { grupo: string; itens: { chave: Secao; nome: string; icone: ReactNode; procura: string }[] }[] = [
  {
    grupo: "Atendimento",
    itens: [
      { chave: "loja", nome: "Chat na loja", icone: <Store size={15} />, procura: "loja balão vitrine boas-vindas saudação" },
      { chave: "horario", nome: "Horário", icone: <Clock size={15} />, procura: "horário expediente offline ausência fechado" },
      { chave: "respostas", nome: "Respostas prontas", icone: <Zap size={15} />, procura: "respostas frases atalho prazo barra" },
    ],
  },
  {
    grupo: "Avisos",
    itens: [
      { chave: "avisos", nome: "Neste aparelho", icone: <Bell size={15} />, procura: "aviso push notificação celular" },
      { chave: "silencio", nome: "Não perturbe", icone: <BellOff size={15} />, procura: "silenciar som sino mudo" },
    ],
  },
  {
    grupo: "Acompanhar",
    itens: [
      { chave: "numeros", nome: "Números", icone: <MessageSquareText size={15} />, procura: "relatório tempo resposta números" },
    ],
  },
];

/* Onde o botão Salvar faz sentido: o resto age no clique. */
const SECOES_COM_FORMULARIO: Secao[] = ["loja", "horario", "respostas"];

type FaixaDoDia = { dia: string; aberto: boolean; de: string; ate: string };
type RespostaPronta = { atalho: string; texto: string };

type Configuracoes = {
  slug: string | null;
  chatLigado: boolean;
  online: boolean;
  saudacaoLigada: boolean;
  saudacao: string;
  saudacaoEspera: number;
  saudacaoQuando: "tempo" | "acao";
  horario: FaixaDoDia[];
  horarioConfigurado: boolean;
  ausencia: string;
  offlineAutomatico: boolean;
  cutucaoEmMinutos: number;
};

type Relatorio = {
  conversas: number;
  respondidas: number;
  semResposta: number;
  minutosMedios: number | null;
  dias: number;
};

type EstadoDoAviso = "verificando" | "indisponivel" | "precisa_instalar" | "desligado" | "ligado" | "negado";

function base64ParaBytes(base64: string) {
  const preenchido = (base64 + "=".repeat((4 - (base64.length % 4)) % 4)).replace(/-/g, "+").replace(/_/g, "/");
  const cru = atob(preenchido);
  return Uint8Array.from([...cru].map((caractere) => caractere.charCodeAt(0)));
}

/* O tempo de resposta em gente: "2 min" diz mais do que "0,03 h". */
function tempoLegivel(minutos: number | null) {
  if (minutos === null) return "—";
  if (minutos < 1) return "menos de 1 min";
  if (minutos < 60) return `${minutos} min`;
  const horas = Math.floor(minutos / 60);
  const resto = minutos % 60;
  return resto ? `${horas}h ${resto}min` : `${horas}h`;
}

/* Procurar "horario" tem que achar "Horário": o acento não pode ser exigência. */
function semAcento(valor: string) {
  return valor.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
}

export default function ConfiguracoesDoChats({
  podeConfigurar,
  aoFechar,
}: {
  podeConfigurar: boolean;
  aoFechar: () => void;
}) {
  const [secao, setSecao] = useState<Secao>("loja");
  const [procura, setProcura] = useState("");
  const [config, setConfig] = useState<Configuracoes | null>(null);
  const [respostas, setRespostas] = useState<RespostaPronta[]>([]);
  const [relatorio, setRelatorio] = useState<Relatorio | null>(null);
  const [salvando, setSalvando] = useState(false);
  const [salvo, setSalvo] = useState(false);
  const [mexido, setMexido] = useState(false);
  const [erro, setErro] = useState<string | null>(null);

  const [aviso, setAviso] = useState<EstadoDoAviso>("verificando");
  const [ligandoAviso, setLigandoAviso] = useState(false);
  const [silencioAte, setSilencioAte] = useState<number | null>(null);

  const chavePublica = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY;

  useEffect(() => {
    const aoTeclar = (evento: KeyboardEvent) => {
      if (evento.key === "Escape") aoFechar();
    };
    window.addEventListener("keydown", aoTeclar);
    return () => window.removeEventListener("keydown", aoTeclar);
  }, [aoFechar]);

  useEffect(() => {
    void (async () => {
      const [umas, outras, numeros] = await Promise.all([
        fetch("/api/chats/configuracoes", { cache: "no-store" }).then((r) => r.json()).catch(() => null),
        fetch("/api/chats/atalhos?tipo=resposta", { cache: "no-store" }).then((r) => r.json()).catch(() => null),
        fetch("/api/chats/relatorio", { cache: "no-store" }).then((r) => r.json()).catch(() => null),
      ]);
      if (umas?.configuracoes) setConfig(umas.configuracoes as Configuracoes);
      if (Array.isArray(outras?.itens)) setRespostas(outras.itens as RespostaPronta[]);
      if (numeros?.relatorio) setRelatorio(numeros.relatorio as Relatorio);
    })();

    try {
      const guardado = Number(window.localStorage.getItem(GUARDA_DO_SILENCIO) || 0);
      setSilencioAte(guardado > Date.now() ? guardado : null);
    } catch {
      setSilencioAte(null);
    }
  }, []);

  /* Estado do aviso neste aparelho: a permissão é do navegador, não da conta. */
  useEffect(() => {
    void (async () => {
      if (!chavePublica) return setAviso("indisponivel");
      if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
        const ehApple = /iPad|iPhone|iPod/.test(navigator.userAgent);
        return setAviso(ehApple ? "precisa_instalar" : "indisponivel");
      }
      if (Notification.permission === "denied") return setAviso("negado");
      try {
        const registro = await navigator.serviceWorker.register("/sw.js");
        const atual = await registro.pushManager.getSubscription();
        setAviso(atual ? "ligado" : "desligado");
      } catch {
        setAviso("indisponivel");
      }
    })();
  }, [chavePublica]);

  const mudar = useCallback((mudanca: Partial<Configuracoes>) => {
    setConfig((antes) => (antes ? { ...antes, ...mudanca } : antes));
    setSalvo(false);
    setMexido(true);
  }, []);

  function mudarDia(dia: string, mudanca: Partial<FaixaDoDia>) {
    setConfig((antes) =>
      antes
        ? { ...antes, horario: antes.horario.map((faixa) => (faixa.dia === dia ? { ...faixa, ...mudanca } : faixa)) }
        : antes
    );
    setSalvo(false);
    setMexido(true);
  }

  /* A busca do menu procura pelo assunto, e não só pelo nome do item: quem
     digita "prazo" está atrás das respostas prontas. */
  const menuFiltrado = useMemo(() => {
    const termo = semAcento(procura.trim());
    if (!termo) return MENU;
    return MENU.map((grupo) => ({
      ...grupo,
      itens: grupo.itens.filter(
        (item) => semAcento(item.nome).includes(termo) || semAcento(item.procura).includes(termo)
      ),
    })).filter((grupo) => grupo.itens.length);
  }, [procura]);

  async function salvar() {
    if (!config) return;
    setSalvando(true);
    setErro(null);
    try {
      const resposta = await fetch("/api/chats/configuracoes", {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          chatLigado: config.chatLigado,
          saudacaoLigada: config.saudacaoLigada,
          saudacao: config.saudacao,
          saudacaoEspera: config.saudacaoEspera,
          saudacaoQuando: config.saudacaoQuando,
          horario: config.horario,
          ausencia: config.ausencia,
          offlineAutomatico: config.offlineAutomatico,
          cutucaoEmMinutos: config.cutucaoEmMinutos,
        }),
      });
      if (!resposta.ok) {
        throw new Error((await resposta.json().catch(() => null))?.error || "Não consegui salvar.");
      }

      const limpas = respostas
        .map((item) => ({ atalho: item.atalho.trim().toLowerCase().replace(/\s+/g, "-"), texto: item.texto.trim() }))
        .filter((item) => item.atalho && item.texto);

      const guardando = await fetch("/api/chats/atalhos", {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ respostas: limpas }),
      });
      if (!guardando.ok) {
        throw new Error((await guardando.json().catch(() => null))?.error || "Não consegui salvar as frases.");
      }

      setSalvo(true);
      setMexido(false);
      window.setTimeout(() => setSalvo(false), 2600);
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Não consegui salvar.");
    } finally {
      setSalvando(false);
    }
  }

  async function ligarAviso() {
    if (!chavePublica) return;
    setLigandoAviso(true);
    setErro(null);
    try {
      const permissao = await Notification.requestPermission();
      if (permissao !== "granted") {
        setAviso(permissao === "denied" ? "negado" : "desligado");
        return;
      }
      const registro = await navigator.serviceWorker.ready;
      const assinatura = await registro.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: base64ParaBytes(chavePublica),
      });
      const resposta = await fetch("/api/agenda/push/subscrever", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ assinatura: assinatura.toJSON(), user_agent: navigator.userAgent }),
      });
      if (!resposta.ok) throw new Error("Não consegui ativar.");
      setAviso("ligado");
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Não consegui ativar os avisos.");
    } finally {
      setLigandoAviso(false);
    }
  }

  async function desligarAviso() {
    setLigandoAviso(true);
    try {
      const registro = await navigator.serviceWorker.ready;
      const atual = await registro.pushManager.getSubscription();
      if (atual) {
        await fetch("/api/agenda/push/subscrever", {
          method: "DELETE",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ endpoint: atual.endpoint }),
        }).catch(() => undefined);
        await atual.unsubscribe();
      }
      setAviso("desligado");
    } catch {
      /* Se falhar, o aparelho continua recebendo — e o estado se corrige na
         próxima abertura. */
    } finally {
      setLigandoAviso(false);
    }
  }

  /* Não perturbe: mora no navegador porque é do aparelho, e não da conta. O
     computador do balcão pode ficar mudo sem calar o celular de quem saiu. */
  function silenciar(horas: number | null) {
    try {
      if (!horas) {
        window.localStorage.removeItem(GUARDA_DO_SILENCIO);
        setSilencioAte(null);
        return;
      }
      const ate = Date.now() + horas * 60 * 60 * 1000;
      window.localStorage.setItem(GUARDA_DO_SILENCIO, String(ate));
      setSilencioAte(ate);
    } catch {
      setErro("Este navegador não deixa guardar a preferência.");
    }
  }

  const itemAtual = MENU.flatMap((grupo) => grupo.itens).find((item) => item.chave === secao);
  const mostraSalvar = SECOES_COM_FORMULARIO.includes(secao);

  return (
    <div className="chat-decisao" role="dialog" aria-modal="true" onClick={aoFechar}>
      <div className="chat-config" data-secao={secao} onClick={(evento) => evento.stopPropagation()}>
        {/* ---------------- menu ---------------- */}
        <nav className="chat-config-menu">
          <div className="chat-config-procura">
            <Search size={14} />
            <input
              value={procura}
              onChange={(evento) => setProcura(evento.target.value)}
              placeholder="Procurar"
              aria-label="Procurar configuração"
            />
          </div>

          <div className="chat-config-menu-rolagem">
            {menuFiltrado.length === 0 ? (
              <p className="chat-config-menu-vazio">Nada com esse nome.</p>
            ) : (
              menuFiltrado.map((grupo) => (
                <div key={grupo.grupo} className="chat-config-grupo">
                  <span>{grupo.grupo}</span>
                  {grupo.itens.map((item) => (
                    <button
                      key={item.chave}
                      type="button"
                      data-ativo={item.chave === secao ? "sim" : "nao"}
                      onClick={() => setSecao(item.chave)}
                    >
                      {item.icone}
                      {item.nome}
                    </button>
                  ))}
                </div>
              ))
            )}
          </div>
        </nav>

        {/* ---------------- conteúdo ---------------- */}
        <div className="chat-config-painel">
          <header className="chat-config-topo">
            <div>
              <div className="chat-decisao-titulo">{itemAtual?.nome || "Configurações"}</div>
              <p className="chat-config-sub">O que a loja promete, o que ela responde e o que avisa você.</p>
            </div>
            <button type="button" className="chat-icone" onClick={aoFechar} aria-label="Fechar">
              <X size={18} />
            </button>
          </header>

          <div className="chat-config-corpo">
            {!config ? (
              <div className="chat-vazio">Carregando...</div>
            ) : secao === "loja" ? (
              <section className="chat-config-bloco">
                <label className="chat-config-linha">
                  <input
                    type="checkbox"
                    checked={config.chatLigado}
                    disabled={!podeConfigurar}
                    onChange={(evento) => mudar({ chatLigado: evento.target.checked })}
                  />
                  <span>
                    <strong>Mostrar o balão de conversa na loja</strong>
                    <em>Quem está olhando um produto tira a dúvida sem sair da página e sem criar conta.</em>
                  </span>
                </label>

                {config.chatLigado ? (
                  <>
                    <label className="chat-config-linha">
                      <input
                        type="checkbox"
                        checked={config.saudacaoLigada}
                        disabled={!podeConfigurar}
                        onChange={(evento) => mudar({ saudacaoLigada: evento.target.checked })}
                      />
                      <span>
                        <strong>Falar primeiro com quem está navegando</strong>
                        <em>Sai sozinho depois de alguns instantes — como o &quot;posso ajudar?&quot; da loja de rua.</em>
                      </span>
                    </label>

                    {config.saudacaoLigada ? (
                      <>
                        <textarea
                          className="chat-config-texto"
                          rows={3}
                          value={config.saudacao}
                          disabled={!podeConfigurar}
                          placeholder="Oi! Vi que você está por aqui. Se precisar de ajuda, é só chamar."
                          onChange={(evento) => mudar({ saudacao: evento.target.value.slice(0, 400) })}
                        />

                        <div className="chat-config-rotulo">Quando falar</div>
                        <div className="chat-config-escolhas">
                          <button
                            type="button"
                            data-ativo={config.saudacaoQuando === "tempo" ? "sim" : "nao"}
                            disabled={!podeConfigurar}
                            onClick={() => mudar({ saudacaoQuando: "tempo" })}
                          >
                            <strong>Depois de um tempo</strong>
                            <em>Passou o tempo olhando, a loja fala.</em>
                          </button>
                          <button
                            type="button"
                            data-ativo={config.saudacaoQuando === "acao" ? "sim" : "nao"}
                            disabled={!podeConfigurar}
                            onClick={() => mudar({ saudacaoQuando: "acao" })}
                          >
                            <strong>Quando demonstrar interesse</strong>
                            <em>Só ao abrir um produto, buscar ou mexer no carrinho.</em>
                          </button>
                        </div>

                        {config.saudacaoQuando === "tempo" ? (
                          <div className="chat-config-espera">
                            <span>Falar depois de</span>
                            <input
                              type="number"
                              min={5}
                              max={300}
                              step={5}
                              value={config.saudacaoEspera}
                              disabled={!podeConfigurar}
                              onChange={(evento) => mudar({ saudacaoEspera: Number(evento.target.value) })}
                            />
                            <span>segundos na loja</span>
                          </div>
                        ) : null}

                        <p className="chat-config-nota">
                          Menos de 10 segundos parece armadilha; mais de um minuto e a pessoa já foi embora. O balão
                          abre sozinho na tela dela, com um toque de aviso.
                        </p>
                      </>
                    ) : null}
                  </>
                ) : (
                  <p className="chat-config-nota">
                    Com o balão desligado, a loja online não oferece conversa — e quem tem dúvida vai embora ou vai
                    para o WhatsApp.
                  </p>
                )}
              </section>
            ) : secao === "horario" ? (
              <section className="chat-config-bloco">
                <p className="chat-config-nota">
                  Fora do horário a loja aparece <strong>offline</strong> e o visitante recebe o recado abaixo — em vez
                  de esperar por uma resposta que só vem amanhã.
                </p>

                <label className="chat-config-linha">
                  <input
                    type="checkbox"
                    checked={config.offlineAutomatico}
                    disabled={!podeConfigurar}
                    onChange={(evento) => mudar({ offlineAutomatico: evento.target.checked })}
                  />
                  <span>
                    <strong>Ficar offline sozinho fora do horário</strong>
                    <em>Você não precisa lembrar de virar a chave no fim do dia.</em>
                  </span>
                </label>

                <div className="chat-horarios">
                  {DIAS.map((dia) => {
                    const faixa = config.horario.find((item) => item.dia === dia.chave);
                    if (!faixa) return null;
                    return (
                      <div key={dia.chave} className="chat-horario" data-aberto={faixa.aberto ? "sim" : "nao"}>
                        <label>
                          <input
                            type="checkbox"
                            checked={faixa.aberto}
                            disabled={!podeConfigurar}
                            onChange={(evento) => mudarDia(dia.chave, { aberto: evento.target.checked })}
                          />
                          {dia.nome}
                        </label>
                        <div>
                          <input
                            type="time"
                            value={faixa.de}
                            disabled={!podeConfigurar || !faixa.aberto}
                            onChange={(evento) => mudarDia(dia.chave, { de: evento.target.value })}
                          />
                          <span>às</span>
                          <input
                            type="time"
                            value={faixa.ate}
                            disabled={!podeConfigurar || !faixa.aberto}
                            onChange={(evento) => mudarDia(dia.chave, { ate: evento.target.value })}
                          />
                        </div>
                      </div>
                    );
                  })}
                </div>

                <div className="chat-config-rotulo">Recado de quem chega fora do horário</div>
                <textarea
                  className="chat-config-texto"
                  rows={3}
                  value={config.ausencia}
                  disabled={!podeConfigurar}
                  placeholder="Estamos fora do horário agora. Deixe sua mensagem que respondemos assim que abrirmos."
                  onChange={(evento) => mudar({ ausencia: evento.target.value.slice(0, 400) })}
                />
                <p className="chat-config-nota">
                  A hora em que a loja volta entra sozinha no fim do recado, calculada pelo horário acima.
                </p>
              </section>
            ) : secao === "respostas" ? (
              <section className="chat-config-bloco">
                <p className="chat-config-nota">
                  Na conversa, digite <strong>/</strong> e escolha — ou o nome direto, como <strong>/prazo</strong>. São
                  as suas frases: as nossas são só sugestão até você mexer.
                </p>
                <p className="chat-config-nota">
                  Use <code>{"{nome}"}</code>, <code>{"{pedido}"}</code>, <code>{"{orcamento}"}</code>,{" "}
                  <code>{"{loja}"}</code> e <code>{"{atendente}"}</code> — na hora de usar, cada um vira o dado daquela
                  conversa. O que a conversa não souber preencher some da frase.
                </p>

                <div className="chat-respostas-lista">
                  {respostas.length === 0 ? (
                    <div className="chat-vazio" style={{ padding: "20px 0" }}>
                      Nenhuma frase salva ainda.
                    </div>
                  ) : (
                    respostas.map((resposta, indice) => (
                      <div key={indice} className="chat-resposta-linha">
                        <input
                          className="chat-resposta-atalho"
                          value={resposta.atalho}
                          disabled={!podeConfigurar}
                          placeholder="prazo"
                          onChange={(evento) => {
                            setMexido(true);
                            setRespostas((antes) =>
                              antes.map((item, i) => (i === indice ? { ...item, atalho: evento.target.value } : item))
                            );
                          }}
                        />
                        <textarea
                          rows={2}
                          value={resposta.texto}
                          disabled={!podeConfigurar}
                          placeholder="Oi {nome}! O pedido {pedido} fica pronto em 3 dias úteis."
                          onChange={(evento) => {
                            setMexido(true);
                            setRespostas((antes) =>
                              antes.map((item, i) => (i === indice ? { ...item, texto: evento.target.value } : item))
                            );
                          }}
                        />
                        <button
                          type="button"
                          className="chat-icone"
                          aria-label="Apagar frase"
                          disabled={!podeConfigurar}
                          onClick={() => {
                            setMexido(true);
                            setRespostas((antes) => antes.filter((_, i) => i !== indice));
                          }}
                        >
                          <Trash2 size={15} />
                        </button>
                      </div>
                    ))
                  )}
                </div>

                <button
                  type="button"
                  className="chat-botao-linha"
                  disabled={!podeConfigurar}
                  onClick={() => setRespostas((antes) => [...antes, { atalho: "", texto: "" }])}
                >
                  <Plus size={15} />
                  Adicionar frase
                </button>
              </section>
            ) : secao === "avisos" ? (
              <section className="chat-config-bloco">
                <p className="chat-config-nota">
                  O aviso é por aparelho, e não por conta: o computador do balcão e o seu celular ligam separado. Assim
                  dá para receber na rua sem o balcão apitar sozinho a noite toda.
                </p>

                <div className="chat-config-acao">
                  {aviso === "ligado" ? (
                    <>
                      <span className="chat-config-estado" data-tom="bom">
                        Ligado neste aparelho
                      </span>
                      <button type="button" onClick={() => void desligarAviso()} disabled={ligandoAviso}>
                        {ligandoAviso ? <Loader2 size={13} className="chat-girando" /> : <BellOff size={13} />}
                        Desligar
                      </button>
                    </>
                  ) : aviso === "negado" ? (
                    <span className="chat-config-estado" data-tom="ruim">
                      Bloqueado nas configurações do navegador
                    </span>
                  ) : aviso === "precisa_instalar" ? (
                    <span className="chat-config-estado">
                      No iPhone, adicione o site à Tela de Início para receber avisos
                    </span>
                  ) : aviso === "indisponivel" ? (
                    <span className="chat-config-estado">Este navegador não recebe avisos</span>
                  ) : (
                    <>
                      <span className="chat-config-estado">Desligado</span>
                      <button type="button" onClick={() => void ligarAviso()} disabled={ligandoAviso}>
                        {ligandoAviso ? <Loader2 size={13} className="chat-girando" /> : <Bell size={13} />}
                        Ativar
                      </button>
                    </>
                  )}
                </div>
              </section>
            ) : secao === "silencio" ? (
              <section className="chat-config-bloco">
                <p className="chat-config-nota">
                  Silencia o som do sino neste aparelho. As mensagens continuam chegando e ficam marcadas como não
                  lidas — nada se perde, só para de tocar.
                </p>

                {/* O contrário do silêncio: o aviso que cobra quando ninguém
                    respondeu. Só dentro do horário — cobrar às 3 da manhã é
                    ruído, e a loja já avisou que responde amanhã. */}
                <div className="chat-config-titulo" style={{ marginTop: 18 }}>
                  <Clock size={15} />
                  Cutucão de conversa parada
                </div>
                <p className="chat-config-nota">
                  Alguém escreveu, ninguém respondeu e o tempo passou: o sino toca e o aviso vai para o celular. Só
                  dentro do horário de atendimento, e uma vez por conversa.
                </p>
                <div className="chat-config-espera">
                  <span>Avisar depois de</span>
                  <input
                    type="number"
                    min={0}
                    max={240}
                    step={5}
                    value={config.cutucaoEmMinutos}
                    disabled={!podeConfigurar}
                    onChange={(evento) => mudar({ cutucaoEmMinutos: Number(evento.target.value) })}
                  />
                  <span>minutos sem resposta {config.cutucaoEmMinutos === 0 ? "(desligado)" : ""}</span>
                </div>

                <div className="chat-silencio">
                  {silencioAte ? (
                    <>
                      <span className="chat-config-estado" data-tom="atencao">
                        Silenciado até{" "}
                        {new Date(silencioAte).toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })}
                      </span>
                      <button type="button" onClick={() => silenciar(null)}>
                        Voltar a tocar
                      </button>
                    </>
                  ) : (
                    <>
                      <button type="button" onClick={() => silenciar(1)}>
                        1 hora
                      </button>
                      <button type="button" onClick={() => silenciar(4)}>
                        4 horas
                      </button>
                      <button type="button" onClick={() => silenciar(12)}>
                        Até amanhã
                      </button>
                    </>
                  )}
                </div>
              </section>
            ) : (
              <section className="chat-config-bloco">
                {relatorio ? (
                  <>
                    <p className="chat-config-nota">
                      Últimos {relatorio.dias} dias. O número que importa é o do meio: quem espera meia hora já
                      perguntou em outro lugar.
                    </p>

                    <div className="chat-placar" style={{ marginTop: 12 }}>
                      <div>
                        <strong>{relatorio.conversas}</strong>
                        <span>conversas</span>
                      </div>
                      <div>
                        <strong>{tempoLegivel(relatorio.minutosMedios)}</strong>
                        <span>1ª resposta</span>
                      </div>
                      <div>
                        <strong>{relatorio.semResposta}</strong>
                        <span>sem resposta</span>
                      </div>
                    </div>

                    {relatorio.semResposta > 0 ? (
                      <p className="chat-config-nota">
                        {relatorio.semResposta === 1
                          ? "Uma pessoa escreveu e nunca teve resposta."
                          : `${relatorio.semResposta} pessoas escreveram e nunca tiveram resposta.`}{" "}
                        Elas continuam nas conversas, esperando.
                      </p>
                    ) : null}
                  </>
                ) : (
                  <div className="chat-vazio">Sem conversas para contar ainda.</div>
                )}
              </section>
            )}
          </div>

          <footer className="chat-config-rodape">
            {erro ? <span className="chat-erro">{erro}</span> : null}
            {salvo ? <span className="chat-config-salvo">Salvo</span> : null}
            {!erro && !salvo && mexido ? <span className="chat-config-mexido">Alterações não salvas</span> : null}

            <button type="button" className="chat-decisao-cancelar" onClick={aoFechar}>
              Fechar
            </button>
            {mostraSalvar ? (
              <button
                type="button"
                className="chat-decisao-confirmar"
                disabled={salvando || !podeConfigurar || !config}
                onClick={() => void salvar()}
              >
                {salvando ? "Salvando..." : "Salvar"}
              </button>
            ) : null}
          </footer>

          {!podeConfigurar ? (
            <div className="chat-config-aviso">
              Você pode ver estas configurações, mas quem altera é quem tem a permissão de configurar o atendimento.
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}