import React, { useMemo, useRef, useEffect } from 'react';
import { Frame, Element } from '@craftjs/core';
import { Container } from '../components/layout/Container';
import { usePages } from '../state/PageContext';
import { DeviceMode } from '../types';
import { DEVICE_WIDTHS } from '../constants/presets';
import { exportBodyHtml } from '../utils/html-export';

interface CanvasProps {
  device: DeviceMode;
}

/**
 * Renders the actual header/footer content from the Craft.js state as a
 * non-interactive preview. This is the user's own authored content.
 */
const ZonePreview: React.FC<{ craftState: string | null; zone: 'header' | 'footer' }> = ({
  craftState,
  zone,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);

  const renderedHtml = useMemo(() => {
    if (!craftState) return null;
    try {
      const result = exportBodyHtml(craftState);
      return result.html || null;
    } catch {
      return null;
    }
  }, [craftState]);

  // Set the rendered HTML into the container via ref (user-authored content)
  useEffect(() => {
    if (containerRef.current && renderedHtml) {
      containerRef.current.textContent = '';
      const wrapper = document.createElement('div');
      wrapper.innerHTML = renderedHtml; // user's own site content
      while (wrapper.firstChild) {
        containerRef.current.appendChild(wrapper.firstChild);
      }
    }
  }, [renderedHtml]);

  if (!renderedHtml) {
    return (
      <div
        data-zone-preview={zone}
        style={{
          width: '100%',
          // Slim hint bar, not a content-height band — an empty zone should not
          // read as a stray spacer between the page and the header/footer.
          padding: '5px 12px',
          backgroundColor: zone === 'header' ? '#ffffff' : '#0f172a',
          color: zone === 'header' ? '#9ca3af' : '#64748b',
          textAlign: 'center',
          fontSize: 11,
          fontStyle: 'italic',
          borderBottom: zone === 'header' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
          borderTop: zone === 'footer' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
          position: 'relative',
          pointerEvents: 'none',
          userSelect: 'none',
        }}
      >
        {zone === 'header'
          ? 'Header (empty -- click Edit Header in Pages tab)'
          : 'Footer (empty -- click Edit Footer in Pages tab)'}
        <div style={{
          position: 'absolute', top: 2, right: 6,
          fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px',
          color: '#f59e0b', background: 'rgba(245,158,11,0.12)', padding: '1px 5px', borderRadius: 3,
        }}>
          {zone}
        </div>
      </div>
    );
  }

  return (
    <div
      ref={containerRef}
      data-zone-preview={zone}
      style={{
        width: '100%',
        position: 'relative',
        pointerEvents: 'none',
        userSelect: 'none',
        borderBottom: zone === 'header' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
        borderTop: zone === 'footer' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
      }}
    />
  );
};

export const Canvas: React.FC<CanvasProps> = ({ device }) => {
  const width = DEVICE_WIDTHS[device];
  const { isEditingHeader, isEditingFooter, headerPage, footerPage } = usePages();

  const isEditingRegularPage = !isEditingHeader && !isEditingFooter;

  const frameStyle = isEditingHeader
    ? { minHeight: '60px', backgroundColor: '#ffffff', padding: '12px 24px', display: 'flex', alignItems: 'center' }
    : isEditingFooter
    ? { minHeight: '60px', backgroundColor: '#0f172a', color: '#94a3b8', padding: '40px 24px', textAlign: 'center' as const }
    : { minHeight: '100vh', backgroundColor: '#ffffff' };

  const frameTag = isEditingHeader ? 'header' : isEditingFooter ? 'footer' : 'div';

  return (
    <div className="editor-canvas">
      <div
        className="canvas-device-frame"
        style={{
          width,
          maxWidth: '100%',
          margin: '0 auto',
          transition: 'width 0.3s ease',
          minHeight: '100%',
        }}
      >
        {(isEditingHeader || isEditingFooter) && (
          <div style={{
            background: 'rgba(245, 158, 11, 0.1)',
            borderBottom: '1px solid rgba(245, 158, 11, 0.3)',
            padding: '6px 12px',
            fontSize: 11,
            fontWeight: 600,
            color: '#f59e0b',
            display: 'flex',
            alignItems: 'center',
            gap: 6,
          }}>
            <i className={`fa ${isEditingHeader ? 'fa-window-maximize' : 'fa-window-minimize'}`} />
            Editing {isEditingHeader ? 'Header' : 'Footer'} -- This content will appear on all pages
          </div>
        )}

        {isEditingRegularPage && (
          <ZonePreview craftState={headerPage.craftState} zone="header" />
        )}

        <Frame>
          <Element
            is={Container}
            canvas
            tag={frameTag}
            style={frameStyle}
          />
        </Frame>

        {isEditingRegularPage && (
          <ZonePreview craftState={footerPage.craftState} zone="footer" />
        )}
      </div>
    </div>
  );
};