"use client";

import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
import { DragDropContext, Draggable, Droppable, type DraggableProvided, type DropResult } from "@hello-pangea/dnd";
import {
  ArrowDown,
  ArrowUp,
  ChevronDown,
  ChevronRight,
  Columns3,
  ExternalLink,
  FileText,
  Folder,
  GripVertical,
  Home,
  Link2,
  PanelBottom,
  PanelTop,
  Plus,
  Sparkles,
  Tag,
  Trash2,
  X,
} from "lucide-react";
import { getSupabaseClient } from "@/lib/supabase";
import {
  CABECALHO_PADRAO,
  LIMITE_DE_COLUNAS_NO_RODAPE,
  LIMITE_DE_FILHOS_NO_GRUPO,
  LIMITE_DE_ITENS_NO_MENU,
  LIMITE_DE_LINKS_NA_COLUNA,
  LIMITE_DO_SOBRE,
  NOME_DO_TIPO,
  RODAPE_PADRAO,
  colunaNova,
  itemNovo,
  mudouANavegacao,
  rascunhoDaNavegacao,
  type ItemDoMenu,
  type RascunhoDaNavegacao,
  type TamanhoDaLogo,
  type TipoDoItem,
} from "@/lib/navegacao-da-loja";
import { ehFamiliaVendor, problemaDoEndereco, type Tema } from "@/lib/pagina-inicial";
import { Ajuste, Chave, Escolha, Segmentos, Texto, emReais, nomeDaCategoria, type CategoriaDoEditor, type ProdutoDoEditor } from "./campos";

/*
  O cabeçalho, o menu e o rodapé no editor da loja (migration 197).

  - useNavegacaoDoEditor: lê o que está publicado (catalog_navegacao) e as
    páginas extras, guarda o rascunho com o próprio desfazer/refazer e diz
    se mudou. Quem grava é o "Publicar" do editor, junto com as seções.
  - EntradasDaNavegacao: as duas linhas "Cabeçalho e menu" e "Rodapé" no
    alto da lista da página.
  - AjustesDoCabecalho / AjustesDoRodape: o painel da direita quando a região
    está escolhida (no clique da lista ou no clique da própria loja).

  Desligado o "menu próprio" (ou o "rodapé próprio"), a loja segue com o de
  sempre do template: nada muda para quem não usa.
*/

export type Regiao = "cabecalho" | "rodape";
export type PaginaDoEditor = { id: string; titulo: string; slug: string; visivel: boolean };

const LIMITE_DO_HISTORICO = 60;

