'use client';

import { useState, useEffect } from 'react';

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

interface TableOfContentsProps {
  htmlContent: string;
  className?: string;
  collapsible?: boolean;
  defaultCollapsed?: boolean;
  onItemClick?: (item: TocItem) => void;
}

export default function TableOfContents({
  htmlContent,
  className = '',
  collapsible = false,
  defaultCollapsed = false,
  onItemClick
}: TableOfContentsProps) {
  const [tocItems, setTocItems] = useState<TocItem[]>([]);
  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);

  useEffect(() => {
    // Parse HTML content to extract headings
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlContent, 'text/html');
    const headings = doc.querySelectorAll('h1, h2, h3, h4, h5, h6');
    
    const items: TocItem[] = [];
    
    headings.forEach((heading, index) => {
      const level = parseInt(heading.tagName.charAt(1));
      let title = heading.textContent?.trim() || '';
      // Use existing ID if present, otherwise fall back to index-based ID
      const id = heading.id || `heading-${index}`;
      
      // Handle empty headings with a fallback
      if (!title) {
        title = `Heading ${index + 1}`;
      }
      
      // Limit title length for display
      if (title.length > 60) {
        title = title.substring(0, 57) + '...';
      }
      
      items.push({
        id,
        level,
        title,
        element: heading as HTMLElement
      });
    });
    
    setTocItems(items);
  }, [htmlContent]);

  const handleItemClick = (item: TocItem) => {
    if (onItemClick) {
      onItemClick(item);
    } else {
      // Default behavior: smooth scroll to heading
      const element = document.getElementById(item.id);
      if (element) {
        element.scrollIntoView({ 
          behavior: 'smooth',
          block: 'start'
        });
      }
    }
  };

  const getIndentClass = (level: number) => {
    switch (level) {
      case 1: return 'pl-0';
      case 2: return 'pl-4';
      case 3: return 'pl-8';
      case 4: return 'pl-12';
      case 5: return 'pl-16';
      case 6: return 'pl-20';
      default: return 'pl-0';
    }
  };

  const getFontSizeClass = (level: number) => {
    switch (level) {
      case 1: return 'text-base font-semibold';
      case 2: return 'text-sm font-medium';
      case 3: return 'text-sm';
      case 4: return 'text-xs';
      case 5: return 'text-xs';
      case 6: return 'text-xs';
      default: return 'text-sm';
    }
  };

  if (tocItems.length === 0) {
    // Don't render anything if no headings are found
    return null;
  }

  return (
    <div className={`theme-card theme-shadow rounded-lg overflow-hidden ${className}`}>
      {collapsible && (
        <button
          onClick={() => setIsCollapsed(!isCollapsed)}
          className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b theme-border flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
        >
          <h3 className="font-semibold theme-header">Table of Contents</h3>
          <span className="theme-text">
            {isCollapsed ? '▼' : '▲'}
          </span>
        </button>
      )}
      
      {!collapsible && (
        <div className="px-4 py-3 bg-gray-50 dark:bg-gray-800 border-b theme-border">
          <h3 className="font-semibold theme-header">Table of Contents</h3>
        </div>
      )}

      {(!collapsible || !isCollapsed) && (
        <div className="p-4 max-h-96 overflow-y-auto">
          <nav>
            <ul className="space-y-1">
              {tocItems.map((item) => (
                <li key={item.id}>
                  <button
                    onClick={() => handleItemClick(item)}
                    className={`
                      w-full text-left py-1 px-2 rounded transition-colors
                      hover:bg-gray-100 dark:hover:bg-gray-700
                      theme-text hover:theme-accent
                      ${getIndentClass(item.level)}
                      ${getFontSizeClass(item.level)}
                    `}
                    title={item.title}
                  >
                    <span className="block truncate">{item.title}</span>
                  </button>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      )}
    </div>
  );
}