/*
 * Modelos "de gala" (29/10/2026): o story parado e o reels que mostram tudo o
 * que o editor tem de uma vez. Fonte com floreio (as perninhas do P e do e,
 * pelos recursos da fonte) em dourado metálico, retícula dentro dos selos,
 * ornamentos em SVG com a cor trocada (cantos, coroa e divisor em dourado;
 * as rosas na estampa com as folhas douradas), a estampa curvada dentro da
 * caneca (powerclip + cilindro + multiplicar), ícones 3D premium, recortes
 * sem fundo com desfoque de profundidade, luz em "tela", retícula que some
 * em degradê, grão, vinheta e efeitos de camada (sombra e brilho). No reels,
 * entradas 3D, ênfases, preço que conta, partículas, transições e trilha.
 */
import { temposDoProjeto } from "./cena";
import { DEPOSITO_DA_BIBLIOTECA } from "./biblioteca";
import { novoId, type DocumentoDoBanner, type EfeitoDaPeca, type Peca, type PecaDeImagem, type PecaDeTexto, type PecaDeTextura } from "./documento";
import { comFontesComGlifos } from "./fontes-com-glifos";
import { metalicoPeloNome } from "./metalicos";
import { documento, fundoDoBanner, type PedidoDoModelo } from "./modelos-base";
import { anima, cena, comTrilha } from "./modelos-em-ritmo";
import { contato, f, foto, foto$, marca, nada, radial, t, tex } from "./modelos-ramos";

const W = 1080;
const H = 1920;
const NOITE = "#14081C";
const AMEIXA = "#2E0F35";
const OURO = "#D4AF37";
const CREME = "#F3E7FA";

const dourado = () => metalicoPeloNome("dourado")!;
const champanhe = () => metalicoPeloNome("champanhe")!;

/* As peças da biblioteca: recorte PNG, ícone 3D (na variação) e ornamento SVG (com as cores trocadas). */
const recorte = (nome: string, codigo: string, l: { x: number; y: number; w: number; h: number; rot?: number }, extra: Partial<PecaDeImagem> = {}) => foto(nome, `${DEPOSITO_DA_BIBLIOTECA}/${codigo}.webp`, l, { ajuste: "conter", ...extra });
const em3d = (nome: string, codigo: string, variante: string, l: { x: number; y: number; w: number; h: number; rot?: number }, extra: Partial<PecaDeImagem> = {}) => foto(nome, `${DEPOSITO_DA_BIBLIOTECA}/${codigo}/${variante}.webp`, l, { ajuste: "conter", ...extra });
function ornamento(nome: string, codigo: string, cores: string[], trocas: Record<string, string>, l: { x: number; y: number; w: number; h: number; rot?: number }, extra: Partial<PecaDeImagem> = {}): PecaDeImagem {
  return foto(nome, `${DEPOSITO_DA_BIBLIOTECA}/vetores/${codigo}.svg`, l, { ajuste: "conter", vetor: { cores, trocas }, ...extra });
}
const CANTO = "cantos-corner-decoration-3-285388-af62";
const COROA = "cantos-corner-decoration-expanded-20-255394-813c";
const DIVISOR = "divisores-art-deco-style-divider-2-312305-2d6d";
const ROSAS = "flores-svg-three-roses-colored-l-4215";
const CORES_DAS_ROSAS = ["#7A897F", "#BC829A", "#EF9BA0", "#F19ABE", "#000000"];

const sombraDaLetra: EfeitoDaPeca = { tipo: "sombra", cor: "#000000", x: 0, y: 14, desfoque: 30, opacidade: 0.55 };
const brilhoDaLetra: EfeitoDaPeca = { tipo: "brilho", cor: "#F7D98B", x: 0, y: 0, desfoque: 26, opacidade: 0.35 };
const sombraDe3d: EfeitoDaPeca = { tipo: "sombra", cor: "#000000", x: 0, y: 26, desfoque: 40, opacidade: 0.5 };

