"use client";

import { Plus, Trash2 } from "lucide-react";
import { MISTURAS, SEM_FILTROS, conteudoDaPeca, type DistorcaoDaPeca, type EfeitoDaPeca, type FiltrosDaImagem, type Mistura, type Peca, type PecaDeImagem } from "@/lib/banner-editor/documento";
import { Chave, Cor, Opcoes, Regua } from "./campos";
import { PARADO, PERSPECTIVA } from "@/lib/banner-editor/animacao";
import { pontoNoEstado } from "@/lib/banner-editor/perspectiva";

/*
  Os painéis de acabamento: modo de mesclagem, os vários efeitos da camada
  (sombras, brilhos, sombra interna, contorno em degradê), os ajustes
  completos da foto com os filtros prontos, e o distorcer/perspectiva.
*/

function Secao({ titulo, children, acao }: { titulo: string; children: React.ReactNode; acao?: React.ReactNode }) {
  return (
    <section className="mb-6">
      <div className="mb-2.5 flex items-center justify-between">
        <h3 className="text-[13px] font-bold text-[#1F1B2E]">{titulo}</h3>
        {acao}
      </div>
      {children}
    </section>
  );
}

/* ------------------------------------------------------------ mesclagem */

export const NOMES_DA_MISTURA: Record<Mistura, { nome: string; dica: string }> = {
  normal: { nome: "Normal", dica: "A peça cobre o que está embaixo." },
  tela: { nome: "Tela", dica: "Só clareia: o preto some. Use em fotos de luz, bokeh, fumaça e brilho." },
  multiplicar: { nome: "Multiplicar", dica: "Só escurece: o branco some. Bom para sombra, textura e estampa no produto." },
  sobrepor: { nome: "Sobrepor", dica: "Aumenta o contraste: a textura entra na foto em vez de ficar por cima." },
  "luz-suave": { nome: "Luz suave", dica: "Como o Sobrepor, mais delicado. Ótimo para tingir e dar clima." },
  "luz-forte": { nome: "Luz forte", dica: "Contraste forte, como um holofote colorido." },
  clarear: { nome: "Clarear", dica: "Fica a mais clara das duas, ponto a ponto." },
  escurecer: { nome: "Escurecer", dica: "Fica a mais escura das duas, ponto a ponto." },
  subexpor: { nome: "Brilho intenso", dica: "Estoura a luz (subexposição de cor): faíscas e reflexos." },
  superexpor: { nome: "Queimar", dica: "Escurece com muita cor (superexposição)." },
  diferenca: { nome: "Diferença", dica: "Inverte onde se encontram: efeito gráfico." },
  cor: { nome: "Cor", dica: "Pinta o que está embaixo com a cor da peça, mantendo luz e sombra." },
  luminosidade: { nome: "Luminosidade", dica: "Usa a luz da peça e a cor do que está embaixo." },
};

export function SecaoDeMesclagem({ peca, mudar }: { peca: Peca; mudar: (c: Partial<Peca>) => void }) {
  const atual = peca.mistura ?? "normal";
  return (
    <Secao titulo="Mesclagem">
      <div className="grid grid-cols-3 gap-1.5" data-mesclagem>
        {MISTURAS.map((m) => (
          <button
            key={m}
            type="button"
            onClick={() => mudar({ mistura: m === "normal" ? undefined : m } as Partial<Peca>)}
            aria-pressed={atual === m}
            className={`h-9 rounded-[9px] px-1 text-[11.5px] font-semibold transition ${atual === m ? "bg-[#7C3AED] text-white" : "bg-[#F3F1F9] text-[#2B2640] hover:bg-[#EAE5F7]"}`}
          >
            {NOMES_DA_MISTURA[m].nome}
          </button>
        ))}
      </div>
      <p className="mt-2 text-[11.5px] leading-snug text-[#8A849E]">{NOMES_DA_MISTURA[atual].dica}</p>
    </Secao>
  );
}

/* -------------------------------------------------------- efeitos da camada */

const NOMES_DO_EFEITO: Record<EfeitoDaPeca["tipo"], string> = { sombra: "Sombra", brilho: "Brilho por fora", "sombra-interna": "Sombra por dentro", contorno: "Contorno" };