export function useNavegacaoDoEditor(dono: string) {
  const [carregada, setCarregada] = useState(false);
  const [publicada, setPublicada] = useState<RascunhoDaNavegacao | null>(null);
  const [rascunho, setRascunho] = useState<RascunhoDaNavegacao | null>(null);
  const [paginas, setPaginas] = useState<PaginaDoEditor[]>([]);
  const [passado, setPassado] = useState<RascunhoDaNavegacao[]>([]);
  const [futuro, setFuturo] = useState<RascunhoDaNavegacao[]>([]);
  const agrupado = useRef<{ chave: string; em: number } | null>(null);

  const ler = useCallback(async () => {
    if (!dono) return null;
    const supabase = getSupabaseClient();
    const [linha, lista] = await Promise.all([
      supabase.from("catalog_navegacao").select("cabecalho,menu,rodape").eq("user_id", dono).maybeSingle(),
      supabase.from("catalog_paginas").select("id,titulo,slug,visivel").eq("user_id", dono).order("position", { ascending: true }).order("created_at", { ascending: true }),
    ]);
    return {
      navegacao: rascunhoDaNavegacao(linha.error ? null : linha.data),
      paginas: (lista.error ? [] : (lista.data || [])) as PaginaDoEditor[],
    };
  }, [dono]);

  const recarregar = useCallback(async () => {
    const lido = await ler();
    if (!lido) return;
    setPublicada(lido.navegacao);
    setRascunho(lido.navegacao);
    setPaginas(lido.paginas);
    setPassado([]);
    setFuturo([]);
    setCarregada(true);
  }, [ler]);

  useEffect(() => {
    if (!dono) return;
    let cancelado = false;
    ler()
      .then((lido) => {
        if (cancelado || !lido) return;
        setPublicada(lido.navegacao);
        setRascunho(lido.navegacao);
        setPaginas(lido.paginas);
      })
      .finally(() => {
        if (!cancelado) setCarregada(true);
      });
    return () => {
      cancelado = true;
    };
  }, [dono, ler]);

  const aplicar = useCallback((proximo: RascunhoDaNavegacao, agrupar?: string) => {
    setRascunho((atual) => {
      if (!atual) return proximo;
      const agora = Date.now();
      const anterior = agrupado.current;
      const junta = agrupar && anterior && anterior.chave === agrupar && agora - anterior.em < 900;
      if (!junta) setPassado((p) => [...p.slice(-(LIMITE_DO_HISTORICO - 1)), atual]);
      agrupado.current = agrupar ? { chave: agrupar, em: agora } : null;
      setFuturo([]);
      return proximo;
    });
  }, []);

  const desfazer = useCallback(() => {
    setPassado((p) => {
      if (!p.length) return p;
      const anterior = p[p.length - 1];
      setRascunho((atual) => {
        if (atual) setFuturo((f) => [atual, ...f].slice(0, LIMITE_DO_HISTORICO));
        return anterior;
      });
      agrupado.current = null;
      return p.slice(0, -1);
    });
  }, []);

  const refazer = useCallback(() => {
    setFuturo((f) => {
      if (!f.length) return f;
      const proximo = f[0];
      setRascunho((atual) => {
        if (atual) setPassado((p) => [...p, atual].slice(-LIMITE_DO_HISTORICO));
        return proximo;
      });
      return f.slice(1);
    });
  }, []);

  const descartar = useCallback(() => {
    if (publicada) aplicar(publicada);
  }, [aplicar, publicada]);

  const sujo = useMemo(() => Boolean(rascunho && publicada && mudouANavegacao(rascunho, publicada)), [publicada, rascunho]);
  const paginasVisiveis = useMemo(() => paginas.filter((p) => p.visivel).map(({ id, titulo, slug }) => ({ id, titulo, slug })), [paginas]);

  return {
    carregada,
    publicada,
    rascunho,
    paginas,
    paginasVisiveis,
    sujo,
    aplicar,
    desfazer,
    refazer,
    descartar,
    recarregar,
    podeDesfazer: passado.length > 0,
    podeRefazer: futuro.length > 0,
  };
}

/* --------------------------------------------- as duas linhas da lista */

export function EntradasDaNavegacao({
  regiao,
  aoEscolher,
  rascunho,
}: {
  regiao: Regiao | null;
  aoEscolher: (regiao: Regiao) => void;
  rascunho: RascunhoDaNavegacao | null;
}) {
  const linha = (valor: Regiao, Icone: typeof PanelTop, titulo: string, detalhe: string) => {
    const escolhida = regiao === valor;
    return (
      <button
        type="button"
        onClick={() => aoEscolher(valor)}
        className={`flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left transition ${
          escolhida ? "bg-[var(--ks-brand-50)] ring-1 ring-[var(--ks-brand-200)]" : "hover:bg-[var(--ks-color-bg-hover)]"
        }`}
      >
        <span
          className="flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[10px] text-white"
          style={{ background: "linear-gradient(135deg,#7346e8,#5228bd)" }}
        >
          <Icone size={15} />
        </span>
        <span className="min-w-0 flex-1">
          <span className="block truncate text-[12.5px] font-bold text-[var(--ks-color-text-primary)]">{titulo}</span>
          <span className="block truncate text-[11px] text-[var(--ks-color-text-soft)]">{detalhe}</span>
        </span>
        <ChevronRight size={15} className="shrink-0 text-[var(--ks-n-300)]" />
      </button>
    );
  };
  const itens = rascunho?.menu?.itens.length || 0;
  const colunas = rascunho?.rodape?.colunas.length || 0;
  return (
    <div className="space-y-0.5 px-2 pb-1 pt-3">
      {linha(
        "cabecalho",
        PanelTop,
        "Cabeçalho e menu",
        rascunho?.menu ? `Menu próprio · ${itens} ${itens === 1 ? "item" : "itens"}` : "Menu com as categorias da loja"
      )}
      {linha(
        "rodape",
        PanelBottom,
        "Rodapé",
        rascunho?.rodape ? `Rodapé próprio · ${colunas} ${colunas === 1 ? "coluna" : "colunas"}` : "O rodapé de sempre do modelo"
      )}
    </div>
  );
}

/* ------------------------------------------------------ o item */

const ICONE_DO_TIPO: Record<TipoDoItem, typeof Home> = {
  inicio: Home,
  categoria: Tag,
  produto: Sparkles,
  pagina: FileText,
  url: Link2,
  grupo: Folder,
};

