import { ContentRenderer } from '@/components/content/ContentRenderer';
import { Section } from '@/components/content/Section';
import { Container } from '@/components/ui/Container';

// Test content with various WordPress shortcodes and images
const testContent = `
<div class="vc-row" style="background-color: #f8f9fa; padding-top: 4rem; padding-bottom: 4rem;">
  <div class="vc-column">
    <div class="vc-column-text">
      <h2>WordPress Shortcode Test</h2>
      <p>This page demonstrates the enhanced ContentRenderer handling various WordPress shortcodes and image formats.</p>
    </div>
  </div>
</div>

<div class="vc-row">
  <div class="vc-column" style="width: 50%;">
    <div class="vc-column-text">
      <h3>Left Column</h3>
      <p>This column uses vc_col-md-6 shortcode converted to Tailwind classes.</p>
      <a href="/contact" class="btn btn-primary">Contact Button</a>
    </div>
  </div>
  <div class="vc-column" style="width: 50%;">
    <div class="vc-column-text">
      <h3>Right Column</h3>
      <p>Content in the right column with proper spacing and styling.</p>
      <img data-wp-image-id="6517" alt="Medium Voltage Cable" class="alignnone size-medium" />
    </div>
  </div>
</div>

<div class="vc-row" style="background-image: url(/media/45524-5.webp); background-size: cover; background-position: center;">
  <div class="vc-column">
    <div class="vc-column-text" style="color: white; text-align: center;">
      <h2 style="color: white;">Background Image Section</h2>
      <p style="color: white;">This section has a background image from WordPress media library.</p>
    </div>
  </div>
</div>

<div class="vc-row">
  <div class="vc-column">
    <div class="vc-column-text">
      <h3>Image Gallery</h3>
      <p>Multiple images with different alignments:</p>
      <img data-wp-image-id="6521" alt="Low Voltage Cable" class="alignleft size-thumbnail" style="margin-right: 1rem; margin-bottom: 1rem;" />
      <img data-wp-image-id="47052" alt="NA2XSF2X Cable" class="alignright size-thumbnail" style="margin-left: 1rem; margin-bottom: 1rem;" />
      <p>Images should display correctly with proper Next.js Image optimization and alignment.</p>
    </div>
  </div>
</div>

<div class="vc-row" style="background-color: #0a0a0a; color: white; padding-top: 3rem; padding-bottom: 3rem;">
  <div class="vc-column">
    <div class="vc-column-text" style="color: white;">
      <h3 style="color: white;">Dark Section with Buttons</h3>
      <p style="color: white;">Various button styles should work correctly:</p>
      <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
        <a href="#" class="btn btn-primary">Primary Button</a>
        <a href="#" class="btn btn-secondary">Secondary Button</a>
        <a href="#" class="btn btn-outline">Outline Button</a>
        <a href="#" class="btn btn-primary btn-large">Large Button</a>
      </div>
    </div>
  </div>
</div>

<div class="vc-row">
  <div class="vc-column">
    <div class="vc-column-text">
      <h3>Typography Test</h3>
      <p>Regular paragraph text with <strong>bold text</strong>, <em>italic text</em>, and <a href="https://example.com">external links</a>.</p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <blockquote>
        <p>This is a blockquote with proper styling.</p>
      </blockquote>
    </div>
  </div>
</div>

<div class="vc-row" style="background-color: #e9ecef; padding-top: 2rem; padding-bottom: 2rem;">
  <div class="vc-column" style="width: 33.33%;">
    <div class="vc-column-text">
      <h4>Column 1</h4>
      <p>One-third width column.</p>
    </div>
  </div>
  <div class="vc-column" style="width: 33.33%;">
    <div class="vc-column-text">
      <h4>Column 2</h4>
      <p>One-third width column.</p>
    </div>
  </div>
  <div class="vc-column" style="width: 33.33%;">
    <div class="vc-column-text">
      <h4>Column 3</h4>
      <p>One-third width column.</p>
    </div>
  </div>
</div>

<div class="vc-row">
  <div class="vc-column">
    <div class="vc-column-text">
      <h3>Direct Image References</h3>
      <p>Images referenced by ID should be converted to Next.js Image components:</p>
      <img data-wp-image-id="10797" alt="Medium Voltage Cables" class="aligncenter size-large" />
    </div>
  </div>
</div>
`;

const testContentWithShortcodes = `
[vc_row bg_color="#f8f9fa" top_padding="4%" bottom_padding="4%"]
  [vc_column width="12"]
    [vc_column_text]
      <h2>Raw Shortcode Test</h2>
      <p>This content uses raw WordPress shortcodes that should be processed by html-compat.ts</p>
    [/vc_column_text]
  [/vc_column]
[/vc_row]

[vc_row]
  [vc_column width="6"]
    [vc_column_text]
      <h3>Left Side</h3>
      <p>Content with [vc_btn color="primary" title="Click Here" link="#"] embedded.</p>
    [/vc_column_text]
  [/vc_column]
  [vc_column width="6"]
    [vc_column_text]
      <h3>Right Side</h3>
      <p>Another column with [vc_single_image src="6521" align="right"] embedded.</p>
    [/vc_column_text]
  [/vc_column]
[/vc_row]

[vc_row bg_image="45528" top_padding="15%" bottom_padding="15%" color_overlay="#000000" overlay_strength="0.7"]
  [vc_column]
    [vc_column_text text_color="light" text_align="center"]
      <h2>Background Image with Overlay</h2>
      <p>This should show an image with dark overlay and white text.</p>
    [/vc_column_text]
  [/vc_column]
[/vc_row]

[vc_row enable_gradient="true" gradient_direction="left_to_right"]
  [vc_column]
    [vc_column_text text_align="center"]
      <h3>Gradient Background</h3>
      <p>This row should have a gradient background.</p>
    [/vc_column_text]
  [/vc_column]
[/vc_row]
`;

export default function ComponentsDemoPage() {
  return (
    <Container>
      <Section>
        <div className="space-y-8">
          <div className="text-center space-y-4">
            <h1 className="text-4xl font-bold">ContentRenderer Test Page</h1>
            <p className="text-lg text-gray-600">
              Testing WordPress shortcode conversion and image handling
            </p>
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-2xl font-bold mb-4">Processed HTML Content</h2>
            <ContentRenderer 
              content={testContent} 
              sanitize={true}
              processAssets={true}
              convertClasses={true}
            />
          </div>

          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-2xl font-bold mb-4">Raw Shortcode Content</h2>
            <ContentRenderer 
              content={testContentWithShortcodes} 
              sanitize={true}
              processAssets={true}
              convertClasses={true}
            />
          </div>

          <div className="bg-blue-50 rounded-lg p-6">
            <h3 className="text-xl font-bold mb-3">What This Tests:</h3>
            <ul className="list-disc list-inside space-y-2">
              <li>✅ [vc_row] → flex containers with background support</li>
              <li>✅ [vc_column] → responsive width classes</li>
              <li>✅ [vc_column_text] → prose styling</li>
              <li>✅ [vc_btn] → styled buttons</li>
              <li>✅ [vc_single_image] → Next.js Image components</li>
              <li>✅ Background images from WordPress IDs</li>
              <li>✅ Color overlays and gradients</li>
              <li>✅ Image alignment and sizing</li>
              <li>✅ URL replacement from data layer</li>
              <li>✅ Inline styles and attributes</li>
            </ul>
          </div>
        </div>
      </Section>
    </Container>
  );
}