"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  Check,
  ChevronDown,
  Copy,
  Eye,
  EyeOff,
  FileText,
  Home,
  Loader2,
  Pencil,
  Plus,
  Settings2,
  Trash2,
  X,
} from "lucide-react";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import { avisarALojaAgora } from "@/lib/gravacoes-da-vitrine";
import CaixaDeConfirmacao, { type Confirmacao } from "@/components/ui/caixa-de-confirmacao";
import { problemaDoSlugDaPagina, slugDePagina, slugLivre } from "@/lib/navegacao-da-loja";
import { EditorDaPaginaInicial } from "./editor";
import { CampoDeImagem, Chave, Texto } from "./campos";

/*
  O editor da loja com as páginas extras (migration 197).

  Por cima do editor da página inicial, a escolha de QUAL página se monta: a
  inicial ou uma das páginas extras (/<slug>/pagina/<pagina>). Cada página
  abre no MESMO editor, com a loja de verdade no meio, já no endereço dela.
  A janela "Páginas da loja" cria, renomeia, troca o endereço, mostra ou
  esconde, duplica e apaga, e guarda o SEO de cada uma.

  A página nasce escondida (rascunho): só aparece na loja, no menu e no
  sitemap depois de "Mostrar na loja".
*/

export type PaginaDaLojaNoPainel = {
  id: string;
  titulo: string;
  slug: string;
  visivel: boolean;
  noindex: boolean;
  mostrar_titulo: boolean;
  seo_titulo: string | null;
  seo_descricao: string | null;
  og_imagem: string | null;
  position: number;
  publicada_em: string | null;
};

const COLUNAS = "id,titulo,slug,visivel,noindex,mostrar_titulo,seo_titulo,seo_descricao,og_imagem,position,publicada_em";

function lerPaginaDoEndereco(): string | null {
  if (typeof window === "undefined") return null;
  const valor = new URLSearchParams(window.location.search).get("pagina");
  return valor && /^[0-9a-f-]{36}$/i.test(valor) ? valor : null;
}

function guardarPaginaNoEndereco(id: string | null) {
  const endereco = new URL(window.location.href);
  if (id) endereco.searchParams.set("pagina", id);
  else endereco.searchParams.delete("pagina");
  window.history.replaceState(window.history.state, "", endereco.toString());
}