type Opcoes = {
  produtos: ProdutoDoEditor[];
  categorias: CategoriaDoEditor[];
  paginas: PaginaDoEditor[];
};

function rotuloAutomatico(item: ItemDoMenu, opcoes: Opcoes) {
  if (item.rotulo) return item.rotulo;
  if (item.tipo === "inicio") return "Início";
  if (item.tipo === "categoria") return opcoes.categorias.find((c) => c.id === item.categoria_id)?.name || "Escolha a categoria";
  if (item.tipo === "produto") return opcoes.produtos.find((p) => p.id === item.produto_id)?.name || "Escolha o produto";
  if (item.tipo === "pagina") return opcoes.paginas.find((p) => p.id === item.pagina_id)?.titulo || "Escolha a página";
  return "Sem nome";
}

function DestinoDoItem({ item, aoMudar, opcoes }: { item: ItemDoMenu; aoMudar: (item: ItemDoMenu) => void; opcoes: Opcoes }) {
  if (item.tipo === "categoria") {
    return (
      <Escolha
        valor={item.categoria_id}
        itens={opcoes.categorias}
        aoEscolher={(categoria) => aoMudar({ ...item, categoria_id: categoria.id, categoria_slug: categoria.slug })}
        textoDoItem={(categoria) => nomeDaCategoria(categoria, opcoes.categorias)}
        placeholder="Escolher a categoria ou subcategoria"
        vazio="Nenhuma categoria visível com esse nome."
      />
    );
  }
  if (item.tipo === "produto") {
    return (
      <Escolha
        valor={item.produto_id}
        itens={opcoes.produtos}
        aoEscolher={(produto) => aoMudar({ ...item, produto_id: produto.id })}
        textoDoItem={(produto) => produto.name}
        detalheDoItem={(produto) => emReais(produto.price)}
        fotoDoItem={(produto) => produto.image_url}
        placeholder="Escolher o produto"
        vazio="Nenhum produto na loja com esse nome."
      />
    );
  }
  if (item.tipo === "pagina") {
    const escolhida = opcoes.paginas.find((p) => p.id === item.pagina_id);
    return (
      <div className="space-y-1.5">
        <Escolha
          valor={item.pagina_id}
          itens={opcoes.paginas}
          aoEscolher={(pagina) => aoMudar({ ...item, pagina_id: pagina.id, pagina_slug: pagina.slug })}
          textoDoItem={(pagina) => pagina.titulo}
          detalheDoItem={(pagina) => `/pagina/${pagina.slug}${pagina.visivel ? "" : " · escondida"}`}
          placeholder="Escolher a página"
          vazio="A loja ainda não tem páginas extras. Crie em Páginas, no alto do editor."
        />
        {escolhida && !escolhida.visivel ? (
          <p className="text-[11.5px] font-semibold text-[var(--ks-color-status-warning,#b45309)]">
            Essa página está escondida: o link só aparece na loja quando ela for mostrada.
          </p>
        ) : null}
      </div>
    );
  }
  if (item.tipo === "url") {
    const problema = item.url ? problemaDoEndereco(item.url) : null;
    return (
      <div className="space-y-2">
        <Texto valor={item.url || ""} aoMudar={(url) => aoMudar({ ...item, url })} placeholder="https://... ou /minha-loja/c/canecas" max={500} rotulo="Endereço" />
        {problema ? <p className="text-[11.5px] font-semibold text-[var(--ks-color-status-danger)]">{problema}</p> : null}
      </div>
    );
  }
  return null;
}

