// import type { MDXComponents } from 'mdx/types';
import React, { ComponentType } from 'react';

export type MDXComponents = {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  [key: string]: ComponentType<any>;
};
import TableWrapper from '@/components/docs/TableWrapper';
import Mermaid from '@/components/mdx/Mermaid';

// Helper function to extract text from React children
function getTextFromChildren(children: React.ReactNode): string {
  if (typeof children === 'string') {
    return children;
  }
  if (typeof children === 'number') {
    return children.toString();
  }
  if (Array.isArray(children)) {
    return children.map(getTextFromChildren).join('');
  }
  if (children && typeof children === 'object' && 'props' in children) {
    return getTextFromChildren((children as { props: { children: React.ReactNode } }).props.children);
  }
  return '';
}

// Helper function to generate slug from text
function generateSlug(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^\w\s-]/g, '') // Remove special characters
    .replace(/\s+/g, '-') // Replace spaces with hyphens
    .replace(/-+/g, '-') // Replace multiple hyphens with single hyphen
    .trim();
}

// Helper function to create heading component with ID
function createHeadingComponent(level: 1 | 2 | 3 | 4 | 5 | 6) {
  return function Heading({ children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
    const text = getTextFromChildren(children);
    const id = text ? generateSlug(text) : '';

    const headingProps = { id, ...props };

    switch (level) {
      case 1:
        return <h1 {...headingProps}>{children}</h1>;
      case 2:
        return <h2 {...headingProps}>{children}</h2>;
      case 3:
        return <h3 {...headingProps}>{children}</h3>;
      case 4:
        return <h4 {...headingProps}>{children}</h4>;
      case 5:
        return <h5 {...headingProps}>{children}</h5>;
      case 6:
        return <h6 {...headingProps}>{children}</h6>;
      default:
        return <h1 {...headingProps}>{children}</h1>;
    }
  };
}

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // Custom heading components with auto-generated IDs
    h1: createHeadingComponent(1),
    h2: createHeadingComponent(2),
    h3: createHeadingComponent(3),
    h4: createHeadingComponent(4),
    h5: createHeadingComponent(5),
    // Custom table component with wrapper for responsive scrolling
    table: ({ children, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
      <TableWrapper>
        <table {...props} style={{ width: '100%', borderCollapse: 'collapse', display: 'table' }}>
          {children}
        </table>
      </TableWrapper>
    ),
    // Custom pre component to handle mermaid diagrams
    pre: ({ children, ...props }: React.HTMLAttributes<HTMLPreElement>) => {
      // Check if children is a code element
      const codeElement = React.Children.toArray(children)[0];
      if (
        React.isValidElement(codeElement) &&
        (codeElement as React.ReactElement<{ className?: string }>).props.className?.includes('language-mermaid')
      ) {
        // Extract text content from the code element
        const chart = getTextFromChildren((codeElement as React.ReactElement<{ children?: React.ReactNode }>).props.children);
        return <Mermaid chart={chart} />;
      }

      // Default pre rendering
      return <pre {...props}>{children}</pre>;
    },
    // Ensure other components work
    ...components,
  };
}