const NOVOS: Record<EfeitoDaPeca["tipo"], EfeitoDaPeca> = {
  sombra: { tipo: "sombra", cor: "#000000", x: 0, y: 14, desfoque: 30, opacidade: 0.35 },
  brilho: { tipo: "brilho", cor: "#FFE066", x: 0, y: 0, desfoque: 40, opacidade: 0.9 },
  "sombra-interna": { tipo: "sombra-interna", cor: "#000000", x: 6, y: 8, desfoque: 18, opacidade: 0.45 },
  contorno: { tipo: "contorno", cor: "#FFFFFF", x: 0, y: 0, desfoque: 0, opacidade: 1, largura: 6 },
};

/** Os efeitos juntos na mesma peça: cada um com as suas medidas; a lista vai do de baixo para o de cima. */
export function EfeitosDaCamada({ peca, mudar }: { peca: Peca; mudar: (c: Partial<Peca>) => void }) {
  const lista = peca.efeitos || [];
  const trocar = (nova: EfeitoDaPeca[]) => mudar({ efeitos: nova.length ? nova : undefined } as Partial<Peca>);
  const mexer = (i: number, campos: Partial<EfeitoDaPeca>) => trocar(lista.map((e, j) => (j === i ? { ...e, ...campos } : e)));
  return (
    <div data-efeitos-da-camada>
      <p className="mb-4 rounded-[10px] bg-[#F1ECFF] px-3 py-2.5 text-[12px] font-medium leading-snug text-[#5B21B6]">Junte quantos quiser na mesma peça: sombra e brilho por fora, sombra por dentro, contorno (até em degradê).</p>
      <div className="mb-5 grid grid-cols-2 gap-1.5">
        {(Object.keys(NOVOS) as Array<EfeitoDaPeca["tipo"]>).map((tipo) => (
          <button key={tipo} type="button" disabled={lista.length >= 6} onClick={() => trocar([...lista, { ...NOVOS[tipo] }])} className="flex h-9 items-center justify-center gap-1.5 rounded-[9px] bg-[#F3F1F9] text-[12px] font-semibold text-[#2B2640] transition hover:bg-[#EAE5F7] disabled:opacity-40">
            <Plus size={13} /> {NOMES_DO_EFEITO[tipo]}
          </button>
        ))}
      </div>
      {lista.length ? null : <p className="text-[12px] text-[#8A849E]">Nenhum efeito ainda.</p>}
      {lista.map((e, i) => (
        <Secao
          key={i}
          titulo={`${i + 1}. ${NOMES_DO_EFEITO[e.tipo]}`}
          acao={
            <button type="button" aria-label={`Tirar o efeito ${i + 1}`} title="Tirar este efeito" onClick={() => trocar(lista.filter((_, j) => j !== i))} className="flex h-7 w-7 items-center justify-center rounded-[7px] text-[#8A849E] hover:bg-[#FFE4E6] hover:text-[#BE123C]">
              <Trash2 size={14} />
            </button>
          }
        >
          <div className="space-y-3 rounded-[12px] bg-[#F8F7FC] p-3">
            {e.tipo === "contorno" ? (
              <>
                <Chave rotulo="Em degradê" ligado={Boolean(e.cor2)} aoMudar={(v) => mexer(i, { cor2: v ? "#FF2D87" : undefined })} />
                <div className={e.cor2 ? "grid grid-cols-2 gap-2" : ""}>
                  <Cor rotulo={e.cor2 ? "Começo" : "Cor"} valor={e.cor} aoMudar={(cor) => mexer(i, { cor })} />
                  {e.cor2 ? <Cor rotulo="Fim" valor={e.cor2} aoMudar={(cor2) => mexer(i, { cor2 })} /> : null}
                </div>
                <Regua rotulo="Grossura" valor={e.largura ?? 6} min={1} max={40} aoMudar={(largura) => mexer(i, { largura })} />
              </>
            ) : (
              <Cor rotulo="Cor" valor={e.cor} aoMudar={(cor) => mexer(i, { cor })} />
            )}
            {e.tipo === "sombra" || e.tipo === "sombra-interna" ? (
              <div className="grid grid-cols-2 gap-2">
                <Regua rotulo="Para o lado" valor={e.x} min={-80} max={80} aoMudar={(x) => mexer(i, { x })} />
                <Regua rotulo="Para baixo" valor={e.y} min={-80} max={80} aoMudar={(y) => mexer(i, { y })} />
              </div>
            ) : null}
            {e.tipo !== "contorno" ? <Regua rotulo={e.tipo === "brilho" ? "Tamanho do brilho" : "Desfoque"} valor={e.desfoque} min={0} max={160} aoMudar={(desfoque) => mexer(i, { desfoque })} /> : null}
            <Regua rotulo="Força" valor={Math.round(e.opacidade * 100)} min={5} max={100} aoMudar={(v) => mexer(i, { opacidade: v / 100 })} formato={(v) => `${Math.round(v)}%`} />
          </div>
        </Secao>
      ))}
    </div>
  );
}

