WikiRush/app/components/ArticleView.tsx

"use client";

import { useEffect, useRef } from "react";

const FORBIDDEN_NAMESPACES = [
  "Fichier:",
  "File:",
  "Wikipedia:",
  "Aide:",
  "Help:",
  "Categorie:",
  "Category:",
  "Discussion:",
  "Talk:",
  "Utilisateur:",
  "User:",
  "Special:",
  "Sp\u00e9cial:",
  "Portail:",
  "Portal:",
  "Mod\u00e8le:",
  "Template:",
  "Projet:",
  "WP:",
];

const REMOVED_SECTION_IDS = [
  "Liens_externes",
  "R\u00e9f\u00e9rences",
  "Notes",
  "Bibliographie",
  "Voir_aussi",
  "Notes_et_r\u00e9f\u00e9rences",
  "Sources",
  "Annexes",
  "Articles_connexes",
];

function cleanWikiHtml(container: HTMLElement): void {
  container.querySelectorAll(".mw-editsection").forEach((el) => el.remove());
  container
    .querySelectorAll(
      ".reflist, .references, .mw-references-wrap, sup.reference, .mw-ref, .reference",
    )
    .forEach((el) => el.remove());
  container
    .querySelectorAll(
      ".navbox, .navbox-inner, .vertical-navbox, .catlinks, .sistersitebox, .bandeau-portail",
    )
    .forEach((el) => el.remove());
  container
    .querySelectorAll(
      ".ambox, .tmbox, .cmbox, .ombox, .fmbox, .bandeau-container, .bandeau",
    )
    .forEach((el) => el.remove());
  container
    .querySelectorAll(".audio, .audiolink, audio, video")
    .forEach((el) => el.remove());
  container.querySelectorAll(".gallery").forEach((el) => el.remove());
  container.querySelectorAll("#toc, .toc").forEach((el) => el.remove());

  container.querySelectorAll("div, nav").forEach((el) => {
    const links = el.querySelectorAll("a");
    if (links.length > 3) {
      const anchorOnly = Array.from(links).every((a) => {
        const href = a.getAttribute("href") ?? "";
        return href.startsWith("#") || href.includes("#");
      });
      if (anchorOnly) el.remove();
    }
  });

  container.querySelectorAll("h2, h3").forEach((heading) => {
    const span = heading.querySelector("span[id]");
    if (!span) return;
    const id = span.getAttribute("id") ?? "";
    if (REMOVED_SECTION_IDS.some((s) => id === s || id.startsWith(s + "_"))) {
      let sibling: Element | null = heading;
      while (sibling) {
        const next: Element | null = sibling.nextElementSibling;
        sibling.remove();
        sibling = next;
      }
    }
  });
}

export function ArticleView({
  html,
  onNavigate,
  disabled = false,
}: {
  html: string;
  onNavigate: (title: string) => void;
  disabled?: boolean;
}) {
  const containerRef = useRef<HTMLDivElement>(null);
  const onNavigateRef = useRef(onNavigate);
  const disabledRef = useRef(disabled);

  useEffect(() => {
    onNavigateRef.current = onNavigate;
  });
  useEffect(() => {
    disabledRef.current = disabled;
  });

  useEffect(() => {
    const container = containerRef.current;
    if (!container || !html) return;

    container.innerHTML = html;
    cleanWikiHtml(container);

    container
      .querySelectorAll<HTMLAnchorElement>("a[href^='/wiki/']")
      .forEach((link) => {
        const href = link.getAttribute("href") ?? "";
        const path = href.replace("/wiki/", "");
        let decoded: string;
        try {
          decoded = decodeURIComponent(path);
        } catch {
          decoded = path;
        }
        const title = decoded.replace(/_/g, " ");

        if (
          FORBIDDEN_NAMESPACES.some((ns) => title.startsWith(ns)) ||
          title.includes("#")
        ) {
          link.removeAttribute("href");
          return;
        }
        link.setAttribute("data-wiki-title", title);
        link.removeAttribute("href");
        link.classList.add("wiki-link");
      });

    container.querySelectorAll<HTMLAnchorElement>("a[href]").forEach((link) => {
      link.removeAttribute("href");
    });

    const handleClick = (e: MouseEvent) => {
      if (disabledRef.current) return;
      const target = (e.target as HTMLElement).closest(
        "[data-wiki-title]",
      ) as HTMLElement | null;
      if (!target) return;
      e.preventDefault();
      const title = target.getAttribute("data-wiki-title");
      if (title) onNavigateRef.current(title);
    };

    container.addEventListener("click", handleClick);
    return () => container.removeEventListener("click", handleClick);
  }, [html]);

  return <div ref={containerRef} className="article-content" />;
}