"use client";

import { useCallback, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { DESENHOS, NOMES_DOS_DESENHOS, CORES_DA_SECAO, ROTULO_DO_NIVEL } from "@/lib/help";
import type { Artigo, Secao, Trilha } from "@/lib/help";

/**
 * O painel do centro de aprendizado.
 *
 * Quatro vistas numa tela só: artigos, seções, trilhas e as buscas que não
 * acharam nada. Elas dividem o mesmo trilho e o mesmo placar, então separar em
 * quatro rotas custaria três recarregamentos para trocar de assunto.
 */

type ArtigoNaLista = Artigo & {
  leituras_30d?: number;
  respostas?: number;
  resolveu?: number | null;
};

type SecaoNaLista = Secao & { artigos?: number; artigos_no_ar?: number };

type TrilhaNaLista = Trilha & { steps?: Array<{ article_id: string; position: number }> };

type Resumo = {
  no_ar: number;
  rascunhos: number;
  revisar: number;
  secoes: number;
  leituras: number;
  respostas: number;
  resolveu: number | null;
  buscas_sem_resposta: number;
  termos_sem_resposta: number;
};

type TermoSemResposta = { normalizado: string; termo: string; vezes: number; ultima: string };

type Vista = "artigos" | "secoes" | "trilhas" | "buscas";
type Filtro = "todos" | "no_ar" | "rascunhos" | "revisar";

function Desenho({ nome, tamanho = 20 }: { nome: string; tamanho?: number }) {
  const caminho = DESENHOS[nome] ?? DESENHOS.livro;
  return (
    <svg width={tamanho} height={tamanho} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d={caminho} stroke="currentColor" strokeWidth="1.9" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}

const MESES = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];

/* "10 set 26", e não o "10 de set. de 2026" do formatador: a coluna é estreita
   e o formato longo quebra em três linhas dentro dela. */
function quandoPorExtenso(valor: string | null) {
  if (!valor) return "—";
  const data = new Date(valor);
  if (Number.isNaN(data.getTime())) return "—";
  return `${String(data.getDate()).padStart(2, "0")} ${MESES[data.getMonth()]} ${String(data.getFullYear()).slice(2)}`;
}

export default function AprenderClient({
  secoesIniciais,
  artigosIniciais,
  trilhasIniciais,
  resumoInicial,
  semRespostaInicial,
  base,
}: {
  secoesIniciais: SecaoNaLista[];
  artigosIniciais: ArtigoNaLista[];
  trilhasIniciais: TrilhaNaLista[];
  resumoInicial: Resumo;
  semRespostaInicial: TermoSemResposta[];
  base: string;
}) {
  const router = useRouter();

  const [vista, setVista] = useState<Vista>("artigos");
  const [filtro, setFiltro] = useState<Filtro>("todos");
  const [busca, setBusca] = useState("");
  const [secaoEscolhida, setSecaoEscolhida] = useState("");

  const [secoes, setSecoes] = useState<SecaoNaLista[]>(secoesIniciais);
  const [artigos, setArtigos] = useState<ArtigoNaLista[]>(artigosIniciais);
  const [trilhas, setTrilhas] = useState<TrilhaNaLista[]>(trilhasIniciais);
  const [resumo, setResumo] = useState<Resumo>(resumoInicial);
  const [semResposta, setSemResposta] = useState<TermoSemResposta[]>(semRespostaInicial);

  const [gaveta, setGaveta] = useState<null | { tipo: "secao" | "trilha"; id: string | null }>(null);
  const [erro, setErro] = useState("");

  const recarregar = useCallback(async () => {
    const [s, a, m, t] = await Promise.all([
      fetch("/api/help/sections").then((r) => r.json()).catch(() => null),
      fetch("/api/help/articles").then((r) => r.json()).catch(() => null),
      fetch("/api/help/metricas").then((r) => r.json()).catch(() => null),
      fetch("/api/help/paths").then((r) => r.json()).catch(() => null),
    ]);
    if (s?.sections) setSecoes(s.sections);
    if (a?.articles) setArtigos(a.articles);
    if (t?.paths) setTrilhas(t.paths);
    if (m?.resumo) {
      setResumo(m.resumo);
      setSemResposta(m.sem_resposta ?? []);
    }
  }, []);

  const porSecao = useMemo(() => {
    const mapa = new Map<string, SecaoNaLista>();
    for (const s of secoes) mapa.set(s.id, s);
    return mapa;
  }, [secoes]);

  const visiveis = useMemo(() => {
    const termo = busca.trim().toLowerCase();
    return artigos.filter((a) => {
      if (secaoEscolhida && a.section_id !== secaoEscolhida) return false;
      if (filtro === "no_ar" && a.status !== "published") return false;
      if (filtro === "rascunhos" && a.status !== "draft") return false;
      if (filtro === "revisar" && !a.needs_review) return false;
      if (!termo) return true;
      return (
        a.title.toLowerCase().includes(termo) ||
        a.slug.includes(termo) ||
        (a.keywords ?? []).some((k) => k.includes(termo))
      );
    });
  }, [artigos, busca, filtro, secaoEscolhida]);

  const contagem = useMemo(
    () => ({
      todos: artigos.length,
      no_ar: artigos.filter((a) => a.status === "published").length,
      rascunhos: artigos.filter((a) => a.status === "draft").length,
      revisar: artigos.filter((a) => a.needs_review).length,
    }),
    [artigos]
  );

  /* Escrever um artigo a partir de uma busca vazia: o título já nasce com o
     termo que a pessoa procurou, e a palavra-chave também. É o atalho que faz
     a lista de buscas virar pauta em vez de relatório. */
  const escreverSobre = useCallback(
    (termo: string) => {
      const alvo = secoes[0]?.id;
      if (!alvo) {
        setErro("Crie uma seção antes de escrever o primeiro artigo.");
        setVista("secoes");
        return;
      }
      const titulo = termo.charAt(0).toUpperCase() + termo.slice(1);
      router.push(`/aprender/novo?secao=${alvo}&titulo=${encodeURIComponent(titulo)}&termo=${encodeURIComponent(termo)}`);
    },
    [router, secoes]
  );

  return (
    <div className="hp">
      <div className="hp-quadro">
        {/* =============================================== TRILHO */}
        <aside className="hp-rail hp-grao">
          <div className="hp-rail-marca">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/brand-logo.svg" alt="Ktalogu" style={{ height: 19, width: "auto", filter: "brightness(0) invert(1)" }} />
            <span className="hp-selo">Aprender</span>
          </div>

          <div className="hp-grupo">
            <span className="hp-chapa">Centro de aprendizado</span>
            {(
              [
                ["artigos", "Artigos", contagem.todos],
                ["secoes", "Seções", secoes.length],
                ["trilhas", "Trilhas", trilhas.length],
                ["buscas", "Buscas sem resposta", resumo.termos_sem_resposta],
              ] as Array<[Vista, string, number]>
            ).map(([chave, rotulo, n]) => (
              <button
                key={chave}
                type="button"
                className="hp-item"
                data-ativo={vista === chave ? "1" : "0"}
                onClick={() => setVista(chave)}
              >
                <Desenho nome={chave === "artigos" ? "livro" : chave === "secoes" ? "producao" : chave === "trilhas" ? "relatorio" : "orcamento"} tamanho={17} />
                {rotulo}
                <span className="hp-n">{n}</span>
              </button>
            ))}
          </div>

          {secoes.length > 0 ? (
            <div className="hp-grupo">
              <span className="hp-chapa">Seções</span>
              <button
                type="button"
                className="hp-item"
                data-ativo={secaoEscolhida === "" ? "1" : "0"}
                onClick={() => {
                  setSecaoEscolhida("");
                  setVista("artigos");
                }}
              >
                Todas
                <span className="hp-n">{artigos.length}</span>
              </button>
              {secoes.map((s) => (
                <button
                  key={s.id}
                  type="button"
                  className="hp-item"
                  data-ativo={secaoEscolhida === s.id ? "1" : "0"}
                  onClick={() => {
                    setSecaoEscolhida(s.id);
                    setVista("artigos");
                  }}
                >
                  <span style={{ color: s.color }}><Desenho nome={s.icon} tamanho={16} /></span>
                  {s.title}
                  <span className="hp-n">{s.artigos ?? artigos.filter((a) => a.section_id === s.id).length}</span>
                </button>
              ))}
            </div>
          ) : null}

          {resumo.termos_sem_resposta > 0 ? (
            <div className="hp-alerta">
              <span className="hp-chapa">Buscas sem resposta</span>
              <b>{resumo.buscas_sem_resposta}</b>
              <p>Gente procurou e não achou nada nos últimos 30 dias.</p>
              <button type="button" onClick={() => setVista("buscas")}>Ver o que faltou →</button>
            </div>
          ) : null}
        </aside>

        {/* ============================================== BANCADA */}
        <main className="hp-bancada">
          <div className="hp-cab">
            <div>
              <span className="hp-chapa">help.ktalogu.com.br</span>
              <h1>
                {vista === "artigos" ? "Artigos" : vista === "secoes" ? "Seções" : vista === "trilhas" ? "Trilhas" : "Buscas sem resposta"}
              </h1>
              <p>
                {vista === "artigos"
                  ? "O que está no ar no centro de aprendizado, e o que ainda é rascunho."
                  : vista === "secoes"
                  ? "Uma seção por módulo do sistema, com o mesmo nome do menu."
                  : vista === "trilhas"
                  ? "Sequências prontas de artigos, para quem não sabe por onde começar."
                  : "Cada linha é alguém que procurou e viu tela vazia."}
              </p>
            </div>
            <div className="hp-fim">
              {vista === "artigos" ? (
                <span className="hp-campo" style={{ width: 250 }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none">
                    <circle cx="10.5" cy="10.5" r="6.6" stroke="#8b85a8" strokeWidth="2.1" />
                    <path d="M15.6 15.6 21 21" stroke="#8b85a8" strokeWidth="2.1" strokeLinecap="round" />
                  </svg>
                  <input value={busca} onChange={(e) => setBusca(e.target.value)} placeholder="Buscar artigo" />
                </span>
              ) : null}

              {vista === "artigos" ? (
                <Link className="hp-btn hp-btn-marca" href={secaoEscolhida ? `/aprender/novo?secao=${secaoEscolhida}` : "/aprender/novo"}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" /></svg>
                  Novo artigo
                </Link>
              ) : null}
              {vista === "secoes" ? (
                <button type="button" className="hp-btn hp-btn-marca" onClick={() => setGaveta({ tipo: "secao", id: null })}>
                  Nova seção
                </button>
              ) : null}
              {vista === "trilhas" ? (
                <button type="button" className="hp-btn hp-btn-marca" onClick={() => setGaveta({ tipo: "trilha", id: null })}>
                  Nova trilha
                </button>
              ) : null}
            </div>
          </div>

          <div className="hp-placar">
              <div><span className="hp-chapa">No ar</span><b>{resumo.no_ar}</b><span>em {resumo.secoes} seções</span></div>
              <div><span className="hp-chapa">Rascunhos</span><b>{resumo.rascunhos}</b><span>{resumo.revisar} para revisar</span></div>
              <div><span className="hp-chapa">Leituras · 30 d</span><b>{resumo.leituras.toLocaleString("pt-BR")}</b><span>no centro inteiro</span></div>
              <div>
                <span className="hp-chapa">Resolveu?</span>
                <b>{resumo.resolveu === null ? "—" : `${resumo.resolveu}%`}</b>
                <span>{resumo.respostas} resposta(s)</span>
              </div>
              <div className="hp-quente">
                <span className="hp-chapa">Buscas sem resposta</span>
                <b>{resumo.buscas_sem_resposta}</b>
                <span>vira pauta de artigo</span>
              </div>
          </div>

          {erro ? <div className="hp-aviso-erro">{erro}</div> : null}

          {/* ------------------------------------------- artigos */}
          {vista === "artigos" ? (
            <>
              <nav className="hp-abas">
                {(
                  [
                    ["todos", "Todos", contagem.todos],
                    ["no_ar", "No ar", contagem.no_ar],
                    ["rascunhos", "Rascunhos", contagem.rascunhos],
                    ["revisar", "Precisa revisar", contagem.revisar],
                  ] as Array<[Filtro, string, number]>
                ).map(([chave, rotulo, n]) => (
                  <button key={chave} type="button" className="hp-aba" data-ativo={filtro === chave ? "1" : "0"} onClick={() => setFiltro(chave)}>
                    {rotulo}
                    <span className="hp-n">{n}</span>
                  </button>
                ))}
              </nav>

              {visiveis.length === 0 ? (
                <div className="hp-vazio">
                  <b>Nada por aqui ainda</b>
                  <p>{secoes.length === 0 ? "Crie a primeira seção e depois o primeiro artigo." : "Escreva o primeiro artigo desta seção."}</p>
                </div>
              ) : (
                <div className="hp-lista">
                  <div className="hp-lista-cab">
                    <span>Artigo</span><span>Seção</span><span>Estado</span><span>Leituras 30d</span><span>Resolveu?</span><span></span>
                  </div>
                  {visiveis.map((a) => {
                    const secao = porSecao.get(a.section_id);
                    return (
                      <Link key={a.id} className="hp-linha" href={`/aprender/${a.id}`}>
                        <div>
                          <h3>{a.title}</h3>
                          <span className="hp-end">/{secao?.slug ?? "?"}/{a.slug}</span>
                        </div>
                        <span className="hp-chip"><i style={{ background: secao?.color ?? "#8b85a8" }} />{secao?.title ?? "Sem seção"}</span>
                        <span className={`hp-estado ${a.needs_review ? "hp-revisar" : a.status === "published" ? "hp-no-ar" : "hp-rascunho"}`}>
                          {a.needs_review ? "Precisa revisar" : a.status === "published" ? "No ar" : "Rascunho"}
                        </span>
                        <span className="hp-leituras">{a.leituras_30d ? a.leituras_30d.toLocaleString("pt-BR") : "—"}</span>
                        <span className="hp-util" data-ruim={a.resolveu !== null && a.resolveu !== undefined && a.resolveu < 70 ? "1" : "0"}>
                          <span className="hp-trilho">{a.resolveu !== null && a.resolveu !== undefined ? <i style={{ width: `${a.resolveu}%` }} /> : null}</span>
                          <span>{a.resolveu === null || a.resolveu === undefined ? "—" : `${a.resolveu}%`}</span>
                        </span>
                        <span className="hp-chapa" style={{ color: "var(--tinta-3)", justifySelf: "end" }}>{quandoPorExtenso(a.updated_at)}</span>
                      </Link>
                    );
                  })}
                </div>
              )}
            </>
          ) : null}

          {/* -------------------------------------------- seções */}
          {vista === "secoes" ? (
            secoes.length === 0 ? (
              <div className="hp-vazio">
                <b>Nenhuma seção ainda</b>
                <p>A seção é o módulo. Comece por uma com o mesmo nome de uma tela do sistema.</p>
              </div>
            ) : (
              <div className="hp-cartoes">
                {secoes.map((s) => (
                  <button key={s.id} type="button" className="hp-cartao" onClick={() => setGaveta({ tipo: "secao", id: s.id })}>
                    <span className="hp-marca" style={{ background: `linear-gradient(135deg, ${s.color}, ${s.color}bb)` }}>
                      <Desenho nome={s.icon} />
                    </span>
                    <h3>{s.title}</h3>
                    <p>{s.description || "Sem descrição."}</p>
                    <span className="hp-pe">
                      <span className="hp-chapa">{s.artigos ?? 0} artigo(s) · {s.artigos_no_ar ?? 0} no ar</span>
                      <span className="hp-chapa" style={{ color: s.active ? "var(--esmeralda)" : "var(--tinta-3)" }}>
                        {s.active ? "visível" : "escondida"}
                      </span>
                    </span>
                  </button>
                ))}
              </div>
            )
          ) : null}

          {/* ------------------------------------------- trilhas */}
          {vista === "trilhas" ? (
            trilhas.length === 0 ? (
              <div className="hp-vazio">
                <b>Nenhuma trilha ainda</b>
                <p>A trilha responde &ldquo;por onde eu começo&rdquo;. Uma boa primeira é os sete primeiros dias.</p>
              </div>
            ) : (
              <div className="hp-cartoes">
                {trilhas.map((t) => (
                  <button key={t.id} type="button" className="hp-cartao" onClick={() => setGaveta({ tipo: "trilha", id: t.id })}>
                    <span className="hp-marca" style={{ background: "linear-gradient(135deg, #5f31d6, #15c5c5)" }}>
                      <Desenho nome="relatorio" />
                    </span>
                    <h3>{t.title}</h3>
                    <p>{t.description || "Sem descrição."}</p>
                    <span className="hp-pe">
                      <span className="hp-chapa">{t.steps?.length ?? 0} passo(s)</span>
                      <span className="hp-chapa hp-mono">/{t.slug}</span>
                    </span>
                  </button>
                ))}
              </div>
            )
          ) : null}

          {/* -------------------------------------------- buscas */}
          {vista === "buscas" ? (
            semResposta.length === 0 ? (
              <div className="hp-vazio">
                <b>Ninguém saiu de mãos vazias</b>
                <p>Toda busca dos últimos 30 dias encontrou alguma coisa.</p>
              </div>
            ) : (
              <div className="hp-lista">
                <div className="hp-lista-cab" style={{ gridTemplateColumns: "minmax(0,1fr) 90px 150px" }}>
                  <span>O que procuraram</span><span>Vezes</span><span></span>
                </div>
                {semResposta.map((t) => (
                  <div key={t.normalizado} className="hp-termo">
                    <b>{t.termo}</b>
                    <span className="hp-qtd">{t.vezes} ×</span>
                    <button type="button" onClick={() => escreverSobre(t.termo)}>Escrever artigo</button>
                  </div>
                ))}
              </div>
            )
          ) : null}
        </main>
      </div>

      {gaveta ? (
        <GavetaDeEdicao
          alvo={gaveta}
          secoes={secoes}
          trilhas={trilhas}
          artigos={artigos}
          base={base}
          aoFechar={() => setGaveta(null)}
          aoSalvar={async () => {
            setGaveta(null);
            await recarregar();
          }}
        />
      ) : null}
    </div>
  );
}

/* ============================================================
   A gaveta: cadastro de seção e de trilha.
   Painel lateral em vez de página nova porque a pessoa está
   olhando a lista e volta para ela em seguida.
   ============================================================ */

function GavetaDeEdicao({
  alvo,
  secoes,
  trilhas,
  artigos,
  base,
  aoFechar,
  aoSalvar,
}: {
  alvo: { tipo: "secao" | "trilha"; id: string | null };
  secoes: SecaoNaLista[];
  trilhas: TrilhaNaLista[];
  artigos: ArtigoNaLista[];
  base: string;
  aoFechar: () => void;
  aoSalvar: () => void | Promise<void>;
}) {
  const atualSecao = alvo.tipo === "secao" ? secoes.find((s) => s.id === alvo.id) : undefined;
  const atualTrilha = alvo.tipo === "trilha" ? trilhas.find((t) => t.id === alvo.id) : undefined;

  const [title, setTitle] = useState(atualSecao?.title ?? atualTrilha?.title ?? "");
  const [slug, setSlug] = useState(atualSecao?.slug ?? atualTrilha?.slug ?? "");
  const [description, setDescription] = useState(atualSecao?.description ?? atualTrilha?.description ?? "");
  const [icon, setIcon] = useState(atualSecao?.icon ?? "livro");
  const [color, setColor] = useState(atualSecao?.color ?? CORES_DA_SECAO[0]);
  const [active, setActive] = useState(atualSecao?.active ?? atualTrilha?.active ?? true);
  const [passos, setPassos] = useState<string[]>(
    (atualTrilha?.steps ?? []).slice().sort((a, b) => a.position - b.position).map((p) => p.article_id)
  );
  const [salvando, setSalvando] = useState(false);
  const [erro, setErro] = useState("");

  const rota = alvo.tipo === "secao" ? "/api/help/sections" : "/api/help/paths";

  async function salvar() {
    if (!title.trim()) {
      setErro("Precisa de um nome.");
      return;
    }
    setSalvando(true);
    setErro("");
    try {
      const corpo: Record<string, unknown> = {
        title: title.trim(),
        slug: slug.trim() || title.trim(),
        description: description.trim(),
        active,
      };
      if (alvo.tipo === "secao") {
        corpo.icon = icon;
        corpo.color = color;
      } else {
        corpo.steps = passos;
      }
      if (alvo.id) corpo.id = alvo.id;

      const resposta = await fetch(rota, {
        method: alvo.id ? "PATCH" : "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(corpo),
      });
      const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null;
      if (!resposta.ok) throw new Error(retorno?.error || "Não foi possível salvar.");
      await aoSalvar();
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Não foi possível salvar.");
    } finally {
      setSalvando(false);
    }
  }

  async function apagar() {
    if (!alvo.id) return;
    setSalvando(true);
    setErro("");
    try {
      const resposta = await fetch(`${rota}?id=${alvo.id}`, { method: "DELETE" });
      const retorno = (await resposta.json().catch(() => null)) as { error?: string } | null;
      if (!resposta.ok) throw new Error(retorno?.error || "Não foi possível apagar.");
      await aoSalvar();
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Não foi possível apagar.");
      setSalvando(false);
    }
  }

  return (
    <div className="hp-fundo" role="presentation" onClick={aoFechar}>
      <div className="hp-gaveta" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
        <span className="hp-chapa" style={{ color: "var(--roxo)" }}>
          {alvo.id ? "Editar" : "Nova"} {alvo.tipo === "secao" ? "seção" : "trilha"}
        </span>
        <h2>{title || (alvo.tipo === "secao" ? "Sem nome" : "Sem nome")}</h2>

        <label className="hp-rot" htmlFor="hp-nome">Nome</label>
        <input id="hp-nome" className="hp-cx" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Ex.: PDV" />

        <label className="hp-rot" htmlFor="hp-slug">Endereço</label>
        <input id="hp-slug" className="hp-cx hp-mono" value={slug} onChange={(e) => setSlug(e.target.value)} placeholder="pdv" />
        <p style={{ margin: "6px 0 0", fontSize: 11.5, color: "var(--tinta-3)" }}>
          <span className="hp-mono">{base}/{slug || "endereco"}</span>
        </p>

        <label className="hp-rot" htmlFor="hp-desc">Descrição</label>
        <textarea id="hp-desc" className="hp-cx" rows={3} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Uma linha explicando o que essa parte cobre." />

        {alvo.tipo === "secao" ? (
          <>
            <span className="hp-rot">Desenho</span>
            <div className="hp-escolhas">
              {NOMES_DOS_DESENHOS.map((n) => (
                <button
                  key={n}
                  type="button"
                  className="hp-escolha"
                  data-ativo={icon === n ? "1" : "0"}
                  style={{ color: icon === n ? "#fff" : "var(--tinta-2)", background: icon === n ? color : undefined }}
                  onClick={() => setIcon(n)}
                  aria-label={n}
                >
                  <Desenho nome={n} tamanho={18} />
                </button>
              ))}
            </div>

            <span className="hp-rot">Cor</span>
            <div className="hp-escolhas">
              {CORES_DA_SECAO.map((c) => (
                <button
                  key={c}
                  type="button"
                  className="hp-cor"
                  data-ativo={color === c ? "1" : "0"}
                  style={{ background: c }}
                  onClick={() => setColor(c)}
                  aria-label={`cor ${c}`}
                />
              ))}
            </div>
          </>
        ) : (
          <>
            <span className="hp-rot">Passos da trilha</span>
            <p style={{ margin: "0 0 8px", fontSize: 12, color: "var(--tinta-3)", lineHeight: 1.5 }}>
              Marque os artigos, na ordem em que a pessoa deve ler. A trilha atravessa seções de propósito.
            </p>
            <div style={{ maxHeight: 280, overflowY: "auto", borderRadius: 11, boxShadow: "inset 0 0 0 1px var(--filete)", padding: 6 }}>
              {artigos.length === 0 ? (
                <p style={{ margin: 0, padding: 14, fontSize: 13, color: "var(--tinta-3)", textAlign: "center" }}>Nenhum artigo ainda.</p>
              ) : (
                artigos.map((a) => {
                  const posicao = passos.indexOf(a.id);
                  return (
                    <button
                      key={a.id}
                      type="button"
                      onClick={() => setPassos((antes) => (posicao >= 0 ? antes.filter((x) => x !== a.id) : [...antes, a.id]))}
                      style={{
                        display: "flex", alignItems: "center", gap: 10, width: "100%",
                        padding: "8px 9px", border: 0, borderRadius: 9, cursor: "pointer",
                        background: posicao >= 0 ? "rgba(95,49,214,.08)" : "transparent",
                        fontFamily: "inherit", fontSize: 13.5, textAlign: "left", color: "var(--tinta)",
                      }}
                    >
                      <span
                        style={{
                          width: 22, height: 22, borderRadius: 7, flex: "none",
                          display: "grid", placeItems: "center",
                          fontFamily: "var(--fonte-mono)", fontSize: 10.5, fontWeight: 700,
                          background: posicao >= 0 ? "var(--roxo)" : "var(--papel-3)",
                          color: posicao >= 0 ? "#fff" : "var(--tinta-3)",
                        }}
                      >
                        {posicao >= 0 ? posicao + 1 : ""}
                      </span>
                      {a.title}
                    </button>
                  );
                })
              )}
            </div>
          </>
        )}

        <label style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 18, cursor: "pointer" }}>
          <input type="checkbox" checked={active} onChange={(e) => setActive(e.target.checked)} />
          <span style={{ fontSize: 13.5, fontWeight: 700, color: "var(--tinta-2)" }}>
            Aparece no centro de aprendizado
          </span>
        </label>

        {erro ? <div className="hp-aviso-erro">{erro}</div> : null}

        <div style={{ display: "flex", gap: 9, marginTop: 22 }}>
          <button type="button" className="hp-btn hp-btn-marca" style={{ flex: 1 }} onClick={() => void salvar()} disabled={salvando}>
            {salvando ? "Salvando…" : "Salvar"}
          </button>
          <button type="button" className="hp-btn hp-btn-papel" onClick={aoFechar} disabled={salvando}>Cancelar</button>
        </div>

        {alvo.id ? (
          <button
            type="button"
            onClick={() => void apagar()}
            disabled={salvando}
            style={{ marginTop: 14, border: 0, background: "none", cursor: "pointer", fontFamily: "inherit", fontSize: 12.5, fontWeight: 700, color: "var(--rosa)" }}
          >
            Apagar {alvo.tipo === "secao" ? "seção" : "trilha"}
          </button>
        ) : null}

        <p style={{ margin: "22px 0 0", fontSize: 11, color: "var(--tinta-3)", lineHeight: 1.5 }}>
          Nível dos artigos: {Object.values(ROTULO_DO_NIVEL).join(" · ")}.
        </p>
      </div>
    </div>
  );
}