/* ------------------------------------------------------ ajustes da foto */

/** Filtros prontos (como os LUT): o lojista padroniza o feed com um clique. */
export const FILTROS_PRONTOS: Array<{ nome: string; filtros: Partial<FiltrosDaImagem> }> = [
  { nome: "Original", filtros: {} },
  { nome: "Loja clara", filtros: { exposicao: 12, contraste: 106, saturacao: 106, nitidez: 25, brancos: 238 } },
  { nome: "Quente", filtros: { temperatura: 38, saturacao: 112, exposicao: 4 } },
  { nome: "Frio", filtros: { temperatura: -38, saturacao: 94, contraste: 104 } },
  { nome: "Vívido", filtros: { saturacao: 145, contraste: 114, nitidez: 30 } },
  { nome: "Suave", filtros: { contraste: 86, brilho: 106, saturacao: 88, pretos: 22 } },
  { nome: "Dramático", filtros: { contraste: 138, exposicao: -12, saturacao: 88, vinheta: 50, nitidez: 30 } },
  { nome: "P&B", filtros: { saturacao: 0, contraste: 118 } },
  { nome: "Vintage", filtros: { temperatura: 24, saturacao: 74, contraste: 90, pretos: 32, vinheta: 32, sobreposicao: { cor: "#F4A261", forca: 20, mistura: "luz-suave" } } },
  { nome: "Cinema", filtros: { temperatura: -10, contraste: 122, vinheta: 38, sobreposicao: { cor: "#008C8C", forca: 18, mistura: "luz-suave" } } },
  { nome: "Pôr do sol", filtros: { temperatura: 46, saturacao: 116, sobreposicao: { cor: "#FF4E50", forca: 22, mistura: "luz-suave" } } },
  { nome: "Neon", filtros: { saturacao: 160, contraste: 120, sobreposicao: { cor: "#C026D3", forca: 22, mistura: "tela" } } },
];

function AmostraDoFiltro({ foto, filtros, chave }: { foto: PecaDeImagem; filtros: FiltrosDaImagem; chave: string }) {
  const amostra: PecaDeImagem = { ...foto, id: `${foto.id}-f${chave}`, x: 0, y: 0, w: 88, h: 64, rot: 0, opacidade: 1, filtros, sombra: null, borda: null, adesivo: null, transparencia: null, efeitos: undefined, distorcao: null, ajuste: "cobrir", raio: 0, circulo: false, mascara: null };
  return <span className="pointer-events-none block h-[64px] w-[88px] overflow-hidden rounded-[8px]" dangerouslySetInnerHTML={{ __html: conteudoDaPeca(amostra) }} />;
}