export function EditorDaLoja({ podeEditar }: { podeEditar: boolean }) {
  const [dono, setDono] = useState("");
  const [paginas, setPaginas] = useState<PaginaDaLojaNoPainel[]>([]);
  const [atual, setAtual] = useState<string | null>(null);
  const [lidas, setLidas] = useState(false);
  const [aberto, setAberto] = useState(false);
  const [gerenciar, setGerenciar] = useState(false);
  const [confirmacao, setConfirmacao] = useState<Confirmacao | null>(null);
  const sujo = useRef(false);

  const ler = useCallback(async () => {
    const supabase = getSupabaseClient();
    const {
      data: { user },
    } = await supabase.auth.getUser();
    if (!user) return;
    const ctx = await getCompanyContext(supabase, user);
    const donoDaLoja = ctx.ownerId ?? user.id;
    setDono(donoDaLoja);
    const { data } = await supabase
      .from("catalog_paginas")
      .select(COLUNAS)
      .eq("user_id", donoDaLoja)
      .order("position", { ascending: true })
      .order("created_at", { ascending: true });
    setPaginas((data || []) as PaginaDaLojaNoPainel[]);
  }, []);

  useEffect(() => {
    let cancelado = false;
    ler().finally(() => {
      if (cancelado) return;
      setLidas(true);
      setAtual(lerPaginaDoEndereco());
    });
    return () => {
      cancelado = true;
    };
  }, [ler]);

  const pagina = useMemo(() => paginas.find((p) => p.id === atual) || null, [atual, paginas]);
  /* O que o editor recebe muda só quando muda o endereço da página: o
     editor relê a loja quando isso muda. */
  const idDaPagina = pagina?.id ?? null;
  const tituloDaPagina = pagina?.titulo ?? "";
  const slugDaPagina = pagina?.slug ?? "";
  const paginaDoEditor = useMemo(
    () => (idDaPagina ? { id: idDaPagina, titulo: tituloDaPagina, slug: slugDaPagina } : null),
    [idDaPagina, tituloDaPagina, slugDaPagina]
  );
  const aoMudarSujo = useCallback((valor: boolean) => {
    sujo.current = valor;
  }, []);
  /* A página do endereço sumiu (apagada noutra tela): volta para a inicial. */
  useEffect(() => {
    if (lidas && atual && !pagina) {
      setAtual(null);
      guardarPaginaNoEndereco(null);
    }
  }, [atual, lidas, pagina]);

  const abrir = useCallback((id: string | null) => {
    const ir = () => {
      setAtual(id);
      guardarPaginaNoEndereco(id);
      setAberto(false);
      setGerenciar(false);
      sujo.current = false;
    };
    if (sujo.current) {
      setConfirmacao({
        titulo: "Trocar de página sem publicar?",
        texto: "As mudanças que ainda não foram publicadas nesta página se perdem.",
        confirmar: "Trocar e descartar",
        tom: "perigo",
        aoConfirmar: () => {
          setConfirmacao(null);
          ir();
        },
      });
      return;
    }
    ir();
  }, []);

  const seletor = (
    <span className="relative inline-flex min-w-0">
      <button
        type="button"
        onClick={() => setAberto((a) => !a)}
        aria-expanded={aberto}
        className="inline-flex min-w-0 items-center gap-1.5 rounded-lg px-1.5 py-0.5 -ml-1.5 transition hover:bg-[var(--ks-color-bg-hover)]"
      >
        {pagina ? <FileText size={14} className="shrink-0 text-[var(--ks-color-primary)]" /> : <Home size={14} className="shrink-0 text-[var(--ks-color-primary)]" />}
        <span className="truncate">{pagina ? pagina.titulo : "Página inicial"}</span>
        {pagina && !pagina.visivel ? (
          <span className="rounded-full bg-[var(--ks-color-bg-inset)] px-1.5 py-0.5 text-[10px] font-bold text-[var(--ks-color-text-soft)]">escondida</span>
        ) : null}
        <ChevronDown size={14} className="shrink-0 text-[var(--ks-color-text-soft)]" />
      </button>
      {aberto ? (
        <>
          <button type="button" aria-label="Fechar" className="fixed inset-0 z-[79] cursor-default" onClick={() => setAberto(false)} />
          <span className="absolute left-0 top-[calc(100%+6px)] z-[80] block w-72 overflow-hidden rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] py-1.5 font-semibold shadow-[var(--ks-shadow-overlay)]">
            <OpcaoDaLista ativa={!pagina} icone={<Home size={15} />} titulo="Página inicial" detalhe="A primeira página da loja" onClick={() => abrir(null)} />
            {paginas.map((p) => (
              <OpcaoDaLista
                key={p.id}
                ativa={p.id === atual}
                icone={<FileText size={15} />}
                titulo={p.titulo}
                detalhe={`/pagina/${p.slug}${p.visivel ? "" : " · escondida"}`}
                onClick={() => abrir(p.id)}
              />
            ))}
            <span className="my-1 block border-t border-[var(--ks-n-100)]" />
            <button
              type="button"
              onClick={() => {
                setAberto(false);
                setGerenciar(true);
              }}
              className="flex w-full items-center gap-2.5 px-3.5 py-2.5 text-left text-[13px] font-bold text-[var(--ks-color-primary)] hover:bg-[var(--ks-color-bg-hover)]"
            >
              <Settings2 size={15} /> Páginas da loja
            </button>
          </span>
        </>
      ) : null}
    </span>
  );

  if (!lidas) {
    return (
      <div className="flex h-[60vh] items-center justify-center rounded-2xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)]">
        <Loader2 className="h-6 w-6 animate-spin text-[var(--ks-color-primary)]" />
      </div>
    );
  }

  return (
    <>
      <EditorDaPaginaInicial
        key={pagina?.id || "inicio"}
        podeEditar={podeEditar}
        pagina={paginaDoEditor}
        seletorDePagina={podeEditar ? seletor : undefined}
        aoMudarSujo={aoMudarSujo}
      />
      {gerenciar ? (
        <PaginasDaLoja
          dono={dono}
          paginas={paginas}
          atual={atual}
          aoRecarregar={ler}
          aoAbrir={abrir}
          aoFechar={() => setGerenciar(false)}
          aoConfirmar={setConfirmacao}
        />
      ) : null}
      <CaixaDeConfirmacao pedido={confirmacao} aoFechar={() => setConfirmacao(null)} />
    </>
  );
}

