/**
 * Page Type Renderer
 * Renders page-type-specific templates for different page types.
 * 
 * Each page type has its own template structure optimized for that content type.
 */
import React from 'react';
import type { PageDefinition, Block } from '../types';
import { renderTemplate } from './templateEngine';

/**
 * Render a page based on its type.
 * Falls back to default rendering if no specific template exists.
 */
export function renderPageByType(page: PageDefinition, blocks: Block[]): React.ReactElement {
  // Determine page type - use page.type if available, otherwise infer from slug
  let pageType = page.type;
  if (!pageType || pageType === 'custom') {
    // Infer type from slug
    if (page.slug === 'home') pageType = 'home';
    else if (page.slug === 'products') pageType = 'products';
    else if (page.slug === 'blog') pageType = 'blog';
    else if (page.slug === 'contact') pageType = 'contact';
    else if (page.slug === 'about') pageType = 'about';
    else if (page.slug === 'services') pageType = 'services';
    else pageType = 'custom';
  }

  switch (pageType) {
    case 'home':
      return renderHomePage(page, blocks);
    case 'products':
      return renderProductsPage(page, blocks);
    case 'blog':
      return renderBlogPage(page, blocks);
    case 'contact':
      return renderContactPage(page, blocks);
    case 'about':
      return renderAboutPage(page, blocks);
    case 'services':
      return renderServicesPage(page, blocks);
    case 'custom':
    default:
      return renderCustomPage(page, blocks);
  }
}

/**
 * Home Page Template
 * Structure: Hero → Features → Testimonials → CTA
 */
function renderHomePage(page: PageDefinition, blocks: Block[]): React.ReactElement {
  // Find specific blocks
  const heroBlock = blocks.find(b => b.type === 'hero');
  const featuresBlock = blocks.find(b => b.type === 'features' || b.type === 'grid');
  const testimonialsBlock = blocks.find(b => b.type === 'testimonials');
  const ctaBlock = blocks.find(b => b.type === 'cta');
  const otherBlocks = blocks.filter(b => 
    !['hero', 'features', 'grid', 'testimonials', 'cta'].includes(b.type)
  );

  return (
    <div className="page-home" data-page-slug={page.slug}>
      {/* Hero Section */}
      {heroBlock && (
        <section className="home-hero">
          {renderTemplate(heroBlock)}
        </section>
      )}

      {/* Features Section */}
      {featuresBlock && (
        <section className="home-features" style={{ padding: '3rem 2rem', background: '#f9fafb' }}>
          {renderTemplate(featuresBlock)}
        </section>
      )}

      {/* Other Content Blocks */}
      {otherBlocks.length > 0 && (
        <section className="home-content" style={{ padding: '3rem 2rem' }}>
          {otherBlocks.map((block, index) => (
            <div key={index} className="block" data-block-type={block.type}>
              {renderTemplate(block)}
            </div>
          ))}
        </section>
      )}

      {/* Testimonials Section */}
      {testimonialsBlock && (
        <section className="home-testimonials" style={{ padding: '3rem 2rem', background: '#f9fafb' }}>
          {renderTemplate(testimonialsBlock)}
        </section>
      )}

      {/* CTA Section */}
      {ctaBlock && (
        <section className="home-cta">
          {renderTemplate(ctaBlock)}
        </section>
      )}
    </div>
  );
}

/**
 * Products Page Template
 * Structure: Title → Product Grid → Filters (if available)
 */
function renderProductsPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
  const productsBlock = blocks.find(b => b.type === 'products' || b.type === 'grid');
  const otherBlocks = blocks.filter(b => b.type !== 'products' && b.type !== 'grid');

  return (
    <div className="page-products" data-page-slug={page.slug}>
      <header style={{ marginBottom: '2rem', textAlign: 'center' }}>
        <h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>
          {page.title}
        </h1>
      </header>

      {/* Product Grid */}
      {productsBlock && (
        <section className="products-grid" style={{ padding: '2rem 0' }}>
          {renderTemplate(productsBlock)}
        </section>
      )}

      {/* Other Content */}
      {otherBlocks.length > 0 && (
        <section className="products-content" style={{ padding: '2rem 0' }}>
          {otherBlocks.map((block, index) => (
            <div key={index} className="block" data-block-type={block.type}>
              {renderTemplate(block)}
            </div>
          ))}
        </section>
      )}
    </div>
  );
}

/**
 * Blog Page Template
 * Structure: Title → Post List/Grid → Sidebar (if available)
 */
function renderBlogPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
  const heroBlock = blocks.find(b => b.type === 'hero');
  const contentBlocks = blocks.filter(b => b.type !== 'hero');

  return (
    <div className="page-blog" data-page-slug={page.slug}>
      {/* Hero/Header */}
      {heroBlock ? (
        <section className="blog-hero">
          {renderTemplate(heroBlock)}
        </section>
      ) : (
        <header style={{ marginBottom: '2rem', textAlign: 'center', padding: '2rem 0' }}>
          <h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
            {page.title}
          </h1>
        </header>
      )}

      {/* Blog Content - Grid Layout for Posts */}
      <section className="blog-content" style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', 
        gap: '2rem',
        padding: '2rem 0'
      }}>
        {contentBlocks.map((block, index) => (
          <article key={index} className="blog-post" style={{
            border: '1px solid #e5e7eb',
            borderRadius: '8px',
            padding: '1.5rem',
            background: '#fff'
          }}>
            {renderTemplate(block)}
          </article>
        ))}
      </section>
    </div>
  );
}

