import React, { useState } from 'react';
import { createPortal } from 'react-dom';
import { __ } from '@wordpress/i18n';
import InlineToolbarButton from './InlineToolbarButton';
import styles from './InlineToolbar.module.css';
import { getFormats, availableFormats } from './formats';
import { ColorPalettePopover } from './formats/highlightFormat';

/**
 * InlineToolbar - 汎用的なインラインツールバーコンポーネント
 * 新しいフォーマット構成に対応
 * 
 * @param {Object} props
 * @param {Object} props.position - ツールバーの位置 { x, y }
 * @param {boolean} props.visible - 表示状態
 * @param {Function} props.onFormatApply - フォーマット適用時のコールバック
 * @param {Array} props.customButtons - カスタムボタンの配列
 * @param {Array} props.enabledFormats - 有効なフォーマットの配列
 * @param {Object} props.activeFormats - アクティブなフォーマットの状態
 */
export const InlineToolbar = ({
  position = { x: 0, y: 0 },
  visible = false,
  onFormatApply,
  customButtons = [],
  enabledFormats = ['bold', 'italic'],
  activeFormats = {},
  // 下位互換性のための従来のコールバック
  onBold,
  onItalic,
  onHighlight,
  onLink,
  // カラーパレット用の追加props
  editorRef,
  currentRange,
}) => {
  const [showColorPalette, setShowColorPalette] = useState(false);
  
  // ハイライト用の独立した状態管理
  const [highlightPaletteOpen, setHighlightPaletteOpen] = useState(false);
  
  // カラーパレット操作中フラグ
  const paletteInteractionRef = React.useRef(false);
  
  // カラーパネルを閉じる関数
  const closeColorPalette = React.useCallback(() => {
    paletteInteractionRef.current = false;
    setHighlightPaletteOpen(false);
  }, []);
  
  // カラーパレットが開いている間、選択範囲を維持
  React.useEffect(() => {
    if (!highlightPaletteOpen || !currentRange) return;
    
    const intervalId = setInterval(() => {
      try {
        const selection = window.getSelection();
        if (selection.rangeCount === 0 || selection.toString() === '') {
          // 選択範囲が失われた場合は復元
          selection.removeAllRanges();
          selection.addRange(currentRange.cloneRange());
        }
      } catch (error) {
        console.debug('選択範囲維持エラー:', error);
      }
    }, 100); // 100msごとにチェック
    
    return () => clearInterval(intervalId);
  }, [highlightPaletteOpen, currentRange]);
  
  // グローバルクリックイベントの処理
  React.useEffect(() => {
    if (!highlightPaletteOpen) return;
    
    const handleGlobalClick = (event) => {
      const target = event.target;
      
      // カラーパレット内のクリックは無視
      if (target.closest('.components-color-palette-popover')) {
        return;
      }
      
      // 非常に具体的なツールバー判定（実際のインラインツールバーのみ）
      const isActualToolbarClick = target.closest('div[style*="position: fixed"]') && 
                                  target.closest('div[style*="z-index: 1000002"]');
      
      // カラーパレット専用の閉じるボタンかチェック
      const isCloseButton = target.title === '閉じる' && target.textContent === '✕';
      
      if (isActualToolbarClick && !isCloseButton) {
        return;
      }

      closeColorPalette();
    };
    
    // より確実にイベントを検出するため、複数の方法でリスナーを設定
    document.addEventListener('click', handleGlobalClick, true);
    document.addEventListener('mousedown', handleGlobalClick, true);
    
    // タイマーでの定期チェックも追加（フォールバック）
    const intervalId = setInterval(() => {
      // フォーカスが変わったかチェック
      const activeElement = document.activeElement;
      if (activeElement && 
          !activeElement.closest('.components-color-palette-popover') &&
          !activeElement.closest('[class*="toolbar"]') &&
          activeElement !== editorRef?.current) {
        closeColorPalette();
      }
    }, 500);
    
    return () => {
      document.removeEventListener('click', handleGlobalClick, true);
      document.removeEventListener('mousedown', handleGlobalClick, true);
      clearInterval(intervalId);
    };
  }, [highlightPaletteOpen, editorRef, closeColorPalette]);
  
  if (!visible) return null;

  const toolbarStyle = {
    left: `${position.x}px`,
    top: `${position.y}px`,
    transform: 'translateX(-50%)',
  };

  // 有効なフォーマットを取得
  const formats = getFormats(enabledFormats);

  // フォーマットボタンを生成
  const formatButtons = formats.map(format => {
    // 下位互換性のためのコールバック選択
    const getCallback = () => {
      if (onFormatApply) return () => onFormatApply(format.key);
      
      // 従来のコールバック
      switch (format.key) {
        case 'bold': return onBold;
        case 'italic': return onItalic;
        case 'highlight': return onHighlight;
        case 'link': return onLink;
        default: return null;
      }
    };

    const callback = getCallback();
    if (!callback) return null;

    // アイコンを正しく取得（関数コンポーネントの場合は実行）
    const getIcon = () => {
      if (React.isValidElement(format.icon)) {
        return format.icon;
      }
      if (typeof format.icon === 'function') {
        return React.createElement(format.icon);
      }
      if (typeof format.icon === 'string') {
        return format.icon;
      }
      return null;
    };

    // ハイライト（テキストカラー）機能の場合は特別な処理
    if (format.key === 'highlight') {
      return {
        key: format.key,
        icon: getIcon(),
        title: format.title,
        onClick: (e) => {
          e.preventDefault();
          e.stopPropagation();
          
          // 現在の選択範囲を確実に保存
          const selection = window.getSelection();
          if (selection.rangeCount > 0 && currentRange) {
            // 選択範囲を即座に復元（失われないように）
            setTimeout(() => {
              try {
                const newSelection = window.getSelection();
                newSelection.removeAllRanges();
                newSelection.addRange(currentRange.cloneRange());
              } catch (error) {
                // selection restore failed
              }
            }, 10);
          }
          
          paletteInteractionRef.current = true;
          setHighlightPaletteOpen(!highlightPaletteOpen);
          
          // 500ms後にフラグをリセット
          setTimeout(() => {
            paletteInteractionRef.current = false;
          }, 500);
        },
        isActive: activeFormats[format.key] || false,
        hasDropdown: false, // 通常のドロップダウン機能を無効化
        isHighlight: true, // ハイライト識別フラグ
      };
    }

    return {
      key: format.key,
      icon: getIcon(),
      title: format.title,
      onClick: callback,
      isActive: activeFormats[format.key] || false,
    };
  }).filter(Boolean);

  // セパレーターを挿入する位置を定義
  const separatorPositions = [2, 4]; // 2番目と4番目のボタンの後

  const toolbar = createPortal(
    <div 
      className={`${styles.toolbar} ${!visible ? styles.toolbarHidden : ''}`}
      style={toolbarStyle}
      onClick={(e) => e.stopPropagation()}
    >
      {formatButtons.map((button, index) => (
        <React.Fragment key={button.key}>
          <InlineToolbarButton
            icon={button.icon}
            onClick={button.onClick}
            isActive={button.isActive}
            title={button.title}
            hasDropdown={button.hasDropdown}
            dropdownContent={button.dropdownContent}
          />
          {separatorPositions.includes(index + 1) && 
            formatButtons.length > index + 1 && (
              <div className={styles.separator} />
            )}
        </React.Fragment>
      ))}
      
      {/* カスタムボタン */}
      {customButtons.length > 0 && formatButtons.length > 0 && (
        <div className={styles.separator} />
      )}
      
      {customButtons.map((button, index) => (
        <InlineToolbarButton
          key={`custom-${index}`}
          icon={button.icon}
          onClick={button.onClick}
          isActive={button.isActive}
          title={button.title}
          disabled={button.disabled}
          customIcon={button.customIcon}
        />
      ))}
    </div>,
    document.body
  );


  // ハイライト用の独立したカラーパレット
  const highlightPalette = highlightPaletteOpen ? createPortal(
    <div
      style={{
        position: 'fixed',
        left: `${position.x}px`,
        top: `${position.y + 50}px`,
        transform: 'translateX(-50%)',
        zIndex: 1000002,
      }}
    >
      <ColorPalettePopover
        isVisible={true}
        onColorSelect={(color) => {
          // 色を選択する前に選択範囲を再度復元
          if (currentRange) {
            try {
              const selection = window.getSelection();
              selection.removeAllRanges();
              selection.addRange(currentRange.cloneRange());
            } catch (error) {
              // selection restore failed
            }
          }
          
          // 選択された色でフォーマットを適用
          const format = availableFormats['highlight'];
          if (format && format.apply && editorRef && currentRange) {
            format.apply(editorRef, currentRange, color);
          }
        }}
        onClose={closeColorPalette}
        toolbarPosition={position}
        selectedTextPosition={(() => {
          // 選択されたテキストの実際の高さを取得
          let textHeight = 25; // デフォルト値
          if (currentRange) {
            try {
              const rect = currentRange.getBoundingClientRect();
              textHeight = rect.height;
            } catch (e) {
              console.debug('テキスト高さの取得に失敗:', e);
            }
          }
          
          return {
            x: position.x,
            y: position.y + 50, // ツールバーは選択テキストの50px上にあるため
            height: textHeight
          };
        })()}
      />
    </div>,
    document.body
  ) : null;

  return (
    <>
      {toolbar}
      {highlightPalette}
    </>
  );
};

export default InlineToolbar;