"use client";

import { useEffect, useRef, useState, type ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChevronDown, ChevronRight, Menu } from "lucide-react";
import type { Destino, ItemPronto } from "@/lib/navegacao-da-loja";
import type { VendorCategoria } from "./VendorShell";

/*
  O menu próprio da loja no template Vendor (publicado no editor do painel).

  Escrito para o Vendor, como o resto do shell: as pílulas da faixa de
  categorias, o painel que desce do grupo com o mesmo desenho do painel das
  categorias, e a lista da gaveta do celular. Sem menu próprio publicado o
  VendorShell nem monta este arquivo.
*/

type Raiz = VendorCategoria & { filhas: Array<VendorCategoria & { netas: VendorCategoria[] }> };

function LinkDoVendor({ destino, className, style, onClick, children }: { destino: Destino; className?: string; style?: React.CSSProperties; onClick?: () => void; children: ReactNode }) {
  const alvo = destino.novaAba ? "_blank" : undefined;
  const rel = destino.novaAba || destino.externo ? "noopener noreferrer" : undefined;
  return destino.externo ? (
    <a href={destino.href} target={alvo} rel={rel} className={className} style={style} onClick={onClick}>
      {children}
    </a>
  ) : (
    <Link href={destino.href} target={alvo} rel={rel} className={className} style={style} onClick={onClick}>
      {children}
    </Link>
  );
}

function naRota(caminho: string | null, href: string) {
  return Boolean(caminho) && String(caminho).replace(/\/+$/, "") === href.replace(/\/+$/, "");
}

const PILULA = "flex shrink-0 items-center gap-1 whitespace-nowrap rounded-md px-2.5 py-1.5 text-xs font-medium transition-all";

