import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { cn } from '../../lib/utils';
import { processHTML } from '../../lib/html-compat';
import { getMediaByUrl, getMediaById, getAssetMap } from '../../lib/data';

interface ContentRendererProps {
  content: string;
  className?: string;
  sanitize?: boolean;
  processAssets?: boolean;
  convertClasses?: boolean;
}

interface ProcessedImage {
  src: string;
  alt: string;
  width?: number;
  height?: number;
}

/**
 * ContentRenderer Component
 * Handles rendering of WordPress HTML content with proper sanitization
 * and conversion to modern React components
 */
export const ContentRenderer: React.FC<ContentRendererProps> = ({
  content,
  className = '',
  sanitize = true,
  processAssets = true,
  convertClasses = true,
}) => {
  // Process the HTML content
  const processedContent = React.useMemo(() => {
    let html = content;
    
    if (sanitize) {
      html = processHTML(html);
    }
    
    if (processAssets) {
      html = replaceWordPressAssets(html);
    }
    
    if (convertClasses) {
      html = convertWordPressClasses(html);
    }
    
    return html;
  }, [content, sanitize, processAssets, convertClasses]);

  // Parse and render the HTML
  const renderContent = () => {
    if (!processedContent) return null;

    // Use a parser to convert HTML to React elements
    // For security, we'll use a custom parser that only allows safe elements
    return parseHTMLToReact(processedContent);
  };

  return (
    <div className={cn(
      'prose prose-lg max-w-none',
      'prose-headings:font-bold prose-headings:tracking-tight',
      'prose-h1:text-3xl prose-h1:md:text-4xl prose-h1:mb-4',
      'prose-h2:text-2xl prose-h2:md:text-3xl prose-h2:mb-3',
      'prose-h3:text-xl prose-h3:md:text-2xl prose-h3:mb-2',
      'prose-p:text-gray-700 prose-p:leading-relaxed prose-p:mb-4',
      'prose-a:text-primary prose-a:hover:text-primary-dark prose-a:underline',
      'prose-ul:list-disc prose-ul:pl-6 prose-ul:mb-4',
      'prose-ol:list-decimal prose-ol:pl-6 prose-ol:mb-4',
      'prose-li:mb-2 prose-li:marker:text-primary',
      'prose-strong:font-bold prose-strong:text-gray-900',
      'prose-em:italic prose-em:text-gray-700',
      'prose-table:w-full prose-table:border-collapse prose-table:my-4',
      'prose-th:bg-gray-100 prose-th:font-bold prose-th:p-2 prose-th:text-left',
      'prose-td:p-2 prose-td:border prose-td:border-gray-200',
      'prose-img:rounded-lg prose-img:shadow-md prose-img:my-4',
      'prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:bg-gray-50 prose-blockquote:py-2 prose-blockquote:my-4',
      className
    )}>
      {renderContent()}
    </div>
  );
};

/**
 * Parse HTML string to React elements
 * This is a safe parser that only allows specific tags and attributes
 */
