"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  ArrowLeft,
  CalendarClock,
  Check,
  CircleDot,
  Copy,
  Download,
  ExternalLink,
  LayoutTemplate,
  Link2,
  Loader2,
  MessageCircle,
  Mic,
  Plus,
  Radio,
  Save,
  ShoppingBag,
  Sparkles,
  Store,
  Ticket,
  Trash2,
  UserPlus,
  Video,
  X,
  Zap,
} from "lucide-react";

import ImageUpload from "@/components/image-upload";
import { AreaFechada, CarregandoArea, ErroDaArea, FalhaDaArea, moeda, pedirDigitais } from "@/components/digitais/comum";
import { Aviso } from "@/components/ui/aviso";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import { CampoDecimal } from "@/components/ui/campo-decimal";
import {
  AreaDeTexto,
  ChaveDeAjuste,
  EscolhaDeAjuste,
  FIO_DA_LINHA,
  FolhaDeAjustes,
  LinhaDeAjuste,
  SecaoDeAjustes,
  type ItemDoIndice,
} from "@/components/ui/folha-de-ajustes";
import { novoIdDeItem, paraOsCampos, pessoasDoGratis, type ItemParaSoltar } from "@/lib/live/sala";
import type { LiveNaTela, SaldoDeLives } from "@/lib/live/servidor/lives";

import { FaixaDoSaldo } from "../cliente";

type ProdutoDaLoja = { id: string; nome: string; preco: number; imagem: string | null; digital: boolean };

type Resposta = {
  podeEditar: boolean;
  saldo: SaldoDeLives;
  links: { sala: string | null; pagina: string | null };
  live: LiveNaTela;
  produtos: ProdutoDaLoja[];
};

type Ficha = {
  categoria: LiveNaTela["categoria"];
  titulo: string;
  dia: string;
  hora: string;
  duracaoMin: number;
  esperaMin: number;
  acesso: LiveNaTela["acesso"];
  preco: number;
  venderDurante: boolean;
  limiteVagas: number | null;
  participacao: LiveNaTela["participacao"];
  camerasAlunos: boolean;
  chat: LiveNaTela["chat"];
  gravar: boolean;
  gravacaoPara: LiveNaTela["gravacaoPara"];
  gravacaoModo: LiveNaTela["gravacaoModo"];
  vaga: LiveNaTela["vaga"];
  vagaCompraId: string | null;
  itens: ItemParaSoltar[];
  vitrine: boolean;
  produtosVitrine: string[];
  apresentadorNome: string;
  apresentadorBio: string;
  apresentadorFoto: string | null;
  aprender: string[];
  capa: string | null;
  descricao: string;
};

function amanhaAsVinte(): { dia: string; hora: string } {
  const d = new Date(Date.now() + 24 * 3600 * 1000 - 3 * 3600 * 1000);
  return { dia: d.toISOString().slice(0, 10), hora: "20:00" };
}

const FICHA_NOVA: Ficha = {
  categoria: "venda",
  titulo: "",
  ...amanhaAsVinte(),
  duracaoMin: 60,
  esperaMin: 15,
  acesso: "paga",
  preco: 0,
  venderDurante: true,
  limiteVagas: null,
  participacao: "mao",
  camerasAlunos: true,
  chat: "aberto",
  gravar: true,
  gravacaoPara: "compradores",
  gravacaoModo: "palco",
  vaga: "gratis",
  vagaCompraId: null,
  itens: [],
  vitrine: false,
  produtosVitrine: [],
  apresentadorNome: "",
  apresentadorBio: "",
  apresentadorFoto: null,
  aprender: [],
  capa: null,
  descricao: "",
};

/* A reunião nasce aberta pelo link, com todo mundo falando e sem página na loja. */
const REUNIAO_NOVA: Ficha = {
  ...FICHA_NOVA,
  categoria: "reuniao",
  esperaMin: 0,
  acesso: "aberta",
  participacao: "livre",
  gravar: false,
  gravacaoPara: "ninguem",
  gravacaoModo: "sala",
};

type Gravacao = { id: string; nome: string; bytes: number; segundos: number; baixar: string; assistir: string };

function fichaDe(live: LiveNaTela): Ficha {
  const { dia, hora } = paraOsCampos(live.comecaEm);
  return {
    categoria: live.categoria,
    titulo: live.titulo,
    dia,
    hora,
    duracaoMin: live.duracaoMin,
    esperaMin: live.esperaMin,
    acesso: live.acesso,
    preco: live.preco,
    venderDurante: live.venderDurante,
    limiteVagas: live.limiteVagas,
    participacao: live.participacao,
    camerasAlunos: live.camerasAlunos,
    chat: live.chat,
    gravar: live.gravar,
    gravacaoPara: live.gravacaoPara,
    gravacaoModo: live.gravacaoModo,
    vaga: live.vaga,
    vagaCompraId: live.vagaCompraId,
    itens: live.itens,
    vitrine: live.vitrine,
    produtosVitrine: live.produtosVitrine,
    apresentadorNome: live.apresentadorNome ?? "",
    apresentadorBio: live.apresentadorBio ?? "",
    apresentadorFoto: live.apresentadorFoto,
    aprender: live.aprender,
    capa: live.capa,
    descricao: live.descricao ?? "",
  };
}

function duracaoLegivel(min: number) {
  const h = Math.floor(min / 60);
  const m = min % 60;
  return h ? `${h} h${m ? ` ${m} min` : ""}` : `${m} min`;
}

function diaLegivel(dia: string, hora: string) {
  const [a, m, d] = dia.split("-");
  return a && m && d ? `${d}/${m} · ${hora}` : hora;
}

/* Copiar com o plano B do navegador antigo (ou da janela embutida). */
async function copiar(texto: string): Promise<boolean> {
  try {
    await navigator.clipboard.writeText(texto);
    return true;
  } catch {
    const campo = document.createElement("textarea");
    campo.value = texto;
    campo.style.position = "fixed";
    campo.style.opacity = "0";
    document.body.appendChild(campo);
    campo.select();
    const ok = document.execCommand("copy");
    campo.remove();
    return ok;
  }
}

