"use client";

import { useEffect, useState } from "react";
import { MessageCircle, Store } from "lucide-react";

/*
  Expediente do chat da loja: online ou offline.

  Nao e o mesmo que ligar e desligar o chat — isso e configuracao, e mora na
  personalizacao da loja. Aqui e o aviso de quem esta no balcao: online, o
  cliente ve que tem gente do outro lado; offline, ele escreve do mesmo jeito e
  ja sabe que a resposta vem depois.

  A bolinha e a mesma leitura dos dois lados: vermelha parada, verde piscando.
*/

type Estado = { ligado: boolean; online: boolean; podeMudar: boolean } | null;

export default function ChaveDoAtendimento() {
  const [estado, setEstado] = useState<Estado>(null);
  const [ocupado, setOcupado] = useState(false);

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

  if (!estado) return null;

  /* Chat desativado na vitrine: em vez de um botao que nao faz nada, o caminho
     de onde ligar. */
  if (!estado.ligado) {
    return (
      <div className="chat-chave">
        <MessageCircle size={15} />
        <span className="chat-chave-texto">
          Chat na loja virtual
          <strong>Desativado</strong>
        </span>
        <a
          href="/dashboard/catalog"
          target="_blank"
          rel="noreferrer"
          style={{ fontSize: 12, fontWeight: 700, color: "var(--fio-minha)" }}
        >
          Ativar
        </a>
      </div>
    );
  }

  async function trocar() {
    if (!estado?.podeMudar || ocupado) return;
    setOcupado(true);
    try {
      const resposta = await fetch("/api/chats/loja", {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ online: !estado.online }),
      });
      const dados = (await resposta.json().catch(() => null)) as { online?: boolean; ligado?: boolean } | null;
      if (resposta.ok && dados) {
        setEstado((antes) =>
          antes ? { ...antes, online: Boolean(dados.online), ligado: Boolean(dados.ligado) } : antes
        );
      }
    } finally {
      setOcupado(false);
    }
  }

  return (
    <div className="chat-chave">
      <Store size={15} />
      <span className="chat-chave-texto">
        Atendimento na loja
        <strong>{estado.online ? "Online agora" : "Offline — as mensagens continuam chegando"}</strong>
      </span>
      <button
        type="button"
        onClick={() => void trocar()}
        disabled={ocupado || !estado.podeMudar}
        className="chat-chave-botao"
        data-online={estado.online ? "sim" : "nao"}
        aria-label={estado.online ? "Ficar offline" : "Ficar online"}
        title={estado.online ? "Ficar offline" : "Ficar online"}
      >
        <span className="chat-chave-bolinha" />
      </button>
    </div>
  );
}