/* A palavra em letra de floreio: o recurso "init" na primeira letra e "fina" na última (as perninhas). */
function comFloreio(palavra: string) {
  const [primeira, ...resto] = [...palavra];
  const ultima = resto.pop() ?? "";
  return `<span style="font-feature-settings:'init' 1">${primeira}</span>${resto.join("")}<span style="font-feature-settings:'fina' 1">${ultima}</span>`;
}
function tituloDeFloreio(nome: string, palavra: string, l: { x: number; y: number; w: number; h: number; rot?: number }, tamanho: number): PecaDeTexto {
  return { ...t(nome, l, { texto: palavra, html: comFloreio(palavra), fonte: "kit-birthstonebounce", peso: 400, tamanho, linha: 1, alinhamento: "centro" }), pintura: dourado(), efeitos: [sombraDaLetra, brilhoDaLetra] };
}
/* A retícula dentro do selo (powerclip na forma): pontinhos escuros multiplicados no dourado, como impressão. */
function reticulaDentro(de: Peca, cor = "#5B3A0C"): PecaDeTextura {
  return { ...tex("Retícula do selo", "meio-tom", { x: de.x, y: de.y, w: de.w, h: de.h }, cor, { opacidade: 0.3, tamanho: 9, giro: 45, quantidade: 18, bloqueada: false }), mistura: "multiplicar", dentroDe: de.id };
}
/* A caneca recortada com a estampa (as rosas em SVG) curvada no corpo dela. */
function canecaComRosas(x: number, y: number, lado: number) {
  const caneca = foto("Caneca", foto$("caneca-branca-recorte"), { x, y, w: lado, h: lado }, { ajuste: "conter", efeitos: [{ tipo: "sombra", cor: "#05010A", x: 0, y: 40, desfoque: 60, opacidade: 0.6 }] });
  const estampa = ornamento("Estampa da caneca", ROSAS, CORES_DAS_ROSAS, { "#7A897F": "#B8902F", "#000000": "#3A1A40" }, { x: x + lado * 0.36, y: y + lado * 0.2, w: lado * 0.62, h: lado * 0.56 }, { cilindro: { curva: 1, arco: 0 }, mistura: "multiplicar", dentroDe: caneca.id });
  return { caneca, estampa };
}
/* O fundo de gala: ameixa profunda, retícula dourada que some para baixo, grão e vinheta. */
function fundoDeGala(pecas: Peca[], reticula = true): DocumentoDoBanner {
  return documento(W, H, fundoDoBanner({ cor: NOITE, cor2: AMEIXA, angulo: 160, textura: "nenhuma" }), [
    ...(reticula ? [{ ...tex("Retícula", "meio-tom", { x: 0, y: 0, w: W, h: 980 }, "#E8C77A", { opacidade: 0.2, tamanho: 20, giro: 45, quantidade: 18 }), transparencia: { x1: 0.5, y1: 0, x2: 0.5, y2: 1, alfa: 1, alfa2: 0 } }] : []),
    tex("Grão", "grao", { x: 0, y: 0, w: W, h: H }, "#FFFFFF", { opacidade: 0.07 }),
    ...pecas,
    f("Vinheta", "retangulo", { x: 0, y: 0, w: W, h: H }, radial("#000000", "#000000", 0, 0.62), { bloqueada: true }),
  ]);
}
const luz = (x: number, y: number, lado: number, alfa = 0.55) => ({ ...f("Luz", "circulo", { x, y, w: lado, h: lado }, radial("#E8C77A", NOITE, alfa, 0)), mistura: "tela" as const });
const sombraNoChao = (x: number, y: number, w: number) => f("Sombra no chão", "circulo", { x, y, w, h: w * 0.15 }, radial("#000000", "#000000", 0.7, 0));
const brilho = (nome: string, x: number, y: number, lado: number, rot = 0) => ({ ...f(nome, "estrela", { x, y, w: lado, h: lado, rot }, OURO, { pontas: 4, profundidade: 0.78 }), efeitos: [{ tipo: "brilho", cor: "#FFE7A3", x: 0, y: 0, desfoque: 18, opacidade: 0.8 } as EfeitoDaPeca] });
const particulas = (estilo: PecaDeTextura["estilo"], cor: string, quantidade: number, extra: Partial<PecaDeTextura> = {}): PecaDeTextura => ({ id: novoId("tex"), tipo: "textura", nome: "Partículas", x: 0, y: 0, w: W, h: H, rot: 0, opacidade: 1, estilo, cor, quantidade, tamanho: 20, centroX: 50, centroY: 50, giro: 0, ...extra });