function LinkCopiavel({ rotulo, link }: { rotulo: string; link: string }) {
  const [copiado, setCopiado] = useState(false);
  return (
    <div className="flex min-w-0 items-center gap-2">
      <input readOnly value={link} className="ks-field min-w-0 flex-1 font-mono text-xs" aria-label={rotulo} onFocus={(e) => e.currentTarget.select()} />
      <button
        type="button"
        className="ks-button ks-button-soft shrink-0"
        onClick={() =>
          void copiar(link).then((ok) => {
            setCopiado(ok);
            setTimeout(() => setCopiado(false), 1800);
          })
        }
      >
        {copiado ? <Check size={15} /> : <Copy size={15} />}
        {copiado ? "Copiado" : "Copiar"}
      </button>
    </div>
  );
}

export default function EditorDaLive({ id }: { id: string }) {
  const router = useRouter();
  const nova = id === "nova";
  const busca = useSearchParams();
  const fichaInicial = nova && busca.get("categoria") === "reuniao" ? REUNIAO_NOVA : FICHA_NOVA;
  const [dados, setDados] = useState<Resposta | null>(null);
  const [saldoNovo, setSaldoNovo] = useState<SaldoDeLives | null>(null);
  const [produtosNovos, setProdutosNovos] = useState<ProdutoDaLoja[]>([]);
  const [ficha, setFicha] = useState<Ficha>(fichaInicial);
  const [original, setOriginal] = useState<string>(JSON.stringify(fichaInicial));
  const [gravacoes, setGravacoes] = useState<Gravacao[] | null>(null);
  const [erro, setErro] = useState<Error | null>(null);
  const [aviso, setAviso] = useState<{ texto: string; tom: "ruim" | "bom" } | null>(null);
  const [salvando, setSalvando] = useState<string | null>(null);
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const [convite, setConvite] = useState<string | null>(null);
  const [novoItem, setNovoItem] = useState<ItemParaSoltar | null>(null);
  const [buscaDeProduto, setBuscaDeProduto] = useState("");
  const carregou = useRef(false);

  const carregar = useCallback(async () => {
    try {
      if (nova) {
        /* Live nova: só o saldo do mês e os produtos (vêm da lista). */
        const lista = await pedirDigitais<{ saldo: SaldoDeLives; podeEditar: boolean }>("/api/digitais/lives");
        setSaldoNovo(lista.saldo);
        const produtos = await pedirDigitais<{ produtos: ProdutoDaLoja[] }>("/api/digitais/lives/produtos")
          .then((r) => r.produtos)
          .catch(() => []);
        setProdutosNovos(produtos);
      } else {
        const resposta = await pedirDigitais<Resposta>(`/api/digitais/lives/${id}`);
        setDados(resposta);
        if (!carregou.current) {
          const f = fichaDe(resposta.live);
          setFicha(f);
          setOriginal(JSON.stringify(f));
          carregou.current = true;
        }
      }
      setErro(null);
    } catch (e) {
      setErro(e instanceof Error ? e : new Error("Não foi possível carregar."));
    }
  }, [id, nova]);

  useEffect(() => {
    void carregar();
  }, [carregar]);

  const mudar = (parte: Partial<Ficha>) => setFicha((f) => ({ ...f, ...parte }));
  const mexido = JSON.stringify(ficha) !== original;
  const podeEditar = nova || Boolean(dados?.podeEditar);
  const live = dados?.live ?? null;
  const saldo = dados?.saldo ?? saldoNovo;
  const produtos = dados?.produtos ?? produtosNovos;
  const jaFoiAoAr = Boolean(live && live.status !== "agendada");
  const reuniao = ficha.categoria === "reuniao";
  const nomeDoTipo = reuniao ? "reunião" : "live";
  const temGravacao = Boolean(live && live.gravacao.status !== "nenhuma");

  useEffect(() => {
    if (nova || !temGravacao) return;
    let vivo = true;
    pedirDigitais<{ gravacoes: Gravacao[] }>(`/api/digitais/lives/${id}/gravacoes`)
      .then((r) => {
        if (vivo) setGravacoes(r.gravacoes);
      })
      .catch(() => {
        if (vivo) setGravacoes([]);
      });
    return () => {
      vivo = false;
    };
  }, [id, nova, temGravacao]);

  const salvar = async (extra: { naLoja?: boolean } = {}) => {
    setSalvando(extra.naLoja === undefined ? "salvar" : "publicar");
    setAviso(null);
    try {
      if (nova) {
        const r = await pedirDigitais<{ id: string }>("/api/digitais/lives", { method: "POST", body: JSON.stringify(ficha) });
        router.replace(`/dashboard/digitais/lives/${r.id}`);
        return;
      }
      await pedirDigitais(`/api/digitais/lives/${id}`, { method: "PUT", body: JSON.stringify({ dados: ficha, ...extra }) });
      setOriginal(JSON.stringify(ficha));
      await carregar();
      setAviso({
        texto: extra.naLoja === true ? "A live está na loja." : extra.naLoja === false ? "A live saiu da loja." : "Salvo.",
        tom: "bom",
      });
    } catch (e) {
      setAviso({ texto: e instanceof Error ? e.message : "Não foi possível salvar.", tom: "ruim" });
    } finally {
      setSalvando(null);
    }
  };

  const entrarAoVivo = async () => {
    if (mexido) await salvar();
    setSalvando("entrar");
    const janela = window.open("about:blank", "_blank");
    try {
      const { link } = await pedirDigitais<{ link: string }>(`/api/digitais/lives/${id}/apresentar`, { method: "POST" });
      if (janela) janela.location.href = link;
      else window.location.href = link;
    } catch (e) {
      janela?.close();
      setAviso({ texto: e instanceof Error ? e.message : "Não foi possível abrir a sala.", tom: "ruim" });
    } finally {
      setSalvando(null);
    }
  };

  const gerarConvite = async () => {
    setSalvando("convite");
    try {
      const { link } = await pedirDigitais<{ link: string }>(`/api/digitais/lives/${id}/convite`, { method: "POST" });
      setConvite(link);
    } catch (e) {
      setAviso({ texto: e instanceof Error ? e.message : "Não foi possível gerar o convite.", tom: "ruim" });
    } finally {
      setSalvando(null);
    }
  };

  const pedirCancelamento = () =>
    setConfirmacao({
      titulo: reuniao ? "Cancelar esta reunião?" : "Cancelar esta live?",
      texto:
        live && live.vagas > 0
          ? `Ela sai da loja e a sala não abre mais. ${live.vagas} ${live.vagas === 1 ? "pessoa já garantiu" : "pessoas já garantiram"} a vaga: avise e, se foi pago, devolva pelo pedido.`
          : reuniao
            ? "O link deixa de funcionar."
            : "Ela sai da loja e a sala não abre mais.",
      confirmar: reuniao ? "Cancelar a reunião" : "Cancelar a live",
      cancelar: "Voltar",
      tom: "perigo",
      aoConfirmar: async () => {
        try {
          await pedirDigitais(`/api/digitais/lives/${id}`, { method: "DELETE" });
          setConfirmacao(null);
          await carregar();
        } catch (e) {
          setConfirmacao(null);
          setAviso({ texto: e instanceof Error ? e.message : "Não foi possível cancelar.", tom: "ruim" });
        }
      },
    });

  const indice: ItemDoIndice[] = useMemo(
    () => [
      { id: "lv-quando", titulo: "Quando", resumo: `${diaLegivel(ficha.dia, ficha.hora)} · ${duracaoLegivel(ficha.duracaoMin)}`, Icone: CalendarClock },
      ...(reuniao
        ? []
        : [
            { id: "lv-pagina", titulo: "Página da live", resumo: ficha.capa ? "com capa" : "sem capa ainda", Icone: LayoutTemplate },
            {
              id: "lv-entra",
              titulo: "Quem entra",
              resumo: ficha.acesso === "paga" ? `paga · ${moeda(ficha.preco)}` : ficha.acesso === "cadastro" ? "grátis com cadastro" : "aberta",
              Icone: Ticket,
            },
          ]),
      {
        id: "lv-sala",
        titulo: "Tamanho da sala",
        resumo: ficha.vaga === "gratis" ? `grátis · ${pessoasDoGratis(saldo)}` : "pacote KtaloguLive",
        Icone: Sparkles,
      },
      {
        id: "lv-fala",
        titulo: "Quem fala",
        resumo: ficha.participacao === "livre" ? "todo mundo" : ficha.participacao === "mao" ? "levantando a mão" : "só quem apresenta",
        Icone: Mic,
      },
      {
        id: "lv-gravacao",
        titulo: "Gravação",
        resumo: !ficha.gravar ? "sem gravação" : `${ficha.gravacaoModo === "sala" ? "sala inteira" : "tela e câmera"} · ${ficha.gravacaoPara === "compradores" ? "área de membros" : "só para baixar"}`,
        Icone: CircleDot,
      },
      { id: "lv-soltar", titulo: "Para soltar", resumo: `${ficha.itens.length} ${ficha.itens.length === 1 ? "pronto" : "prontos"}`, Icone: Zap },
      ...(reuniao ? [] : [{ id: "lv-liveshop", titulo: "Liveshop", resumo: ficha.vitrine ? `${ficha.produtosVitrine.length} produtos` : "desligado", Icone: ShoppingBag }]),
      ...(nova ? [] : [{ id: "lv-apresentar", titulo: reuniao ? "Link e convites" : "Apresentação", resumo: live?.temConvite ? "com convidado" : "só você", Icone: Video }]),
    ],
    [ficha, saldo, live, nova, reuniao],
  );

  if (erro instanceof ErroDaArea && erro.status === 403) return <AreaFechada erro={erro} />;
  if (erro && !dados && !saldoNovo) return <FalhaDaArea erro={erro} aoTentarDeNovo={() => void carregar()} />;
  if (!nova && !dados) return <CarregandoArea />;
  if (nova && !saldoNovo) return <CarregandoArea />;

  const produtosFiltrados = produtos.filter((p) => !buscaDeProduto.trim() || p.nome.toLowerCase().includes(buscaDeProduto.trim().toLowerCase())).slice(0, 60);
  const produtoPorId = new Map(produtos.map((p) => [p.id, p]));

  const salvarItem = () => {
    if (!novoItem || !novoItem.titulo.trim()) return;
    const existe = ficha.itens.some((i) => i.id === novoItem.id);
    mudar({ itens: existe ? ficha.itens.map((i) => (i.id === novoItem.id ? novoItem : i)) : [...ficha.itens, novoItem] });
    setNovoItem(null);
  };

  const itemVazio = (tipo: ItemParaSoltar["tipo"]): ItemParaSoltar => ({
    id: novoIdDeItem(),
    tipo,
    titulo: "",
    detalhe: null,
    codigo: null,
    imagem: null,
    preco: null,
    precoDe: null,
    destino: null,
  });

  return (
    <div className="space-y-5 pb-24">
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="min-w-0">
          <Link href="/dashboard/digitais/lives" className="inline-flex items-center gap-1.5 text-xs font-semibold text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)]">
            <ArrowLeft size={14} /> Lives e reuniões
          </Link>
          <p className="mt-2 text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--ks-brand-600)]">
            {nova
              ? reuniao
                ? "Reunião nova"
                : "Live de venda nova"
              : `${reuniao ? "Reunião" : "Live de venda"} · ${live?.situacao === "ao_vivo" ? "ao vivo agora" : live?.status === "encerrada" ? "aconteceu" : live?.status === "cancelada" ? "cancelada" : "agendada"}`}
          </p>
          <h1 className="mt-1 truncate text-2xl font-extrabold tracking-tight text-[var(--ks-color-text-primary)]">{ficha.titulo || "Sem nome ainda"}</h1>
          {live && !reuniao ? (
            <p className="mt-1 text-sm text-[var(--ks-color-text-muted)]">
              {live.acesso === "aberta" ? "Aberta para todos" : `${live.vagas} ${live.vagas === 1 ? "vaga garantida" : "vagas garantidas"}`}
              {ficha.esperaMin ? ` · sala de espera abre ${ficha.esperaMin} min antes` : ""}
              {live.naLoja ? " · na loja" : " · fora da loja"}
            </p>
          ) : null}
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {!nova && live && live.status !== "cancelada" && live.status !== "encerrada" && podeEditar ? (
            <button type="button" className="ks-button ks-button-primary" onClick={() => void entrarAoVivo()} disabled={salvando === "entrar"}>
              {salvando === "entrar" ? <Loader2 size={16} className="animate-spin" /> : <Radio size={16} />}
              {live.status === "ao_vivo" ? "Voltar à sala" : reuniao ? "Entrar na reunião" : "Entrar ao vivo"}
            </button>
          ) : null}
          {!nova && live && live.status === "agendada" && podeEditar && !reuniao ? (
            <button type="button" className="ks-button ks-button-soft" onClick={() => void salvar({ naLoja: !live.naLoja })} disabled={Boolean(salvando)}>
              <Store size={16} />
              {live.naLoja ? "Tirar da loja" : "Publicar na loja"}
            </button>
          ) : null}
          {links(dados)?.pagina && live?.naLoja ? (
            <a href={links(dados)?.pagina ?? "#"} target="_blank" rel="noreferrer" className="ks-button ks-button-soft">
              <ExternalLink size={16} /> Ver na loja
            </a>
          ) : null}
        </div>
      </div>

      {aviso ? (
        <Aviso tom={aviso.tom === "bom" ? "bom" : "ruim"} aoFechar={() => setAviso(null)}>
          {aviso.texto}
        </Aviso>
      ) : null}

      {live?.link && live.status !== "cancelada" && live.status !== "encerrada" ? <LinkPronto link={live.link} titulo={ficha.titulo} reuniao={reuniao} comecaEm={live.comecaEm} /> : null}

      {saldo ? <FaixaDoSaldo saldo={saldo} /> : null}

      <FolhaDeAjustes indice={indice} rotuloDoIndice="Nesta live">
        <SecaoDeAjustes
          id="lv-quando"
          Icone={CalendarClock}
          titulo="Quando"
          texto={
            reuniao
              ? "O link fica pronto assim que você cria. A sala abre a qualquer hora para quem tiver o link."
              : "A página da live mostra a contagem e quem garantiu a vaga recebe lembrete por e-mail um dia antes e 15 minutos antes."
          }
        >
          <LinhaDeAjuste titulo={reuniao ? "Nome da reunião" : "Nome da live"} htmlFor="lv-titulo">
            <input
              id="lv-titulo"
              className="ks-field w-full"
              value={ficha.titulo}
              maxLength={160}
              placeholder={reuniao ? "Ex.: Alinhamento com o fornecedor de tecidos" : "Ex.: Lançamento da coleção de verão"}
              disabled={!podeEditar}
              onChange={(e) => mudar({ titulo: e.target.value })}
            />
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Dia e hora" texto="Horário de Brasília.">
            <div className="flex flex-wrap gap-2">
              {/* .ks-field vence o Tailwind na largura: a largura vai no style. */}
              <input type="date" className="ks-field" style={{ width: 170 }} value={ficha.dia} disabled={!podeEditar || jaFoiAoAr} onChange={(e) => mudar({ dia: e.target.value })} aria-label="Dia" />
              <input type="time" className="ks-field" style={{ width: 120 }} value={ficha.hora} disabled={!podeEditar || jaFoiAoAr} onChange={(e) => mudar({ hora: e.target.value })} aria-label="Hora" />
              <select className="ks-field" style={{ width: 150 }} value={ficha.duracaoMin} disabled={!podeEditar} onChange={(e) => mudar({ duracaoMin: Number(e.target.value) })} aria-label="Duração">
                {[30, 45, 60, 90, 120, 150, 180, 240].map((m) => (
                  <option key={m} value={m}>
                    {duracaoLegivel(m)}
                  </option>
                ))}
              </select>
            </div>
          </LinhaDeAjuste>
          {reuniao ? null : (
          <LinhaDeAjuste titulo="Sala de espera" texto="Quem chega cedo já vê a sala e conversa no bate-papo.">
            <EscolhaDeAjuste
              rotulo="Sala de espera"
              valor={String(ficha.esperaMin)}
              aoEscolher={(v) => mudar({ esperaMin: Number(v) })}
              opcoes={[
                { valor: "15", titulo: "Abre 15 min antes" },
                { valor: "30", titulo: "Abre 30 min antes" },
                { valor: "0", titulo: "Só na hora" },
              ]}
            />
          </LinhaDeAjuste>
          )}
        </SecaoDeAjustes>

        {reuniao ? null : (
        <SecaoDeAjustes id="lv-pagina" Icone={LayoutTemplate} titulo="Página da live" texto="É o que aparece na loja antes da live: a capa, o que a pessoa vai aprender e quem apresenta.">
          <LinhaDeAjuste titulo="Capa" texto="Aparece na loja e na área de membros.">
            <div className="max-w-[220px]">
              <ImageUpload bucket="products" folder="digitais/lives" value={ficha.capa ?? ""} onChange={(url) => mudar({ capa: url || null })} disabled={!podeEditar} enableCrop cropAspect={1} />
            </div>
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Nesta live você vai ver" texto="Uma promessa por linha (até 8). Vira a lista com os vistos da página.">
            <AreaDeTexto
              value={ficha.aprender.join("\n")}
              rows={4}
              disabled={!podeEditar}
              placeholder={"As peças novas antes de todo mundo\nCupom que só vale durante a live\nTirar suas dúvidas ao vivo"}
              onChange={(e) => mudar({ aprender: e.target.value.split("\n").slice(0, 8) })}
            />
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Sobre a live" texto="Opcional: um texto maior para a página.">
            <AreaDeTexto value={ficha.descricao} rows={3} maxLength={4000} disabled={!podeEditar} onChange={(e) => mudar({ descricao: e.target.value })} />
          </LinhaDeAjuste>
          <LinhaDeAjuste titulo="Quem apresenta" texto="Nome, uma frase e a foto. O nome aparece na sala.">
            <div className="grid gap-2">
              <input className="ks-field" value={ficha.apresentadorNome} maxLength={80} placeholder="Ex.: Paula Reis" disabled={!podeEditar} onChange={(e) => mudar({ apresentadorNome: e.target.value })} />
              <input className="ks-field" value={ficha.apresentadorBio} maxLength={200} placeholder="Ex.: Dona da gráfica, sublimação desde 2014" disabled={!podeEditar} onChange={(e) => mudar({ apresentadorBio: e.target.value })} />
              <div className="max-w-[220px]">
                <ImageUpload bucket="products" folder="digitais/apresentadores" value={ficha.apresentadorFoto ?? ""} onChange={(url) => mudar({ apresentadorFoto: url || null })} disabled={!podeEditar} enableCrop cropAspect={1} />
              </div>
            </div>
          </LinhaDeAjuste>
        </SecaoDeAjustes>

        )}

        {reuniao ? null : (
        <SecaoDeAjustes id="lv-entra" Icone={Ticket} titulo="Quem entra" texto="A live é um produto da loja: aparece na vitrine e se garante na mesma tela, com Pix ou cartão.">
          <LinhaDeAjuste titulo="Acesso">
            <EscolhaDeAjuste
              rotulo="Acesso"
              valor={ficha.acesso}
              aoEscolher={(v) => mudar({ acesso: v })}
              opcoes={[
                { valor: "paga", titulo: "Paga", texto: "Vende antes e durante a live. Quem comprou entra." },
                { valor: "cadastro", titulo: "Grátis com cadastro", texto: "Nome e e-mail. Bom para juntar contatos e vender na live." },
                { valor: "aberta", titulo: "Aberta", texto: "Qualquer pessoa com o link entra, só com o nome. Ideal para liveshop." },
              ]}
            />
          </LinhaDeAjuste>
          {ficha.acesso === "paga" ? (
            <LinhaDeAjuste titulo="Preço" htmlFor="lv-preco">
              <div className="flex items-center gap-2">
                <span className="text-sm font-semibold text-[var(--ks-color-text-muted)]">R$</span>
                <CampoDecimal id="lv-preco" className="ks-field" style={{ width: 140 }} valor={ficha.preco} aoMudar={(n) => mudar({ preco: n })} disabled={!podeEditar} casas={2} />
              </div>
            </LinhaDeAjuste>
          ) : null}
          {ficha.acesso !== "aberta" ? (
            <>
              <ChaveDeAjuste titulo="Vender durante a live" texto="Quem chega depois de começar garante a vaga e entra na hora." ligado={ficha.venderDurante} aoMudar={(v) => mudar({ venderDurante: v })} desabilitado={!podeEditar} />
              <LinhaDeAjuste titulo="Limite de vagas" texto="Sem limite, vende até a live acabar.">
                <div className="flex items-center gap-2">
                  <CampoDecimal
                    className="ks-field"
                    style={{ width: 140 }}
                    valor={ficha.limiteVagas ?? 0}
                    aoMudar={(n) => mudar({ limiteVagas: n > 0 ? Math.round(n) : null })}
                    disabled={!podeEditar}
                    casas={0}
                    zeroVazio
                    placeholder="Sem limite"
                  />
                  <span className="text-xs text-[var(--ks-color-text-muted)]">vagas</span>
                </div>
              </LinhaDeAjuste>
            </>
          ) : null}
        </SecaoDeAjustes>
        )}

        <SecaoDeAjustes
          id="lv-sala"
          Icone={Sparkles}
          titulo="Tamanho da sala"
          texto="Todo mês você tem transmissões grátis. Para mais transmissões ou mais pessoas, use um pacote KtaloguLive. A vaga só é gasta quando a transmissão começa."
          acao={
            <Link href="/dashboard/assinatura?aba=digitais" className="ks-button ks-button-soft">
              <Sparkles size={15} /> Comprar pacote
            </Link>
          }
        >
          <LinhaDeAjuste titulo={reuniao ? "Esta reunião usa" : "Esta live usa"}>
            <EscolhaDeAjuste
              rotulo="Vaga da transmissão"
              valor={ficha.vaga === "pacote" && ficha.vagaCompraId ? ficha.vagaCompraId : "gratis"}
              aoEscolher={(v) => (jaFoiAoAr ? undefined : v === "gratis" ? mudar({ vaga: "gratis", vagaCompraId: null }) : mudar({ vaga: "pacote", vagaCompraId: v }))}
              opcoes={[
                {
                  valor: "gratis",
                  titulo: `Grátis do mês · ${pessoasDoGratis(saldo)}`,
                  texto: saldo?.ilimitado ? "Sem limite para a sua empresa." : `${saldo?.gratis_restantes ?? 0} de ${saldo?.gratis_por_mes ?? 2} sobrando neste mês.`,
                },
                ...(saldo?.pacotes ?? []).map((p) => ({
                  valor: p.compra_id,
                  titulo: `${p.nome} · até ${p.pessoas} pessoas`,
                  texto: `${p.restantes} de ${p.lives} sobrando · vale até ${new Date(p.valida_ate).toLocaleDateString("pt-BR")}`,
                })),
                ...(ficha.vaga === "pacote" && ficha.vagaCompraId && !(saldo?.pacotes ?? []).some((p) => p.compra_id === ficha.vagaCompraId)
                  ? [{ valor: ficha.vagaCompraId, titulo: `Pacote já usado por esta ${nomeDoTipo}`, texto: "A vaga foi gasta quando a transmissão começou." }]
                  : []),
              ]}
              ajuda={jaFoiAoAr ? `A ${nomeDoTipo} já começou: a vaga não muda mais.` : undefined}
            />
          </LinhaDeAjuste>
        </SecaoDeAjustes>

        <SecaoDeAjustes
          id="lv-fala"
          Icone={Mic}
          titulo="Quem fala"
          texto="Como no Meet: todo mundo fala, ou quem participa levanta a mão e você libera o microfone e a câmera na hora."
        >
          <LinhaDeAjuste titulo="Participação">
            <EscolhaDeAjuste
              rotulo="Participação"
              valor={ficha.participacao}
              aoEscolher={(v) => mudar({ participacao: v })}
              opcoes={[
                { valor: "livre", titulo: "Todo mundo", texto: "Cada um liga o microfone, a câmera e mostra a tela quando quiser. Bom para reunião." },
                { valor: "mao", titulo: "Levantando a mão", texto: "Você libera quem vai falar. Bom para live de venda." },
                { valor: "so_apresentador", titulo: "Só quem apresenta", texto: "Quem assiste usa só o bate-papo." },
              ]}
            />
          </LinhaDeAjuste>
          <ChaveDeAjuste titulo="Câmera de quem participa" texto="Quem quiser liga a câmera e aparece ao lado de quem apresenta." ligado={ficha.camerasAlunos} aoMudar={(v) => mudar({ camerasAlunos: v })} desabilitado={!podeEditar} />
          <LinhaDeAjuste titulo="Bate-papo">
            <EscolhaDeAjuste
              rotulo="Bate-papo"
              valor={ficha.chat}
              aoEscolher={(v) => mudar({ chat: v })}
              opcoes={[
                { valor: "aberto", titulo: "Aberto", texto: "Todo mundo conversa." },
                { valor: "perguntas", titulo: "Só perguntas para você", texto: "A pergunta chega só para quem apresenta; a resposta vai para todos." },
                { valor: "desligado", titulo: "Desligado", texto: "Só a loja escreve (avisos e links)." },
              ]}
            />
          </LinhaDeAjuste>
        </SecaoDeAjustes>

        <SecaoDeAjustes
          id="lv-gravacao"
          Icone={CircleDot}
          titulo="Gravação"
          texto="A gravação é feita no computador de quem apresenta, com o som de todo mundo que fala, e sobe enquanto acontece. Grave pelo Chrome ou Edge no computador. Dá para trocar o jeito de gravar também dentro da sala."
        >
          <ChaveDeAjuste
            titulo={reuniao ? "Gravar a reunião" : "Gravar a live"}
            texto={reuniao ? "Começa quando você entra na reunião." : "Começa sozinha quando você entra ao vivo."}
            ligado={ficha.gravar}
            aoMudar={(v) => mudar({ gravar: v })}
            desabilitado={!podeEditar}
          />
          {ficha.gravar ? (
            <>
              <LinhaDeAjuste titulo="O que aparece no vídeo">
                <EscolhaDeAjuste
                  rotulo="O que aparece no vídeo"
                  valor={ficha.gravacaoModo}
                  aoEscolher={(v) => mudar({ gravacaoModo: v })}
                  opcoes={[
                    { valor: "palco", titulo: "Tela e câmera de quem apresenta", texto: "A tela compartilhada grande, com a sua câmera no cantinho. Sem a câmera nem o nome de quem assiste." },
                    { valor: "sala", titulo: "A sala inteira", texto: "Como você vê na tela: a apresentação e, ao lado, as câmeras de quem está participando (como no Meet)." },
                  ]}
                />
              </LinhaDeAjuste>
              {reuniao ? null : (
                <LinhaDeAjuste titulo="Para onde vai a gravação">
                  <EscolhaDeAjuste
                    rotulo="Para onde vai a gravação"
                    valor={ficha.gravacaoPara}
                    aoEscolher={(v) => mudar({ gravacaoPara: v })}
                    opcoes={[
                      { valor: "compradores", titulo: "Área de membros", texto: "Quem garantiu a vaga assiste depois. Bom para vender antes: “não pode ir? fica gravado”." },
                      { valor: "ninguem", titulo: "Só para mim, para baixar", texto: "Fica aqui no painel para você baixar e usar onde quiser. Ninguém mais vê." },
                    ]}
                  />
                </LinhaDeAjuste>
              )}
            </>
          ) : null}
          {live && live.gravacao.status !== "nenhuma" ? (
            <div className={`grid gap-2 py-3 ${FIO_DA_LINHA}`}>
              <p className="text-xs text-[var(--ks-color-text-muted)]">
                {live.gravacao.status === "gravando"
                  ? "Gravando agora."
                  : live.gravacao.status === "pronta"
                    ? `Gravação pronta: ${Math.max(1, Math.round(live.gravacao.segundos / 60))} min, ${(live.gravacao.bytes / 1024 / 1024).toFixed(0)} MB.`
                    : "A gravação não terminou de subir."}
              </p>
              {(gravacoes ?? []).map((g) => (
                <div key={g.id} className="flex flex-wrap items-center gap-2">
                  <span className="min-w-0 flex-1 truncate text-sm font-semibold text-[var(--ks-color-text-primary)]">{g.nome}</span>
                  <a href={g.assistir} target="_blank" rel="noreferrer" className="ks-button ks-button-soft">
                    <Video size={15} /> Assistir
                  </a>
                  <a href={g.baixar} className="ks-button ks-button-primary">
                    <Download size={15} /> Baixar
                  </a>
                </div>
              ))}
            </div>
          ) : null}
        </SecaoDeAjustes>

        <SecaoDeAjustes id="lv-soltar" Icone={Zap} titulo="Para soltar na live" texto="Deixe pronto o que você vai oferecer. Na hora, um toque e aparece em cima do vídeo para todo mundo.">
          <div className="grid gap-2 py-2">
            {ficha.itens.map((item) => (
              <div key={item.id} className="flex items-center gap-3 rounded-xl px-3 py-2.5 shadow-[0_0_0_1px_var(--ks-n-150,#e7e5ef)]">
                <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ks-brand-50)] text-[var(--ks-brand-700)]">
                  {item.tipo === "cupom" ? <Ticket size={16} /> : item.tipo === "link" ? <Link2 size={16} /> : <ShoppingBag size={16} />}
                </span>
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-sm font-bold text-[var(--ks-color-text-primary)]">{item.titulo}</span>
                  <span className="block truncate text-xs text-[var(--ks-color-text-muted)]">
                    {item.tipo === "cupom" ? `Cupom ${item.codigo ?? ""}${item.detalhe ? ` · ${item.detalhe}` : ""}` : item.tipo === "link" ? item.destino : item.preco ? moeda(item.preco) : "produto da loja"}
                  </span>
                </span>
                {podeEditar ? (
                  <>
                    <button type="button" className="ks-button ks-button-soft" onClick={() => setNovoItem(item)}>
                      Editar
                    </button>
                    <button type="button" className="ks-button ks-button-soft" aria-label="Tirar" onClick={() => mudar({ itens: ficha.itens.filter((i) => i.id !== item.id) })}>
                      <Trash2 size={15} />
                    </button>
                  </>
                ) : null}
              </div>
            ))}
            {!ficha.itens.length ? <p className="text-xs text-[var(--ks-color-text-muted)]">Nada pronto ainda.</p> : null}
          </div>

          {novoItem ? (
            <div className={`grid gap-2 rounded-xl bg-[var(--ks-color-bg-inset)] p-3 ${FIO_DA_LINHA}`}>
              <p className="text-xs font-bold uppercase tracking-[0.1em] text-[var(--ks-color-text-soft)]">
                {novoItem.tipo === "cupom" ? "Cupom" : novoItem.tipo === "link" ? "Link" : "Produto da loja"}
              </p>
              {novoItem.tipo === "produto" ? (
                <>
                  <input className="ks-field" placeholder="Buscar produto da loja" value={buscaDeProduto} onChange={(e) => setBuscaDeProduto(e.target.value)} />
                  <div className="max-h-56 overflow-y-auto rounded-lg bg-white">
                    {produtosFiltrados.map((p) => (
                      <button
                        key={p.id}
                        type="button"
                        className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-[var(--ks-color-bg-hover)] ${novoItem.destino?.endsWith(p.id) ? "bg-[var(--ks-brand-50)] font-bold" : ""}`}
                        onClick={() => setNovoItem({ ...novoItem, titulo: p.nome, imagem: p.imagem && /^https:/.test(p.imagem) ? p.imagem : null, preco: p.preco || null, destino: `/p/${p.id}` })}
                      >
                        <span className="min-w-0 flex-1 truncate">{p.nome}</span>
                        <span className="text-xs text-[var(--ks-color-text-muted)]">{p.preco ? moeda(p.preco) : ""}</span>
                      </button>
                    ))}
                  </div>
                  <input className="ks-field" placeholder="Frase da oferta (opcional). Ex.: Só durante a live" value={novoItem.detalhe ?? ""} maxLength={140} onChange={(e) => setNovoItem({ ...novoItem, detalhe: e.target.value || null })} />
                </>
              ) : (
                <>
                  <input className="ks-field" placeholder={novoItem.tipo === "cupom" ? "Título. Ex.: Coleção nova com 30% off" : "Título. Ex.: Planilha de preço"} value={novoItem.titulo} maxLength={90} onChange={(e) => setNovoItem({ ...novoItem, titulo: e.target.value })} />
                  {novoItem.tipo === "cupom" ? (
                    <div className="grid gap-2 sm:grid-cols-2">
                      <input className="ks-field font-mono uppercase" placeholder="Código. Ex.: LIVE30" value={novoItem.codigo ?? ""} maxLength={40} onChange={(e) => setNovoItem({ ...novoItem, codigo: e.target.value.toUpperCase().replace(/\s+/g, "") || null })} />
                      <input className="ks-field" placeholder="Detalhe. Ex.: vale 2 h depois da live" value={novoItem.detalhe ?? ""} maxLength={140} onChange={(e) => setNovoItem({ ...novoItem, detalhe: e.target.value || null })} />
                    </div>
                  ) : null}
                  <input
                    className="ks-field"
                    placeholder={novoItem.tipo === "cupom" ? "Link do botão (opcional): https://…" : "https://…"}
                    value={novoItem.destino ?? ""}
                    maxLength={1000}
                    onChange={(e) => setNovoItem({ ...novoItem, destino: e.target.value || null })}
                  />
                  {novoItem.tipo === "cupom" ? (
                    <p className="text-xs text-[var(--ks-color-text-muted)]">O cupom precisa existir na loja (Marketing → Cupons) para dar o desconto na compra.</p>
                  ) : null}
                </>
              )}
              <div className="flex gap-2">
                <button type="button" className="ks-button ks-button-primary" onClick={salvarItem} disabled={!novoItem.titulo.trim() || (novoItem.tipo === "cupom" && !novoItem.codigo)}>
                  <Check size={15} /> Pronto
                </button>
                <button type="button" className="ks-button ks-button-soft" onClick={() => setNovoItem(null)}>
                  <X size={15} /> Cancelar
                </button>
              </div>
            </div>
          ) : podeEditar ? (
            <div className={`flex flex-wrap gap-2 py-3 ${FIO_DA_LINHA}`}>
              <button type="button" className="ks-button ks-button-soft" onClick={() => setNovoItem(itemVazio("cupom"))}>
                <Plus size={15} /> Cupom
              </button>
              <button type="button" className="ks-button ks-button-soft" onClick={() => setNovoItem(itemVazio("produto"))}>
                <Plus size={15} /> Produto da loja
              </button>
              <button type="button" className="ks-button ks-button-soft" onClick={() => setNovoItem(itemVazio("link"))}>
                <Plus size={15} /> Link
              </button>
            </div>
          ) : null}
        </SecaoDeAjustes>

        {reuniao ? null : (
        <SecaoDeAjustes
          id="lv-liveshop"
          Icone={ShoppingBag}
          titulo="Liveshop"
          texto="Venda ao vivo como no TikTok Shop e nas lives da Shopee: a live aparece nas páginas destes produtos enquanto estiver no ar, e você passa os produtos na tela com um toque."
        >
          <ChaveDeAjuste titulo="Mostrar a live nas páginas dos produtos" texto="Quem estiver olhando o produto vê a live ao vivo ali mesmo e continua assistindo enquanto navega." ligado={ficha.vitrine} aoMudar={(v) => mudar({ vitrine: v })} desabilitado={!podeEditar} />
          {ficha.vitrine ? (
            <LinhaDeAjuste titulo="Produtos da live" texto="Na ordem que você vai mostrar (até 40).">
              <div className="grid gap-2">
                {ficha.produtosVitrine.map((idDoProduto, i) => {
                  const p = produtoPorId.get(idDoProduto);
                  return (
                    <div key={idDoProduto} className="flex items-center gap-2 rounded-lg px-2 py-1.5 shadow-[0_0_0_1px_var(--ks-n-150,#e7e5ef)]">
                      <span className="ks-num w-5 text-xs font-bold text-[var(--ks-color-text-soft)]">{i + 1}</span>
                      <span className="min-w-0 flex-1 truncate text-sm font-semibold">{p?.nome ?? "Produto"}</span>
                      {podeEditar ? (
                        <button type="button" className="ks-button ks-button-soft" aria-label="Tirar" onClick={() => mudar({ produtosVitrine: ficha.produtosVitrine.filter((x) => x !== idDoProduto) })}>
                          <X size={14} />
                        </button>
                      ) : null}
                    </div>
                  );
                })}
                {podeEditar && ficha.produtosVitrine.length < 40 ? (
                  <>
                    <input className="ks-field" placeholder="Buscar e acrescentar produto" value={buscaDeProduto} onChange={(e) => setBuscaDeProduto(e.target.value)} />
                    {buscaDeProduto.trim() ? (
                      <div className="max-h-56 overflow-y-auto rounded-lg shadow-[0_0_0_1px_var(--ks-n-150,#e7e5ef)]">
                        {produtosFiltrados
                          .filter((p) => !ficha.produtosVitrine.includes(p.id))
                          .map((p) => (
                            <button
                              key={p.id}
                              type="button"
                              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-[var(--ks-color-bg-hover)]"
                              onClick={() => {
                                mudar({ produtosVitrine: [...ficha.produtosVitrine, p.id] });
                                setBuscaDeProduto("");
                              }}
                            >
                              <Plus size={14} />
                              <span className="min-w-0 flex-1 truncate">{p.nome}</span>
                              <span className="text-xs text-[var(--ks-color-text-muted)]">{p.preco ? moeda(p.preco) : ""}</span>
                            </button>
                          ))}
                      </div>
                    ) : null}
                  </>
                ) : null}
              </div>
            </LinhaDeAjuste>
          ) : null}
        </SecaoDeAjustes>
        )}

        {!nova && live ? (
          <SecaoDeAjustes
            id="lv-apresentar"
            Icone={Video}
            titulo={reuniao ? "Link e convites" : "Apresentação"}
            texto={
              reuniao
                ? "Mande o link para quem vai participar. Na hora, clique em “Entrar na reunião”: você entra como quem organiza (pode silenciar, tirar alguém e gravar)."
                : "Na hora, clique em “Entrar ao vivo”: você entra nos bastidores, testa a câmera e o microfone, e só aparece para todos quando clicar em “Entrar ao vivo” dentro da sala."
            }
          >
            <LinhaDeAjuste titulo="Convidar para apresentar junto" texto="Um link só dela: entra já com microfone, câmera e tela. Gerar outro cancela o anterior.">
              {convite ? (
                <LinkCopiavel rotulo="Link de convite" link={convite} />
              ) : (
                <button type="button" className="ks-button ks-button-soft" onClick={() => void gerarConvite()} disabled={!podeEditar || salvando === "convite"}>
                  {salvando === "convite" ? <Loader2 size={15} className="animate-spin" /> : <UserPlus size={15} />}
                  {live.temConvite ? "Gerar outro link de convite" : "Gerar link de convite"}
                </button>
              )}
            </LinhaDeAjuste>
            {dados?.links.sala ? (
              <LinhaDeAjuste
                titulo={reuniao ? "Link da reunião" : "Link da sala"}
                texto={reuniao ? "Quem abrir entra com o nome." : "Para mandar a quem garantiu a vaga (cada um entra com o próprio e-mail)."}
              >
                <LinkCopiavel rotulo="Link da sala" link={dados.links.sala} />
              </LinhaDeAjuste>
            ) : null}
            {dados?.links.pagina ? (
              <LinhaDeAjuste titulo="Página de venda">
                <LinkCopiavel rotulo="Página de venda" link={dados.links.pagina} />
              </LinhaDeAjuste>
            ) : null}
            {live.status === "agendada" && podeEditar ? (
              <div className={`py-3 ${FIO_DA_LINHA}`}>
                <button type="button" className="ks-button ks-button-soft text-[var(--ks-color-danger,#d61f38)]" onClick={pedirCancelamento}>
                  <Trash2 size={15} /> {reuniao ? "Cancelar a reunião" : "Cancelar a live"}
                </button>
              </div>
            ) : null}
          </SecaoDeAjustes>
        ) : null}
      </FolhaDeAjustes>

      {podeEditar ? (
        <div className="fixed inset-x-0 bottom-0 z-30 border-t border-[var(--ks-color-border-subtle)] bg-white/90 px-4 py-3 backdrop-blur lg:left-[284px]">
          <div className="mx-auto flex max-w-5xl items-center justify-end gap-3">
            <span className="text-xs text-[var(--ks-color-text-muted)]">
              {nova ? (reuniao ? "O link fica pronto ao criar." : "A live nasce fora da loja; você publica quando quiser.") : mexido ? "Há mudanças não salvas." : "Tudo salvo."}
            </span>
            <button type="button" className="ks-button ks-button-primary" onClick={() => void salvar()} disabled={Boolean(salvando) || (!nova && !mexido)}>
              {salvando === "salvar" ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
              {nova ? (reuniao ? "Criar e pegar o link" : "Criar a live") : "Salvar"}
            </button>
          </div>
        </div>
      ) : null}

      <CaixaDeConfirmacao pedido={confirmacao} aoFechar={() => setConfirmacao(null)} />
    </div>
  );
}

/* O link pronto em cima de tudo, como o "Copiar informações" do Meet. */
function LinkPronto({ link, titulo, reuniao, comecaEm }: { link: string; titulo: string; reuniao: boolean; comecaEm: string }) {
  const [copiado, setCopiado] = useState(false);
  const quando = (() => {
    try {
      return new Intl.DateTimeFormat("pt-BR", { weekday: "long", day: "2-digit", month: "long", hour: "2-digit", minute: "2-digit", timeZone: "America/Sao_Paulo" }).format(new Date(comecaEm));
    } catch {
      return "";
    }
  })();
  const convite = `${titulo}\n${quando}\n\n${reuniao ? "Entre na reunião" : "Entre na live"}: ${link}`;
  return (
    <section className={`flex flex-wrap items-center gap-3 py-3 ${FIO_DA_LINHA}`}>
      <span className="min-w-0 flex-1">
        <span className="block text-[11px] font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">{reuniao ? "Link da reunião" : "Link da sala"}</span>
        <a href={link} target="_blank" rel="noreferrer" className="block truncate font-mono text-base font-bold text-[var(--ks-brand-700)] hover:underline">
          {link.replace(/^https:\/\//, "")}
        </a>
      </span>
      <button
        type="button"
        className="ks-button ks-button-primary"
        onClick={() =>
          void copiar(convite).then((ok) => {
            setCopiado(ok);
            setTimeout(() => setCopiado(false), 1800);
          })
        }
      >
        {copiado ? <Check size={15} /> : <Copy size={15} />}
        {copiado ? "Copiado" : "Copiar convite"}
      </button>
      <a href={`https://wa.me/?text=${encodeURIComponent(convite)}`} target="_blank" rel="noreferrer" className="ks-button ks-button-soft">
        <MessageCircle size={15} /> WhatsApp
      </a>
    </section>
  );
}

function links(dados: Resposta | null) {
  return dados?.links ?? null;
}