function CartaoDoItem({
  item,
  arrasto,
  arrastando,
  aoSubir,
  aoDescer,
  aberto,
  aoAbrir,
  aoMudar,
  aoApagar,
  opcoes,
  comDestaque,
  permitirGrupo,
}: {
  item: ItemDoMenu;
  /* Na lista de cima, arrasta; dentro do grupo, sobe e desce nas setas. */
  arrasto?: DraggableProvided;
  arrastando?: boolean;
  aoSubir?: () => void;
  aoDescer?: () => void;
  aberto: boolean;
  aoAbrir: () => void;
  aoMudar: (item: ItemDoMenu) => void;
  aoApagar: () => void;
  opcoes: Opcoes;
  comDestaque: boolean;
  permitirGrupo: boolean;
}) {
  const Icone = ICONE_DO_TIPO[item.tipo];
  const tipos = (["categoria", "pagina", "produto", "url", "inicio", ...(permitirGrupo ? ["grupo"] : [])] as TipoDoItem[]);
  return (
        <li
          ref={arrasto?.innerRef}
          {...(arrasto?.draggableProps || {})}
          style={arrasto?.draggableProps.style}
          className={`rounded-xl border bg-[var(--ks-color-bg-elevated)] transition ${
            arrastando ? "border-[var(--ks-brand-300)] shadow-[var(--ks-shadow-overlay)]" : aberto ? "border-[var(--ks-brand-200)]" : "border-[var(--ks-color-border-subtle)]"
          }`}
        >
          <div className="flex items-center gap-1.5 py-1.5 pl-1 pr-1.5">
            {arrasto ? (
              <span {...arrasto.dragHandleProps} className="flex h-8 w-6 shrink-0 cursor-grab items-center justify-center text-[var(--ks-n-300)] active:cursor-grabbing" aria-label="Arrastar para mudar de lugar">
                <GripVertical size={15} />
              </span>
            ) : (
              <span className="flex shrink-0 flex-col">
                <button type="button" aria-label="Subir" onClick={aoSubir} disabled={!aoSubir} className="flex h-4 w-6 items-center justify-center text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-primary)] disabled:opacity-25">
                  <ArrowUp size={12} />
                </button>
                <button type="button" aria-label="Descer" onClick={aoDescer} disabled={!aoDescer} className="flex h-4 w-6 items-center justify-center text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-primary)] disabled:opacity-25">
                  <ArrowDown size={12} />
                </button>
              </span>
            )}
            <button type="button" onClick={aoAbrir} className="flex min-w-0 flex-1 items-center gap-2 text-left">
              <span className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${item.destaque ? "bg-[var(--ks-color-primary)] text-white" : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)]"}`}>
                <Icone size={14} />
              </span>
              <span className="min-w-0 flex-1">
                <span className="block truncate text-[12.5px] font-bold text-[var(--ks-color-text-primary)]">{rotuloAutomatico(item, opcoes)}</span>
                <span className="block truncate text-[10.5px] text-[var(--ks-color-text-soft)]">
                  {NOME_DO_TIPO[item.tipo]}
                  {item.tipo === "grupo" ? ` · ${(item.filhos || []).length} links` : ""}
                  {item.destaque ? " · destaque" : ""}
                </span>
              </span>
              <ChevronDown size={15} className={`shrink-0 text-[var(--ks-color-text-soft)] transition-transform ${aberto ? "rotate-180" : ""}`} />
            </button>
            <button
              type="button"
              onClick={aoApagar}
              aria-label="Tirar do menu"
              title="Tirar"
              className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[var(--ks-color-text-soft)] hover:bg-rose-50 hover:text-rose-600"
            >
              <Trash2 size={14} />
            </button>
          </div>
          {aberto ? (
            <div className="space-y-3 border-t border-[var(--ks-n-100)] px-3 pb-3 pt-3">
              <div className="flex flex-wrap gap-1.5" role="radiogroup" aria-label="Tipo do item">
                {tipos.map((tipo) => {
                  const Ic = ICONE_DO_TIPO[tipo];
                  const ativo = item.tipo === tipo;
                  return (
                    <button
                      key={tipo}
                      type="button"
                      role="radio"
                      aria-checked={ativo}
                      onClick={() => {
                        if (ativo) return;
                        const novo = itemNovo(tipo);
                        aoMudar({ ...novo, id: item.id, rotulo: tipo === "grupo" || tipo === "url" ? item.rotulo || novo.rotulo : item.rotulo, destaque: item.destaque });
                      }}
                      className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11.5px] font-semibold transition ${
                        ativo ? "bg-[var(--ks-color-primary)] text-white" : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)]"
                      }`}
                    >
                      <Ic size={12} /> {NOME_DO_TIPO[tipo]}
                    </button>
                  );
                })}
              </div>
              <DestinoDoItem item={item} aoMudar={aoMudar} opcoes={opcoes} />
              <div>
                <p className="mb-1.5 text-[11px] font-bold text-[var(--ks-color-text-secondary)]">
                  Nome no menu{item.tipo === "grupo" || item.tipo === "url" ? "" : " (vazio = o nome de lá)"}
                </p>
                <Texto valor={item.rotulo} aoMudar={(rotulo) => aoMudar({ ...item, rotulo })} placeholder={rotuloAutomatico({ ...item, rotulo: "" }, opcoes)} max={60} rotulo="Nome no menu" />
              </div>
              {item.tipo === "grupo" ? (
                <div className="rounded-xl bg-[var(--ks-color-bg-inset)] p-2">
                  <p className="px-1 pb-1.5 text-[11px] font-bold text-[var(--ks-color-text-secondary)]">Links que descem do grupo</p>
                  <ListaDeItens
                    arrastar={false}
                    idDaLista={`filhos-${item.id}`}
                    itens={item.filhos || []}
                    aoMudar={(filhos) => aoMudar({ ...item, filhos })}
                    opcoes={opcoes}
                    limite={LIMITE_DE_FILHOS_NO_GRUPO}
                    permitirGrupo={false}
                    comDestaque={false}
                    textoDoBotao="Pôr link no grupo"
                  />
                </div>
              ) : null}
              <div className="flex flex-wrap gap-x-4 gap-y-2">
                {comDestaque ? (
                  <label className="flex cursor-pointer items-center gap-2 text-[12px] text-[var(--ks-color-text-secondary)]">
                    <input type="checkbox" checked={item.destaque === true} onChange={(e) => aoMudar({ ...item, destaque: e.target.checked })} className="h-4 w-4 accent-[var(--ks-color-primary)]" />
                    Em destaque (pílula na cor da loja)
                  </label>
                ) : null}
                {item.tipo === "url" ? (
                  <label className="flex cursor-pointer items-center gap-2 text-[12px] text-[var(--ks-color-text-secondary)]">
                    <input type="checkbox" checked={item.nova_aba === true} onChange={(e) => aoMudar({ ...item, nova_aba: e.target.checked })} className="h-4 w-4 accent-[var(--ks-color-primary)]" />
                    Abrir em outra aba
                  </label>
                ) : null}
              </div>
            </div>
          ) : null}
        </li>
  );
}

function ListaDeItens({
  arrastar = true,
  idDaLista,
  itens,
  aoMudar,
  opcoes,
  limite,
  permitirGrupo,
  comDestaque,
  textoDoBotao,
}: {
  arrastar?: boolean;
  idDaLista: string;
  itens: ItemDoMenu[];
  aoMudar: (itens: ItemDoMenu[]) => void;
  opcoes: Opcoes;
  limite: number;
  permitirGrupo: boolean;
  comDestaque: boolean;
  textoDoBotao: string;
}) {
  const [aberto, setAberto] = useState<string | null>(null);
  const aoSoltar = (resultado: DropResult) => {
    if (!resultado.destination || resultado.destination.index === resultado.source.index) return;
    const lista = [...itens];
    const [movido] = lista.splice(resultado.source.index, 1);
    lista.splice(resultado.destination.index, 0, movido);
    aoMudar(lista);
  };
  const trocar = (de: number, para: number) => {
    const lista = [...itens];
    [lista[de], lista[para]] = [lista[para], lista[de]];
    aoMudar(lista);
  };
  const cartao = (item: ItemDoMenu, indice: number, arrasto?: DraggableProvided, arrastando?: boolean) => (
    <CartaoDoItem
      key={item.id}
      item={item}
      arrasto={arrasto}
      arrastando={arrastando}
      aoSubir={indice > 0 ? () => trocar(indice, indice - 1) : undefined}
      aoDescer={indice < itens.length - 1 ? () => trocar(indice, indice + 1) : undefined}
      aberto={aberto === item.id}
      aoAbrir={() => setAberto(aberto === item.id ? null : item.id)}
      aoMudar={(novo) => aoMudar(itens.map((i) => (i.id === item.id ? novo : i)))}
      aoApagar={() => aoMudar(itens.filter((i) => i.id !== item.id))}
      opcoes={opcoes}
      comDestaque={comDestaque}
      permitirGrupo={permitirGrupo}
    />
  );
  return (
    <div className="space-y-2">
      {arrastar ? (
        <DragDropContext onDragEnd={aoSoltar}>
          <Droppable droppableId={idDaLista}>
            {(fornecido) => (
              <ol ref={fornecido.innerRef} {...fornecido.droppableProps} className="space-y-1.5">
                {itens.map((item, indice) => (
                  <Draggable key={item.id} draggableId={item.id} index={indice}>
                    {(arrasto, estado) => cartao(item, indice, arrasto, estado.isDragging)}
                  </Draggable>
                ))}
                {fornecido.placeholder}
              </ol>
            )}
          </Droppable>
        </DragDropContext>
      ) : (
        <ol className="space-y-1.5">{itens.map((item, indice) => cartao(item, indice))}</ol>
      )}
      {itens.length < limite ? (
        <button
          type="button"
          onClick={() => {
            const novo = itemNovo("categoria");
            aoMudar([...itens, novo]);
            setAberto(novo.id);
          }}
          className="flex w-full items-center justify-center gap-1.5 rounded-xl border border-dashed border-[var(--ks-brand-300)] py-2 text-[12px] font-bold text-[var(--ks-color-primary)] transition hover:bg-[var(--ks-brand-50)]"
        >
          <Plus size={14} /> {textoDoBotao}
        </button>
      ) : (
        <p className="text-center text-[11.5px] text-[var(--ks-color-text-soft)]">Chegou ao limite de {limite}.</p>
      )}
    </div>
  );
}

/* ------------------------------------------------ painéis da direita */

function CabecaDoPainel({ titulo, texto, aoFechar, Icone }: { titulo: string; texto: string; aoFechar: () => void; Icone: typeof PanelTop }) {
  return (
    <div className="flex items-start gap-3 border-b border-[var(--ks-n-100)] px-5 py-4">
      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-white" style={{ background: "linear-gradient(135deg,#7346e8,#5228bd)", boxShadow: "var(--ks-shadow-brand)" }}>
        <Icone size={17} />
      </span>
      <div className="min-w-0 flex-1">
        <p className="text-[14px] font-extrabold text-[var(--ks-color-text-primary)]">{titulo}</p>
        <p className="mt-0.5 text-[11.5px] leading-[1.45] text-[var(--ks-color-text-soft)]">{texto}</p>
      </div>
      <button type="button" onClick={aoFechar} aria-label="Fechar" className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[var(--ks-color-text-soft)] hover:bg-[var(--ks-color-bg-hover)]">
        <X size={16} />
      </button>
    </div>
  );
}

export function AjustesDoCabecalho({
  rascunho,
  aoMudar,
  tema,
  produtos,
  categorias,
  paginas,
  aoFechar,
}: {
  rascunho: RascunhoDaNavegacao;
  aoMudar: (proximo: RascunhoDaNavegacao, agrupar?: string) => void;
  tema: Tema;
  produtos: ProdutoDoEditor[];
  categorias: CategoriaDoEditor[];
  paginas: PaginaDoEditor[];
  aoFechar: () => void;
}) {
  const c = rascunho.cabecalho;
  const opcoes = { produtos, categorias, paginas };
  const nomeDasCategorias = ehFamiliaVendor(tema) ? '"Categorias"' : tema === "vitrine" ? '"Todos os Produtos"' : '"Todas as Categorias"';
  return (
    <div className="flex h-full flex-col">
      <CabecaDoPainel Icone={PanelTop} titulo="Cabeçalho e menu" texto="Vale para todas as páginas da loja. Nada muda na loja até publicar." aoFechar={aoFechar} />
      <div className="min-h-0 flex-1 overflow-y-auto pb-6">
        <p className="px-5 pb-1 pt-4 text-[10.5px] font-bold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">Cabeçalho</p>
        <Chave
          rotulo="Mostrar a busca"
          dica="A caixa de busca do cabeçalho. A busca da barra de baixo do celular continua."
          ligada={c.mostrar_busca}
          aoMudar={(mostrar_busca) => aoMudar({ ...rascunho, cabecalho: { ...c, mostrar_busca } })}
        />
        <Chave
          rotulo="Cabeçalho fixo ao rolar"
          dica={ehFamiliaVendor(tema) ? "Desligado, o cabeçalho sobe com a página." : "No computador. Desligado, o cabeçalho sobe com a página."}
          ligada={c.fixo}
          aoMudar={(fixo) => aoMudar({ ...rascunho, cabecalho: { ...c, fixo } })}
        />
        <Ajuste rotulo="Tamanho da logo" dica="No computador. No celular a logo fica do tamanho de sempre.">
          <Segmentos<TamanhoDaLogo>
            rotulo="Tamanho da logo"
            valor={c.tamanho_da_logo}
            aoMudar={(tamanho_da_logo) => aoMudar({ ...rascunho, cabecalho: { ...c, tamanho_da_logo } })}
            opcoes={[
              { valor: "pequeno", rotulo: "Pequena" },
              { valor: "normal", rotulo: "Normal" },
              { valor: "grande", rotulo: "Grande" },
            ]}
          />
        </Ajuste>
        {JSON.stringify(c) !== JSON.stringify(CABECALHO_PADRAO) ? (
          <div className="px-5 pb-2">
            <button type="button" onClick={() => aoMudar({ ...rascunho, cabecalho: { ...CABECALHO_PADRAO } })} className="text-[11.5px] font-bold text-[var(--ks-color-primary)] hover:underline">
              Voltar o cabeçalho ao padrão
            </button>
          </div>
        ) : null}

        <p className="px-5 pb-1 pt-5 text-[10.5px] font-bold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">Menu</p>
        <Chave
          rotulo="Usar menu próprio"
          dica={rascunho.menu ? "Os itens abaixo tomam o lugar da lista de categorias na faixa do menu." : "Hoje o menu mostra as categorias da loja, sozinho."}
          ligada={Boolean(rascunho.menu)}
          aoMudar={(ligado) => aoMudar({ ...rascunho, menu: ligado ? rascunho.menu || { itens: [], mostrar_categorias: true } : null })}
        />
        {rascunho.menu ? (
          <>
            <Chave
              rotulo={`Manter ${nomeDasCategorias}`}
              dica="O atalho com todas as categorias continua no menu, antes dos seus itens (e na lista do celular)."
              ligada={rascunho.menu.mostrar_categorias}
              aoMudar={(mostrar_categorias) => aoMudar({ ...rascunho, menu: { ...rascunho.menu!, mostrar_categorias } })}
            />
            <div className="border-t border-[var(--ks-n-100)] px-4 py-4">
              <ListaDeItens
                idDaLista="menu-da-loja"
                itens={rascunho.menu.itens}
                aoMudar={(itens) => aoMudar({ ...rascunho, menu: { ...rascunho.menu!, itens } }, "menu")}
                opcoes={opcoes}
                limite={LIMITE_DE_ITENS_NO_MENU}
                permitirGrupo
                comDestaque
                textoDoBotao="Pôr item no menu"
              />
              <p className="mt-3 text-[11.5px] leading-[1.45] text-[var(--ks-color-text-soft)]">
                Arraste para mudar a ordem. Um grupo vira uma lista que desce ao passar o mouse; no celular, abre no toque.
              </p>
            </div>
          </>
        ) : null}
      </div>
    </div>
  );
}

export function AjustesDoRodape({
  rascunho,
  aoMudar,
  tema,
  produtos,
  categorias,
  paginas,
  aoFechar,
}: {
  rascunho: RascunhoDaNavegacao;
  aoMudar: (proximo: RascunhoDaNavegacao, agrupar?: string) => void;
  tema: Tema;
  produtos: ProdutoDoEditor[];
  categorias: CategoriaDoEditor[];
  paginas: PaginaDoEditor[];
  aoFechar: () => void;
}) {
  const r = rascunho.rodape;
  const opcoes = { produtos, categorias, paginas };
  const mudar = (parte: Partial<NonNullable<typeof r>>, agrupar?: string) => aoMudar({ ...rascunho, rodape: { ...(r || RODAPE_PADRAO), ...parte } }, agrupar);
  return (
    <div className="flex h-full flex-col">
      <CabecaDoPainel Icone={PanelBottom} titulo="Rodapé" texto="Vale para todas as páginas da loja. Nada muda na loja até publicar." aoFechar={aoFechar} />
      <div className="min-h-0 flex-1 overflow-y-auto pb-6">
        <Chave
          rotulo="Usar rodapé próprio"
          dica={r ? "Colunas de links, o texto sobre a loja e os blocos que ficam." : "Hoje a loja usa o rodapé de sempre do modelo."}
          ligada={Boolean(r)}
          aoMudar={(ligado) => aoMudar({ ...rascunho, rodape: ligado ? r || { ...RODAPE_PADRAO, colunas: [colunaNova()] } : null })}
        />
        {r ? (
          <>
            <Ajuste rotulo="Sobre a loja" dica={`Até ${LIMITE_DO_SOBRE} letras. Linha em branco separa parágrafos.`}>
              <textarea
                value={r.sobre}
                onChange={(e) => mudar({ sobre: e.target.value.slice(0, LIMITE_DO_SOBRE) }, "sobre")}
                rows={4}
                placeholder="Conte em poucas linhas quem é a loja."
                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] text-[var(--ks-color-text-primary)] outline-none transition placeholder:text-[var(--ks-color-text-soft)] focus:border-[var(--ks-color-primary)] focus:shadow-[var(--ks-focus-ring)]"
              />
            </Ajuste>

            <div className="border-t border-[var(--ks-n-100)] px-4 py-4">
              <p className="mb-2.5 px-1 text-[12px] font-bold text-[var(--ks-color-text-primary)]">Colunas de links</p>
              <div className="space-y-3">
                {r.colunas.map((coluna, indice) => (
                  <div key={coluna.id} className="rounded-2xl border border-[var(--ks-color-border-subtle)] p-3">
                    <div className="mb-2 flex items-center gap-2">
                      <Columns3 size={14} className="shrink-0 text-[var(--ks-color-text-soft)]" />
                      <div className="min-w-0 flex-1">
                        <Texto
                          valor={coluna.titulo}
                          aoMudar={(titulo) => mudar({ colunas: r.colunas.map((c) => (c.id === coluna.id ? { ...c, titulo } : c)) }, `coluna-${coluna.id}`)}
                          placeholder="Título da coluna"
                          max={60}
                          rotulo="Título da coluna"
                        />
                      </div>
                      <button
                        type="button"
                        aria-label="Subir a coluna"
                        disabled={indice === 0}
                        onClick={() => {
                          const lista = [...r.colunas];
                          [lista[indice - 1], lista[indice]] = [lista[indice], lista[indice - 1]];
                          mudar({ colunas: lista });
                        }}
                        className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-primary)] disabled:opacity-30"
                      >
                        <ChevronDown size={15} className="rotate-180" />
                      </button>
                      <button
                        type="button"
                        aria-label="Tirar a coluna"
                        onClick={() => mudar({ colunas: r.colunas.filter((c) => c.id !== coluna.id) })}
                        className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[var(--ks-color-text-soft)] hover:bg-rose-50 hover:text-rose-600"
                      >
                        <Trash2 size={14} />
                      </button>
                    </div>
                    <ListaDeItens
                      idDaLista={`coluna-${coluna.id}`}
                      itens={coluna.links}
                      aoMudar={(links) => mudar({ colunas: r.colunas.map((c) => (c.id === coluna.id ? { ...c, links } : c)) }, `links-${coluna.id}`)}
                      opcoes={opcoes}
                      limite={LIMITE_DE_LINKS_NA_COLUNA}
                      permitirGrupo={false}
                      comDestaque={false}
                      textoDoBotao="Pôr link na coluna"
                    />
                  </div>
                ))}
              </div>
              {r.colunas.length < LIMITE_DE_COLUNAS_NO_RODAPE ? (
                <button
                  type="button"
                  onClick={() => mudar({ colunas: [...r.colunas, colunaNova()] })}
                  className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-xl bg-[var(--ks-brand-50)] py-2.5 text-[12px] font-bold text-[var(--ks-color-primary)] transition hover:bg-[var(--ks-brand-100,#ede9fe)]"
                >
                  <Plus size={14} /> Nova coluna
                </button>
              ) : null}
            </div>

            <p className="px-5 pb-1 pt-3 text-[10.5px] font-bold uppercase tracking-[0.14em] text-[var(--ks-color-text-soft)]">Blocos da loja</p>
            <Chave rotulo="Contato" dica="WhatsApp, telefone, e-mail e endereço do cadastro da loja." ligada={r.mostrar_contato} aoMudar={(mostrar_contato) => mudar({ mostrar_contato })} />
            <Chave rotulo="Redes sociais" dica="As redes do cadastro da loja." ligada={r.mostrar_redes} aoMudar={(mostrar_redes) => mudar({ mostrar_redes })} />
            {ehFamiliaVendor(tema) ? (
              <Chave rotulo="Formas de pagamento" dica="Pix, cartão e boleto." ligada={r.mostrar_pagamento} aoMudar={(mostrar_pagamento) => mudar({ mostrar_pagamento })} />
            ) : null}
            {tema !== "default" ? (
              <Chave rotulo="Categorias" dica="As cinco primeiras categorias da loja." ligada={r.mostrar_categorias} aoMudar={(mostrar_categorias) => mudar({ mostrar_categorias })} />
            ) : null}
          </>
        ) : null}
      </div>
    </div>
  );
}

/** O botão "Ver página" das páginas extras. */
export function LinkDaPagina({ endereco, children }: { endereco: string; children: ReactNode }) {
  return (
    <a href={endereco} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-[12px] font-bold text-[var(--ks-color-primary)] hover:underline">
      <ExternalLink size={13} /> {children}
    </a>
  );
}