/** A faixa do computador: os itens próprios e, se a loja quiser, "Categorias". */
export function VendorFaixaDoMenuProprio({
  slug,
  itens,
  mostrarCategorias,
  arvore,
  linkDaCategoria,
}: {
  slug: string;
  itens: ItemPronto[];
  mostrarCategorias: boolean;
  arvore: Raiz[];
  linkDaCategoria: (categoria: VendorCategoria) => string;
}) {
  const caminho = usePathname();
  const [aberto, setAberto] = useState<string | null>(null);
  const caixa = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!aberto) return;
    const fora = (evento: MouseEvent) => {
      if (!caixa.current?.contains(evento.target as Node)) setAberto(null);
    };
    const esc = (evento: KeyboardEvent) => {
      if (evento.key === "Escape") setAberto(null);
    };
    document.addEventListener("mousedown", fora);
    document.addEventListener("keydown", esc);
    return () => {
      document.removeEventListener("mousedown", fora);
      document.removeEventListener("keydown", esc);
    };
  }, [aberto]);

  const estiloDe = (ativo: boolean, estaAberto: boolean, destaque: boolean) =>
    destaque || ativo
      ? { backgroundColor: "var(--vd-primary)", color: "var(--vd-primary-fg)", opacity: 1, fontWeight: destaque ? 700 : undefined }
      : estaAberto
        ? { backgroundColor: "color-mix(in srgb, currentColor 12%, transparent)", opacity: 1 }
        : { opacity: 0.85 };

  const grupoAberto = itens.find((item) => item.id === aberto && item.filhos.length);

  return (
    <div ref={caixa} onMouseLeave={() => setAberto(null)}>
      <div className="mx-auto w-full max-w-6xl px-4">
        <nav className="flex flex-nowrap items-center justify-center gap-1 py-1">
          {mostrarCategorias ? (
            <button
              type="button"
              onMouseEnter={() => setAberto("__categorias__")}
              onClick={() => setAberto(aberto === "__categorias__" ? null : "__categorias__")}
              className="flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-2.5 py-1.5 text-xs font-semibold transition-opacity hover:opacity-80"
              style={aberto === "__categorias__" ? { backgroundColor: "color-mix(in srgb, currentColor 12%, transparent)" } : undefined}
            >
              <Menu className="h-4 w-4 shrink-0" />
              Categorias
              <ChevronDown className={`h-3.5 w-3.5 shrink-0 transition-transform ${aberto === "__categorias__" ? "rotate-180" : ""}`} />
            </button>
          ) : null}

          {itens.map((item) => {
            if (item.filhos.length || !item.destino) {
              const estaAberto = aberto === item.id;
              const ativo = item.filhos.some((filho) => !filho.destino.externo && naRota(caminho, filho.destino.href));
              return (
                <button
                  key={item.id}
                  type="button"
                  onMouseEnter={() => setAberto(item.id)}
                  onClick={() => setAberto(estaAberto ? null : item.id)}
                  className={PILULA}
                  style={estiloDe(ativo, estaAberto, item.destaque)}
                >
                  {item.rotulo}
                  <ChevronDown className={`h-3.5 w-3.5 shrink-0 transition-transform ${estaAberto ? "rotate-180" : ""}`} />
                </button>
              );
            }
            const ativo = !item.destino.externo && naRota(caminho, item.destino.href);
            return (
              <LinkDoVendor key={item.id} destino={item.destino} className={PILULA} style={estiloDe(ativo, false, item.destaque)}>
                <span onMouseEnter={() => setAberto(null)}>{item.rotulo}</span>
              </LinkDoVendor>
            );
          })}
        </nav>
      </div>

      {aberto === "__categorias__" ? (
        <div className="absolute inset-x-0 top-full border-b bg-[var(--vd-surface)] text-[var(--vd-foreground)] shadow-xl" style={{ borderColor: "var(--vd-border)" }}>
          <div className="mx-auto w-full max-w-6xl px-4 py-6">
            <div className="grid grid-cols-4 gap-x-10 gap-y-6">
              <div className="min-w-0">
                <Link
                  href={`/${slug}`}
                  onClick={() => setAberto(null)}
                  className="mb-2 block border-b pb-2 text-[13px] font-bold"
                  style={{ borderColor: "var(--vd-border)" }}
                >
                  Todos os Produtos
                </Link>
              </div>
              {arvore.map((raiz) => (
                <div key={raiz.id} className="min-w-0">
                  <Link
                    href={linkDaCategoria(raiz)}
                    onClick={() => setAberto(null)}
                    className="mb-2 block border-b pb-2 text-[13px] font-bold"
                    style={{ borderColor: "var(--vd-border)" }}
                  >
                    {raiz.name}
                  </Link>
                  <div className="space-y-1.5">
                    {raiz.filhas.map((filha) => (
                      <Link
                        key={filha.id}
                        href={linkDaCategoria(filha)}
                        onClick={() => setAberto(null)}
                        className="block truncate text-[13px] text-[var(--vd-muted-fg)] transition-colors hover:text-[var(--vd-primary)]"
                      >
                        {filha.name}
                      </Link>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : grupoAberto ? (
        <div className="absolute inset-x-0 top-full border-b bg-[var(--vd-surface)] text-[var(--vd-foreground)] shadow-xl" style={{ borderColor: "var(--vd-border)" }}>
          <div className="mx-auto w-full max-w-6xl px-4 py-6">
            <p className="mb-3 border-b pb-2 text-[13px] font-bold" style={{ borderColor: "var(--vd-border)" }}>
              {grupoAberto.rotulo}
            </p>
            <div className="grid grid-cols-3 gap-x-10 gap-y-2">
              {grupoAberto.filhos.map((filho) => (
                <LinkDoVendor
                  key={filho.id}
                  destino={filho.destino}
                  onClick={() => setAberto(null)}
                  className="block truncate text-[13px] text-[var(--vd-muted-fg)] transition-colors hover:text-[var(--vd-primary)]"
                >
                  {filho.rotulo}
                </LinkDoVendor>
              ))}
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

/** Os itens próprios na gaveta do celular, antes das categorias. */
export function VendorGavetaDoMenuProprio({ itens, aoEscolher }: { itens: ItemPronto[]; aoEscolher: () => void }) {
  return (
    <div className="mb-1">
      {itens.map((item) =>
        item.filhos.length || !item.destino ? (
          <div key={item.id}>
            <p className="px-3 pb-1 pt-2.5 text-sm font-semibold">{item.rotulo}</p>
            <div className="mb-1 ml-3 border-l pl-3" style={{ borderColor: "var(--vd-border)" }}>
              {item.filhos.map((filho) => (
                <LinkDoVendor key={filho.id} destino={filho.destino} onClick={aoEscolher} className="block rounded-lg px-3 py-2 text-[13px] text-[var(--vd-muted-fg)]">
                  {filho.rotulo}
                </LinkDoVendor>
              ))}
            </div>
          </div>
        ) : (
          <LinkDoVendor
            key={item.id}
            destino={item.destino}
            onClick={aoEscolher}
            className="flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-semibold"
            style={item.destaque ? { color: "var(--vd-primary)" } : undefined}
          >
            {item.rotulo}
            <ChevronRight className="h-4 w-4 opacity-40" />
          </LinkDoVendor>
        )
      )}
    </div>
  );
}