"use client";
import { useEffect, useState } from "react";

interface TocItem {
  id: string;
  text: string;
  level: number;
}

export function TableOfContents({ articleSelector = "#article-body" }: { articleSelector?: string }) {
  const [items, setItems] = useState<TocItem[]>([]);
  const [active, setActive] = useState<string>("");

  useEffect(() => {
    const root = document.querySelector(articleSelector);
    if (!root) return;
    const headings = Array.from(root.querySelectorAll("h2, h3")) as HTMLElement[];
    const list: TocItem[] = headings.map((el, i) => {
      if (!el.id) el.id = `h-${i}-${(el.textContent ?? "").toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 40)}`;
      return {
        id: el.id,
        text: el.textContent ?? "",
        level: el.tagName === "H2" ? 2 : 3,
      };
    });
    setItems(list);

    const obs = new IntersectionObserver(
      (entries) => {
        const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.target.getBoundingClientRect().top - b.target.getBoundingClientRect().top);
        if (visible[0]) setActive(visible[0].target.id);
      },
      { rootMargin: "-100px 0px -70% 0px", threshold: 0.1 }
    );
    headings.forEach((h) => obs.observe(h));
    return () => obs.disconnect();
  }, [articleSelector]);

  if (items.length === 0) return null;

  return (
    <nav aria-label="Mục lục" className="card-modern p-6">
      <div
        className="text-[10px] uppercase tracking-wider font-bold mb-4 font-[family-name:var(--font-jetbrains-mono)] font-mono"
        style={{ color: "var(--ink-3)" }}
      >
        Nội dung bài
      </div>
      <ul className="space-y-2 text-sm">
        {items.map((it) => (
          <li key={it.id} className={it.level === 3 ? "pl-4" : ""}>
            <a
              href={`#${it.id}`}
              className="block transition-colors hover:text-[var(--accent)] leading-snug"
              style={{
                color: active === it.id ? "var(--accent)" : "var(--ink-2)",
                fontWeight: active === it.id ? 600 : 400,
              }}
            >
              {it.text}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}