/**
 * Contact Page Template
 * Structure: Title → Contact Info → Form → Map (if available)
 */
function renderContactPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
  const formBlock = blocks.find(b => b.type === 'form');
  const textBlocks = blocks.filter(b => b.type === 'text' || b.type === 'section');
  const mapBlock = blocks.find(b => b.type === 'image' && b.data?.caption?.toLowerCase().includes('map'));
  const otherBlocks = blocks.filter(b => 
    b.type !== 'form' && 
    b.type !== 'text' && 
    b.type !== 'section' && 
    !(b.type === 'image' && b.data?.caption?.toLowerCase().includes('map'))
  );

  return (
    <div className="page-contact" data-page-slug={page.slug}>
      <header style={{ marginBottom: '2rem', textAlign: 'center' }}>
        <h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>
          {page.title}
        </h1>
      </header>

      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
        gap: '2rem',
        padding: '2rem 0'
      }}>
        {/* Contact Information */}
        {textBlocks.length > 0 && (
          <section className="contact-info">
            {textBlocks.map((block, index) => (
              <div key={index} className="block" data-block-type={block.type}>
                {renderTemplate(block)}
              </div>
            ))}
          </section>
        )}

        {/* Contact Form */}
        {formBlock && (
          <section className="contact-form">
            {renderTemplate(formBlock)}
          </section>
        )}
      </div>

      {/* Map */}
      {mapBlock && (
        <section className="contact-map" style={{ marginTop: '2rem' }}>
          {renderTemplate(mapBlock)}
        </section>
      )}

      {/* Other Content */}
      {otherBlocks.length > 0 && (
        <section className="contact-other" style={{ marginTop: '2rem' }}>
          {otherBlocks.map((block, index) => (
            <div key={index} className="block" data-block-type={block.type}>
              {renderTemplate(block)}
            </div>
          ))}
        </section>
      )}
    </div>
  );
}

/**
 * About Page Template
 * Structure: Hero → Mission → Team/Values → Stats
 */
function renderAboutPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
  const heroBlock = blocks.find(b => b.type === 'hero');
  const statsBlock = blocks.find(b => b.type === 'stats');
  const servicesBlock = blocks.find(b => b.type === 'services' || b.type === 'features');
  const otherBlocks = blocks.filter(b => 
    !['hero', 'stats', 'services', 'features'].includes(b.type)
  );

  return (
    <div className="page-about" data-page-slug={page.slug}>
      {/* Hero Section */}
      {heroBlock && (
        <section className="about-hero">
          {renderTemplate(heroBlock)}
        </section>
      )}

      {/* Main Content */}
      <section className="about-content" style={{ padding: '3rem 2rem' }}>
        {otherBlocks.map((block, index) => (
          <div key={index} className="block" data-block-type={block.type} style={{ marginBottom: '2rem' }}>
            {renderTemplate(block)}
          </div>
        ))}
      </section>

      {/* Services/Features Section */}
      {servicesBlock && (
        <section className="about-services" style={{ padding: '3rem 2rem', background: '#f9fafb' }}>
          {renderTemplate(servicesBlock)}
        </section>
      )}

      {/* Stats Section */}
      {statsBlock && (
        <section className="about-stats" style={{ padding: '3rem 2rem' }}>
          {renderTemplate(statsBlock)}
        </section>
      )}
    </div>
  );
}

/**
 * Services Page Template
 * Structure: Title → Service Cards → Details
 */
function renderServicesPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
  const heroBlock = blocks.find(b => b.type === 'hero');
  const servicesBlock = blocks.find(b => b.type === 'services' || b.type === 'features');
  const otherBlocks = blocks.filter(b => 
    b.type !== 'hero' && b.type !== 'services' && b.type !== 'features'
  );

  return (
    <div className="page-services" data-page-slug={page.slug}>
      {/* Hero/Header */}
      {heroBlock ? (
        <section className="services-hero">
          {renderTemplate(heroBlock)}
        </section>
      ) : (
        <header style={{ marginBottom: '2rem', textAlign: 'center', padding: '2rem 0' }}>
          <h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
            {page.title}
          </h1>
        </header>
      )}

      {/* Services Grid */}
      {servicesBlock && (
        <section className="services-grid" style={{ padding: '2rem 0' }}>
          {renderTemplate(servicesBlock)}
        </section>
      )}

      {/* Additional Content */}
      {otherBlocks.length > 0 && (
        <section className="services-content" style={{ padding: '2rem 0' }}>
          {otherBlocks.map((block, index) => (
            <div key={index} className="block" data-block-type={block.type}>
              {renderTemplate(block)}
            </div>
          ))}
        </section>
      )}
    </div>
  );
}

/**
 * Custom Page Template
 * Default rendering for custom pages - renders all blocks in order
 */
function renderCustomPage(page: PageDefinition, blocks: Block[]): React.ReactElement {
  return (
    <div className="page-custom" data-page-slug={page.slug}>
      <header style={{ marginBottom: '2rem', textAlign: 'center' }}>
        <h1 style={{ fontSize: '2.5rem', fontWeight: 'bold', marginBottom: '1rem' }}>
          {page.title}
        </h1>
      </header>

      <section className="custom-content" style={{ padding: '2rem 0' }}>
        {blocks.map((block, index) => (
          <div key={index} className="block" data-block-type={block.type} style={{ marginBottom: '2rem' }}>
            {renderTemplate(block)}
          </div>
        ))}
      </section>
    </div>
  );
}

