"use client";

import { useEffect, useState, type ReactNode } from "react";
import { ProvedorDaNavegacao } from "@/components/navegacao/ContextoDaNavegacao";
import { CANAL_DO_EDITOR } from "@/lib/pagina-inicial";
import { lerNavegacaoDoRascunho, lerPaginas, type NavegacaoDaLoja, type PaginaDaLoja } from "@/lib/navegacao-da-loja";

/*
  O cabeçalho, o menu e o rodapé dentro do editor da loja.

  Envolve o template inteiro (o shell do Vendor ou o StoreContent) na loja
  aberta com a passagem do editor. Aqui ela:
  - desenha o rascunho do menu e do rodapé que o painel manda (mensagem
    "navegacao"), no lugar do que está publicado;
  - marca o cabeçalho e o rodapé como regiões: contorno ao passar o mouse,
    o nome da região e, no clique, avisa o painel para abrir os ajustes
    dela (mensagem "regiao"). O clique num link da região não navega;
  - contorna firme a região que o painel escolheu.

  Conversa só com a origem do painel que veio assinada na passagem e só com a
  janela que contém este quadro, como o resto do editor.
*/

type Regiao = "cabecalho" | "rodape";

export function NavegacaoNoEditor({
  origemDoPainel,
  publicada,
  paginas,
  children,
}: {
  origemDoPainel: string;
  publicada: NavegacaoDaLoja | null;
  paginas: PaginaDaLoja[];
  children: ReactNode;
}) {
  /* undefined = o painel ainda não mandou rascunho (vale a publicada);
     null = o rascunho é o desenho de sempre. */
  const [rascunho, setRascunho] = useState<NavegacaoDaLoja | null | undefined>(undefined);
  const [escolhida, setEscolhida] = useState<Regiao | null>(null);
  const [zoom, setZoom] = useState(1);

  useEffect(() => {
    let dentroDoQuadro = true;
    try {
      dentroDoQuadro = window.self !== window.top;
    } catch {
      dentroDoQuadro = true;
    }
    if (!dentroDoQuadro) return;

    const enviar = (mensagem: Record<string, unknown>) => {
      if (window.parent === window) return;
      window.parent.postMessage({ canal: CANAL_DO_EDITOR, ...mensagem }, origemDoPainel);
    };

    const aoReceber = (evento: MessageEvent) => {
      if (evento.origin !== origemDoPainel || evento.source !== window.parent) return;
      const m = evento.data as Record<string, unknown> | null;
      if (!m || typeof m !== "object" || m.canal !== CANAL_DO_EDITOR) return;
      if (m.tipo === "navegacao") {
        const lista = Array.isArray(m.paginas) ? lerPaginas(m.paginas) : paginas;
        const lida = lerNavegacaoDoRascunho(m.navegacao, lista);
        setRascunho(lida === "padrao" || lida === null ? null : lida);
      } else if (m.tipo === "regiao") {
        const id = m.id === "cabecalho" || m.id === "rodape" ? m.id : null;
        setEscolhida(id);
        if (id && m.rolar === true) {
          window.setTimeout(() => {
            document.querySelector(`[data-ks-regiao="${id}"]`)?.scrollIntoView({ behavior: "smooth", block: id === "rodape" ? "end" : "start" });
          }, 120);
        }
      } else if (m.tipo === "escala" && Number.isFinite(Number(m.valor))) {
        setZoom(Math.min(2.2, 1 / Math.min(1, Math.max(0.2, Number(m.valor)))));
      }
    };

    /* No janela, antes do editor das seções (que segura os links no
       documento): o clique dentro do cabeçalho ou do rodapé escolhe a
       região. Link não navega; botão (abrir o menu do celular, a busca)
       continua funcionando, para dar para ver o menu aberto. */
    const aoClicar = (evento: MouseEvent) => {
      const alvo = evento.target as Element | null;
      const regiao = alvo?.closest?.("[data-ks-regiao]");
      if (!regiao || alvo?.closest("[data-ks-editor-ui]")) return;
      const id = regiao.getAttribute("data-ks-regiao");
      if (id !== "cabecalho" && id !== "rodape") return;
      if (alvo?.closest("a[href]")) {
        evento.preventDefault();
        evento.stopImmediatePropagation();
      }
      setEscolhida(id);
      enviar({ tipo: "regiao", id });
    };

    window.addEventListener("message", aoReceber);
    window.addEventListener("click", aoClicar, true);
    return () => {
      window.removeEventListener("message", aoReceber);
      window.removeEventListener("click", aoClicar, true);
    };
  }, [origemDoPainel, paginas]);

  const valor = rascunho === undefined ? publicada : rascunho;
  const tamanho = Math.round(11 * zoom);

  return (
    <ProvedorDaNavegacao navegacao={valor} noEditor>
      <style
        data-ks-editor-ui=""
        dangerouslySetInnerHTML={{
          __html: `
[data-ks-regiao]{outline:2px dashed transparent;outline-offset:-3px;transition:outline-color .15s;cursor:pointer}
[data-ks-regiao]:hover{outline-color:#7C3AED}
footer[data-ks-regiao]{position:relative}
[data-ks-regiao]::after{position:absolute;left:8px;top:8px;z-index:90;pointer-events:none;border-radius:999px;background:#7C3AED;color:#fff;font:700 ${tamanho}px/1 system-ui,sans-serif;letter-spacing:.02em;padding:${Math.round(6 * zoom)}px ${Math.round(11 * zoom)}px;box-shadow:0 6px 16px -6px rgba(124,58,237,.7);opacity:0;transition:opacity .15s}
[data-ks-regiao]:hover::after{opacity:1}
[data-ks-regiao="cabecalho"]::after{content:"Cabeçalho e menu · clique para editar"}
[data-ks-regiao="rodape"]::after{content:"Rodapé · clique para editar"}
${escolhida ? `[data-ks-regiao="${escolhida}"]{outline:3px solid #7C3AED}[data-ks-regiao="${escolhida}"]::after{opacity:1}` : ""}
`,
        }}
      />
      {children}
    </ProvedorDaNavegacao>
  );
}