export function AjustesCompletos({ p, mudar }: { p: PecaDeImagem; mudar: (c: Partial<PecaDeImagem>) => void }) {
  const f = p.filtros;
  const m = (campos: Partial<FiltrosDaImagem>) => mudar({ filtros: { ...f, ...campos } });
  const s = f.sobreposicao;
  return (
    <div data-ajustes-completos>
      <Secao titulo="Filtros prontos">
        <div className="grid grid-cols-3 gap-2">
          {FILTROS_PRONTOS.map((pronto, i) => {
            const filtros = { ...SEM_FILTROS, ...pronto.filtros };
            return (
              <button key={pronto.nome} type="button" onClick={() => mudar({ filtros })} className="group text-center" data-filtro-pronto={pronto.nome}>
                <span className="block overflow-hidden rounded-[9px] ring-1 ring-black/5 transition group-hover:ring-2 group-hover:ring-[#C4B5FD]">
                  <AmostraDoFiltro foto={p} filtros={filtros} chave={String(i)} />
                </span>
                <span className="mt-1 block text-[11px] font-medium text-[#4B4760]">{pronto.nome}</span>
              </button>
            );
          })}
        </div>
      </Secao>
      <Secao
        titulo="Luz"
        acao={
          <button type="button" onClick={() => mudar({ filtros: { ...SEM_FILTROS } })} className="text-[11.5px] font-semibold text-[#7C3AED] hover:underline">
            Restaurar tudo
          </button>
        }
      >
        <div className="space-y-3.5">
          <Regua rotulo="Exposição" valor={f.exposicao ?? 0} min={-100} max={100} aoMudar={(exposicao) => m({ exposicao })} />
          <Regua rotulo="Brilho" valor={f.brilho} min={30} max={200} aoMudar={(brilho) => m({ brilho })} formato={(v) => `${Math.round(v)}%`} />
          <Regua rotulo="Contraste" valor={f.contraste} min={30} max={200} aoMudar={(contraste) => m({ contraste })} formato={(v) => `${Math.round(v)}%`} />
          <div className="grid grid-cols-3 gap-2">
            <Regua rotulo="Pretos" valor={f.pretos ?? 0} min={0} max={120} aoMudar={(pretos) => m({ pretos })} />
            <Regua rotulo="Meios" valor={Math.round((f.gama ?? 1) * 100)} min={30} max={250} aoMudar={(v) => m({ gama: v / 100 })} formato={(v) => (v / 100).toFixed(2)} />
            <Regua rotulo="Brancos" valor={f.brancos ?? 255} min={140} max={255} aoMudar={(brancos) => m({ brancos })} />
          </div>
        </div>
      </Secao>
      <Secao titulo="Cor">
        <div className="space-y-3.5">
          <Regua rotulo="Temperatura" valor={f.temperatura ?? 0} min={-100} max={100} aoMudar={(temperatura) => m({ temperatura })} formato={(v) => (v > 0 ? `+${Math.round(v)} quente` : v < 0 ? `${Math.round(v)} frio` : "0")} />
          <Regua rotulo="Matiz" valor={f.matiz ?? 0} min={-180} max={180} aoMudar={(matiz) => m({ matiz })} formato={(v) => `${Math.round(v)}°`} />
          <Regua rotulo="Saturação" valor={f.saturacao} min={0} max={250} aoMudar={(saturacao) => m({ saturacao })} formato={(v) => `${Math.round(v)}%`} />
          <Chave rotulo="Cor por cima" ligado={Boolean(s)} aoMudar={(v) => m({ sobreposicao: v ? { cor: "#FF7A00", forca: 25, mistura: "luz-suave" } : null })} />
          {s ? (
            <div className="space-y-3 rounded-[12px] bg-[#F8F7FC] p-3">
              <Cor rotulo="Cor" valor={s.cor} aoMudar={(cor) => m({ sobreposicao: { ...s, cor } })} />
              <Regua rotulo="Força" valor={s.forca} min={5} max={100} aoMudar={(forca) => m({ sobreposicao: { ...s, forca } })} formato={(v) => `${Math.round(v)}%`} />
              <Opcoes
                valor={s.mistura === "tela" || s.mistura === "multiplicar" || s.mistura === "cor" ? s.mistura : "luz-suave"}
                opcoes={[
                  { valor: "luz-suave", rotulo: "Suave" },
                  { valor: "cor", rotulo: "Tingir" },
                  { valor: "tela", rotulo: "Clarear" },
                  { valor: "multiplicar", rotulo: "Escurecer" },
                ]}
                aoMudar={(mistura) => m({ sobreposicao: { ...s, mistura } })}
              />
            </div>
          ) : null}
        </div>
      </Secao>
      <Secao titulo="Detalhe">
        <div className="space-y-3.5">
          <Regua rotulo="Nitidez" valor={f.nitidez ?? 0} min={0} max={100} aoMudar={(nitidez) => m({ nitidez })} />
          <Regua rotulo="Vinheta" valor={f.vinheta ?? 0} min={0} max={100} aoMudar={(vinheta) => m({ vinheta })} />
          <Regua rotulo="Desfoque" valor={f.desfoque} min={0} max={30} aoMudar={(desfoque) => m({ desfoque })} />
        </div>
      </Secao>
    </div>
  );
}

