/**
 * HTMLEditor Testing Integration
 *
 * Console-controlled testing component for HTMLEditor integration
 * Can be toggled on/off without affecting existing EmailWrapper functionality
 */

import React, { useState, useEffect } from 'react';
import { IntlProvider } from 'react-intl';
import HTMLEditor from '../../../v2Components/HtmlEditor';
import { HTML_EDITOR_VARIANTS } from '../../../v2Components/HtmlEditor/constants';
import { LAYOUT_TYPES } from '../../../v2Components/HtmlEditor/components/InAppPreviewPane/constants';

const HTMLEditorTesting = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [variant, setVariant] = useState(HTML_EDITOR_VARIANTS.EMAIL);
  const [layoutType, setLayoutType] = useState(LAYOUT_TYPES.MODAL);
  const [content, setContent] = useState('<h1>Test HTML Editor</h1><p>This is a test integration.</p>');

  // Expose console methods
  useEffect(() => {
    // Create global testing interface
    window.htmlEditorTest = {
      // Show/Hide editor
      show: () => {
        setIsVisible(true);
      },

      hide: () => {
        setIsVisible(false);
      },

      toggle: () => {
        setIsVisible((prev) => !prev);
      },

      // Variant control
      setVariant: (newVariant) => {
        if (['email', 'inapp'].includes(newVariant)) {
          setVariant(newVariant);
        } else {
          console.error('❌ Invalid variant. Use: "email" or "inapp"');
        }
      },

      // Layout control (for InApp variant)
      setLayout: (layout) => {
        const validLayouts = Object.values(LAYOUT_TYPES);
        if (validLayouts.includes(layout)) {
          setLayoutType(layout);
        } else {
          console.error(`❌ Invalid layout. Use: ${validLayouts.join(', ')}`);
        }
      },

      // Content control
      setContent: (newContent) => {
        setContent(newContent);
      },

      getContent: () => {
        return content;
      },

      // Status
      status: () => {
      },

      // Help
      help: () => {
      },
    };

    // Show help on first load

    // Cleanup on unmount
    return () => {
      if (window.htmlEditorTest) {
        delete window.htmlEditorTest;
      }
    };
  }, [isVisible, content, variant, layoutType]);

  // Don't render anything if not visible
  if (!isVisible) {
    return null;
  }

  return (
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        zIndex: 9999,
        display: 'flex',
        flexDirection: 'column',
        padding: '20px',
      }}>
      {/* Header */}
      <div
        style={{
          backgroundColor: '#fff',
          padding: '10px 20px',
          borderRadius: '8px 8px 0 0',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          borderBottom: '1px solid #ddd',
        }}>
        <div>
          <strong>HTMLEditor Testing Mode</strong>
          <span style={{ marginLeft: '20px', color: '#666' }}>
            Variant:
            {' '}
            {variant}
            {' '}
| Layout:
            {' '}
            {layoutType}
          </span>
        </div>
        <button
          onClick={() => setIsVisible(false)}
          style={{
            background: '#ff4d4f',
            color: 'white',
            border: 'none',
            padding: '5px 15px',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          Close
        </button>
      </div>

      {/* Editor Container */}
      <div
        style={{
          flex: 1,
          backgroundColor: '#fff',
          borderRadius: '0 0 8px 8px',
          overflow: 'hidden',
        }}>
        <IntlProvider locale="en" messages={{}}>
          <HTMLEditor
            variant={variant}
            layoutType={layoutType}
            initialContent={content}
            onContentChange={(newContent) => {
              setContent(newContent);
            }}
            onSave={() => {
            }}
          />
        </IntlProvider>
      </div>
    </div>
  );
};

export default HTMLEditorTesting;