function parseHTMLToReact(html: string): React.ReactNode {
  // Define allowed tags and their properties
  const allowedTags = {
    div: ['className', 'id', 'style'],
    p: ['className', 'style'],
    h1: ['className', 'style'],
    h2: ['className', 'style'],
    h3: ['className', 'style'],
    h4: ['className', 'style'],
    h5: ['className', 'style'],
    h6: ['className', 'style'],
    span: ['className', 'style'],
    a: ['href', 'target', 'rel', 'className', 'title', 'style'],
    ul: ['className', 'style'],
    ol: ['className', 'style'],
    li: ['className', 'style'],
    strong: ['className', 'style'],
    b: ['className', 'style'],
    em: ['className', 'style'],
    i: ['className', 'style'],
    br: [],
    hr: ['className', 'style'],
    img: ['src', 'alt', 'width', 'height', 'className', 'style'],
    table: ['className', 'style'],
    thead: ['className', 'style'],
    tbody: ['className', 'style'],
    tr: ['className', 'style'],
    th: ['className', 'style'],
    td: ['className', 'style'],
    blockquote: ['className', 'style'],
    code: ['className', 'style'],
    pre: ['className', 'style'],
    small: ['className', 'style'],
    section: ['className', 'id', 'style'],
    article: ['className', 'id', 'style'],
    figure: ['className', 'style'],
    figcaption: ['className', 'style'],
    video: ['className', 'style', 'autoPlay', 'loop', 'muted', 'playsInline', 'poster'],
    source: ['src', 'type'],
  };

  // Create a temporary DOM element to parse the HTML
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const body = doc.body;

  // Recursive function to convert DOM nodes to React elements
  function convertNode(node: Node, index: number): React.ReactNode {
    if (node.nodeType === Node.TEXT_NODE) {
      return node.textContent;
    }

    if (node.nodeType !== Node.ELEMENT_NODE) {
      return null;
    }

    const element = node as HTMLElement;
    const tagName = element.tagName.toLowerCase();

    // Check if tag is allowed
    if (!allowedTags[tagName as keyof typeof allowedTags]) {
      // For unknown tags, just render their children
      return Array.from(node.childNodes).map((child, i) => convertNode(child, i));
    }

    // Build props
    const props: any = { key: index };
    const allowedProps = allowedTags[tagName as keyof typeof allowedTags];

    // Helper function to convert style string to object
    const parseStyleString = (styleStr: string): React.CSSProperties => {
      const styles: React.CSSProperties = {};
      if (!styleStr) return styles;
      
      styleStr.split(';').forEach(style => {
        const [key, value] = style.split(':').map(s => s.trim());
        if (key && value) {
          // Convert camelCase for React
          const camelKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
          (styles as any)[camelKey] = value;
        }
      });
      
      return styles;
    };

    // Handle special cases for different element types
    if (tagName === 'a' && element.getAttribute('href')) {
      const href = element.getAttribute('href')!;
      const isExternal = href.startsWith('http') && !href.includes(window?.location?.hostname || '');
      
      if (isExternal) {
        props.href = href;
        props.target = '_blank';
        props.rel = 'noopener noreferrer';
      } else {
        // For internal links, use Next.js Link
        const children = Array.from(node.childNodes).map((child, i) => convertNode(child, i));
        return (
          <Link
            href={href}
            key={index}
            className={element.className}
            style={parseStyleString(element.style.cssText)}
          >
            {children}
          </Link>
        );
      }
    }

    if (tagName === 'img') {
      const src = element.getAttribute('src') || '';
      const alt = element.getAttribute('alt') || '';
      const widthAttr = element.getAttribute('width');
      const heightAttr = element.getAttribute('height');
      const dataWpImageId = element.getAttribute('data-wp-image-id');
      
      // Handle WordPress image IDs
      if (dataWpImageId) {
        const media = getMediaById(parseInt(dataWpImageId));
        if (media) {
          const width = widthAttr ? parseInt(widthAttr) : (media.width || 800);
          const height = heightAttr ? parseInt(heightAttr) : (media.height || 600);
          
          return (
            <Image
              key={index}
              src={media.localPath}
              alt={alt || media.alt || ''}
              width={width}
              height={height}
              className={element.className || ''}
              style={parseStyleString(element.style.cssText)}
              priority={false}
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            />
          );
        }
      }
      
      // Handle regular image URLs
      if (src) {
        const imageProps = getImageProps(src);
        const width = widthAttr ? parseInt(widthAttr) : imageProps.width;
        const height = heightAttr ? parseInt(heightAttr) : imageProps.height;
        
        // Check if it's an external URL
        if (src.startsWith('http')) {
          // For external images, use regular img tag
          return (
            <img
              key={index}
              src={imageProps.src}
              alt={alt}
              width={width}
              height={height}
              className={element.className || ''}
              style={parseStyleString(element.style.cssText)}
            />
          );
        }
        
        return (
          <Image
            key={index}
            src={imageProps.src}
            alt={alt || imageProps.alt || ''}
            width={width || 800}
            height={height || 600}
            className={element.className || ''}
            style={parseStyleString(element.style.cssText)}
            priority={false}
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
        );
      }
      return null;
    }

    // Handle video elements
    if (tagName === 'video') {
      const videoProps: any = { key: index };
      
      // Get sources
      const sources: React.ReactNode[] = [];
      Array.from(element.childNodes).forEach((child, i) => {
        if (child.nodeType === Node.ELEMENT_NODE && (child as HTMLElement).tagName.toLowerCase() === 'source') {
          const sourceEl = child as HTMLSourceElement;
          sources.push(
            <source key={i} src={sourceEl.src} type={sourceEl.type} />
          );
        }
      });
      
      // Set video props
      if (element.className) videoProps.className = element.className;
      if (element.style.cssText) videoProps.style = parseStyleString(element.style.cssText);
      if (element.getAttribute('autoPlay')) videoProps.autoPlay = true;
      if (element.getAttribute('loop')) videoProps.loop = true;
      if (element.getAttribute('muted')) videoProps.muted = true;
      if (element.getAttribute('playsInline')) videoProps.playsInline = true;
      if (element.getAttribute('poster')) videoProps.poster = element.getAttribute('poster');
      
      return (
        <video {...videoProps}>
          {sources}
        </video>
      );
    }

    // Handle divs with special data attributes for backgrounds
    if (tagName === 'div' && element.getAttribute('data-color-overlay')) {
      const colorOverlay = element.getAttribute('data-color-overlay');
      const overlayOpacity = parseFloat(element.getAttribute('data-overlay-opacity') || '0.5');
      
      // Get the original classes and style
      const className = element.className;
      const style = parseStyleString(element.style.cssText);
      
      // Convert children
      const children = Array.from(node.childNodes).map((child, i) => convertNode(child, i));
      
      return (
        <div key={index} className={className} style={style}>
          <div
            className="absolute inset-0"
            style={{ backgroundColor: colorOverlay, opacity: overlayOpacity }}
          />
          <div className="relative">
            {children}
          </div>
        </div>
      );
    }

    // Handle divs with video background data attributes
    if (tagName === 'div' && element.getAttribute('data-video-bg') === 'true') {
      const className = element.className;
      const style = parseStyleString(element.style.cssText);
      const mp4 = element.getAttribute('data-video-mp4');
      const webm = element.getAttribute('data-video-webm');
      
      const children = Array.from(node.childNodes).map((child, i) => convertNode(child, i));
      
      return (
        <div key={index} className={className} style={style}>
          {mp4 || webm ? (
            <video
              className="absolute inset-0 w-full h-full object-cover"
              autoPlay
              loop
              muted
              playsInline
            >
              {mp4 && <source src={mp4} type="video/mp4" />}
              {webm && <source src={webm} type="video/webm" />}
            </video>
          ) : null}
          <div className="relative z-10">
            {children}
          </div>
        </div>
      );
    }

    // Standard attribute mapping
    allowedProps.forEach(prop => {
      if (prop === 'style') {
        // Handle style separately
        if (element.style.cssText) {
          props.style = parseStyleString(element.style.cssText);
        }
      } else {
        const value = element.getAttribute(prop);
        if (value !== null) {
          props[prop] = value;
        }
      }
    });

    // Handle className specifically
    if (element.className && allowedProps.includes('className')) {
      props.className = element.className;
    }

    // Convert children
    const children = Array.from(node.childNodes).map((child, i) => convertNode(child, i));

    // Return React element
    return React.createElement(tagName, props, children);
  }

  // Convert all children of body
  return Array.from(body.childNodes).map((node, index) => convertNode(node, index));
}

