"use client";

import { useEffect, useState } from "react";
import { ExternalLink, Info, MessagesSquare } from "lucide-react";
import { ChaveDeAjuste, SecaoDeAjustes } from "@/components/ui/folha-de-ajustes";

/*
  Liga o Ktalogu Chats na loja virtual.

  Aqui fica só a chave da vitrine — mostrar ou não o balão —, porque isso é
  decisão de loja: muda o que o visitante vê.

  O resto do atendimento (boas-vindas, horário, respostas prontas, avisos) mora
  na engrenagem do próprio Chats, que é onde a pessoa está quando senta para
  atender. Quando as boas-vindas moravam nos dois lugares, cada tela mostrava
  uma metade da configuração e ninguém sabia qual valia.

  Salva no clique, e não no botão de salvar da página: é uma chave só, e
  esquecer de salvar aqui significaria achar que ligou quando não ligou.

  Desenhado como uma seção da folha de ajustes da página do catálogo.
*/

export default function ChatDaLojaAjuste() {
  const [ligado, setLigado] = useState<boolean | null>(null);
  const [ocupado, setOcupado] = useState(false);
  const [explicando, setExplicando] = useState(false);
  const [erro, setErro] = useState<string | null>(null);

  useEffect(() => {
    void (async () => {
      try {
        const resposta = await fetch("/api/chats/loja", { cache: "no-store" });
        const dados = (await resposta.json().catch(() => null)) as { ligado?: boolean } | null;
        setLigado(Boolean(dados?.ligado));
      } catch {
        setLigado(null);
      }
    })();
  }, []);

  if (ligado === null) return null;

  async function trocar(valor: boolean) {
    setOcupado(true);
    setErro(null);
    const antes = ligado;
    setLigado(valor);
    try {
      const resposta = await fetch("/api/chats/loja", {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ ligado: valor }),
      });
      const dados = (await resposta.json().catch(() => null)) as { ligado?: boolean; error?: string } | null;
      if (!resposta.ok) throw new Error(dados?.error || "Não consegui salvar.");
      setLigado(Boolean(dados?.ligado));
    } catch (falha) {
      setLigado(antes);
      setErro(falha instanceof Error ? falha.message : "Não consegui salvar.");
    } finally {
      setOcupado(false);
    }
  }

  return (
    <SecaoDeAjustes
      id="visual-chats"
      Icone={MessagesSquare}
      titulo={
        <span className="inline-flex items-center gap-2">
          Ktalogu Chats na loja virtual
          <button
            type="button"
            onClick={() => setExplicando((valor) => !valor)}
            aria-label="O que é isso"
            className="inline-flex h-5 w-5 items-center justify-center rounded-full text-[var(--ks-color-text-soft)] transition hover:bg-[var(--ks-color-bg-hover)] hover:text-[var(--ks-color-text-primary)]"
          >
            <Info size={14} />
          </button>
        </span>
      }
      texto="Um balão de conversa na sua loja para quem ainda não comprou tirar dúvida sem sair da página e sem criar conta."
    >
      <ChaveDeAjuste
        titulo="Mostrar o balão na loja"
        texto="Salva na hora, sem passar pelo botão de salvar da página."
        ligado={ligado}
        desabilitado={ocupado}
        aoMudar={(valor) => void trocar(valor)}
      />

      {explicando ? (
        <div className="mb-3 rounded-2xl bg-[var(--ks-color-bg-inset)] p-4 text-xs leading-5 text-[var(--ks-color-text-muted)]">
          <p>
            <strong className="text-[var(--ks-color-text-primary)]">O que é:</strong> o visitante clica no balão, diz o
            nome e escreve. A conversa cai no <strong>Chats</strong>, na aba <strong>Loja Online</strong>, junto das
            conversas de pedidos e orçamentos.
          </p>
          <p className="mt-2">
            <strong className="text-[var(--ks-color-text-primary)]">Onde responder:</strong> menu lateral →{" "}
            <strong>Chats</strong> (abre em uma aba separada). Lá dentro você marca se está{" "}
            <strong>online ou offline</strong>: offline não tira o balão do ar, só avisa o cliente que a resposta vem
            depois — a mensagem chega do mesmo jeito, com aviso no sino e no celular.
          </p>
        </div>
      ) : null}

      {/*
        O resto do atendimento não mora aqui.

        Boas-vindas, horário, respostas prontas e avisos ficam na engrenagem do
        Chats. Repetir aqui já criou o problema de duas telas mostrando metades
        diferentes da mesma configuração.
      */}
      {ligado ? (
        <div className="mb-3 flex flex-wrap items-center gap-x-2 gap-y-1 rounded-2xl bg-[var(--ks-color-bg-inset)] p-4 text-xs leading-5 text-[var(--ks-color-text-muted)]">
          <span>
            As <strong className="text-[var(--ks-color-text-primary)]">boas-vindas automáticas</strong>, o horário de
            atendimento e as respostas prontas ficam na engrenagem do Chats.
          </span>
          <a
            href="/chats"
            target="_blank"
            rel="noreferrer"
            className="inline-flex items-center gap-1.5 font-semibold text-[var(--ks-color-primary)]"
          >
            <ExternalLink size={13} />
            Abrir o Chats
          </a>
        </div>
      ) : null}

      {erro ? <p className="mb-3 text-xs font-semibold text-rose-600">{erro}</p> : null}
    </SecaoDeAjustes>
  );
}