function OpcaoDaLista({ ativa, icone, titulo, detalhe, onClick }: { ativa: boolean; icone: React.ReactNode; titulo: string; detalhe: string; onClick: () => void }) {
  return (
    <button type="button" onClick={onClick} className="flex w-full items-center gap-2.5 px-3.5 py-2 text-left hover:bg-[var(--ks-color-bg-hover)]">
      <span className={ativa ? "text-[var(--ks-color-primary)]" : "text-[var(--ks-color-text-soft)]"}>{icone}</span>
      <span className="min-w-0 flex-1">
        <span className="block truncate text-[13px] font-bold text-[var(--ks-color-text-primary)]">{titulo}</span>
        <span className="block truncate text-[11px] font-medium text-[var(--ks-color-text-soft)]">{detalhe}</span>
      </span>
      {ativa ? <Check size={15} className="shrink-0 text-[var(--ks-color-primary)]" /> : null}
    </button>
  );
}

/* ------------------------------------------------- a janela das páginas */

type Formulario = {
  titulo: string;
  slug: string;
  slugTocado: boolean;
  mostrar_titulo: boolean;
  seo_titulo: string;
  seo_descricao: string;
  og_imagem: string;
  noindex: boolean;
};

function formularioDa(pagina: PaginaDaLojaNoPainel | null): Formulario {
  return {
    titulo: pagina?.titulo || "",
    slug: pagina?.slug || "",
    slugTocado: Boolean(pagina),
    mostrar_titulo: pagina ? pagina.mostrar_titulo : true,
    seo_titulo: pagina?.seo_titulo || "",
    seo_descricao: pagina?.seo_descricao || "",
    og_imagem: pagina?.og_imagem || "",
    noindex: pagina?.noindex === true,
  };
}

