"use client";

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

/*
  O efeito de "analisando a foto" enquanto o fundo sai (como no Canva):
  listras azuis com brilho passando na diagonal, uma faixa de luz varrendo,
  faíscas piscando e um brilho na borda. Fica por cima da peça, no palco
  (que é escalado): as medidas usam --k = 1/escala para o traço ter o mesmo
  tamanho na tela em qualquer zoom. Ao terminar ("saindo"), dá um clarão e
  some.
*/

const FAISCAS = [
  [12, 18, 0],
  [78, 12, 0.5],
  [44, 36, 1.1],
  [88, 58, 0.3],
  [22, 70, 0.8],
  [62, 84, 1.4],
  [36, 92, 0.2],
  [70, 30, 1.7],
  [8, 46, 1.3],
  [52, 60, 0.6],
] as const;

const CSS = `
@keyframes ks-analise-listras { from { background-position: 0 0; } to { background-position: calc(var(--k) * 120px) 0; } }
@keyframes ks-analise-varre { 0% { transform: translateX(-60%) skewX(-16deg); } 100% { transform: translateX(260%) skewX(-16deg); } }
@keyframes ks-analise-pulsa { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ks-analise-faisca { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); } 70% { opacity: .2; } }
@keyframes ks-analise-sai { 0% { opacity: 1; filter: brightness(1); } 35% { opacity: 1; filter: brightness(1.8); } 100% { opacity: 0; filter: brightness(2.2); } }
.ks-analise { position: absolute; pointer-events: none; z-index: 14; overflow: hidden; border-radius: calc(var(--k) * 6px); }
.ks-analise-saindo { animation: ks-analise-sai .7s ease-out forwards; }
.ks-analise-tinta { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, rgba(59,130,246,.10), rgba(99,102,241,.22)); mix-blend-mode: screen; animation: ks-analise-pulsa 1.6s ease-in-out infinite; }
.ks-analise-listras { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .85;
  background-image: repeating-linear-gradient(115deg, transparent 0, transparent calc(var(--k) * 26px), rgba(96,165,250,.0) calc(var(--k) * 26px), rgba(125,211,252,.55) calc(var(--k) * 30px), rgba(96,165,250,.0) calc(var(--k) * 34px), transparent calc(var(--k) * 60px));
  background-size: calc(var(--k) * 120px) 100%;
  filter: drop-shadow(0 0 calc(var(--k) * 6px) rgba(56,189,248,.9));
  animation: ks-analise-listras .9s linear infinite; }
.ks-analise-faixa { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.15) 25%, rgba(186,230,253,.85) 50%, rgba(167,139,250,.35) 72%, transparent);
  filter: blur(calc(var(--k) * 6px));
  animation: ks-analise-varre 1.7s cubic-bezier(.45,.05,.4,.95) infinite; }
.ks-analise-borda { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 calc(var(--k) * 28px) rgba(59,130,246,.75), 0 0 calc(var(--k) * 22px) rgba(96,165,250,.55); animation: ks-analise-pulsa 1.2s ease-in-out infinite; }
.ks-analise-faisca { position: absolute; width: calc(var(--k) * 14px); height: calc(var(--k) * 14px); transform: translate(-50%, -50%); animation: ks-analise-faisca 1.9s ease-in-out infinite; }
.ks-analise-faisca::before, .ks-analise-faisca::after { content: ""; position: absolute; left: 50%; top: 50%; background: #E0F2FE; border-radius: 999px; box-shadow: 0 0 calc(var(--k) * 8px) #38BDF8, 0 0 calc(var(--k) * 16px) #6366F1; }
.ks-analise-faisca::before { width: 100%; height: calc(var(--k) * 2px); transform: translate(-50%, -50%); }
.ks-analise-faisca::after { width: calc(var(--k) * 2px); height: 100%; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { .ks-analise-listras, .ks-analise-faixa, .ks-analise-faisca { animation-duration: 6s; } }
`;

export function EfeitoDeAnalise({ peca, escala, saindo }: { peca: Peca; escala: number; saindo: boolean }) {
  const caixa = caixaDaPeca(peca);
  return (
    <div
      data-analisando={peca.id}
      className={`ks-analise ${saindo ? "ks-analise-saindo" : ""}`}
      style={{ left: caixa.left, top: caixa.top, width: caixa.width, height: caixa.height, transform: caixa.transform, ["--k" as string]: String(1 / Math.max(0.02, escala)) }}
    >
      <style>{CSS}</style>
      <div className="ks-analise-tinta" />
      <div className="ks-analise-listras" />
      <div className="ks-analise-faixa" />
      {FAISCAS.map(([x, y, atraso], i) => (
        <span key={i} className="ks-analise-faisca" style={{ left: `${x}%`, top: `${y}%`, animationDelay: `${atraso}s` }} />
      ))}
      <div className="ks-analise-borda" />
    </div>
  );
}