"use client";

import { temAlcas } from "@/lib/banner-editor/curvas";
import { useState } from "react";
import { Minus, MousePointer2, Plus, Trash2 } from "lucide-react";
import { CampoDecimal } from "@/components/ui/campo-decimal";
import {
  EFEITOS_DO_TEXTO,
  ESTILOS_DE_GRAFICO,
  FONTES,
  PONTAS_DO_TRACO,
  conteudoDaPeca,
  fontesDaMarca,
  solida,
  type EfeitoDoTexto,
  type Forma,
  type PecaDeGrafico,
  type PecaDeImagem,
  type PecaDeQr,
  type PecaDeTabela,
  type PecaDeTexto,
  type PecaDeTraco,
  type PontaDoTraco,
} from "@/lib/banner-editor/documento";
import { CampoDePintura, CampoDeSombra, Chave, Cor, Opcoes, Regua } from "./campos";

/*
  Os ajustes das peças do Pacote 2 do editor (out/2026): linha e seta,
  QR code, tabela, gráfico, o estilo pronto da letra (e a lista) e a foto
  dentro de uma forma (moldura) com o enquadre.
*/

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>
  );
}

function Dica({ children }: { children: React.ReactNode }) {
  return (
    <p className="mb-4 flex items-start gap-2 rounded-[10px] bg-[#F1ECFF] px-3 py-2.5 text-[12px] font-medium leading-snug text-[#5B21B6]">
      <MousePointer2 size={14} className="mt-[1px] shrink-0" />
      {children}
    </p>
  );
}

const campo = "ks-field h-9 w-full min-w-0 text-[12.5px]";

/** Escolha de fonte compacta (lista do editor e as da marca). */
function EscolhaDeFonte({ valor, aoMudar }: { valor: string; aoMudar: (chave: string) => void }) {
  const daMarca = fontesDaMarca();
  return (
    <select value={valor} onChange={(e) => aoMudar(e.target.value)} className={campo} aria-label="Fonte">
      {daMarca.length ? (
        <optgroup label="Da marca">
          {daMarca.map((f) => (
            <option key={f.chave} value={f.chave}>
              {f.nome}
            </option>
          ))}
        </optgroup>
      ) : null}
      <optgroup label="Fontes">
        {FONTES.map((f) => (
          <option key={f.chave} value={f.chave}>
            {f.familia}
          </option>
        ))}
      </optgroup>
    </select>
  );
}

/* ================================================================ traço */

const NOMES_DAS_PONTAS: Record<PontaDoTraco, string> = { nada: "Nada", seta: "Seta", "seta-aberta": "Aberta", circulo: "Bolinha", barra: "Barra", losango: "Losango" };

function amostraDaPonta(ponta: PontaDoTraco, fim: boolean) {
  const p: PecaDeTraco = { id: `amostra-${ponta}`, tipo: "traco", x: 0, y: 0, w: 54, h: 22, rot: 0, opacidade: 1, pontos: fim ? [{ x: 0.08, y: 0.5 }, { x: 0.86, y: 0.5 }] : [{ x: 0.86, y: 0.5 }, { x: 0.08, y: 0.5 }], fechado: false, suave: false, cor: "#1F1B2E", espessura: 2.5, tracejado: "solido", inicio: "nada", fim: ponta, preenchimento: solida("#000000"), sombra: null };
  return conteudoDaPeca(p);
}

function EscolhaDaPonta({ valor, aoMudar, fim }: { valor: PontaDoTraco; aoMudar: (p: PontaDoTraco) => void; fim: boolean }) {
  return (
    <div className="grid grid-cols-3 gap-1.5">
      {PONTAS_DO_TRACO.map((ponta) => (
        <button
          key={ponta}
          type="button"
          title={NOMES_DAS_PONTAS[ponta]}
          onClick={() => aoMudar(ponta)}
          className={`flex flex-col items-center gap-1 rounded-[10px] px-1 py-2 text-[10.5px] font-medium transition ${valor === ponta ? "bg-[#F1ECFF] text-[#5B21B6] ring-2 ring-[#8B5CF6]" : "bg-[#F6F4FB] text-[#6B6584] hover:bg-[#EEEAF8]"}`}
        >
          <span className="relative block h-[22px] w-[54px]" dangerouslySetInnerHTML={{ __html: amostraDaPonta(ponta, fim) }} />
          {NOMES_DAS_PONTAS[ponta]}
        </button>
      ))}
    </div>
  );
}

