"use client";

import { cn } from "@/lib/utils";
import { ListCollapse, ChevronRight } from "lucide-react";
import Link from "next/link";
import { useEffect, useState } from "react";

export interface TocItem {
  id: string;
  title: string;
  level: number;
}

interface TableOfContentsProps {
  items?: TocItem[];
  className?: string;
}

export default function TableOfContents({
  items = [],
  className,
}: TableOfContentsProps) {
  const [activeId, setActiveId] = useState<string>("");

  useEffect(() => {
    if (items.length === 0) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id);
          }
        });
      },
      { rootMargin: "0% 0% -70% 0%" },
    );

    items.forEach((item) => {
      const el = document.getElementById(item.id);
      if (el) observer.observe(el);
    });

    return () => observer.disconnect();
  }, [items]);

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

  return (
    <nav
      aria-label="Table of contents"
      className={cn(
        "my-8 rounded-2xl p-6 bg-brand-sand/50 border border-brand-border/80 backdrop-blur-xs",
        className,
      )}
    >
      <div className="flex items-center gap-2.5 mb-4 pb-3 border-b border-brand-border/60">
        <ListCollapse className="w-5 h-5 text-brand-gold" />
        <h4 className="font-title text-base font-bold text-brand-dark uppercase tracking-wider">
          Article Directory
        </h4>
      </div>

      <ul className="space-y-2.5 text-sm">
        {items.map((item) => {
          const isActive = activeId === item.id;
          return (
            <li
              key={item.id}
              className={cn(
                "transition-colors",
                item.level === 3 ? "pl-4 text-xs" : "font-medium",
              )}
            >
              <Link
                href={`#${item.id}`}
                className={cn(
                  "flex items-center gap-2 py-0.5 transition-colors",
                  isActive
                    ? "text-brand-gold font-semibold"
                    : "text-brand-dark/75 hover:text-brand-gold",
                )}
              >
                <ChevronRight
                  size={12}
                  className={cn(
                    "shrink-0 transition-transform",
                    isActive ? "text-brand-gold translate-x-0.5" : "text-brand-border",
                  )}
                />
                <span>{item.title}</span>
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}