const { Card, Button, Icon, IconButton, SearchField, EmptyState, Badge, Tag } = window.ACRFlowDesignSystem_ba1e9c;

/** Chave que o dashboard usa para pedir que um procedimento abra direto. */
const CHAVE_ABRIR = "flowtix.procAbrir";
/** Preferência do usuário: esconder a árvore de pastas para ler o documento em tela cheia. */
const CHAVE_PASTAS_OCULTAS = "flowtix.procPastasOcultas";
/** A home da wiki (path "home") é a página de apresentação do módulo. */
const paginaInicial = (lista) => lista.find((p) => p.path === "home") || null;

/** Monta a árvore de pastas a partir dos caminhos da wiki ("Contabilidade/fechamento"). */
function montarArvore(paginas) {
  const raiz = { nome: "", caminho: "", filhos: {}, pagina: null };
  for (const p of paginas) {
    const partes = p.path.split("/").filter(Boolean);
    let no = raiz;
    partes.forEach((parte, i) => {
      const caminho = partes.slice(0, i + 1).join("/");
      no.filhos[parte] = no.filhos[parte] || { nome: parte, caminho, filhos: {}, pagina: null };
      no = no.filhos[parte];
    });
    no.pagina = p;
  }
  return raiz;
}

const ordenar = (nos) => Object.values(nos).sort((a, b) => {
  const pa = Object.keys(a.filhos).length > 0, pb = Object.keys(b.filhos).length > 0;
  if (pa !== pb) return pa ? -1 : 1;   // pastas primeiro
  return (a.pagina ? a.pagina.title : a.nome).localeCompare(b.pagina ? b.pagina.title : b.nome, "pt-BR");
});

function ItemArvore({ no, nivel, atual, abertas, onAlternar, onAbrir }) {
  const filhos = ordenar(no.filhos);
  const pasta = filhos.length > 0;
  const aberta = abertas.has(no.caminho);
  const ativo = no.pagina && no.pagina.id === atual;
  return (
    <>
      <button type="button"
        onClick={() => { if (pasta) onAlternar(no.caminho); if (no.pagina) onAbrir(no.pagina.id); }}
        style={{
          display: "flex", alignItems: "center", gap: 7, width: "100%", padding: "7px 10px", paddingLeft: 10 + nivel * 16,
          border: "none", borderRadius: "var(--radius-md)", cursor: "pointer", textAlign: "left",
          background: ativo ? "var(--surface-selected, var(--surface-muted))" : "transparent",
          color: ativo ? "var(--text-brand)" : "var(--text-body)",
          font: ativo ? "var(--type-body-strong)" : "var(--type-body)",
        }}>
        {pasta
          ? <Icon name={aberta ? "chevron-down" : "chevron-right"} size={14} style={{ flex: "none", color: "var(--text-muted)" }} />
          : <span style={{ width: 14, flex: "none" }} />}
        <Icon name={pasta ? (aberta ? "folder-open" : "folder") : "file-text"} size={15} style={{ flex: "none", color: "var(--text-muted)" }} />
        <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {no.pagina && !pasta ? no.pagina.title : no.nome}
        </span>
      </button>
      {pasta && aberta ? filhos.map((f) => (
        <ItemArvore key={f.caminho} no={f} nivel={nivel + 1} atual={atual} abertas={abertas} onAlternar={onAlternar} onAbrir={onAbrir} />
      )) : null}
    </>
  );
}

