"use client";

import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { ArrowDownToLine, ArrowUpToLine, ClipboardPaste, Copy, CopyPlus, Eye, EyeOff, Group, Lock, LockOpen, MousePointerSquareDashed, Paintbrush, Trash2, Ungroup } from "lucide-react";

/*
  O menu do botão direito na arte (como o do Canva): o que dá para fazer com
  a peça (ou as peças) escolhidas, com o atalho ao lado. No vazio, só colar e
  escolher tudo. Fecha ao clicar fora, com Esc ou ao escolher uma ação.
*/

export type AcaoDoMenu =
  | "copiar"
  | "colar"
  | "duplicar"
  | "apagar"
  | "frente"
  | "tras"
  | "agrupar"
  | "desagrupar"
  | "travar"
  | "esconder"
  | "copiar-estilo"
  | "colar-estilo"
  | "escolher-tudo";

type Item = { acao: AcaoDoMenu; rotulo: string; atalho?: string; Icone: typeof Copy; perigo?: boolean };

export function MenuDaPeca({
  x,
  y,
  quantas,
  travadas,
  agrupadas,
  ocultas,
  temCopia,
  temEstilo,
  aoEscolher,
  aoFechar,
}: {
  x: number;
  y: number;
  /* Quantas peças estão escolhidas (0 = clicou no vazio). */
  quantas: number;
  travadas: boolean;
  /* As escolhidas formam (ou têm) um grupo. */
  agrupadas: boolean;
  ocultas: boolean;
  temCopia: boolean;
  temEstilo: boolean;
  aoEscolher: (acao: AcaoDoMenu) => void;
  aoFechar: () => void;
}) {
  const caixa = useRef<HTMLDivElement | null>(null);
  const [lugar, setLugar] = useState({ x, y });

  /* Não sai da tela: abre para cima ou para a esquerda quando precisa. */
  useLayoutEffect(() => {
    const el = caixa.current;
    if (!el) return;
    const { width, height } = el.getBoundingClientRect();
    setLugar({ x: Math.min(x, window.innerWidth - width - 8), y: y + height > window.innerHeight - 8 ? Math.max(8, y - height) : y });
  }, [x, y]);

  useEffect(() => {
    const fora = (e: MouseEvent) => {
      if (!caixa.current?.contains(e.target as Node)) aoFechar();
    };
    const tecla = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.stopPropagation();
        aoFechar();
      }
    };
    document.addEventListener("mousedown", fora);
    window.addEventListener("keydown", tecla, true);
    window.addEventListener("blur", aoFechar);
    return () => {
      document.removeEventListener("mousedown", fora);
      window.removeEventListener("keydown", tecla, true);
      window.removeEventListener("blur", aoFechar);
    };
  }, [aoFechar]);

  const grupos: Item[][] = quantas
    ? [
        [
          { acao: "copiar", rotulo: "Copiar", atalho: "Ctrl+C", Icone: Copy },
          ...(temCopia ? [{ acao: "colar" as const, rotulo: "Colar", atalho: "Ctrl+V", Icone: ClipboardPaste }] : []),
          { acao: "duplicar", rotulo: "Duplicar", atalho: "Ctrl+D", Icone: CopyPlus },
        ],
        [
          { acao: "copiar-estilo", rotulo: "Copiar estilo", atalho: "Ctrl+Alt+C", Icone: Paintbrush },
          ...(temEstilo ? [{ acao: "colar-estilo" as const, rotulo: "Colar estilo", atalho: "Ctrl+Alt+V", Icone: Paintbrush }] : []),
        ],
        [
          { acao: "frente", rotulo: "Trazer para a frente", atalho: "Ctrl+]", Icone: ArrowUpToLine },
          { acao: "tras", rotulo: "Enviar para trás", atalho: "Ctrl+[", Icone: ArrowDownToLine },
          ...(agrupadas ? [{ acao: "desagrupar" as const, rotulo: "Desagrupar", atalho: "Ctrl+Shift+G", Icone: Ungroup }] : []),
          ...(quantas > 1 && !agrupadas ? [{ acao: "agrupar" as const, rotulo: "Agrupar", atalho: "Ctrl+G", Icone: Group }] : []),
        ],
        [
          { acao: "travar", rotulo: travadas ? "Destravar" : "Travar no lugar", Icone: travadas ? LockOpen : Lock },
          { acao: "esconder", rotulo: ocultas ? "Mostrar" : "Esconder", Icone: ocultas ? Eye : EyeOff },
          { acao: "apagar", rotulo: quantas > 1 ? `Apagar ${quantas} peças` : "Apagar", atalho: "Delete", Icone: Trash2, perigo: true },
        ],
      ]
    : [
        [
          ...(temCopia ? [{ acao: "colar" as const, rotulo: "Colar", atalho: "Ctrl+V", Icone: ClipboardPaste }] : []),
          { acao: "escolher-tudo", rotulo: "Escolher tudo", atalho: "Ctrl+A", Icone: MousePointerSquareDashed },
        ],
      ];

  return (
    <div
      ref={caixa}
      role="menu"
      className="fixed z-[120] w-[240px] rounded-[12px] bg-white p-1.5 shadow-[0_18px_50px_rgba(20,11,43,0.28)] ring-1 ring-black/5"
      style={{ left: lugar.x, top: lugar.y }}
      onContextMenu={(e) => e.preventDefault()}
    >
      {grupos
        .filter((g) => g.length)
        .map((grupo, i) => (
          <div key={i} className={i ? "mt-1 border-t border-[#EEEBF5] pt-1" : ""}>
            {grupo.map(({ acao, rotulo, atalho, Icone, perigo }) => (
              <button
                key={acao}
                type="button"
                role="menuitem"
                onClick={() => {
                  aoEscolher(acao);
                  aoFechar();
                }}
                className={`flex w-full items-center gap-2.5 rounded-[8px] px-2.5 py-[7px] text-left text-[12.5px] font-medium transition ${perigo ? "text-[#BE123C] hover:bg-[#FFE4E6]" : "text-[#2B2640] hover:bg-[#F3F1F9]"}`}
              >
                <Icone size={15} className="shrink-0 opacity-80" />
                <span className="flex-1">{rotulo}</span>
                {atalho ? <span className="text-[11px] text-[#9A94AE]">{atalho}</span> : null}
              </button>
            ))}
          </div>
        ))}
    </div>
  );
}