export function EfeitosDoTraco({ p, mudar }: { p: PecaDeTraco; mudar: (c: Partial<PecaDeTraco>) => void }) {
  /* Forma fechada pode ficar só com a cor de dentro (contorno desligado = grossura 0). */
  const comContorno = !p.fechado || p.espessura > 0;
  const linha = (
    <div className="space-y-3">
      <Cor rotulo={p.fechado ? "Cor do contorno" : "Cor da linha"} valor={p.cor} aoMudar={(cor) => mudar({ cor })} />
      <Regua rotulo="Grossura" valor={Math.max(1, Math.round(p.espessura))} min={1} max={80} aoMudar={(espessura) => mudar({ espessura })} />
      <Opcoes
        valor={p.tracejado}
        opcoes={[
          { valor: "solido", rotulo: "Contínua" },
          { valor: "tracejado", rotulo: "Tracejada" },
          { valor: "pontilhado", rotulo: "Pontilhada" },
        ]}
        aoMudar={(tracejado) => mudar({ tracejado })}
      />
    </div>
  );
  return (
    <div>
      <Dica>Para mexer nos nós e nas curvas, use a ferramenta Forma (F) na barra do lado da arte, ou dê dois cliques no desenho.</Dica>
      {p.fechado ? (
        <>
          <Secao titulo="Preenchimento">
            <CampoDePintura valor={p.preenchimento} aoMudar={(preenchimento) => mudar({ preenchimento })} rotulo="Cor de dentro" permiteSem />
          </Secao>
          <Secao titulo="Contorno" acao={<Chave rotulo="" ligado={comContorno} aoMudar={(ligar) => mudar({ espessura: ligar ? Math.max(4, Math.round(p.espessura) || 4) : 0 })} />}>
            {comContorno ? linha : <p className="text-[12px] leading-snug text-[#8A849E]">Sem contorno: a forma fica só com a cor de dentro.</p>}
          </Secao>
        </>
      ) : (
        <>
          <Secao titulo="Linha">{linha}</Secao>
          <Secao titulo="Ponta do começo">
            <EscolhaDaPonta valor={p.inicio} aoMudar={(inicio) => mudar({ inicio })} fim={false} />
          </Secao>
          <Secao titulo="Ponta do fim">
            <EscolhaDaPonta valor={p.fim} aoMudar={(fim) => mudar({ fim })} fim />
          </Secao>
        </>
      )}
      {p.pontos.length > 2 ? (
        <Secao titulo="Caminho">
          <div className="space-y-3">
            {temAlcas(p.pontos) ? null : <Chave rotulo="Curvas suaves" ligado={p.suave} aoMudar={(suave) => mudar({ suave })} />}
            <Chave rotulo="Fechar a forma" ligado={p.fechado} aoMudar={(fechado) => mudar({ fechado, ...(fechado ? {} : { espessura: Math.max(1, p.espessura) }) })} />
          </div>
        </Secao>
      ) : null}
      <Secao titulo="Sombra">
        <CampoDeSombra valor={p.sombra} aoMudar={(sombra) => mudar({ sombra })} />
      </Secao>
    </div>
  );
}

/* ============================================================== QR code */

type TipoDoQr = "link" | "whatsapp" | "pix" | "texto";

