"use client";

import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { type WhatsAppContexts, whatsAppSubjectForPath } from "@/lib/whatsapp";
import WhatsAppLink from "./WhatsAppLink";
import { WhatsAppMark } from "./WhatsAppMark";

/** Botão principal do hero e seção de contato: enquanto qualquer um está na tela, o botão flutuante some. */
export const HERO_CTA_ID = "hero-contact-cta";
const CONTACT_SECTION_ID = "contact";

/**
 * Atalho para o WhatsApp só no celular (abaixo de 768 px), montado no layout para valer em todo o site. A mensagem
 * cita o serviço ou o case da página aberta. Fica escondido quando já há um convite de contato à vista (hero e
 * contato da home) e sobe a altura da barra de cookies (--cookie-bar-height, publicada por GoogleAnalytics) enquanto ela está aberta.
 * Fica num <aside> com nome (região de contato rápido para leitores de tela) e sobe com `transform`, não com `bottom`:
 * animar `bottom` refaz o layout e contava como deslocamento de layout (CLS) nas páginas internas.
 */
export default function FloatingWhatsApp({
  contexts,
}: {
  /** Nomes dos serviços e dos cases, montados no servidor (app/layout.tsx). */
  contexts?: WhatsAppContexts;
}) {
  const pathname = usePathname();
  const subject = whatsAppSubjectForPath(pathname, contexts);
  // null até o observador responder pela primeira vez: assim o botão não pisca na chegada, quando o hero está à vista
  const [inviteVisible, setInviteVisible] = useState<Record<
    string,
    boolean
  > | null>(null);

  // o botão vive no layout: a cada página o hero e o contato (que só existem na home) entram ou saem de cena
  // biome-ignore lint/correctness/useExhaustiveDependencies: pathname só reinicia a observação a cada página
  useEffect(() => {
    setInviteVisible(null);
    const targets = [HERO_CTA_ID, CONTACT_SECTION_ID]
      .map((id) => document.getElementById(id))
      .filter((element): element is HTMLElement => element !== null);
    if (targets.length === 0) {
      setInviteVisible({});
      return;
    }

    const observer = new IntersectionObserver((entries) => {
      setInviteVisible((current) => {
        const next = { ...current };
        for (const entry of entries) {
          next[entry.target.id] = entry.isIntersecting;
        }
        return next;
      });
    });
    for (const target of targets) observer.observe(target);
    return () => observer.disconnect();
  }, [pathname]);

  if (!inviteVisible || Object.values(inviteVisible).some(Boolean)) return null;

  return (
    <aside
      aria-label="Contato rápido"
      className="fixed right-sp-4 bottom-[calc(var(--sp-4)+env(safe-area-inset-bottom))] z-[8900] -translate-y-[var(--cookie-bar-height,0px)] transition-transform duration-200 motion-reduce:transition-none md:hidden"
    >
      <WhatsAppLink
        placement="floating"
        service={subject}
        className="flex h-14 w-14 items-center justify-center rounded-full bg-[#25d366] text-[#071b10] shadow-[0_8px_24px_rgba(0,0,0,0.45)] transition-colors hover:bg-[#54e58b] motion-reduce:transition-none"
      >
        <WhatsAppMark className="h-7 w-7" />
        <span className="sr-only">Conversar no WhatsApp</span>
      </WhatsAppLink>
    </aside>
  );
}