/**
 * Replace WordPress asset URLs with local paths
 */
function replaceWordPressAssets(html: string): string {
  try {
    // Use the data layer to replace URLs
    const assetMap = getAssetMap();
    let processed = html;
    
    // Replace URLs in src attributes
    Object.entries(assetMap).forEach(([wpUrl, localPath]) => {
      // Handle both full URLs and relative paths
      const urlPattern = new RegExp(wpUrl.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g');
      processed = processed.replace(urlPattern, localPath as string);
    });
    
    // Also handle any remaining WordPress URLs that might be in the format we expect
    processed = processed.replace(/https?:\/\/[^"'\s]+\/wp-content\/uploads\/\d{4}\/\d{2}\/([^"'\s]+)/g, (match, filename) => {
      // Try to find this file in our media
      const media = getMediaByUrl(match);
      if (media) {
        return media.localPath;
      }
      return match;
    });
    
    return processed;
  } catch (error) {
    console.warn('Error replacing asset URLs:', error);
    return html;
  }
}

/**
 * Convert WordPress/Salient classes to Tailwind equivalents
 */
function convertWordPressClasses(html: string): string {
  const classMap: Record<string, string> = {
    // Salient/Vc_row classes
    'vc_row': 'flex flex-wrap -mx-4',
    'vc_row-fluid': 'w-full',
    'vc_col-sm-12': 'w-full px-4',
    'vc_col-md-6': 'w-full md:w-1/2 px-4',
    'vc_col-md-4': 'w-full md:w-1/3 px-4',
    'vc_col-md-3': 'w-full md:w-1/4 px-4',
    'vc_col-lg-6': 'w-full lg:w-1/2 px-4',
    'vc_col-lg-4': 'w-full lg:w-1/3 px-4',
    'vc_col-lg-3': 'w-full lg:w-1/4 px-4',
    
    // Typography
    'wpb_wrapper': 'space-y-4',
    'wpb_text_column': 'prose max-w-none',
    'wpb_content_element': 'mb-8',
    'wpb_single_image': 'my-4',
    'wpb_heading': 'text-2xl font-bold mb-2',
    
    // Alignment
    'text-left': 'text-left',
    'text-center': 'text-center',
    'text-right': 'text-right',
    'alignleft': 'float-left mr-4 mb-4',
    'alignright': 'float-right ml-4 mb-4',
    'aligncenter': 'mx-auto',
    
    // Colors
    'accent-color': 'text-primary',
    'primary-color': 'text-primary',
    'secondary-color': 'text-secondary',
    'text-color': 'text-gray-800',
    'light-text': 'text-gray-300',
    'dark-text': 'text-gray-900',
    
    // Backgrounds
    'bg-light': 'bg-gray-50',
    'bg-light-gray': 'bg-gray-100',
    'bg-dark': 'bg-gray-900',
    'bg-dark-gray': 'bg-gray-800',
    'bg-primary': 'bg-primary',
    'bg-secondary': 'bg-secondary',
    'bg-white': 'bg-white',
    'bg-transparent': 'bg-transparent',
    
    // Buttons
    'btn': 'inline-flex items-center justify-center px-4 py-2 rounded-lg font-semibold transition-colors duration-200',
    'btn-primary': 'bg-primary text-white hover:bg-primary-dark',
    'btn-secondary': 'bg-secondary text-white hover:bg-secondary-light',
    'btn-outline': 'border-2 border-primary text-primary hover:bg-primary hover:text-white',
    'btn-large': 'px-6 py-3 text-lg',
    'btn-small': 'px-3 py-1 text-sm',
    
    // Containers
    'container': 'container mx-auto px-4',
    'container-fluid': 'w-full px-4',
    
    // Spacing
    'mt-0': 'mt-0', 'mb-0': 'mb-0',
    'mt-2': 'mt-2', 'mb-2': 'mb-2',
    'mt-4': 'mt-4', 'mb-4': 'mb-4',
    'mt-6': 'mt-6', 'mb-6': 'mb-6',
    'mt-8': 'mt-8', 'mb-8': 'mb-8',
    'mt-12': 'mt-12', 'mb-12': 'mb-12',
    
    // WordPress specific
    'wp-caption': 'figure',
    'wp-caption-text': 'figcaption text-sm text-gray-600 mt-2',
    'alignnone': 'block',
    'size-full': 'w-full',
    'size-large': 'w-full max-w-3xl',
    'size-medium': 'w-full max-w-xl',
    'size-thumbnail': 'w-32 h-32',
  };

  let processed = html;
  
  // Replace classes in HTML
  Object.entries(classMap).forEach(([wpClass, twClass]) => {
    // Handle class="..." with the class at the beginning
    const classRegex1 = new RegExp(`class=["']${wpClass}\\s+([^"']*)["']`, 'g');
    processed = processed.replace(classRegex1, (match, rest) => {
      const newClasses = `${twClass} ${rest}`.trim().replace(/\s+/g, ' ');
      return `class="${newClasses}"`;
    });
    
    // Handle class="..." with the class in the middle
    const classRegex2 = new RegExp(`class=["']([^"']*)\\s+${wpClass}\\s+([^"']*)["']`, 'g');
    processed = processed.replace(classRegex2, (match, before, after) => {
      const newClasses = `${before} ${twClass} ${after}`.trim().replace(/\s+/g, ' ');
      return `class="${newClasses}"`;
    });
    
    // Handle class="..." with the class at the end
    const classRegex3 = new RegExp(`class=["']([^"']*)\\s+${wpClass}["']`, 'g');
    processed = processed.replace(classRegex3, (match, before) => {
      const newClasses = `${before} ${twClass}`.trim().replace(/\s+/g, ' ');
      return `class="${newClasses}"`;
    });
    
    // Handle class="..." with only the class
    const classRegex4 = new RegExp(`class=["']${wpClass}["']`, 'g');
    processed = processed.replace(classRegex4, `class="${twClass}"`);
  });

  return processed;
}

/**
 * Get image props from source using the data layer
 */
function getImageProps(src: string): { src: string; width?: number; height?: number; alt?: string } {
  // Check if it's a data attribute for WordPress image ID
  if (src.startsWith('data-wp-image-id:')) {
    const imageId = src.replace('data-wp-image-id:', '');
    const media = getMediaById(parseInt(imageId));
    if (media) {
      return {
        src: media.localPath,
        width: media.width || 800,
        height: media.height || 600,
        alt: media.alt || ''
      };
    }
  }
  
  // Try to find by URL
  const media = getMediaByUrl(src);
  if (media) {
    return {
      src: media.localPath,
      width: media.width || 800,
      height: media.height || 600,
      alt: media.alt || ''
    };
  }
  
  // Check if it's already a local path
  if (src.startsWith('/media/')) {
    return { src, width: 800, height: 600 };
  }
  
  // Return as-is for external URLs
  return { src, width: 800, height: 600 };
}

/**
 * Process background attributes and convert to inline styles
 */
function processBackgroundAttributes(element: HTMLElement): { style?: string; className?: string } {
  const result: { style?: string; className?: string } = {};
  const styles: string[] = [];
  const classes: string[] = [];
  
  // Check for data attributes from shortcodes
  const bgImage = element.getAttribute('data-bg-image');
  const bgVideo = element.getAttribute('data-video-bg');
  const videoMp4 = element.getAttribute('data-video-mp4');
  const videoWebm = element.getAttribute('data-video-webm');
  const parallax = element.getAttribute('data-parallax');
  
  // Handle background image
  if (bgImage) {
    const media = getMediaById(parseInt(bgImage));
    if (media) {
      styles.push(`background-image: url(${media.localPath})`);
      styles.push('background-size: cover');
      styles.push('background-position: center');
      classes.push('bg-cover', 'bg-center');
    }
  }
  
  // Handle video background
  if (bgVideo === 'true' && (videoMp4 || videoWebm)) {
    // This will be handled by a separate video component
    // For now, we'll add a marker class
    classes.push('has-video-background');
    if (videoMp4) element.setAttribute('data-video-mp4', videoMp4);
    if (videoWebm) element.setAttribute('data-video-webm', videoWebm);
  }
  
  // Handle parallax
  if (parallax === 'true') {
    classes.push('parallax-bg');
  }
  
  // Handle inline styles from shortcode attributes
  const colorOverlay = element.getAttribute('color_overlay');
  const overlayStrength = element.getAttribute('overlay_strength');
  const topPadding = element.getAttribute('top_padding');
  const bottomPadding = element.getAttribute('bottom_padding');
  
  if (colorOverlay) {
    const opacity = overlayStrength ? parseFloat(overlayStrength) : 0.5;
    styles.push(`position: relative`);
    classes.push('relative');
    
    // Add overlay as a child element marker
    element.setAttribute('data-color-overlay', colorOverlay);
    element.setAttribute('data-overlay-opacity', opacity.toString());
  }
  
  if (topPadding) {
    styles.push(`padding-top: ${topPadding}`);
  }
  
  if (bottomPadding) {
    styles.push(`padding-bottom: ${bottomPadding}`);
  }
  
  if (styles.length > 0) {
    result.style = styles.join('; ');
  }
  
  if (classes.length > 0) {
    result.className = classes.join(' ');
  }
  
  return result;
}

// Sub-components for specific content types
export const ContentBlock: React.FC<{
  title?: string;
  content: string;
  className?: string;
}> = ({ title, content, className = '' }) => (
  <div className={cn('mb-8', className)}>
    {title && <h3 className="text-2xl font-bold mb-4">{title}</h3>}
    <ContentRenderer content={content} />
  </div>
);

export const RichText: React.FC<{
  html: string;
  className?: string;
}> = ({ html, className = '' }) => (
  <ContentRenderer content={html} className={className} />
);

export default ContentRenderer;