function PaginasDaLoja({
  dono,
  paginas,
  atual,
  aoRecarregar,
  aoAbrir,
  aoFechar,
  aoConfirmar,
}: {
  dono: string;
  paginas: PaginaDaLojaNoPainel[];
  atual: string | null;
  aoRecarregar: () => Promise<void>;
  aoAbrir: (id: string | null) => void;
  aoFechar: () => void;
  aoConfirmar: (pedido: Confirmacao | null) => void;
}) {
  /* "nova" = o formulário da página nova; um id = os ajustes daquela. */
  const [editando, setEditando] = useState<string | "nova" | null>(paginas.length ? null : "nova");
  const [form, setForm] = useState<Formulario>(formularioDa(null));
  const [ocupado, setOcupado] = useState<string | null>(null);
  const [erro, setErro] = useState("");

  useEffect(() => {
    const aoTeclar = (evento: KeyboardEvent) => {
      if (evento.key === "Escape") aoFechar();
    };
    window.addEventListener("keydown", aoTeclar);
    return () => window.removeEventListener("keydown", aoTeclar);
  }, [aoFechar]);

  const slugsDasOutras = (id: string | null) => paginas.filter((p) => p.id !== id).map((p) => p.slug);

  const editar = (alvo: PaginaDaLojaNoPainel | "nova") => {
    setErro("");
    if (alvo === "nova") {
      setEditando("nova");
      setForm(formularioDa(null));
    } else {
      setEditando(alvo.id);
      setForm(formularioDa(alvo));
    }
  };

  const salvar = async () => {
    if (!dono || ocupado) return;
    const id = editando === "nova" ? null : editando;
    const titulo = form.titulo.replace(/\s+/g, " ").trim();
    if (!titulo) {
      setErro("Dê um título para a página.");
      return;
    }
    const slug = form.slug || slugLivre(titulo, slugsDasOutras(id));
    const problema = problemaDoSlugDaPagina(slug, slugsDasOutras(id));
    if (problema) {
      setErro(problema);
      return;
    }
    setOcupado("salvar");
    setErro("");
    const campos = {
      titulo: titulo.slice(0, 120),
      slug,
      mostrar_titulo: form.mostrar_titulo,
      seo_titulo: form.seo_titulo.trim().slice(0, 120) || null,
      seo_descricao: form.seo_descricao.trim().slice(0, 320) || null,
      og_imagem: form.og_imagem.trim() || null,
      noindex: form.noindex,
      updated_at: new Date().toISOString(),
    };
    const supabase = getSupabaseClient();
    const resposta = id
      ? await supabase.from("catalog_paginas").update(campos).eq("id", id).eq("user_id", dono).select("id").maybeSingle()
      : await supabase
          .from("catalog_paginas")
          .insert({ ...campos, user_id: dono, visivel: false, position: paginas.length ? Math.max(...paginas.map((p) => p.position)) + 1 : 0 })
          .select("id")
          .maybeSingle();
    setOcupado(null);
    if (resposta.error || !resposta.data) {
      setErro(/duplicate|unique/i.test(resposta.error?.message || "") ? "Já existe uma página com esse endereço." : "Não deu para salvar a página.");
      return;
    }
    await aoRecarregar();
    if (!id) {
      /* A página nova abre direto no editor, vazia, para pôr as seções. */
      aoAbrir(String((resposta.data as { id: string }).id));
      return;
    }
    setEditando(null);
  };

  const alternarVisivel = async (pagina: PaginaDaLojaNoPainel) => {
    setOcupado(pagina.id);
    const { error } = await getSupabaseClient()
      .from("catalog_paginas")
      .update({ visivel: !pagina.visivel, updated_at: new Date().toISOString() })
      .eq("id", pagina.id)
      .eq("user_id", dono);
    setOcupado(null);
    if (error) setErro("Não deu para mudar a página.");
    await aoRecarregar();
  };

  const duplicar = async (pagina: PaginaDaLojaNoPainel) => {
    setOcupado(pagina.id);
    const slug = slugLivre(`${pagina.slug}-copia`, paginas.map((p) => p.slug));
    const { error } = await getSupabaseClient().rpc("duplicar_pagina_da_loja", {
      p_dono: dono,
      p_pagina: pagina.id,
      p_titulo: `${pagina.titulo} (cópia)`.slice(0, 120),
      p_slug: slug,
    });
    setOcupado(null);
    if (error) setErro(error.message || "Não deu para duplicar a página.");
    await aoRecarregar();
  };

  const apagar = (pagina: PaginaDaLojaNoPainel) => {
    aoConfirmar({
      titulo: `Apagar "${pagina.titulo}"?`,
      texto: "A página e as seções dela saem da loja para sempre. Os links do menu e do rodapé que levavam a ela somem sozinhos.",
      confirmar: "Apagar página",
      tom: "perigo",
      aoConfirmar: async () => {
        aoConfirmar(null);
        setOcupado(pagina.id);
        const { error } = await getSupabaseClient().from("catalog_paginas").delete().eq("id", pagina.id).eq("user_id", dono);
        setOcupado(null);
        if (error) {
          setErro("Não deu para apagar a página.");
          return;
        }
        await avisarALojaAgora();
        await aoRecarregar();
        if (atual === pagina.id) aoAbrir(null);
      },
    });
  };

  const formulario = (
    <div className="space-y-0 rounded-2xl border border-[var(--ks-brand-200)] bg-[var(--ks-color-bg-elevated)]">
      <div className="space-y-3 px-4 pb-2 pt-4">
        <div>
          <p className="mb-1.5 text-[12px] font-bold text-[var(--ks-color-text-primary)]">Título</p>
          <Texto
            valor={form.titulo}
            aoMudar={(titulo) =>
              setForm((f) => ({ ...f, titulo, slug: f.slugTocado ? f.slug : slugLivre(titulo, slugsDasOutras(editando === "nova" ? null : editando)) }))
            }
            placeholder="Sobre nós"
            max={120}
            rotulo="Título da página"
          />
        </div>
        <div>
          <p className="mb-1.5 text-[12px] font-bold text-[var(--ks-color-text-primary)]">Endereço</p>
          <div className="flex items-center gap-1.5">
            <span className="shrink-0 text-[12px] font-semibold text-[var(--ks-color-text-soft)]">/pagina/</span>
            <Texto valor={form.slug} aoMudar={(valor) => setForm((f) => ({ ...f, slug: slugDePagina(valor), slugTocado: true }))} placeholder="sobre-nos" max={80} rotulo="Endereço da página" />
          </div>
          {editando !== "nova" ? (
            <p className="mt-1.5 text-[11.5px] text-[var(--ks-color-text-soft)]">Mudou o endereço, o link antigo deixa de abrir. O menu acompanha sozinho.</p>
          ) : null}
        </div>
      </div>
      {editando !== "nova" ? (
        <>
          <Chave rotulo="Mostrar o título no topo" dica="Com a trilha Início › Título, no desenho do modelo da loja." ligada={form.mostrar_titulo} aoMudar={(mostrar_titulo) => setForm((f) => ({ ...f, mostrar_titulo }))} />
          <div className="space-y-3 border-t border-[var(--ks-n-100)] px-4 py-4">
            <p className="text-[10.5px] font-bold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">Google e compartilhamento</p>
            <div>
              <p className="mb-1.5 text-[12px] font-bold text-[var(--ks-color-text-primary)]">Título no Google</p>
              <Texto valor={form.seo_titulo} aoMudar={(seo_titulo) => setForm((f) => ({ ...f, seo_titulo }))} placeholder={`${form.titulo || "Título"} | Nome da loja`} max={120} rotulo="Título no Google" />
            </div>
            <div>
              <p className="mb-1.5 text-[12px] font-bold text-[var(--ks-color-text-primary)]">Descrição no Google</p>
              <textarea
                value={form.seo_descricao}
                onChange={(e) => setForm((f) => ({ ...f, seo_descricao: e.target.value.slice(0, 320) }))}
                rows={3}
                placeholder="Uma ou duas frases sobre a página (até 160 letras aparecem)."
                className="w-full resize-y rounded-xl border border-[var(--ks-color-border-subtle)] bg-[var(--ks-color-bg-elevated)] px-3 py-2 text-[13px] outline-none focus:border-[var(--ks-color-primary)] focus:shadow-[var(--ks-focus-ring)]"
              />
            </div>
            <div>
              <p className="mb-1.5 text-[12px] font-bold text-[var(--ks-color-text-primary)]">Imagem de compartilhamento</p>
              <CampoDeImagem valor={form.og_imagem} aoMudar={(og_imagem) => setForm((f) => ({ ...f, og_imagem }))} proporcao={1.91} largura={1200} altura={630} />
            </div>
          </div>
          <Chave rotulo="Fora do Google" dica="A página abre na loja, mas não entra na busca do Google nem no sitemap." ligada={form.noindex} aoMudar={(noindex) => setForm((f) => ({ ...f, noindex }))} />
        </>
      ) : null}
      {erro ? <p className="px-4 pb-1 pt-2 text-[12px] font-semibold text-[var(--ks-color-status-danger)]">{erro}</p> : null}
      <div className="flex items-center justify-end gap-2 border-t border-[var(--ks-n-100)] px-4 py-3">
        {paginas.length || editando !== "nova" ? (
          <button type="button" onClick={() => setEditando(null)} className="ks-button ks-button-ghost ks-button-sm">
            Cancelar
          </button>
        ) : null}
        <button type="button" onClick={salvar} disabled={ocupado === "salvar"} className="ks-button ks-button-primary ks-button-sm disabled:opacity-50">
          {ocupado === "salvar" ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} strokeWidth={3} />}
          {editando === "nova" ? "Criar e montar" : "Salvar"}
        </button>
      </div>
    </div>
  );

  return (
    <div role="dialog" aria-modal="true" aria-label="Páginas da loja" className="fixed inset-0 z-[110] flex items-end justify-center bg-[rgba(12,8,24,0.42)] p-0 backdrop-blur-[2px] sm:items-center sm:p-6" onClick={aoFechar}>
      <div
        onClick={(e) => e.stopPropagation()}
        className="flex max-h-[92dvh] w-full max-w-[560px] flex-col overflow-hidden rounded-t-[26px] bg-[var(--ks-color-bg-elevated)] shadow-[var(--ks-shadow-overlay)] sm:rounded-[22px]"
      >
        <div className="flex items-start gap-3 border-b border-[var(--ks-n-100)] px-5 py-4">
          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-white" style={{ background: "linear-gradient(135deg,#7346e8,#5228bd)", boxShadow: "var(--ks-shadow-brand)" }}>
            <FileText size={18} />
          </span>
          <div className="min-w-0 flex-1">
            <p className="text-[16px] font-extrabold text-[var(--ks-color-text-primary)]">Páginas da loja</p>
            <p className="mt-0.5 text-[12px] leading-[1.45] text-[var(--ks-color-text-soft)]">
              Sobre nós, trocas e devoluções, como comprar... Cada página é montada com as mesmas seções da página inicial e nasce escondida.
            </p>
          </div>
          <button type="button" onClick={aoFechar} aria-label="Fechar" className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-[var(--ks-color-text-soft)] hover:bg-[var(--ks-color-bg-hover)]">
            <X size={17} />
          </button>
        </div>

        <div className="min-h-0 flex-1 space-y-2 overflow-y-auto p-4">
          {editando === "nova" ? formulario : null}
          {paginas.map((pagina) =>
            editando === pagina.id ? (
              <div key={pagina.id}>{formulario}</div>
            ) : (
              <div key={pagina.id} className={`flex items-center gap-3 rounded-2xl border px-3 py-2.5 ${pagina.id === atual ? "border-[var(--ks-brand-200)] bg-[var(--ks-brand-50)]" : "border-[var(--ks-color-border-subtle)]"}`}>
                <span className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${pagina.visivel ? "bg-[var(--ks-emerald-soft)] text-[var(--ks-color-status-success)]" : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-soft)]"}`}>
                  {pagina.visivel ? <Eye size={16} /> : <EyeOff size={16} />}
                </span>
                <button type="button" onClick={() => aoAbrir(pagina.id)} className="min-w-0 flex-1 text-left">
                  <span className="block truncate text-[13.5px] font-bold text-[var(--ks-color-text-primary)]">{pagina.titulo}</span>
                  <span className="block truncate text-[11.5px] text-[var(--ks-color-text-soft)]">
                    /pagina/{pagina.slug} · {pagina.visivel ? "na loja" : "escondida"}
                    {pagina.noindex ? " · fora do Google" : ""}
                  </span>
                </button>
                {ocupado === pagina.id ? <Loader2 size={16} className="shrink-0 animate-spin text-[var(--ks-color-primary)]" /> : null}
                <button
                  type="button"
                  onClick={() => alternarVisivel(pagina)}
                  className={`hidden shrink-0 rounded-full px-3 py-1.5 text-[11.5px] font-bold transition sm:inline-flex ${
                    pagina.visivel ? "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)]" : "bg-[var(--ks-color-primary)] text-white hover:opacity-90"
                  }`}
                >
                  {pagina.visivel ? "Esconder" : "Mostrar na loja"}
                </button>
                <span className="flex shrink-0 items-center">
                  <BotaoPequeno titulo="Montar no editor" onClick={() => aoAbrir(pagina.id)}>
                    <Pencil size={15} />
                  </BotaoPequeno>
                  <BotaoPequeno titulo="Título, endereço e SEO" onClick={() => editar(pagina)}>
                    <Settings2 size={15} />
                  </BotaoPequeno>
                  <BotaoPequeno titulo="Duplicar" onClick={() => duplicar(pagina)}>
                    <Copy size={15} />
                  </BotaoPequeno>
                  <BotaoPequeno titulo={pagina.visivel ? "Esconder" : "Mostrar na loja"} onClick={() => alternarVisivel(pagina)} soCelular>
                    {pagina.visivel ? <EyeOff size={15} /> : <Eye size={15} />}
                  </BotaoPequeno>
                  <BotaoPequeno titulo="Apagar" onClick={() => apagar(pagina)} perigo>
                    <Trash2 size={15} />
                  </BotaoPequeno>
                </span>
              </div>
            )
          )}
          {erro && editando === null ? <p className="px-1 text-[12px] font-semibold text-[var(--ks-color-status-danger)]">{erro}</p> : null}
        </div>

        {editando === null ? (
          <div className="border-t border-[var(--ks-n-100)] p-4">
            <button type="button" onClick={() => editar("nova")} className="ks-button ks-button-primary w-full justify-center">
              <Plus size={16} /> Nova página
            </button>
          </div>
        ) : null}
      </div>
    </div>
  );
}

function BotaoPequeno({ titulo, onClick, perigo, soCelular, children }: { titulo: string; onClick: () => void; perigo?: boolean; soCelular?: boolean; children: React.ReactNode }) {
  return (
    <button
      type="button"
      title={titulo}
      aria-label={titulo}
      onClick={onClick}
      className={`h-8 w-8 items-center justify-center rounded-lg transition ${soCelular ? "flex sm:hidden" : "flex"} ${
        perigo ? "text-[var(--ks-color-text-soft)] hover:bg-rose-50 hover:text-rose-600" : "text-[var(--ks-color-text-soft)] hover:bg-[var(--ks-color-bg-hover)] hover:text-[var(--ks-color-primary)]"
      }`}
    >
      {children}
    </button>
  );
}