import { List } from 'lucide-react';

import { useMemo } from 'react';

interface TocHeading {
  id: string;
  text: string;
  level: 2 | 3;
}

interface TableOfContentsProps {
  html: string;
  minHeadings?: number;
}

function extractHeadings(html: string): TocHeading[] {
  const headings: TocHeading[] = [];
  const regex = /<h([23])[^>]*>(.*?)<\/h[23]>/gi;
  let match: RegExpExecArray | null;

  while ((match = regex.exec(html)) !== null) {
    const level = parseInt(match[1], 10) as 2 | 3;
    const text = match[2].replace(/<[^>]*>/g, '').trim();
    if (text) {
      const id = text
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-|-$/g, '');
      headings.push({ id, text, level });
    }
  }

  return headings;
}

export function TableOfContents({ html, minHeadings = 3 }: TableOfContentsProps) {
  const headings = useMemo(() => extractHeadings(html), [html]);

  if (headings.length < minHeadings) {
    return null;
  }

  return (
    <nav
      aria-label="Table of contents"
      className="mx-auto mb-8 max-w-3xl rounded-lg border bg-muted/50 p-6"
    >
      <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-foreground">
        <List className="h-4 w-4" aria-hidden="true" />
        Table of Contents
      </div>
      <ol className="space-y-1">
        {headings.map((heading) => (
          <li key={heading.id} className={heading.level === 3 ? 'ml-4' : ''}>
            <a
              href={`#${heading.id}`}
              className="block rounded px-2 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              {heading.text}
            </a>
          </li>
        ))}
      </ol>
    </nav>
  );
}