"use client";

import type { Peca } from "@/lib/banner-editor/documento";

/*
  Os pontos da Retícula Viva na própria peça (como no Illustrator): cada ponto
  de cor é uma bolinha para arrastar; o escolhido mostra o círculo tracejado
  do alcance e a alça para puxar. Fica dentro da caixa da peça na tela (gira
  com ela); os gestos são do palco (palco.tsx).
*/

export function PontosDaReticulaViva({
  peca,
  escala,
  escolhido,
  aoPegarPonto,
  aoPegarAlcance,
}: {
  peca: Peca;
  escala: number;
  escolhido: number | null;
  aoPegarPonto: (i: number, e: React.PointerEvent) => void;
  aoPegarAlcance: (i: number, e: React.PointerEvent) => void;
}) {
  const r = peca.reticulaViva;
  if (!r) return null;
  const w = peca.w * escala;
  const h = peca.h * escala;
  const menor = Math.min(peca.w, peca.h) * escala;
  const atual = escolhido !== null && escolhido < r.pontos.length ? escolhido : 0;
  const q = r.pontos[atual];
  const raio = q ? q.alcance * menor : 0;
  /* A alça do alcance: embaixo à direita do círculo (desfaz o giro da peça para ficar sempre no mesmo lado da tela). */
  const giro = ((45 - peca.rot) * Math.PI) / 180;
  const alca = q ? { x: q.x * w + Math.cos(giro) * raio, y: q.y * h + Math.sin(giro) * raio } : null;
  return (
    <>
      {q ? (
        <svg className="pointer-events-none absolute left-0 top-0 overflow-visible" width={w} height={h} aria-hidden="true" data-alcance-vivo>
          <circle cx={q.x * w} cy={q.y * h} r={raio} fill="none" stroke="#1F1B2E" strokeOpacity={0.35} strokeWidth={3.5} />
          <circle cx={q.x * w} cy={q.y * h} r={raio} fill="none" stroke="#FFFFFF" strokeWidth={1.8} strokeDasharray="7 5" />
          {alca ? <line x1={q.x * w} y1={q.y * h} x2={alca.x} y2={alca.y} stroke="#FFFFFF" strokeOpacity={0.7} strokeWidth={1.2} strokeDasharray="3 4" /> : null}
        </svg>
      ) : null}
      {alca ? (
        <span
          title="Alcance: puxe para o ponto pegar mais longe ou mais perto"
          onPointerDown={(e) => aoPegarAlcance(atual, e)}
          className="pointer-events-auto absolute flex h-7 w-7 cursor-nwse-resize items-center justify-center"
          style={{ left: alca.x, top: alca.y, transform: "translate(-50%,-50%)", touchAction: "none" }}
          data-alca-do-alcance
        >
          <span className="block h-[13px] w-[13px] rounded-[3px] bg-white shadow-[0_1px_4px_rgba(0,0,0,0.4)] ring-1 ring-black/25" />
        </span>
      ) : null}
      {r.pontos.map((p, i) => (
        <span
          key={i}
          title={`Ponto ${i + 1}: arraste para mudar de lugar`}
          onPointerDown={(e) => aoPegarPonto(i, e)}
          className="pointer-events-auto absolute flex h-9 w-9 cursor-grab items-center justify-center active:cursor-grabbing"
          style={{ left: p.x * w, top: p.y * h, transform: "translate(-50%,-50%)", touchAction: "none" }}
          data-ponto-vivo-na-arte={i}
        >
          <span className={`block rounded-full bg-white p-[3px] shadow-[0_1px_5px_rgba(0,0,0,0.45)] ${i === atual ? "h-[26px] w-[26px] ring-2 ring-[#8B3DFF]" : "h-[20px] w-[20px] ring-1 ring-black/20"}`}>
            <span className="block h-full w-full rounded-full" style={{ background: p.cor }} />
          </span>
        </span>
      ))}
    </>
  );
}