/**
 * PageContent component displays Wikipedia page content.
 * 
 * Handles link clicks, loading states, and error states.
 */

function PageContent({ title, content, links, loading, error, onLinkClick, disabled = false }) {
  if (loading) {
    return React.createElement(
      'div',
      { className: 'page-content loading' },
      React.createElement('p', null, 'Loading page...')
    );
  }

  if (error) {
    return React.createElement(
      'div',
      { className: 'page-content error' },
      React.createElement('p', { className: 'error-message' }, error)
    );
  }

  if (!content) {
    return React.createElement(
      'div',
      { className: 'page-content empty' },
      React.createElement('p', null, 'No content available')
    );
  }

  const handleClick = (e) => {
    if (disabled) {
      e.preventDefault();
      return;
    }
    
    // Find the nearest anchor tag (link might contain child elements)
    let target = e.target;
    let anchor = null;
    
    // Traverse up the DOM tree to find the anchor tag
    while (target && target !== e.currentTarget) {
      if (target.tagName === 'A' && target.dataset && target.dataset.title) {
        anchor = target;
        break;
      }
      target = target.parentElement;
    }
    
    if (anchor) {
      e.preventDefault();
      e.stopPropagation();
      const linkTitle = anchor.dataset.title;
      if (onLinkClick) {
        onLinkClick(linkTitle);
      }
    }
  };

  // Add hover effect styles to links after content is set
  React.useEffect(() => {
    if (content) {
      // Add hover styles to all links in the content
      const style = document.createElement('style');
      style.textContent = `
        .page-content a[data-title] {
          transition: all 0.2s ease;
          cursor: pointer;
        }
        .page-content a[data-title]:hover {
          background-color: #e3f2fd;
          padding: 2px 4px;
          border-radius: 3px;
          text-decoration: underline;
          transform: translateY(-1px);
        }
        .page-content a[data-title]:active {
          transform: translateY(0);
        }
      `;
      document.head.appendChild(style);
      return () => {
        document.head.removeChild(style);
      };
    }
  }, [content]);

  return React.createElement(
    'div',
    {
      className: 'page-content',
      onClick: handleClick,
      dangerouslySetInnerHTML: { __html: content },
    }
  );
}