/* --------------------------------------------------------------- distorcer */

const RETO: DistorcaoDaPeca["cantos"] = [
  [0, 0],
  [1, 0],
  [1, 1],
  [0, 1],
];

/** Perspectiva pelos cantos (no palco) e inclinar pelos controles. */
export function SecaoDeDistorcer({ peca, mudar, aoDistorcer, distorcendo }: { peca: Peca; mudar: (c: Partial<Peca>) => void; aoDistorcer?: () => void; distorcendo?: boolean }) {
  const cantos = peca.distorcao?.cantos ?? RETO;
  /* Inclinar: o topo anda para um lado e a base para o outro (ou a esquerda sobe e a direita desce). */
  const inclinacaoH = Math.round(((cantos[0][0] + cantos[1][0] - cantos[3][0] - cantos[2][0]) / 2) * 100);
  const inclinacaoV = Math.round(((cantos[1][1] + cantos[2][1] - cantos[0][1] - cantos[3][1]) / 2) * 100);
  const inclinar = (h: number, v: number) => {
    const dh = h / 200;
    const dv = v / 200;
    const novos: DistorcaoDaPeca["cantos"] = [
      [0 + dh, 0 - dv],
      [1 + dh, 0 + dv],
      [1 - dh, 1 + dv],
      [0 - dh, 1 - dv],
    ];
    mudar({ distorcao: h || v ? { cantos: novos } : null } as Partial<Peca>);
  };
  /* Girar em 3D: os cantos da peça girada com perspectiva (a mesma conta do 3D da animação). */
  const [gx, gy] = peca.distorcao?.giro3d ?? [0, 0];
  const girar3d = (x: number, y: number) => {
    if (!x && !y) return mudar({ distorcao: null } as Partial<Peca>);
    const centro: [number, number] = [peca.w / 2, peca.h / 2];
    const p = PERSPECTIVA * Math.max(peca.w, peca.h);
    const cantos = ([[0, 0], [peca.w, 0], [peca.w, peca.h], [0, peca.h]] as const).map(([x0, y0]) => {
      const [px, py] = pontoNoEstado({ ...PARADO, rx: x, ry: y }, centro, p, x0, y0);
      return [Math.round((px / peca.w) * 10000) / 10000, Math.round((py / peca.h) * 10000) / 10000] as [number, number];
    }) as DistorcaoDaPeca["cantos"];
    mudar({ distorcao: { cantos, giro3d: [x, y] } } as Partial<Peca>);
  };
  return (
    <Secao
      titulo="Distorcer e perspectiva"
      acao={
        peca.distorcao ? (
          <button type="button" onClick={() => mudar({ distorcao: null } as Partial<Peca>)} className="text-[11.5px] font-semibold text-[#7C3AED] hover:underline">
            Desfazer
          </button>
        ) : null
      }
    >
      <div className="space-y-3" data-distorcer>
        {aoDistorcer ? (
          <button type="button" onClick={aoDistorcer} aria-pressed={distorcendo} className={`flex h-10 w-full items-center justify-center rounded-[10px] text-[12.5px] font-bold transition ${distorcendo ? "bg-[#7C3AED] text-white" : "bg-[#F1EEFB] text-[#5B21B6] hover:bg-[#E7E1F8]"}`}>
            {distorcendo ? "Pronto (arraste os 4 cantos na arte)" : "Arrastar os cantos (perspectiva)"}
          </button>
        ) : null}
        <Regua rotulo="Girar em 3D: de cima para baixo" valor={gx} min={-70} max={70} aoMudar={(x) => girar3d(x, gy)} />
        <Regua rotulo="Girar em 3D: de lado" valor={gy} min={-70} max={70} aoMudar={(y) => girar3d(gx, y)} />
        <Regua rotulo="Inclinar na horizontal" valor={inclinacaoH} min={-60} max={60} aoMudar={(h) => inclinar(h, inclinacaoV)} />
        <Regua rotulo="Inclinar na vertical" valor={inclinacaoV} min={-60} max={60} aoMudar={(v) => inclinar(inclinacaoH, v)} />
      </div>
    </Secao>
  );
}