/** Estilo do conteúdo dentro do iframe, sobre os tokens do FlowTix. */
const CSS_CONTEUDO = `
html,body{margin:0;background:var(--surface-card);color:var(--text-body);font:var(--type-body);line-height:1.65}
body{padding:2px 2px 8px;overflow:hidden;word-wrap:break-word}
h1,h2,h3,h4,h5,h6{color:var(--text-strong);font-family:var(--font-display);line-height:1.3;margin:1.4em 0 .5em}
h1{font-size:24px}h2{font-size:20px;padding-bottom:6px;border-bottom:1px solid var(--border-subtle)}h3{font-size:17px}h4{font-size:15px}
body>:first-child{margin-top:0}
a{color:var(--text-brand)}
a.toc-anchor{display:none}
img{max-width:100%;height:auto;border-radius:var(--radius-md)}
img[data-wiki-src]:not([src]){min-height:40px;min-width:80px;background:var(--surface-muted)}
code{font-family:var(--font-mono,monospace);font-size:.9em;background:var(--surface-muted);padding:1px 5px;border-radius:4px}
pre{background:var(--surface-muted);padding:12px 14px;border-radius:var(--radius-md);overflow:auto}
pre code{background:none;padding:0}
table{border-collapse:collapse;width:100%;margin:12px 0;display:block;overflow-x:auto}
th,td{border:1px solid var(--border-subtle);padding:7px 10px;text-align:left;vertical-align:top}
th{background:var(--surface-muted);color:var(--text-strong)}
blockquote{margin:12px 0;padding:10px 14px;border-left:3px solid var(--border-strong,var(--border-subtle));background:var(--surface-muted);border-radius:0 var(--radius-md) var(--radius-md) 0}
blockquote.is-info{border-left-color:#3b82f6}blockquote.is-success{border-left-color:#16a34a}
blockquote.is-warning{border-left-color:#f59e0b}blockquote.is-danger{border-left-color:#dc2626}
blockquote p{margin:4px 0}
hr{border:none;border-top:1px solid var(--border-subtle);margin:20px 0}
ul,ol{padding-left:24px}
video{display:block;width:100%;max-width:100%;height:auto;margin:12px 0;border-radius:var(--radius-md);background:#000}
audio{display:block;width:100%;margin:12px 0}
.wiki-abas{margin:20px 0}
[role=tablist]{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--border-subtle)}
[role=tab]{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 14px;cursor:pointer;color:var(--text-muted);font:var(--type-body-strong)}
[role=tab]:hover{color:var(--text-body)}
[role=tab][aria-selected=true]{color:var(--text-brand);border-bottom-color:var(--text-brand)}
[role=tab]:focus-visible{outline:2px solid var(--text-brand);outline-offset:-2px}
.wiki-aba{padding-top:14px}
.wiki-aba>:first-child{margin-top:0}
`;

/** Caminho do arquivo dentro da wiki, ou null se ele estiver em outro site. */
function caminhoWiki(src, wikiBase) {
  const rel = src.startsWith(wikiBase) ? src.slice(wikiBase.length) : src;
  return rel.startsWith("/") && !rel.startsWith("//") ? rel : null;
}

/** Troca o <tabset> da wiki (componente Vue, que só funciona lá) por abas comuns.
 *  Precisa vir antes da limpeza: o conteúdo de um <template> fica fora do alcance
 *  do querySelectorAll. O laço cobre abas dentro de abas. */
function converterAbas(doc) {
  let n = 0;
  for (let tabset = doc.querySelector("tabset"); tabset; tabset = doc.querySelector("tabset")) {
    const slot = (nome) => [...tabset.children].find((el) => el.hasAttribute("v-slot:" + nome));
    const titulos = slot("tabs") ? [...slot("tabs").content.querySelectorAll("li")] : [];
    const paineis = slot("content") ? [...slot("content").content.children] : [];
    const abas = doc.createElement("div");
    abas.className = "wiki-abas";
    const barra = doc.createElement("div");
    barra.setAttribute("role", "tablist");
    abas.append(barra);
    paineis.forEach((painel, i) => {
      const id = "wiki-aba-" + ++n;
      const botao = doc.createElement("button");
      botao.type = "button";
      botao.textContent = titulos[i] ? titulos[i].textContent.trim() : "Aba " + (i + 1);
      botao.setAttribute("role", "tab");
      botao.setAttribute("aria-controls", id);
      botao.setAttribute("aria-selected", String(i === 0));
      botao.tabIndex = i === 0 ? 0 : -1;
      barra.append(botao);
      painel.id = id;
      painel.setAttribute("role", "tabpanel");
      painel.classList.add("wiki-aba");
      painel.hidden = i > 0;
      abas.append(painel);
    });
    tabset.replaceWith(abas);
  }
}