function tipoDoQr(conteudo: string): TipoDoQr {
  if (/^https:\/\/wa\.me\//.test(conteudo)) return "whatsapp";
  if (/^000201/.test(conteudo)) return "pix";
  if (/^https?:\/\//.test(conteudo)) return "link";
  return "texto";
}

function dadosDoWhatsapp(conteudo: string) {
  const achado = /^https:\/\/wa\.me\/(\d*)(?:\?text=(.*))?$/.exec(conteudo);
  let mensagem = "";
  try {
    mensagem = achado?.[2] ? decodeURIComponent(achado[2]) : "";
  } catch {
    mensagem = achado?.[2] || "";
  }
  return { numero: achado?.[1] || "", mensagem };
}

const linkDoWhatsapp = (numero: string, mensagem: string) => `https://wa.me/${numero.replace(/\D/g, "").slice(0, 15)}${mensagem ? `?text=${encodeURIComponent(mensagem)}` : ""}`;

export function PainelDoQr({ p, mudar }: { p: PecaDeQr; mudar: (c: Partial<PecaDeQr>) => void }) {
  const [tipo, setTipo] = useState<TipoDoQr>(tipoDoQr(p.conteudo));
  const zap = dadosDoWhatsapp(p.conteudo);
  return (
    <div>
      <Secao titulo="O que o QR code abre">
        <div className="space-y-3">
          <Opcoes
            valor={tipo}
            opcoes={[
              { valor: "link", rotulo: "Link" },
              { valor: "whatsapp", rotulo: "WhatsApp" },
              { valor: "pix", rotulo: "Pix" },
              { valor: "texto", rotulo: "Texto" },
            ]}
            aoMudar={(novo) => {
              setTipo(novo);
              if (novo === "whatsapp" && tipoDoQr(p.conteudo) !== "whatsapp") mudar({ conteudo: linkDoWhatsapp("", "Olá! Vim pelo QR code.") });
              if (novo === "link" && tipoDoQr(p.conteudo) !== "link") mudar({ conteudo: "https://" });
            }}
          />
          {tipo === "link" ? <input value={p.conteudo} onChange={(e) => mudar({ conteudo: e.target.value.slice(0, 900) })} className={campo} placeholder="https://sualoja.com.br" aria-label="Link" /> : null}
          {tipo === "whatsapp" ? (
            <>
              <input value={zap.numero} onChange={(e) => mudar({ conteudo: linkDoWhatsapp(e.target.value, zap.mensagem) })} className={campo} placeholder="Número com DDD (ex.: 5587988701216)" aria-label="Número do WhatsApp" inputMode="tel" />
              <textarea value={zap.mensagem} onChange={(e) => mudar({ conteudo: linkDoWhatsapp(zap.numero, e.target.value.slice(0, 300)) })} className="ks-field min-h-[72px] w-full text-[12.5px]" placeholder="Mensagem que já chega escrita" aria-label="Mensagem" />
            </>
          ) : null}
          {tipo === "pix" ? (
            <>
              <textarea value={tipoDoQr(p.conteudo) === "pix" ? p.conteudo : ""} onChange={(e) => mudar({ conteudo: e.target.value.trim().slice(0, 900) })} className="ks-field min-h-[96px] w-full font-mono text-[11.5px]" placeholder="Cole aqui o Pix copia e cola (começa com 000201)" aria-label="Pix copia e cola" />
              <p className="text-[11.5px] leading-snug text-[#8A849E]">Gere o copia e cola no app do seu banco e cole aqui: o QR sai igual ao do banco.</p>
            </>
          ) : null}
          {tipo === "texto" ? <textarea value={p.conteudo} onChange={(e) => mudar({ conteudo: e.target.value.slice(0, 900) })} className="ks-field min-h-[72px] w-full text-[12.5px]" placeholder="Qualquer texto" aria-label="Texto do QR code" /> : null}
        </div>
      </Secao>
      <Secao titulo="Aparência">
        <div className="space-y-3">
          <Cor rotulo="Cor do QR" valor={p.cor} aoMudar={(cor) => mudar({ cor })} />
          <Chave rotulo="Fundo atrás do QR" ligado={p.fundo !== null} aoMudar={(v) => mudar({ fundo: v ? "#FFFFFF" : null })} />
          {p.fundo !== null ? <Cor rotulo="Cor do fundo" valor={p.fundo} aoMudar={(fundo) => mudar({ fundo })} /> : null}
          <Chave rotulo="Pontos redondos" ligado={p.arredondado} aoMudar={(arredondado) => mudar({ arredondado })} />
          <p className="text-[11.5px] leading-snug text-[#8A849E]">Dica: QR escuro em fundo claro lê melhor. Teste com a câmera do celular antes de imprimir.</p>
        </div>
      </Secao>
    </div>
  );
}

/* =============================================================== tabela */

export function PainelDaTabela({ p, mudar }: { p: PecaDeTabela; mudar: (c: Partial<PecaDeTabela>) => void }) {
  const colunas = p.celulas[0]?.length || 1;
  const mudarCelula = (i: number, j: number, valor: string) => mudar({ celulas: p.celulas.map((linha, a) => (a === i ? linha.map((c, b) => (b === j ? valor.slice(0, 300) : c)) : linha)) });
  const botao = "flex h-8 items-center justify-center gap-1 rounded-[8px] bg-[#F3F1F9] px-2 text-[11.5px] font-semibold text-[#4B4760] transition hover:bg-[#EAE5F8] disabled:opacity-40";
  return (
    <div>
      <Secao titulo="Conteúdo">
        <div className="space-y-1.5 overflow-x-auto">
          {p.celulas.map((linha, i) => (
            <div key={i} className="flex gap-1.5">
              {linha.map((c, j) => (
                <input key={j} value={c} onChange={(e) => mudarCelula(i, j, e.target.value)} className={`ks-field h-8 min-w-[70px] flex-1 px-2 text-[12px] ${p.cabecalho && i === 0 ? "font-bold" : ""}`} aria-label={`Linha ${i + 1}, coluna ${j + 1}`} />
              ))}
            </div>
          ))}
        </div>
        <div className="mt-2.5 grid grid-cols-2 gap-1.5">
          <button type="button" className={botao} disabled={p.celulas.length >= 30} onClick={() => mudar({ celulas: [...p.celulas, Array(colunas).fill("")] })}>
            <Plus size={13} /> Linha
          </button>
          <button type="button" className={botao} disabled={colunas >= 12} onClick={() => mudar({ celulas: p.celulas.map((l) => [...l, ""]) })}>
            <Plus size={13} /> Coluna
          </button>
          <button type="button" className={botao} disabled={p.celulas.length <= 1} onClick={() => mudar({ celulas: p.celulas.slice(0, -1) })}>
            <Minus size={13} /> Linha
          </button>
          <button type="button" className={botao} disabled={colunas <= 1} onClick={() => mudar({ celulas: p.celulas.map((l) => l.slice(0, -1)) })}>
            <Minus size={13} /> Coluna
          </button>
        </div>
      </Secao>
      <Secao titulo="Letra">
        <div className="space-y-3">
          <EscolhaDeFonte valor={p.fonte} aoMudar={(fonte) => mudar({ fonte })} />
          <Regua rotulo="Tamanho" valor={Math.round(p.tamanho)} min={8} max={120} aoMudar={(tamanho) => mudar({ tamanho })} />
          <Opcoes
            valor={p.alinhamento}
            opcoes={[
              { valor: "esquerda", rotulo: "Esquerda" },
              { valor: "centro", rotulo: "Centro" },
              { valor: "direita", rotulo: "Direita" },
            ]}
            aoMudar={(alinhamento) => mudar({ alinhamento })}
          />
        </div>
      </Secao>
      <Secao titulo="Cores">
        <div className="space-y-2">
          <Chave rotulo="Primeira linha é o cabeçalho" ligado={p.cabecalho} aoMudar={(cabecalho) => mudar({ cabecalho })} />
          {p.cabecalho ? (
            <div className="grid grid-cols-2 gap-2">
              <Cor rotulo="Cabeçalho" valor={p.corDoCabecalho} aoMudar={(corDoCabecalho) => mudar({ corDoCabecalho })} />
              <Cor rotulo="Letra dele" valor={p.corDoTextoDoCabecalho} aoMudar={(corDoTextoDoCabecalho) => mudar({ corDoTextoDoCabecalho })} />
            </div>
          ) : null}
          <div className="grid grid-cols-2 gap-2">
            <Cor rotulo="Linhas" valor={p.corDaLinha} aoMudar={(corDaLinha) => mudar({ corDaLinha })} />
            <Cor rotulo="Alternadas" valor={p.corDaLinha2} aoMudar={(corDaLinha2) => mudar({ corDaLinha2 })} />
            <Cor rotulo="Letra" valor={p.corDoTexto} aoMudar={(corDoTexto) => mudar({ corDoTexto })} />
            <Cor rotulo="Divisórias" valor={p.corDaBorda} aoMudar={(corDaBorda) => mudar({ corDaBorda })} />
          </div>
          <Regua rotulo="Cantos" valor={Math.round(p.raio)} min={0} max={80} aoMudar={(raio) => mudar({ raio })} />
        </div>
      </Secao>
    </div>
  );
}

/* ============================================================== gráfico */

const NOMES_DOS_GRAFICOS: Record<PecaDeGrafico["estilo"], string> = { colunas: "Colunas", barras: "Barras", linha: "Linha", pizza: "Pizza", rosca: "Rosca" };

export function PainelDoGrafico({ p, mudar }: { p: PecaDeGrafico; mudar: (c: Partial<PecaDeGrafico>) => void }) {
  const mudarDado = (i: number, campos: Partial<PecaDeGrafico["dados"][number]>) => mudar({ dados: p.dados.map((d, j) => (j === i ? { ...d, ...campos } : d)) });
  return (
    <div>
      <Secao titulo="Tipo">
        <Opcoes valor={p.estilo} opcoes={ESTILOS_DE_GRAFICO.map((e) => ({ valor: e, rotulo: NOMES_DOS_GRAFICOS[e] }))} aoMudar={(estilo) => mudar({ estilo })} />
      </Secao>
      <Secao titulo="Dados">
        <div className="space-y-1.5">
          {p.dados.map((d, i) => (
            <div key={i} className="flex items-center gap-1.5">
              <Cor compacta valor={p.cores[i % Math.max(1, p.cores.length)] || "#7C3AED"} aoMudar={(cor) => mudar({ cores: Array.from({ length: Math.max(p.cores.length, i + 1) }, (_, j) => (j === i ? cor : p.cores[j] || "#7C3AED")) })} />
              <input value={d.rotulo} onChange={(e) => mudarDado(i, { rotulo: e.target.value.slice(0, 40) })} className="ks-field h-8 min-w-0 flex-1 px-2 text-[12px]" aria-label={`Nome ${i + 1}`} />
              <label className="flex h-8 w-[92px] items-center rounded-lg border border-[var(--ks-color-border)] bg-white px-2">
                <CampoDecimal valor={d.valor} aoMudar={(valor) => mudarDado(i, { valor })} casas={2} permiteNegativo={false} className="w-full min-w-0 bg-transparent text-right text-[12px] font-semibold tabular-nums outline-none" />
              </label>
              <button type="button" title="Tirar" disabled={p.dados.length <= 1} onClick={() => mudar({ dados: p.dados.filter((_, j) => j !== i) })} className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-[#8A849E] hover:bg-[#FFE4E6] hover:text-[#BE123C] disabled:opacity-30">
                <Trash2 size={14} />
              </button>
            </div>
          ))}
          <button
            type="button"
            disabled={p.dados.length >= 24}
            onClick={() => mudar({ dados: [...p.dados, { rotulo: `Item ${p.dados.length + 1}`, valor: 10 }] })}
            className="mt-1 flex h-8 w-full items-center justify-center gap-1 rounded-[8px] bg-[#F3F1F9] text-[11.5px] font-semibold text-[#4B4760] transition hover:bg-[#EAE5F8] disabled:opacity-40"
          >
            <Plus size={13} /> Adicionar
          </button>
        </div>
      </Secao>
      <Secao titulo="Texto">
        <div className="space-y-3">
          <Chave rotulo="Mostrar os valores" ligado={p.mostrarValores} aoMudar={(mostrarValores) => mudar({ mostrarValores })} />
          <div className="grid grid-cols-2 gap-2">
            <input value={p.prefixo} onChange={(e) => mudar({ prefixo: e.target.value.slice(0, 8) })} className={campo} placeholder="Antes (R$)" aria-label="Antes do valor" />
            <input value={p.sufixo} onChange={(e) => mudar({ sufixo: e.target.value.slice(0, 8) })} className={campo} placeholder="Depois (%)" aria-label="Depois do valor" />
          </div>
          <EscolhaDeFonte valor={p.fonte} aoMudar={(fonte) => mudar({ fonte })} />
          <Cor rotulo="Cor da letra" valor={p.corDoTexto} aoMudar={(corDoTexto) => mudar({ corDoTexto })} />
        </div>
      </Secao>
    </div>
  );
}

/* ============================================== estilo da letra e lista */

const NOMES_DOS_EFEITOS: Record<EfeitoDoTexto["tipo"] | "nenhum" | "vazado", string> = {
  nenhum: "Nenhum",
  levantar: "Levantar",
  eco: "Eco",
  "sombra-longa": "Sombra longa",
  neon: "Neon",
  "contorno-duplo": "Contorno duplo",
  falha: "Falha",
  vazado: "Vazado",
};

const COR_DO_EFEITO: Record<EfeitoDoTexto["tipo"], string> = { levantar: "#000000", eco: "#141414", "sombra-longa": "#141414", neon: "#FF2D87", "contorno-duplo": "#FFD400", falha: "#000000" };

/** A amostra do estilo: a palavra "Ag" com o efeito, no mesmo desenho da arte. */
function amostraDoEfeito(tipo: EfeitoDoTexto["tipo"] | "nenhum" | "vazado") {
  const p: PecaDeTexto = {
    id: `amostra-${tipo}`,
    tipo: "texto",
    x: 0,
    y: 0,
    w: 84,
    h: 50,
    rot: 0,
    opacidade: 1,
    texto: "Ag",
    fonte: "montserrat",
    tamanho: 28,
    peso: 900,
    pintura: tipo === "vazado" ? { tipo: "nenhuma", cor: "#7C3AED", cor2: "#7C3AED", angulo: 0 } : solida(tipo === "neon" ? "#FFF0F8" : "#7C3AED"),
    alinhamento: "centro",
    vertical: "meio",
    italico: false,
    caixaAlta: false,
    riscado: false,
    sublinhado: false,
    espaco: 0,
    linha: 1,
    fundo: null,
    contorno: tipo === "vazado" ? { cor: "#7C3AED", largura: 1.4 } : null,
    sombra: null,
    ...(tipo !== "nenhum" && tipo !== "vazado" ? { efeito: { tipo, cor: COR_DO_EFEITO[tipo], forca: 0.6 } } : {}),
  };
  return conteudoDaPeca(p);
}

export function EstiloDaLetra({ p, mudar }: { p: PecaDeTexto; mudar: (c: Partial<PecaDeTexto>) => void }) {
  const vazado = p.pintura.tipo === "nenhuma" && Boolean(p.contorno);
  const atual = vazado ? "vazado" : p.efeito?.tipo || "nenhum";
  const opcoes = ["nenhum", ...EFEITOS_DO_TEXTO, "vazado"] as const;
  return (
    <>
      <Secao titulo="Estilo da letra">
        <div className="grid grid-cols-3 gap-2">
          {opcoes.map((tipo) => (
            <button
              key={tipo}
              type="button"
              onClick={() => {
                if (tipo === "nenhum") mudar({ efeito: null, ...(vazado ? { pintura: solida(p.contorno?.cor || "#141414"), contorno: null } : {}) });
                else if (tipo === "vazado") mudar({ efeito: null, pintura: { tipo: "nenhuma", cor: p.pintura.cor, cor2: p.pintura.cor2, angulo: p.pintura.angulo }, contorno: { cor: p.pintura.tipo === "nenhuma" ? p.contorno?.cor || "#141414" : p.pintura.cor, largura: Math.max(2, Math.round(p.tamanho * 0.035)) } });
                else mudar({ efeito: { tipo, cor: p.efeito?.tipo === tipo ? p.efeito.cor : COR_DO_EFEITO[tipo], forca: p.efeito?.forca ?? 0.5 }, ...(vazado ? { pintura: solida(p.contorno?.cor || "#141414"), contorno: null } : {}) });
              }}
              className="group text-center"
            >
              <span className={`relative flex h-[54px] items-center justify-center overflow-hidden rounded-[10px] bg-[#F3F1F9] transition ${atual === tipo ? "ring-2 ring-[#8B5CF6]" : "ring-1 ring-black/5 group-hover:ring-[#C4B5FD]"}`}>
                <span className="relative block h-[50px] w-[84px]" dangerouslySetInnerHTML={{ __html: amostraDoEfeito(tipo) }} />
              </span>
              <span className="mt-1 block text-[11px] font-medium text-[#4B4760]">{NOMES_DOS_EFEITOS[tipo]}</span>
            </button>
          ))}
        </div>
        {p.efeito ? (
          <div className="mt-3 space-y-3">
            <Cor rotulo="Cor do efeito" valor={p.efeito.cor} aoMudar={(cor) => mudar({ efeito: { ...p.efeito!, cor } })} />
            <Regua rotulo="Força" valor={Math.round(p.efeito.forca * 100)} min={0} max={100} aoMudar={(v) => mudar({ efeito: { ...p.efeito!, forca: v / 100 } })} formato={(v) => `${Math.round(v)}%`} />
          </div>
        ) : null}
      </Secao>
      <Secao titulo="Lista">
        <Opcoes
          valor={p.lista || "nenhuma"}
          opcoes={[
            { valor: "nenhuma", rotulo: "Sem" },
            { valor: "pontos", rotulo: "• Pontos" },
            { valor: "numeros", rotulo: "1. Números" },
            { valor: "checks", rotulo: "✓ Checks" },
          ]}
          aoMudar={(v) => mudar({ lista: v === "nenhuma" ? null : v })}
        />
        <p className="mt-2 text-[11.5px] leading-snug text-[#8A849E]">Cada linha do texto (Enter) vira um item.</p>
      </Secao>
    </>
  );
}

/* ================================================= foto na moldura */

const FORMAS_DA_MOLDURA: Forma[] = ["retangulo", "circulo", "estrela", "coracao", "hexagono", "gota", "nuvem", "semicirculo", "losango", "pentagono", "octogono", "balao"];

export function MolduraDaFoto({ p, mudar, GradeDeFormas, aoEnquadrar }: { p: PecaDeImagem; mudar: (c: Partial<PecaDeImagem>) => void; GradeDeFormas: (props: { formas: readonly Forma[]; valor: Forma | null; aoEscolher: (f: Forma) => void }) => React.ReactNode; aoEnquadrar?: () => void }) {
  const e = p.enquadre || { zoom: 1, x: 50, y: 50 };
  return (
    <>
      <Secao titulo="Foto dentro de uma forma">
        <GradeDeFormas formas={FORMAS_DA_MOLDURA} valor={p.circulo ? "circulo" : p.mascara || "retangulo"} aoEscolher={(forma) => mudar({ mascara: forma === "retangulo" ? null : forma, circulo: false, ajuste: "cobrir" })} />
      </Secao>
      {p.ajuste === "cobrir" ? (
        <Secao titulo="Enquadre">
          {aoEnquadrar ? (
            <button type="button" onClick={aoEnquadrar} className="mb-3 flex h-9 w-full items-center justify-center rounded-[10px] bg-[#7C3AED] text-[12.5px] font-bold text-white transition hover:bg-[#6D28D9]">
              Ajustar arrastando na arte
            </button>
          ) : null}
          <div className="space-y-3">
            <Regua rotulo="Aproximar" valor={Math.round(e.zoom * 100)} min={100} max={500} aoMudar={(v) => mudar({ enquadre: { ...e, zoom: v / 100 } })} formato={(v) => `${Math.round(v)}%`} />
            <Regua rotulo="Para os lados" valor={Math.round(e.x)} min={0} max={100} aoMudar={(x) => mudar({ enquadre: { ...e, x } })} formato={(v) => `${Math.round(v)}%`} />
            <Regua rotulo="Para cima e para baixo" valor={Math.round(e.y)} min={0} max={100} aoMudar={(y) => mudar({ enquadre: { ...e, y } })} formato={(v) => `${Math.round(v)}%`} />
          </div>
        </Secao>
      ) : null}
    </>
  );
}