"use client";

import { useMemo, useState } from "react";
import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, Diamond, Trash2, X } from "lucide-react";
import {
  EFEITOS_DE_ENFASE,
  EFEITOS_DE_ENTRADA,
  MOVIMENTOS_DO_FUNDO,
  TRANSICOES,
  animacaoNova,
  direcaoPadrao,
  segundos,
  usaDirecao,
  type AnimacaoDaPagina,
  type AnimacaoDaPeca,
  type DirecaoDaAnimacao,
  type EfeitoDaAnimacao,
  type EnfaseDaAnimacao,
  type TipoDeTransicao,
  CURVAS,
  type CurvaDoQuadro,
  type MovimentoDaPeca,
  type TransicaoDaPagina,
} from "@/lib/banner-editor/animacao";
import { ESTILOS_DA_PAGINA, animarPagina, duracaoDaPagina, semAnimacao, unidadesDaCena, type EstiloDaPagina } from "@/lib/banner-editor/cena";
import type { DocumentoDoBanner } from "@/lib/banner-editor/documento";
import { Chave, Opcoes, Regua } from "./campos";
import { CampoDecimal } from "@/components/ui/campo-decimal";
import { escreverComo, numeroDoTexto } from "@/lib/banner-editor/contador";
import { MiniCena } from "./cena-no-palco";

/*
 * A folha de efeitos, aberta em cima da linha do tempo (como o "Animação" do
 * CapCut): para a peça escolhida, as abas Entrada, Enquanto aparece e Saída;
 * para a cena, Animar a cena (um estilo para tudo), Transição e Duração. Cada
 * quadradinho é a própria peça (ou a própria cena) tocando o efeito quando o
 * mouse passa; o escolhido fica tocando. À direita, o ajuste do efeito.
 */

export type AbaDosEfeitos = "entrada" | "enfase" | "saida" | "mover" | "numero" | "estilo" | "transicao" | "cena";

const LADO = 70;
const SETAS: Array<{ valor: DirecaoDaAnimacao; rotulo: React.ReactNode; titulo: string }> = [
  { valor: "cima", rotulo: <ArrowUp size={14} />, titulo: "Para cima" },
  { valor: "baixo", rotulo: <ArrowDown size={14} />, titulo: "Para baixo" },
  { valor: "esquerda", rotulo: <ArrowLeft size={14} />, titulo: "Para a esquerda" },
  { valor: "direita", rotulo: <ArrowRight size={14} />, titulo: "Para a direita" },
];

/*
 * O caminho da peça: a página em miniatura com a peça onde está (contorno) e
 * onde chega (cheia). Clicar ou arrastar na miniatura muda o ponto de chegada.
 */
function MapaDoMovimento({ pagina, caixa, mover, aoMudar }: { pagina: DocumentoDoBanner; caixa: { x: number; y: number; w: number; h: number }; mover: MovimentoDaPeca | null; aoMudar: (dx: number, dy: number) => void }) {
  const alto = 128;
  const f = Math.min(alto / pagina.altura, 260 / pagina.largura);
  const [w, h] = [pagina.largura * f, pagina.altura * f];
  const dx = mover?.dx ?? 0;
  const dy = mover?.dy ?? 0;
  const [cx, cy] = [(caixa.x + caixa.w / 2) * f, (caixa.y + caixa.h / 2) * f];
  const levar = (e: React.PointerEvent<HTMLDivElement>) => {
    const r = e.currentTarget.getBoundingClientRect();
    const x = Math.max(0, Math.min(w, e.clientX - r.left));
    const y = Math.max(0, Math.min(h, e.clientY - r.top));
    aoMudar(Math.round((x - cx) / f), Math.round((y - cy) / f));
  };
  return (
    <div
      className="relative shrink-0 cursor-crosshair overflow-hidden rounded-[10px] bg-[#F6F4FB] ring-1 ring-[#E2DEEC]"
      style={{ width: w, height: h }}
      onPointerDown={(e) => {
        e.currentTarget.setPointerCapture(e.pointerId);
        levar(e);
      }}
      onPointerMove={(e) => e.buttons === 1 && levar(e)}
      title="Clique ou arraste onde a peça deve chegar"
      data-mapa-do-movimento
    >
      <span className="pointer-events-none absolute rounded-[3px] border-[1.5px] border-dashed border-[#7C3AED]" style={{ left: caixa.x * f, top: caixa.y * f, width: Math.max(4, caixa.w * f), height: Math.max(4, caixa.h * f) }} />
      {dx || dy ? (
        <>
          <svg className="pointer-events-none absolute inset-0" width={w} height={h}>
            <line x1={cx} y1={cy} x2={cx + dx * f} y2={cy + dy * f} stroke="#7C3AED" strokeWidth="1.5" strokeDasharray="3 3" />
          </svg>
          <span className="pointer-events-none absolute rounded-[3px] bg-[#7C3AED]/80" style={{ left: (caixa.x + dx) * f, top: (caixa.y + dy) * f, width: Math.max(4, caixa.w * f), height: Math.max(4, caixa.h * f) }} data-chegada />
        </>
      ) : null}
    </div>
  );
}

