igny8/sites/src/utils/templateEngine.tsx

/**
 * Template Engine
 * Phase 5: Sites Renderer & Publishing
 * 
 * Renders blocks using shared components from the component library.
 */
import React from 'react';
import type { Block } from '../types';

/**
 * Render a block using the template engine.
 * Imports shared components dynamically.
 */
export function renderTemplate(block: Block): React.ReactElement {
  const { type, data } = block;

  try {
    // Try to import shared component
    // This will be replaced with actual component imports once shared components are available
    switch (type) {
      case 'hero':
        return renderHeroBlock(data);
      case 'text':
        return renderTextBlock(data);
      case 'image':
        return renderImageBlock(data);
      case 'button':
        return renderButtonBlock(data);
      case 'section':
        return renderSectionBlock(data);
      case 'grid':
        return renderGridBlock(data);
      case 'card':
        return renderCardBlock(data);
      case 'list':
        return renderListBlock(data);
      case 'quote':
        return renderQuoteBlock(data);
      case 'video':
        return renderVideoBlock(data);
      case 'form':
        return renderFormBlock(data);
      case 'accordion':
        return renderAccordionBlock(data);
      default:
        return <div className="block-unknown">Unknown block type: {type}</div>;
    }
  } catch (error) {
    console.error(`Error rendering block type ${type}:`, error);
    return <div className="block-error">Error rendering block: {type}</div>;
  }
}

/**
 * Render hero block.
 */
function renderHeroBlock(data: Record<string, any>): React.ReactElement {
  return (
    <section className="block-hero" style={{ padding: '4rem 2rem', textAlign: 'center', background: data.background || '#f0f0f0' }}>
      <h1>{data.title || 'Hero Title'}</h1>
      {data.subtitle && <p>{data.subtitle}</p>}
      {data.buttonText && (
        <a href={data.buttonLink || '#'} className="button">
          {data.buttonText}
        </a>
      )}
    </section>
  );
}

/**
 * Render text block.
 */
function renderTextBlock(data: Record<string, any>): React.ReactElement {
  return (
    <div className="block-text" style={{ padding: '2rem' }}>
      {data.content && <div dangerouslySetInnerHTML={{ __html: data.content }} />}
    </div>
  );
}

/**
 * Render image block.
 */
function renderImageBlock(data: Record<string, any>): React.ReactElement {
  return (
    <div className="block-image" style={{ padding: '1rem' }}>
      {data.src && (
        <img 
          src={data.src} 
          alt={data.alt || ''} 
          style={{ maxWidth: '100%', height: 'auto' }}
        />
      )}
      {data.caption && <p style={{ fontSize: '0.9rem', color: '#666' }}>{data.caption}</p>}
    </div>
  );
}

/**
 * Render button block.
 */
function renderButtonBlock(data: Record<string, any>): React.ReactElement {
  return (
    <div className="block-button" style={{ padding: '1rem', textAlign: data.align || 'center' }}>
      <a 
        href={data.link || '#'} 
        className="button"
        style={{ 
          display: 'inline-block', 
          padding: '0.75rem 1.5rem', 
          background: data.color || '#007bff', 
          color: 'white', 
          textDecoration: 'none',
          borderRadius: '4px'
        }}
      >
        {data.text || 'Button'}
      </a>
    </div>
  );
}

/**
 * Render section block.
 */
function renderSectionBlock(data: Record<string, any>): React.ReactElement {
  return (
    <section className="block-section" style={{ padding: '3rem 2rem', background: data.background || 'transparent' }}>
      {data.title && <h2>{data.title}</h2>}
      {data.content && <div dangerouslySetInnerHTML={{ __html: data.content }} />}
    </section>
  );
}

/**
 * Render grid block.
 */
function renderGridBlock(data: Record<string, any>): React.ReactElement {
  const columns = data.columns || 3;
  return (
    <div className="block-grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: '2rem', padding: '2rem' }}>
      {data.items?.map((item: any, index: number) => (
        <div key={index} className="grid-item">
          {item.content && <div dangerouslySetInnerHTML={{ __html: item.content }} />}
        </div>
      ))}
    </div>
  );
}

/**
 * Render card block.
 */
function renderCardBlock(data: Record<string, any>): React.ReactElement {
  return (
    <div className="block-card" style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '1.5rem', margin: '1rem' }}>
      {data.title && <h3>{data.title}</h3>}
      {data.content && <div dangerouslySetInnerHTML={{ __html: data.content }} />}
    </div>
  );
}

/**
 * Render list block.
 */
function renderListBlock(data: Record<string, any>): React.ReactElement {
  const listType = data.ordered ? 'ol' : 'ul';
  return React.createElement(
    listType,
    { className: 'block-list', style: { padding: '1rem 2rem' } },
    data.items?.map((item: string, index: number) => (
      <li key={index}>{item}</li>
    ))
  );
}

/**
 * Render quote block.
 */
function renderQuoteBlock(data: Record<string, any>): React.ReactElement {
  return (
    <blockquote className="block-quote" style={{ padding: '2rem', borderLeft: '4px solid #007bff', margin: '2rem 0', fontStyle: 'italic' }}>
      {data.quote && <p>{data.quote}</p>}
      {data.author && <cite>— {data.author}</cite>}
    </blockquote>
  );
}

/**
 * Render video block.
 */
function renderVideoBlock(data: Record<string, any>): React.ReactElement {
  return (
    <div className="block-video" style={{ padding: '1rem' }}>
      {data.src && (
        <video controls style={{ maxWidth: '100%' }}>
          <source src={data.src} type={data.type || 'video/mp4'} />
        </video>
      )}
      {data.embed && <div dangerouslySetInnerHTML={{ __html: data.embed }} />}
    </div>
  );
}

/**
 * Render form block.
 */
function renderFormBlock(data: Record<string, any>): React.ReactElement {
  return (
    <form className="block-form" style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto' }}>
      {data.fields?.map((field: any, index: number) => (
        <div key={index} style={{ marginBottom: '1rem' }}>
          <label>{field.label}</label>
          <input 
            type={field.type || 'text'} 
            name={field.name}
            placeholder={field.placeholder}
            style={{ width: '100%', padding: '0.5rem' }}
          />
        </div>
      ))}
      <button type="submit" style={{ padding: '0.75rem 1.5rem', background: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }}>
        {data.submitText || 'Submit'}
      </button>
    </form>
  );
}

/**
 * Render accordion block.
 */
function renderAccordionBlock(data: Record<string, any>): React.ReactElement {
  return (
    <div className="block-accordion" style={{ padding: '1rem' }}>
      {data.items?.map((item: any, index: number) => (
        <details key={index} style={{ marginBottom: '1rem', border: '1px solid #ddd', borderRadius: '4px', padding: '1rem' }}>
          <summary style={{ cursor: 'pointer', fontWeight: 'bold' }}>{item.title}</summary>
          <div style={{ marginTop: '1rem' }}>{item.content}</div>
        </details>
      ))}
    </div>
  );
}