/** Prepara o HTML da wiki: imagens não carregam sozinhas (vêm pelo backend com o token)
 *  e nada de script/iframe/form. O sandbox do iframe já impede a execução; isto é a segunda camada. */
function prepararHtml(html, wikiBase) {
  const doc = new DOMParser().parseFromString("<body>" + html + "</body>", "text/html");
  converterAbas(doc);
  doc.querySelectorAll("script,iframe,object,embed,form,link,meta,base,style,template").forEach((el) => el.remove());
  doc.querySelectorAll("*").forEach((el) => {
    for (const a of [...el.attributes]) if (/^on/i.test(a.name)) el.removeAttribute(a.name);
  });
  doc.querySelectorAll("img").forEach((img) => {
    const src = img.getAttribute("src") || "";
    img.removeAttribute("src");
    img.removeAttribute("srcset");
    const rel = caminhoWiki(src, wikiBase);
    if (rel) img.setAttribute("data-wiki-src", rel);
    else if (/^data:image\//.test(src)) img.setAttribute("src", src);
    // imagem de outro site: a CSP do FlowTix bloquearia de todo modo
  });
  // vídeo e áudio: mesma ideia, mas o endereço vem de um link assinado (ver ConteudoWiki)
  doc.querySelectorAll("video,audio").forEach((midia) => {
    const fontes = [midia, ...midia.querySelectorAll("source")];
    const rel = fontes.map((el) => caminhoWiki(el.getAttribute("src") || "", wikiBase)).find(Boolean);
    midia.querySelectorAll("source").forEach((el) => el.remove());
    midia.removeAttribute("src");
    midia.removeAttribute("poster");
    midia.setAttribute("preload", "metadata");
    if (rel) midia.setAttribute("data-wiki-midia", rel);
  });
  return doc.body.innerHTML;
}

function ConteudoWiki({ pagina, wikiBase, onAbrirCaminho }) {
  const ref = React.useRef(null);
  const tema = document.documentElement.dataset.theme || "";
  const css = new URL("../../styles.css", location.href).href;
  const srcdoc = React.useMemo(() =>
    `<!doctype html><html${tema ? ` data-theme="${tema}"` : ""}><head><meta charset="utf-8">` +
    `<link rel="stylesheet" href="${css}"><style>${CSS_CONTEUDO}</style></head>` +
    `<body>${prepararHtml(pagina.html, wikiBase)}</body></html>`,
  [pagina.id, pagina.updatedAt, tema]);

  React.useEffect(() => {
    const iframe = ref.current;
    if (!iframe) return;
    const blobs = [];
    let vivo = true;
    const ajustar = () => {
      const d = iframe.contentDocument;
      // body, e não documentElement: este nunca fica menor que o próprio iframe,
      // e a altura não encolheria quando o texto ganha largura
      if (d && d.body) iframe.style.height = d.body.scrollHeight + "px";
    };
    const aoCarregar = () => {
      const d = iframe.contentDocument;
      if (!d) return;
      ajustar();
      // o iframe não roda script: quem troca as abas é esta página, de fora dele
      const abrirAba = (botao) => {
        [...botao.parentElement.children].forEach((b) => {
          const ativa = b === botao;
          const painel = d.getElementById(b.getAttribute("aria-controls"));
          b.setAttribute("aria-selected", String(ativa));
          b.tabIndex = ativa ? 0 : -1;
          painel.hidden = !ativa;
          if (!ativa) painel.querySelectorAll("video,audio").forEach((m) => m.pause());
        });
        ajustar();
      };
      /** Um link para um título dentro de aba fechada precisa abri-la antes de rolar. */
      const revelar = (alvo) => {
        for (let p = alvo.closest(".wiki-aba"); p; p = p.parentElement.closest(".wiki-aba")) {
          if (p.hidden) abrirAba(d.querySelector(`[aria-controls="${p.id}"]`));
        }
      };
      d.addEventListener("keydown", (e) => {
        const aba = e.target.closest && e.target.closest("[role=tab]");
        const passo = { ArrowRight: 1, ArrowLeft: -1 }[e.key];
        if (!aba || !passo) return;
        e.preventDefault();
        const abas = [...aba.parentElement.children];
        const proxima = abas[(abas.indexOf(aba) + passo + abas.length) % abas.length];
        abrirAba(proxima);
        proxima.focus();
      });
      d.querySelectorAll("[data-wiki-midia]").forEach((midia) => {
        let renovou = false;
        const carregar = async () => {
          try {
            const url = await window.ACRApi.docs.midiaUrl(midia.getAttribute("data-wiki-midia"));
            if (vivo) midia.src = url;
          } catch { /* o player fica vazio; o resto da página segue */ }
        };
        midia.addEventListener("loadedmetadata", () => { renovou = false; ajustar(); });
        // o link vence em 1 hora: quem deixou a página aberta ganha um novo ao dar play
        midia.addEventListener("error", () => { if (!renovou) { renovou = true; carregar(); } });
        carregar();
      });
      d.querySelectorAll("img[data-wiki-src]").forEach(async (img) => {
        try {
          const blob = await window.ACRApi.docs.arquivo(img.getAttribute("data-wiki-src"));
          if (!vivo) return;
          const url = URL.createObjectURL(blob);
          blobs.push(url);
          img.addEventListener("load", ajustar, { once: true });
          img.src = url;
        } catch { img.alt = img.alt || "Imagem indisponível"; }
      });
      // links: os da wiki abrem aqui dentro, os externos em nova aba
      d.addEventListener("click", (e) => {
        const aba = e.target.closest && e.target.closest("[role=tab]");
        if (aba) { abrirAba(aba); return; }
        const a = e.target.closest && e.target.closest("a[href]");
        if (!a) return;
        const href = a.getAttribute("href");
        e.preventDefault();
        if (href.startsWith("#")) {
          const alvo = d.getElementById(decodeURIComponent(href.slice(1)));
          if (alvo) { revelar(alvo); alvo.scrollIntoView({ behavior: "smooth" }); }
          return;
        }
        const rel = href.startsWith(wikiBase) ? href.slice(wikiBase.length) : href;
        if (rel.startsWith("/") && !rel.startsWith("//")) {
          if (onAbrirCaminho(rel.split("#")[0])) return;
          window.open(wikiBase + rel, "_blank", "noopener");
          return;
        }
        if (/^(https?:|mailto:|tel:)/i.test(href)) window.open(href, "_blank", "noopener");
      });
    };
    iframe.addEventListener("load", aoCarregar);
    // o srcdoc pode ter terminado antes deste efeito rodar
    const d0 = iframe.contentDocument;
    if (d0 && d0.URL === "about:srcdoc" && d0.readyState === "complete") aoCarregar();
    // a largura muda com a janela e ao esconder/mostrar as pastas; só ela interessa,
    // pois a altura é este próprio ajuste que define
    let larguraAnterior = iframe.clientWidth;
    const observador = new ResizeObserver(() => {
      if (iframe.clientWidth === larguraAnterior) return;
      larguraAnterior = iframe.clientWidth;
      ajustar();
    });
    observador.observe(iframe);
    return () => {
      vivo = false;
      iframe.removeEventListener("load", aoCarregar);
      observador.disconnect();
      blobs.forEach((u) => URL.revokeObjectURL(u));
    };
  }, [srcdoc]);

  return <iframe ref={ref} title={pagina.title} srcDoc={srcdoc} sandbox="allow-same-origin" allowFullScreen
    style={{ width: "100%", border: "none", display: "block", minHeight: 120 }} />;
}

function DocsScreen({ onToast }) {
  const [largura, setLargura] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const medir = () => setLargura(window.innerWidth);
    window.addEventListener("resize", medir);
    return () => window.removeEventListener("resize", medir);
  }, []);
  const movel = largura < 900;

  const [status, setStatus] = React.useState(null);
  const [paginas, setPaginas] = React.useState(null);
  const [erro, setErro] = React.useState("");
  // a home da wiki é a página de apresentação: o módulo sempre abre nela,
  // a não ser que o dashboard tenha pedido um procedimento específico
  const [atual, setAtual] = React.useState(() => {
    let pedido = null;
    try { pedido = Number(localStorage.getItem(CHAVE_ABRIR)) || null; localStorage.removeItem(CHAVE_ABRIR); } catch { /* sem storage */ }
    return pedido;
  });
  const [pagina, setPagina] = React.useState(null);
  const [carregandoPagina, setCarregandoPagina] = React.useState(false);
  const [falhaPagina, setFalhaPagina] = React.useState(false);
  const [pastasOcultas, setPastasOcultas] = React.useState(() => {
    try { return localStorage.getItem(CHAVE_PASTAS_OCULTAS) === "1"; } catch { return false; }
  });
  const [abertas, setAbertas] = React.useState(new Set());
  const [q, setQ] = React.useState("");
  const [resultados, setResultados] = React.useState(null);

  const carregarLista = React.useCallback(async () => {
    setErro("");
    try {
      const st = await window.ACRApi.docs.status();
      setStatus(st);
      if (!st.configurado) return;
      const { paginas: lista } = await window.ACRApi.docs.paginas();
      setPaginas(lista);
      setAtual((a) => (a && lista.some((p) => p.id === a)) ? a : ((paginaInicial(lista) || lista[0] || {}).id || null));
    } catch (e) { setErro(e.message); }
  }, []);
  React.useEffect(() => { carregarLista(); }, [carregarLista]);

  React.useEffect(() => {
    if (!atual) { setPagina(null); return; }
    let vivo = true;
    setCarregandoPagina(true);
    setFalhaPagina(false);
    window.ACRApi.docs.pagina(atual)
      .then((p) => { if (vivo) setPagina(p); })
      .catch((e) => { if (vivo) { setPagina(null); setFalhaPagina(true); onToast && onToast({ tone: "danger", title: "Não foi possível abrir a página", message: e.message }); } })
      .finally(() => { if (vivo) setCarregandoPagina(false); });
    return () => { vivo = false; };
  }, [atual]);

  // ao abrir uma página, expande as pastas até ela
  React.useEffect(() => {
    if (!pagina) return;
    const partes = pagina.path.split("/");
    setAbertas((s) => {
      const n = new Set(s);
      partes.forEach((_, i) => n.add(partes.slice(0, i + 1).join("/")));
      return n;
    });
  }, [pagina && pagina.id]);

  // busca no servidor da wiki, com pausa para não disparar a cada tecla
  React.useEffect(() => {
    const termo = q.trim();
    if (termo.length < 2) { setResultados(null); return; }
    let vivo = true;
    const t = setTimeout(async () => {
      try {
        const r = await window.ACRApi.docs.buscar(termo);
        if (vivo) setResultados(r.results || []);
      } catch (e) { if (vivo) setResultados([]); }
    }, 300);
    return () => { vivo = false; clearTimeout(t); };
  }, [q]);

  const home = React.useMemo(() => paginaInicial(paginas || []), [paginas]);
  const arvore = React.useMemo(() => montarArvore((paginas || []).filter((p) => p !== home)), [paginas, home]);
  const alternar = (c) => setAbertas((s) => { const n = new Set(s); n.has(c) ? n.delete(c) : n.add(c); return n; });
  const abrir = (id) => { setAtual(id); window.scrollTo({ top: 0 }); };

  /** Link interno da wiki ("/pt/Contabilidade/x" ou "/Contabilidade/x"): acha a página na lista. */
  const abrirCaminho = (rel) => {
    const limpo = decodeURIComponent(rel).replace(/^\/+|\/+$/g, "");
    const semIdioma = limpo.replace(/^[a-z]{2}(-[a-z]{2})?\//i, "");
    const p = (paginas || []).find((x) => x.path === limpo || x.path === semIdioma);
    if (p) { abrir(p.id); return true; }
    return false;
  };

  const wikiBase = status ? status.url : "";

  // sem documento para mostrar, as pastas voltam: são o único caminho até um
  const semDocumento = !!erro || falhaPagina || (!!paginas && !atual);
  const leituraAmpla = !movel && pastasOcultas && !semDocumento;
  const alternarPastas = () => {
    const ocultar = !pastasOcultas;
    setPastasOcultas(ocultar);
    try { localStorage.setItem(CHAVE_PASTAS_OCULTAS, ocultar ? "1" : "0"); } catch { /* sem storage */ }
  };

  // o <main> do AppShell limita a largura do conteúdo; na leitura ampla o documento usa a tela toda
  React.useLayoutEffect(() => {
    if (!leituraAmpla) return;
    const raiz = document.documentElement;
    raiz.style.setProperty("--content-max", "none");
    return () => raiz.style.removeProperty("--content-max");
  }, [leituraAmpla]);

  if (status && !status.configurado) {
    return (
      <Card padding="0">
        <EmptyState icon={<Icon name="plug" size={22} />} title="Integração com a wiki não configurada."
          description="O administrador precisa informar a chave de API do Wiki.js (WIKI_TOKEN) no servidor." />
      </Card>
    );
  }

  const listaLateral = (
    <Card padding="12px">
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <SearchField value={q} onChange={(e) => setQ(e.target.value)} onClear={() => setQ("")} placeholder="Buscar nos procedimentos..." shortcut={null} />
        <div style={{ display: "flex", flexDirection: "column", gap: 1, maxHeight: movel ? "none" : "calc(100vh - 260px)", overflowY: "auto" }}>
          {erro ? (
            <div style={{ padding: 12, font: "var(--type-caption)", color: "var(--text-danger, var(--text-muted))" }}>{erro}</div>
          ) : !paginas ? (
            <div style={{ padding: 12, font: "var(--type-caption)", color: "var(--text-muted)" }}>Carregando…</div>
          ) : resultados ? (
            resultados.length === 0
              ? <div style={{ padding: 12, font: "var(--type-caption)", color: "var(--text-muted)" }}>Nada encontrado para "{q.trim()}".</div>
              : resultados.map((r) => (
                <button key={r.id} type="button" onClick={() => abrir(Number(r.id))}
                  style={{ display: "flex", flexDirection: "column", gap: 2, padding: "8px 10px", border: "none", borderRadius: "var(--radius-md)", cursor: "pointer", textAlign: "left", background: Number(r.id) === atual ? "var(--surface-muted)" : "transparent" }}>
                  <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{r.title}</span>
                  <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{r.description || r.path}</span>
                </button>
              ))
          ) : paginas.length === 0 ? (
            <div style={{ padding: 12, font: "var(--type-caption)", color: "var(--text-muted)" }}>Nenhuma página publicada na wiki.</div>
          ) : (
            <>
              {home ? (
                <button type="button" onClick={() => abrir(home.id)}
                  style={{
                    display: "flex", alignItems: "center", gap: 7, width: "100%", padding: "7px 10px", marginBottom: 4,
                    border: "none", borderRadius: "var(--radius-md)", cursor: "pointer", textAlign: "left",
                    background: home.id === atual ? "var(--surface-selected, var(--surface-muted))" : "transparent",
                    color: home.id === atual ? "var(--text-brand)" : "var(--text-body)",
                    font: home.id === atual ? "var(--type-body-strong)" : "var(--type-body)",
                  }}>
                  <Icon name="house" size={15} style={{ flex: "none", color: "var(--text-muted)" }} />
                  <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>Início</span>
                </button>
              ) : null}
              {ordenar(arvore.filhos).map((no) => (
                <ItemArvore key={no.caminho} no={no} nivel={0} atual={atual} abertas={abertas} onAlternar={alternar} onAbrir={abrir} />
              ))}
            </>
          )}
        </div>
      </div>
    </Card>
  );

  const conteudo = (
    <Card padding="0">
      {!pagina ? (
        <EmptyState icon={<Icon name="book-open" size={22} />}
          title={carregandoPagina ? "Abrindo página…" : "Escolha uma página."}
          description={carregandoPagina ? "" : "Navegue pelas pastas ou use a busca."} />
      ) : (
        <div style={{ display: "flex", flexDirection: "column", opacity: carregandoPagina ? 0.5 : 1, transition: "opacity var(--dur-fast)" }}>
          <div style={{ padding: movel ? "16px 16px 12px" : "20px 26px 14px", borderBottom: "1px solid var(--border-subtle)", display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ font: "var(--type-overline)", color: "var(--text-muted)", letterSpacing: "var(--tracking-wide)" }}>
              {pagina.path.split("/").slice(0, -1).join(" / ").toUpperCase() || "PROCEDIMENTOS"}
            </span>
            <h2 style={{ font: "var(--type-h2)", color: "var(--text-strong)", margin: 0 }}>{pagina.title}</h2>
            {pagina.description ? <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>{pagina.description}</span> : null}
            <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", font: "var(--type-caption)", color: "var(--text-muted)" }}>
              <span>Atualizada em {new Date(pagina.updatedAt).toLocaleDateString("pt-BR")}{pagina.authorName ? " por " + pagina.authorName : ""}</span>
              {pagina.tags.map((t) => <Tag key={t}>{t}</Tag>)}
            </div>
          </div>
          <div style={{ padding: movel ? 16 : "20px 26px 26px" }}>
            <ConteudoWiki pagina={pagina} wikiBase={wikiBase} onAbrirCaminho={abrirCaminho} />
          </div>
        </div>
      )}
    </Card>
  );

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          <h1 style={{ font: "var(--type-h1)", color: "var(--text-strong)" }}>Procedimentos</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Procedimentos e manuais publicados na wiki da ACR.</span>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          {!movel && pagina ? (
            <Button variant="ghost" iconLeft={<Icon name={leituraAmpla ? "panel-left-open" : "panel-left-close"} size={16} />}
              aria-pressed={leituraAmpla} onClick={alternarPastas}>
              {leituraAmpla ? "Mostrar pastas" : "Ocultar pastas"}
            </Button>
          ) : null}
          {home && atual !== home.id ? (
            <Button variant="ghost" iconLeft={<Icon name="house" size={16} />} onClick={() => abrir(home.id)}>Início</Button>
          ) : null}
          <IconButton icon={<Icon name="refresh-cw" size={17} />} label="Atualizar lista" onClick={carregarLista} />
          {pagina ? (
            <Button variant="secondary" iconLeft={<Icon name="external-link" size={16} />} onClick={() => window.open(pagina.url, "_blank", "noopener")}>Abrir na wiki</Button>
          ) : null}
        </div>
      </div>

      {movel ? (
        pagina || carregandoPagina ? (
          <>
            <div><Button variant="ghost" iconLeft={<Icon name="arrow-left" size={16} />} onClick={() => setAtual(null)}>Todas as páginas</Button></div>
            {conteudo}
          </>
        ) : listaLateral
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: leituraAmpla ? "minmax(0, 1fr)" : "300px minmax(0, 1fr)", gap: "var(--gap-section)", alignItems: "start" }}>
          {leituraAmpla ? null : <div style={{ position: "sticky", top: "calc(var(--topbar-h) + 16px)" }}>{listaLateral}</div>}
          {conteudo}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { DocsScreen, CHAVE_ABRIR_PROCEDIMENTO: CHAVE_ABRIR });