function Ladrilho({ paginas, recorte, rotulo, ativo, aoClicar, dado, nada = false }: { paginas: DocumentoDoBanner[] | null; recorte?: { x: number; y: number; w: number; h: number } | null; rotulo: string; ativo: boolean; aoClicar: () => void; dado: Record<string, string>; nada?: boolean }) {
  const [sobre, setSobre] = useState(false);
  return (
    <button
      type="button"
      onClick={aoClicar}
      onMouseEnter={() => setSobre(true)}
      onMouseLeave={() => setSobre(false)}
      className="group flex w-[76px] shrink-0 flex-col items-center gap-1"
      aria-pressed={ativo}
      {...dado}
    >
      <span className={`relative block overflow-hidden rounded-[12px] transition ${ativo ? "ring-[3px] ring-[#7C3AED]" : "ring-1 ring-[#E2DEEC] group-hover:ring-2 group-hover:ring-[#C4B5FD]"}`} style={{ width: LADO, height: LADO }}>
        {nada || !paginas ? (
          <span className="flex h-full w-full items-center justify-center bg-[#F6F4FB] text-[#A39DB8]">
            <Ban size={24} strokeWidth={1.7} />
          </span>
        ) : (
          <MiniCena paginas={paginas} lado={LADO} recorte={recorte} tocar={sobre || ativo} />
        )}
      </span>
      <span className={`max-w-full truncate text-[11.5px] font-semibold ${ativo ? "text-[#5B21B6]" : "text-[#4B4760]"}`}>{rotulo}</span>
    </button>
  );
}