/* ================================================= STORY PARADO · Presente que encanta */

function presenteQueEncanta(p: PedidoDoModelo): DocumentoDoBanner {
  const { caneca, estampa } = canecaComRosas(240, 330, 600);
  const titulo = tituloDeFloreio("Título", "Presente", { x: 20, y: 1090, w: 1040, h: 270 }, 214);
  const selo = { ...f("Selo", "circulo", { x: 70, y: 750, w: 236, h: 236, rot: -10 }, dourado()), efeitos: [{ tipo: "sombra", cor: "#000000", x: 0, y: 18, desfoque: 30, opacidade: 0.5 } as EfeitoDaPeca] };
  const cantoDe = (x: number, y: number, espelharX: boolean, espelharY: boolean) => ornamento("Canto", CANTO, ["#000000"], { "#000000": OURO }, { x, y, w: 300, h: 221 }, { espelharX, espelharY, opacidade: 0.9 });
  return comFontesComGlifos(fundoDeGala([
    recorte("Confete dourado", "clipart-golden-confetti-with-blur", { x: -40, y: 150, w: 1160, h: 918 }, { mistura: "tela", opacidade: 0.4 }),
    luz(-110, 120, 1300),
    cantoDe(36, 36, false, false),
    cantoDe(744, 36, true, false),
    cantoDe(36, 1663, false, true),
    cantoDe(744, 1663, true, true),
    marca(p, 330, 110, 66, CREME, "centro"),
    ornamento("Coroa de folhas", COROA, ["#000000"], { "#000000": OURO }, { x: 150, y: 262, w: 780, h: 772 }, { opacidade: 0.85 }),
    f("Anel", "circulo", { x: 214, y: 322, w: 652, h: 652 }, nada, { borda: { cor: OURO, largura: 2 }, opacidade: 0.45 }),
    em3d("Coração 3D", "3d-geral-heart", "dynamic_premium", { x: 64, y: 520, w: 170, h: 175, rot: -16 }, { filtros: { brilho: 100, contraste: 100, saturacao: 100, desfoque: 3 }, opacidade: 0.9 }),
    sombraNoChao(310, 890, 460),
    caneca,
    estampa,
    em3d("Presente 3D", "3d-geral-gift", "dynamic_premium", { x: 770, y: 330, w: 230, h: 224, rot: 12 }, { efeitos: [sombraDe3d] }),
    recorte("Rosa", "natureza-fresh-pink-rose", { x: 760, y: 730, w: 340, h: 268, rot: 14 }, { efeitos: [sombraDe3d], filtros: { brilho: 100, contraste: 105, saturacao: 105, desfoque: 0 } }),
    recorte("Rosa ao fundo", "natureza-fresh-pink-rose", { x: -70, y: 1500, w: 330, h: 261, rot: -28 }, { opacidade: 0.75, filtros: { brilho: 90, contraste: 100, saturacao: 100, desfoque: 5 } }),
    selo,
    reticulaDentro(selo),
    f("Anel do selo", "circulo", { x: 82, y: 762, w: 212, h: 212 }, nada, { borda: { cor: "#6B4A12", largura: 2 }, opacidade: 0.7 }),
    t("Preço", { x: 82, y: 796, w: 212, h: 144, rot: -10 }, { texto: "A PARTIR DE\nR$ 39,90", html: `A PARTIR DE<br><span style="font-family:'Anton';font-size:60px;letter-spacing:0">R$ 39,90</span>`, fonte: "montserrat", peso: 800, tamanho: 21, linha: 1.05, espaco: 0.08, cor: AMEIXA, alinhamento: "centro" }),
    brilho("Brilho", 860, 640, 64, 8),
    brilho("Brilho", 176, 300, 44, -6),
    brilho("Brilho", 960, 1020, 38, 0),
    { ...t("Coleção", { x: 90, y: 1010, w: 900, h: 56 }, { texto: "COLEÇÃO ASSINATURA", fonte: "cinzel", peso: 700, tamanho: 38, espaco: 0.42, alinhamento: "centro" }), pintura: champanhe() },
    titulo,
    t("Complemento", { x: 90, y: 1345, w: 900, h: 76 }, { texto: "QUE ENCANTA", fonte: "cinzel", peso: 700, tamanho: 56, espaco: 0.3, cor: CREME, alinhamento: "centro" }),
    ornamento("Divisor", DIVISOR, ["#1F1A17"], { "#1F1A17": OURO }, { x: 430, y: 1428, w: 220, h: 100 }),
    t("Texto", { x: 120, y: 1532, w: 840, h: 96 }, { texto: "Canecas, caixas e kits com o nome\nde quem você ama", fonte: "montserrat", peso: 600, tamanho: 34, linha: 1.3, cor: "#E2D3EC", alinhamento: "centro" }),
    t("Botão", { x: 250, y: 1650, w: 580, h: 88 }, { texto: "PEÇA PELO WHATSAPP", fonte: "montserrat", peso: 800, tamanho: 32, espaco: 0.08, cor: NOITE, alinhamento: "centro", fundo: { forma: "pilula", cor: "#E3BE5C" } }),
  ]));
}