export function FolhaDeEfeitos({
  paginas,
  indice,
  ids,
  aba: abaInicial,
  aoMudarPeca,
  aoTransicao,
  aoEstilo,
  aoMudarPagina,
  aoTirarTudo,
  aoFechar,
}: {
  paginas: DocumentoDoBanner[];
  indice: number;
  /* As peças escolhidas (as que a animação pega); vazio = a cena. */
  ids: string[];
  aba: AbaDosEfeitos;
  aoMudarPeca: (a: AnimacaoDaPeca | null) => void;
  aoTransicao: (indice: number, t: TransicaoDaPagina | null) => void;
  aoEstilo: (estilo: EstiloDaPagina) => void;
  aoMudarPagina: (a: AnimacaoDaPagina) => void;
  aoTirarTudo: () => void;
  aoFechar: () => void;
}) {
  const pagina = paginas[indice];
  const daPeca = ids.length > 0;
  const abas: Array<[AbaDosEfeitos, string]> = daPeca
    ? [
        ["entrada", "Entrada"],
        ["enfase", "Enquanto aparece"],
        ["saida", "Saída"],
        ["mover", "Movimento"],
      ]
    : [
        ["estilo", "Animar a cena"],
        ...(indice > 0 ? ([["transicao", "Transição"]] as Array<[AbaDosEfeitos, string]>) : []),
        ["cena", "Duração e fundo"],
      ];
  /* O texto com número ganha a aba do número que sobe. */
  const textoEscolhido = ids.length === 1 ? pagina.pecas.find((p) => p.id === ids[0]) : undefined;
  const molde = textoEscolhido?.tipo === "texto" ? numeroDoTexto(textoEscolhido.texto) : null;
  if (daPeca && molde) abas.push(["numero", "Número"]);
  const [aba, setAba] = useState<AbaDosEfeitos>(abas.some(([a]) => a === abaInicial) ? abaInicial : abas[0][0]);
  const duracao = duracaoDaPagina(pagina);
  const unidades = useMemo(() => unidadesDaCena(pagina), [pagina]);
  const fundo = unidades[0]?.fundo ? unidades[0].ids : [];
  const a = pagina.pecas.find((p) => ids.includes(p.id) && p.animacao)?.animacao ?? null;
  const base = a ?? animacaoNova(null, { inicio: 0 });
  const mudar = (campos: Partial<AnimacaoDaPeca>) => aoMudarPeca({ ...base, ...campos });
  const justa = useMemo(() => {
    const pecas = pagina.pecas.filter((p) => ids.includes(p.id));
    if (!pecas.length) return null;
    const x = Math.min(...pecas.map((p) => p.x));
    const y = Math.min(...pecas.map((p) => p.y));
    return { x, y, w: Math.max(...pecas.map((p) => p.x + p.w)) - x, h: Math.max(...pecas.map((p) => p.y + p.h)) - y };
  }, [pagina, ids]);
  /* Palavra por palavra: só num texto sozinho (a Máquina já vai letra por letra). */
  const soTexto = ids.length === 1 && pagina.pecas.find((p) => p.id === ids[0])?.tipo === "texto";
  const porPalavra = Boolean(soTexto && a?.porPalavra);

  /* A peça sozinha (sobre o fundo da cena) com o efeito candidato, recortada em volta dela. */
  const caixa = useMemo(() => {
    const pecas = pagina.pecas.filter((p) => ids.includes(p.id));
    if (!pecas.length) return null;
    const x = Math.min(...pecas.map((p) => p.x));
    const y = Math.min(...pecas.map((p) => p.y));
    const w = Math.max(...pecas.map((p) => p.x + p.w)) - x;
    const h = Math.max(...pecas.map((p) => p.y + p.h)) - y;
    const folga = Math.max(w, h) * 0.18;
    return { x: x - folga, y: y - folga, w: w + folga * 2, h: h + folga * 2 };
  }, [pagina, ids]);
  const comEfeito = (cand: AnimacaoDaPeca, quanto: number): DocumentoDoBanner[] => [
    { ...pagina, animacao: { duracao: quanto, fundo: "parado" }, pecas: pagina.pecas.filter((p) => fundo.includes(p.id) || ids.includes(p.id)).map((p) => (ids.includes(p.id) ? { ...p, animacao: cand } : { ...p, animacao: undefined })) },
  ];
  /* A cena de antes e esta, curtas, com a transição. */
  const comTransicao = (tipo: TipoDeTransicao): DocumentoDoBanner[] => {
    const antes = paginas[indice - 1];
    if (!antes) return [];
    return [
      { ...semAnimacao(antes), animacao: { duracao: 0.5, fundo: "parado" } },
      { ...semAnimacao(pagina), animacao: { duracao: 1.4, fundo: "parado" }, transicao: tipo === "corte" ? null : { tipo, duracao: 0.7 } },
    ];
  };

  const titulo = "mb-2 text-[11px] font-bold uppercase tracking-[0.12em] text-[#8A849E]";

  return (
    <div data-folha-de-efeitos className="pointer-events-auto flex h-[176px] w-full flex-col rounded-t-[18px] bg-white shadow-[0_-14px_40px_rgba(20,11,43,0.16)] ring-1 ring-black/5" onPointerDown={(e) => e.stopPropagation()}>
      <div className="flex h-11 shrink-0 items-center gap-1 border-b border-[#EFEDF5] px-3">
        <span className="mr-2 pl-1 text-[13.5px] font-bold text-[#1F1B2E]">{daPeca ? (ids.length > 1 ? "Animação das peças" : "Animação da peça") : `Cena ${indice + 1}`}</span>
        {abas.map(([chave, nome]) => (
          <button key={chave} type="button" onClick={() => setAba(chave)} className={`h-8 rounded-full px-3.5 text-[12.5px] font-semibold transition ${aba === chave ? "bg-[#1F1B2E] text-white" : "text-[#4B4760] hover:bg-[#F1EFF6]"}`} data-aba-dos-efeitos={chave}>
            {nome}
          </button>
        ))}
        <button type="button" onClick={aoFechar} title="Fechar" className="ml-auto flex h-8 w-8 items-center justify-center rounded-full text-[#8A849E] transition hover:bg-[#F3F1F9] hover:text-[#1F1B2E]" data-fechar-efeitos>
          <X size={17} />
        </button>
      </div>

      <div className="flex min-h-0 flex-1">
        <div className="flex min-w-0 flex-1 items-start gap-2 overflow-x-auto px-4 pt-3 [scrollbar-width:thin]">
          {aba === "entrada" ? (
            <>
              <Ladrilho paginas={null} nada rotulo="Nenhuma" ativo={!a?.entrada} aoClicar={() => mudar({ entrada: null })} dado={{ "data-entrada": "nenhuma" }} />
              {EFEITOS_DE_ENTRADA.map((e) => {
                const cand = animacaoNova(e.chave, { inicio: 0.15, direcao: a?.entrada === e.chave ? a.direcao : direcaoPadrao(e.chave), duracao: a?.entrada === e.chave ? a.duracao : animacaoNova(e.chave).duracao, ...(porPalavra && e.chave !== "maquina" ? { porPalavra: true } : {}) });
                return (
                  <Ladrilho
                    key={e.chave}
                    paginas={comEfeito(cand, cand.inicio + cand.duracao + 0.6)}
                    recorte={caixa}
                    rotulo={e.nome}
                    ativo={a?.entrada === e.chave}
                    aoClicar={() => mudar({ entrada: e.chave, direcao: a?.entrada && usaDirecao(a.entrada) && usaDirecao(e.chave) ? a.direcao : direcaoPadrao(e.chave), duracao: a?.entrada ? a.duracao : cand.duracao })}
                    dado={{ "data-entrada": e.chave, title: e.detalhe }}
                  />
                );
              })}
            </>
          ) : aba === "enfase" ? (
            <>
              <Ladrilho paginas={null} nada rotulo="Nenhum" ativo={!a?.enfase} aoClicar={() => mudar({ enfase: null })} dado={{ "data-enfase": "nenhum" }} />
              {EFEITOS_DE_ENFASE.map((e) => (
                <Ladrilho key={e.chave} paginas={comEfeito({ ...animacaoNova(null, { inicio: 0 }), enfase: e.chave as EnfaseDaAnimacao, ritmo: a?.ritmo ?? 1.6 }, 3.4)} recorte={caixa} rotulo={e.nome} ativo={a?.enfase === e.chave} aoClicar={() => mudar({ enfase: e.chave })} dado={{ "data-enfase": e.chave, title: e.detalhe }} />
              ))}
            </>
          ) : aba === "saida" ? (
            <>
              <Ladrilho paginas={null} nada rotulo="Nenhuma" ativo={!a?.saida} aoClicar={() => mudar({ saida: null })} dado={{ "data-saida": "nenhuma" }} />
              {EFEITOS_DE_ENTRADA.filter((e) => e.chave !== "maquina" && e.chave !== "quicar").map((e) => (
                <Ladrilho
                  key={e.chave}
                  paginas={comEfeito({ ...animacaoNova(null, { inicio: 0 }), fim: 0.7, saida: e.chave as EfeitoDaAnimacao, direcaoDaSaida: direcaoPadrao(e.chave), duracaoDaSaida: a?.duracaoDaSaida ?? 0.6 }, 1.9)}
                  recorte={caixa}
                  rotulo={e.nome}
                  ativo={a?.saida === e.chave}
                  aoClicar={() => {
                    /* Sem fim marcado, sai no último segundo da cena. */
                    const fim = base.fim ?? Math.max(base.inicio + (base.entrada ? base.duracao : 0) + 0.3, duracao - (a?.duracaoDaSaida ?? 0.6) - 0.1);
                    mudar({ saida: e.chave as EfeitoDaAnimacao, direcaoDaSaida: a?.saida && usaDirecao(a.saida) ? a.direcaoDaSaida : direcaoPadrao(e.chave), fim: Math.round(fim * 10) / 10 });
                  }}
                  dado={{ "data-saida": e.chave, title: e.detalhe }}
                />
              ))}
            </>
          ) : aba === "mover" ? (
            justa ? (
              <div className="flex items-start gap-4 pb-2">
                <MapaDoMovimento
                  pagina={pagina}
                  caixa={justa!}
                  mover={a?.mover ?? null}
                  aoMudar={(dx, dy) => mudar({ mover: { dx, dy, inicio: a?.mover?.inicio ?? Math.round(Math.min(duracao - 0.5, base.inicio + (base.entrada ? base.duracao : 0) + 0.3) * 10) / 10, duracao: a?.mover?.duracao ?? 0.8 } })}
                />
                <div className="min-w-0 max-w-[460px] pt-0.5">
                  <p className={titulo}>Mover até (clique na miniatura)</p>
                  <p className="mb-2.5 text-[11.5px] leading-snug text-[#6B6584]">A peça anda até o ponto e fica. Para um caminho com várias paradas, tamanho e giro, use os quadros-chave.</p>
                  <p className={titulo}>Quadros-chave</p>
                  {a?.quadros?.length ? (
                    <div className="flex flex-wrap gap-1.5" data-lista-de-quadros>
                      {a.quadros.map((q, i) => (
                        <span key={q.t} className="flex items-center gap-1 rounded-full bg-[#F3EFFE] py-0.5 pl-2 pr-0.5 text-[11.5px] font-semibold text-[#4C1D95]">
                          <Diamond size={10} className="fill-[#7C3AED] text-[#7C3AED]" /> {segundos(q.t)}
                          {i > 0 ? (
                            <select
                              value={q.curva}
                              onChange={(e) => mudar({ quadros: a.quadros!.map((x, k) => (k === i ? { ...x, curva: e.target.value as CurvaDoQuadro } : x)) })}
                              className="h-6 rounded-full border-0 bg-white px-1.5 text-[11px] font-semibold text-[#4C1D95] outline-none ring-1 ring-[#DDD6FE]"
                              title="Como a peça chega neste quadro"
                              data-curva-do-quadro={i}
                            >
                              {CURVAS.map((c) => (
                                <option key={c.chave} value={c.chave}>
                                  {c.nome}
                                </option>
                              ))}
                            </select>
                          ) : null}
                          <button type="button" title="Apagar este quadro" onClick={() => mudar({ quadros: a.quadros!.length > 1 ? a.quadros!.filter((_, k) => k !== i) : undefined })} className="flex h-6 w-6 items-center justify-center rounded-full text-[#7C3AED] hover:bg-white">
                            <X size={11} />
                          </button>
                        </span>
                      ))}
                    </div>
                  ) : (
                    <p className="text-[11.5px] leading-snug text-[#6B6584]">Na linha do tempo, escolha a peça e aperte <b>◆</b> (ou K) para guardar a pose. Depois leve a agulha para outro instante e mexa na peça (lugar, tamanho, giro, transparência): o quadro novo é gravado sozinho.</p>
                  )}
                </div>
              </div>
            ) : null
          ) : aba === "numero" && molde ? (
            <div className="flex w-full max-w-[640px] items-start gap-6 pb-2 pt-1" data-aba-do-numero>
              <div className="w-[260px] shrink-0 space-y-2.5">
                <Chave
                  rotulo={`O número sobe até ${escreverComo(molde.valor, molde)}`}
                  ligado={Boolean(a?.contador)}
                  aoMudar={(v) => mudar({ contador: v ? { de: 0, inicio: base.entrada ? base.inicio : 0.2, duracao: 1.5, curva: "freia" } : null })}
                />
                {a?.contador ? (
                  <label className="flex items-center gap-2 text-[12px] font-semibold text-[#4B4760]">
                    Começa em
                    <CampoDecimal valor={a.contador.de} permiteNegativo casas={molde.casas} aoMudar={(de) => mudar({ contador: { ...a.contador!, de } })} className="h-8 w-28 rounded-[8px] border border-[#E2DEEC] px-2 text-[13px] font-bold text-[#1F1B2E] outline-none focus:border-[#7C3AED]" data-contador-de />
                  </label>
                ) : null}
              </div>
              <p className="max-w-[300px] text-[12px] leading-snug text-[#6B6584]">O primeiro número do texto conta sozinho no vídeo (o “R$”, o “+” e o resto ficam). Troque o número no próprio texto para mudar até onde ele vai.</p>
            </div>
          ) : aba === "estilo" ? (
            ESTILOS_DA_PAGINA.map((e) => <Ladrilho key={e.chave} paginas={[animarPagina(pagina, e.chave, "parado")]} rotulo={e.nome} ativo={false} aoClicar={() => aoEstilo(e.chave)} dado={{ "data-estilo-da-cena": e.chave }} />)
          ) : aba === "transicao" ? (
            TRANSICOES.map((t) => <Ladrilho key={t.chave} paginas={comTransicao(t.chave)} rotulo={t.nome} ativo={(pagina.transicao?.tipo ?? "corte") === t.chave} aoClicar={() => aoTransicao(indice, t.chave === "corte" ? null : { tipo: t.chave, duracao: pagina.transicao?.duracao ?? 0.6 })} dado={{ "data-transicao": t.chave, title: t.detalhe }} />)
          ) : (
            <div className="w-full max-w-[520px] space-y-4 pr-4 pt-1">
              <Regua rotulo="A cena fica na tela por" valor={duracao} min={0.5} max={60} passo={0.5} aoMudar={(v) => aoMudarPagina({ fundo: pagina.animacao?.fundo ?? "parado", duracao: v })} formato={segundos} />
              <div>
                <p className={titulo}>O fundo durante a cena</p>
                <Opcoes valor={pagina.animacao?.fundo ?? "parado"} opcoes={MOVIMENTOS_DO_FUNDO.map((m) => ({ valor: m.chave, rotulo: m.nome }))} aoMudar={(f) => aoMudarPagina({ duracao, fundo: f })} />
              </div>
            </div>
          )}
        </div>

        {/* O ajuste do efeito escolhido. */}
        <div className="w-[270px] shrink-0 space-y-3 border-l border-[#EFEDF5] px-4 pt-3">
          {aba === "entrada" ? (
            a?.entrada ? (
              <>
                {usaDirecao(a.entrada) ? <Opcoes<DirecaoDaAnimacao> valor={a.direcao} opcoes={SETAS} aoMudar={(direcao) => mudar({ direcao })} /> : null}
                {soTexto && a.entrada !== "maquina" ? (
                  <Opcoes<"tudo" | "palavras"> valor={porPalavra ? "palavras" : "tudo"} opcoes={[{ valor: "tudo", rotulo: "Inteiro" }, { valor: "palavras", rotulo: "Por palavra" }]} aoMudar={(v) => mudar({ porPalavra: v === "palavras" ? true : undefined, ...(v === "palavras" && a.duracao < 0.8 ? { duracao: 1.2 } : {}) })} />
                ) : null}
                <Regua rotulo={porPalavra ? "Tempo de todas as palavras" : "Velocidade da entrada"} valor={a.duracao} min={0.2} max={porPalavra ? 6 : 3} passo={0.1} aoMudar={(v) => mudar({ duracao: v })} formato={segundos} />
                <p className="text-[11.5px] leading-snug text-[#8A849E]">Quando entra: arraste o clipe na linha do tempo.</p>
              </>
            ) : (
              <p className="text-[12px] leading-snug text-[#6B6584]">Escolha como a peça aparece. Passe o mouse num quadradinho para ver.</p>
            )
          ) : aba === "enfase" ? (
            a?.enfase ? (
              <Regua rotulo="Ritmo (cada volta)" valor={a.ritmo} min={0.4} max={4} passo={0.1} aoMudar={(v) => mudar({ ritmo: v })} formato={segundos} />
            ) : (
              <p className="text-[12px] leading-snug text-[#6B6584]">Um movimento que se repete enquanto a peça está na tela.</p>
            )
          ) : aba === "saida" ? (
            a?.saida ? (
              <>
                {usaDirecao(a.saida) ? <Opcoes<DirecaoDaAnimacao> valor={a.direcaoDaSaida} opcoes={SETAS} aoMudar={(direcaoDaSaida) => mudar({ direcaoDaSaida })} /> : null}
                <Regua rotulo="Velocidade da saída" valor={a.duracaoDaSaida} min={0.2} max={3} passo={0.1} aoMudar={(v) => mudar({ duracaoDaSaida: v })} formato={segundos} />
                <p className="text-[11.5px] leading-snug text-[#8A849E]">Quando sai: arraste a ponta direita do clipe.</p>
              </>
            ) : (
              <p className="text-[12px] leading-snug text-[#6B6584]">Como a peça vai embora. Sem saída, ela some no fim do clipe.</p>
            )
          ) : aba === "mover" ? (
            a?.mover ? (
              <>
                <Regua rotulo="Começa a andar em" valor={a.mover.inicio} min={0} max={duracao} passo={0.1} aoMudar={(v) => mudar({ mover: { ...a.mover!, inicio: v } })} formato={segundos} />
                <Regua rotulo="Leva" valor={a.mover.duracao} min={0.1} max={4} passo={0.1} aoMudar={(v) => mudar({ mover: { ...a.mover!, duracao: v } })} formato={segundos} />
                <button type="button" onClick={() => mudar({ mover: null })} className="flex items-center gap-1.5 text-[12px] font-bold text-[#BE123C] hover:underline" data-tirar-movimento>
                  <Trash2 size={13} /> Tirar o movimento
                </button>
              </>
            ) : (
              <p className="text-[12px] leading-snug text-[#6B6584]">A peça sai de onde está e anda até o ponto escolhido, no tempo que você marcar.</p>
            )
          ) : aba === "numero" ? (
            a?.contador ? (
              <>
                <Regua rotulo="Começa a contar em" valor={a.contador.inicio} min={0} max={duracao} passo={0.1} aoMudar={(inicio) => mudar({ contador: { ...a.contador!, inicio } })} formato={segundos} />
                <Regua rotulo="Tempo da contagem" valor={a.contador.duracao} min={0.3} max={8} passo={0.1} aoMudar={(d) => mudar({ contador: { ...a.contador!, duracao: d } })} formato={segundos} />
                <Opcoes<CurvaDoQuadro> valor={a.contador.curva} opcoes={[{ valor: "freia", rotulo: "Freia" }, { valor: "linear", rotulo: "Igual" }, { valor: "mola", rotulo: "Mola" }]} aoMudar={(curva) => mudar({ contador: { ...a.contador!, curva } })} />
              </>
            ) : (
              <p className="text-[12px] leading-snug text-[#6B6584]">Ligue para o número contar de 0 (ou do que você quiser) até o que está escrito.</p>
            )
          ) : aba === "transicao" ? (
            pagina.transicao ? (
              <Regua rotulo="Duração da transição" valor={pagina.transicao.duracao} min={0.2} max={2} passo={0.1} aoMudar={(v) => aoTransicao(indice, { ...pagina.transicao!, duracao: v })} formato={segundos} />
            ) : (
              <p className="text-[12px] leading-snug text-[#6B6584]">Como a cena {indice} passa para a cena {indice + 1}.</p>
            )
          ) : aba === "estilo" ? (
            <>
              <p className="text-[12px] leading-snug text-[#6B6584]">Cada peça entra depois da outra, de cima para baixo. Depois dá para mudar peça por peça.</p>
              <button type="button" onClick={aoTirarTudo} className="flex items-center gap-1.5 text-[12px] font-bold text-[#BE123C] hover:underline" data-tirar-toda-animacao>
                <Trash2 size={13} /> Tirar a animação da cena
              </button>
            </>
          ) : (
            <p className="text-[12px] leading-snug text-[#6B6584]">Também dá para arrastar a ponta da cena na linha do tempo.</p>
          )}
          {daPeca && a ? (
            <button type="button" onClick={() => aoMudarPeca({ ...a, entrada: null, enfase: null, saida: null, mover: null, porPalavra: undefined })} className="flex items-center gap-1.5 text-[12px] font-bold text-[#BE123C] hover:underline" data-tirar-animacao-da-peca>
              <Trash2 size={13} /> Tirar os efeitos (o tempo fica)
            </button>
          ) : null}
        </div>
      </div>
    </div>
  );
}