/* ================================================= REELS · Presente que encanta (animado) */

function presenteQueEncantaAnimado(p: PedidoDoModelo): DocumentoDoBanner {
  /* 1 · a coroa gira, o presente 3D chega e o "Chegou" aparece do desfoque. */
  const chegou = tituloDeFloreio("Chegou", "Chegou", { x: 30, y: 1130, w: 1020, h: 300 }, 270);
  const c1 = cena(
    fundoDeGala([
      luz(-110, 160, 1300, 0.6),
      particulas("brilhos", "#F7D98B", 46),
      ...anima(ornamento("Coroa de folhas", COROA, ["#000000"], { "#000000": OURO }, { x: 150, y: 280, w: 780, h: 772 }, { opacidade: 0.9 }), "girar", 0.1, { duracao: 1.1, enfase: "girar", ritmo: 24 }),
      ...anima(em3d("Presente 3D", "3d-geral-gift", "dynamic_premium", { x: 300, y: 420, w: 480, h: 468 }, { efeitos: [sombraDe3d] }), "elastico", 0.45, { duracao: 0.8, enfase: "flutuar", ritmo: 2.4 }),
      ...anima(chegou, "desfocar", 1.0, { duracao: 0.7 }),
      ...anima({ ...t("Coleção", { x: 90, y: 1430, w: 900, h: 60 }, { texto: "A COLEÇÃO ASSINATURA", fonte: "cinzel", peso: 700, tamanho: 38, espaco: 0.4, alinhamento: "centro" }), pintura: champanhe() }, "revelar", 1.5, { direcao: "direita", duracao: 0.5 }),
    ]),
    2.8,
    "aproximar",
    null,
  );

  /* 2 · a caneca vira em 3D com as rosas curvadas no corpo; os cantos se revelam e a rosa quica. */
  const { caneca, estampa } = canecaComRosas(200, 380, 680);
  const c2 = cena(
    fundoDeGala([
      luz(-60, 220, 1200, 0.5),
      ...anima(ornamento("Canto", CANTO, ["#000000"], { "#000000": OURO }, { x: 36, y: 36, w: 300, h: 221 }), "revelar", 0.15, { direcao: "direita", duracao: 0.6 }),
      ...anima(ornamento("Canto", CANTO, ["#000000"], { "#000000": OURO }, { x: 744, y: 36, w: 300, h: 221 }, { espelharX: true }), "revelar", 0.15, { direcao: "esquerda", duracao: 0.6 }),
      sombraNoChao(290, 1010, 500),
      ...anima([caneca, estampa], "virar", 0.3, { duracao: 0.9, enfase: "balancar3d", ritmo: 3 }),
      ...anima(recorte("Rosa", "natureza-fresh-pink-rose", { x: 730, y: 900, w: 360, h: 285, rot: 14 }, { efeitos: [sombraDe3d] }), "quicar", 0.8, { duracao: 0.8, enfase: "flutuar", ritmo: 2.8 }),
      ...anima(recorte("Rosa ao fundo", "natureza-fresh-pink-rose", { x: -60, y: 290, w: 300, h: 237, rot: -30 }, { opacidade: 0.7, filtros: { brilho: 90, contraste: 100, saturacao: 100, desfoque: 5 } }), "deslizar", 0.9, { direcao: "direita", duracao: 0.7, enfase: "flutuar", ritmo: 3.4 }),
      ...anima(t("Com o nome", { x: 60, y: 1190, w: 960, h: 90 }, { texto: "COM O NOME", fonte: "cinzel", peso: 700, tamanho: 64, espaco: 0.26, cor: CREME, alinhamento: "centro" }), "subir", 1.1, { duracao: 0.5 }),
      ...anima(tituloDeFloreio("De quem ama", "de quem você ama", { x: 30, y: 1270, w: 1020, h: 220 }, 150), "maquina", 1.5, { duracao: 0.9 }),
      ...anima(ornamento("Divisor", DIVISOR, ["#1F1A17"], { "#1F1A17": OURO }, { x: 430, y: 1500, w: 220, h: 100 }), "abrir", 2.3, { duracao: 0.5 }),
    ]),
    3.4,
    "parado",
    { tipo: "circulo", duracao: 0.6 },
  );

  /* 3 · o preço: o antigo riscado, o novo descendo de 79,90 até 39,90 em dourado; selo com retícula e coração 3D. */
  const seloDoDesconto = { ...f("Selo", "explosao", { x: 720, y: 190, w: 290, h: 290, rot: 12 }, dourado(), { pontas: 14, profundidade: 0.12 }), efeitos: [{ tipo: "sombra", cor: "#000000", x: 0, y: 16, desfoque: 28, opacidade: 0.5 } as EfeitoDaPeca] };
  const c3 = cena(
    fundoDeGala([
      luz(-110, 420, 1300, 0.45),
      recorte("Confete dourado", "clipart-golden-confetti-with-blur", { x: -40, y: 120, w: 1160, h: 918 }, { mistura: "tela", opacidade: 0.42 }),
      ...anima(t("De", { x: 90, y: 470, w: 900, h: 70 }, { texto: "DE R$ 79,90 POR", fonte: "cinzel", peso: 700, tamanho: 46, espaco: 0.2, cor: "#BFA9C9", alinhamento: "centro" }), "subir", 0.2),
      ...anima(f("Risco", "retangulo", { x: 262, y: 500, w: 410, h: 8, rot: -3 }, "#E5262E", { raio: 4 }), "revelar", 0.7, { direcao: "direita", duracao: 0.3 }),
      ...anima({ ...t("Preço novo", { x: 40, y: 560, w: 1000, h: 330 }, { texto: "R$ 39,90", fonte: "anton", peso: 400, tamanho: 290, linha: 1, alinhamento: "centro" }), pintura: dourado(), efeitos: [sombraDaLetra, brilhoDaLetra] }, "carimbo", 0.85, { duracao: 0.35, contador: { de: 79.9, inicio: 0.9, duracao: 1.1, curva: "freia" }, enfase: "pulsar", ritmo: 1.4 }),
      ...anima([seloDoDesconto, reticulaDentro(seloDoDesconto)], "elastico", 2.0, { duracao: 0.6, enfase: "tremer", ritmo: 1.1 }),
      ...anima(t("Desconto", { x: 725, y: 265, w: 280, h: 140, rot: 12 }, { texto: "-50%", fonte: "anton", peso: 400, tamanho: 96, cor: AMEIXA, alinhamento: "centro" }), "elastico", 2.0, { duracao: 0.6, enfase: "tremer", ritmo: 1.1 }),
      ...anima(em3d("Coração 3D", "3d-geral-heart", "dynamic_premium", { x: 360, y: 960, w: 360, h: 370 }, { efeitos: [sombraDe3d] }), "pop", 1.6, { duracao: 0.5, enfase: "pulsar", ritmo: 1 }),
      ...anima(t("Só esta semana", { x: 90, y: 1390, w: 900, h: 80 }, { texto: "SÓ ESTA SEMANA", fonte: "montserrat", peso: 800, tamanho: 40, espaco: 0.24, cor: NOITE, alinhamento: "centro", fundo: { forma: "pilula", cor: "#E3BE5C" } }), "revelar", 2.3, { direcao: "direita", duracao: 0.4 }),
    ]),
    3.4,
    "parado",
    { tipo: "persianas", duracao: 0.6 },
  );

  /* 4 · a chamada: "Peça já" em floreio, o botão, o WhatsApp e a marca, com brilhos dourados. */
  const peca = tituloDeFloreio("Peça já", "Peça já", { x: 30, y: 740, w: 1020, h: 320 }, 280);
  const c4 = cena(
    fundoDeGala([
      particulas("brilhos", "#F7D98B", 70),
      luz(-110, 440, 1300, 0.5),
      ...anima(ornamento("Coroa de folhas", COROA, ["#000000"], { "#000000": OURO }, { x: 250, y: 320, w: 580, h: 574 }, { opacidade: 0.7 }), "aproximar", 0.1, { duracao: 0.7, enfase: "girar", ritmo: 30 }),
      ...anima(em3d("Presente 3D", "3d-geral-gift", "dynamic_premium", { x: 420, y: 470, w: 240, h: 234 }, { efeitos: [sombraDe3d] }), "quicar", 0.2, { duracao: 0.7, enfase: "flutuar", ritmo: 2.2 }),
      ...anima(peca, "elastico", 0.5, { duracao: 0.7 }),
      ...anima(t("Botão", { x: 220, y: 1140, w: 640, h: 100 }, { texto: "CHAME NO WHATSAPP", fonte: "montserrat", peso: 800, tamanho: 36, espaco: 0.08, cor: NOITE, alinhamento: "centro", fundo: { forma: "pilula", cor: "#E3BE5C" } }), "pop", 1.0, { duracao: 0.45, enfase: "clicar", ritmo: 1.6 }),
      ...anima(contato(330, 1290, CREME, 34), "subir", 1.3),
      ...anima(marca(p, 330, 1430, 100, CREME, "centro"), "surgir", 1.5),
      ...anima(brilho("Brilho", 840, 700, 70, 10), "pop", 0.9, { enfase: "pulsar", ritmo: 1.2 }),
      ...anima(brilho("Brilho", 180, 1000, 50, -8), "pop", 1.1, { enfase: "pulsar", ritmo: 1.5 }),
    ], false),
    3.0,
    "parado",
    { tipo: "diagonal", duracao: 0.5 },
  );

  const paginas = [c1, c2, c3, c4].map(comFontesComGlifos);
  const { inicios } = temposDoProjeto(paginas);
  return comTrilha(paginas, "fma-loyalty-freak-music-sweet-you", [
    ["brilho", inicios[0] + 0.45, 0.5],
    ["swoosh-longo", inicios[1] + 0.3, 0.45],
    ["carimbo", inicios[2] + 0.85, 0.45],
    ["caixa-registradora", inicios[2] + 2.0, 0.4],
    ["sucesso", inicios[3] + 0.5, 0.5],
  ]);
}

export const MODELOS_DE_GALA = [
  { chave: "story-presente-que-encanta", nome: "Presente que encanta", descricao: "Floreio dourado com retícula nas letras, ornamentos em SVG dourados, rosas curvadas na caneca, ícones 3D premium e luz", montar: presenteQueEncanta, feitoPara: "story" as const },
  { chave: "animado-presente-que-encanta", nome: "Presente que encanta (animado)", descricao: "Coroa que gira, presente 3D, caneca que vira com as rosas, preço que conta em dourado, fogos e trilha", montar: presenteQueEncantaAnimado, feitoPara: "story" as const, paginas: 4, animado: true },
];