import React, { useState, useMemo } from 'react';
import { __ } from '@wordpress/i18n';
import { select } from '@wordpress/data';

/**
 * テキストカラーフォーマット機能
 * 完全独立モジュール - 他の機能に影響しない
 */

// アイコン定義（Tabler Iconsのcolor-pickerアイコン）
export const HighlightIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M11 7L6 2L4 4L9 9" />
    <circle cx="4" cy="4" r="2" />
    <path d="m5.5 5.5 5 5" />
    <path d="m19 13 2 2-2 2-2-2" />
    <path d="m21 15-6-6" />
    <path d="m5 7 4 4" />
    <path d="M9 11a2 2 0 0 0 2 2v2a2 2 0 0 1-2-2z" />
  </svg>
);

// テーマカラーパレットを動的に取得
const getThemeColors = () => {
  try {
    // 複数の方法でカラーパレットを取得を試行
    let colors = [];
    
    // 方法1: core/block-editor ストアから取得
    try {
      const blockEditorSettings = select('core/block-editor')?.getSettings();
      colors = blockEditorSettings?.colors || [];
    } catch (e) {
      console.debug('core/block-editor からの取得に失敗');
    }
    
    // 方法2: core/editor ストアから取得（フォールバック）
    if (colors.length === 0) {
      try {
        const editorSettings = select('core/editor')?.getEditorSettings();
        colors = editorSettings?.colors || [];
      } catch (e) {
        console.debug('core/editor からの取得に失敗');
      }
    }
    
    // 方法3: グローバル変数から取得（最終フォールバック）
    if (colors.length === 0 && window.wp?.blockEditor?.store) {
      try {
        const globalSettings = window.wp.data.select('core/block-editor').getSettings();
        colors = globalSettings?.colors || [];
      } catch (e) {
        console.debug('グローバル変数からの取得に失敗');
      }
    }
    
    // カラーデータが取得できた場合は変換して返す
    if (colors.length > 0) {
      return colors.map(color => ({
        name: color.name || color.slug || 'Unknown',
        color: color.color
      }));
    }
  } catch (error) {
    // theme color fetch failed
  }
  
  // フォールバック用のデフォルトカラー（theme.jsonと同じ色を使用）
  return [
    { name: __('Primary', 'zenblocks'), color: '#0073a8' },
    { name: __('Secondary', 'zenblocks'), color: '#6c757d' },
    { name: __('Accent', 'zenblocks'), color: '#e63946' },
    { name: __('Navy', 'zenblocks'), color: '#264653' },
    { name: __('Orange', 'zenblocks'), color: '#f77f00' },
    { name: __('Green', 'zenblocks'), color: '#2a9d8f' },
    { name: __('Purple', 'zenblocks'), color: '#9c6ade' },
    { name: __('Dark Gray', 'zenblocks'), color: '#495057' },
  ];
};

// シンプルなカラーピッカーコンポーネント（HTML5 input type="color"使用）
export const ColorPalettePopover = ({ isVisible, onColorSelect, onClose, toolbarPosition, selectedTextPosition }) => {
  const [selectedColor, setSelectedColor] = useState('#e63946'); // テーマのアクセントカラー
  
  // テーマカラーをuseMemoで取得（レンダリング毎の再計算を防ぐ）
  const colorPalette = useMemo(() => getThemeColors(), []);

  // カラーパネルの位置を動的に計算（選択されたテキストの位置を基準に）
  const calculatePosition = useMemo(() => {
    if (!selectedTextPosition) return { top: '100%', left: '0' };
    
    const panelHeight = 350; // カラーパネルの概算高さ（余裕をもって）
    const panelWidth = 290; // カラーパネルの幅
    const textHeight = selectedTextPosition.height || 25; // 実際の選択されたテキストの高さ
    const safeMargin = 15; // 安全マージン
    
    const viewportHeight = window.innerHeight;
    const viewportWidth = window.innerWidth;
    const scrollY = window.scrollY;
    const scrollX = window.scrollX;
    
    // 選択されたテキストの絶対位置
    const textAbsoluteY = selectedTextPosition.y;
    const textAbsoluteX = selectedTextPosition.x;
    
    // 下に表示した場合の位置（テキストの下 + 安全マージン）
    const belowY = textAbsoluteY + textHeight + safeMargin;
    // 上に表示した場合の位置（テキストの上 - パネル高さ - 安全マージン）
    const aboveY = textAbsoluteY - panelHeight - safeMargin;
    
    // 画面内に収まるかチェック
    const fitsBelow = belowY + panelHeight <= viewportHeight + scrollY;
    const fitsAbove = aboveY >= scrollY;
    
    // 左右の位置調整
    let leftPosition = '0';
    let rightPosition = 'auto';
    
    // パネルが画面右端を超える場合は右寄せ
    if (textAbsoluteX + panelWidth / 2 > viewportWidth + scrollX) {
      leftPosition = 'auto';
      rightPosition = '0';
    }
    // パネルが画面左端を超える場合は左寄せ
    else if (textAbsoluteX - panelWidth / 2 < scrollX) {
      leftPosition = '0';
    }
    // 中央配置
    else {
      leftPosition = '50%';
      rightPosition = 'auto';
    }
    
    // 上下の位置決定
    if (fitsBelow) {
      // 下に表示（テキストの下）
      return {
        top: `${textHeight + safeMargin}px`,
        bottom: 'auto',
        left: leftPosition,
        right: rightPosition,
        transform: leftPosition === '50%' ? 'translateX(-50%)' : 'none',
      };
    } else if (fitsAbove) {
      // 上に表示（テキストの上）
      return {
        top: 'auto',
        bottom: `${textHeight + safeMargin}px`,
        left: leftPosition,
        right: rightPosition,
        transform: leftPosition === '50%' ? 'translateX(-50%)' : 'none',
      };
    } else {
      // 画面中央に表示（フォールバック）
      return {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        transform: 'translate(-50%, -50%)',
        position: 'fixed',
        zIndex: 1000003,
      };
    }
  }, [selectedTextPosition]);

  if (!isVisible) return null;

  return (
    <div 
      className="components-color-palette-popover"
      style={{
        position: 'absolute',
        ...calculatePosition,
        zIndex: 1000001,
        backgroundColor: '#fff',
        border: '1px solid #ddd',
        borderRadius: '2px',
        padding: '12px',
        boxShadow: '0 2px 6px rgba(0, 0, 0, 0.15)',
        minWidth: '250px',
        maxWidth: '290px',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
        fontSize: '13px',
        lineHeight: '1.4',
      }}
      onClick={(e) => {
        e.stopPropagation();
      }}
      onMouseDown={(e) => {
        e.stopPropagation();
      }}
    >
      {/* ヘッダー部分 */}
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        marginBottom: '12px',
        borderBottom: '1px solid #e0e0e0',
        paddingBottom: '8px'
      }}>
        <div style={{ 
          fontSize: '12px', 
          fontWeight: '500', 
          color: '#1e1e1e',
          textTransform: 'uppercase',
          letterSpacing: '0.5px'
        }}>
          {__('Color', 'zenblocks')}
        </div>
        <button
          onClick={(e) => {
            e.stopPropagation();
            onClose();
          }}
          style={{
            background: 'none',
            border: 'none',
            fontSize: '14px',
            cursor: 'pointer',
            padding: '2px',
            borderRadius: '2px',
            color: '#757575',
            lineHeight: 1,
            width: '20px',
            height: '20px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
          onMouseEnter={(e) => {
            e.target.style.backgroundColor = '#f0f0f0';
            e.target.style.color = '#1e1e1e';
          }}
          onMouseLeave={(e) => {
            e.target.style.backgroundColor = 'transparent';
            e.target.style.color = '#757575';
          }}
          title={__('Close', 'zenblocks')}
        >
          ✕
        </button>
      </div>

      {/* プリセットカラー */}
      <div style={{ marginBottom: '12px' }}>
        <div style={{ 
          fontSize: '11px', 
          marginBottom: '6px', 
          color: '#757575',
          fontWeight: '500',
          textTransform: 'uppercase',
          letterSpacing: '0.3px'
        }}>
          {__('Preset', 'zenblocks')}
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: '4px',
        }}>
          {colorPalette.map((colorItem, index) => (
            <button
              key={index}
              onClick={() => {
                setSelectedColor(colorItem.color);
                onColorSelect(colorItem.color);
                // パネルを閉じる処理を削除（ユーザーが手動で閉じるまで開いたまま）
              }}
              style={{
                width: '32px',
                height: '32px',
                backgroundColor: colorItem.color,
                border: selectedColor === colorItem.color ? '2px solid #0073aa' : '1px solid #ddd',
                borderRadius: '2px',
                cursor: 'pointer',
                transition: 'all 0.15s ease',
                outline: 'none',
                position: 'relative',
                boxShadow: selectedColor === colorItem.color ? '0 0 0 1px #fff, 0 0 0 3px #0073aa' : 'none',
              }}
              onMouseEnter={(e) => {
                if (selectedColor !== colorItem.color) {
                  e.target.style.borderColor = '#0073aa';
                  e.target.style.boxShadow = '0 0 0 1px #0073aa';
                }
              }}
              onMouseLeave={(e) => {
                if (selectedColor !== colorItem.color) {
                  e.target.style.borderColor = '#ddd';
                  e.target.style.boxShadow = 'none';
                }
              }}
              title={colorItem.name}
              aria-label={colorItem.name}
            />
          ))}
        </div>
      </div>

      {/* カラークリアボタン */}
      <div style={{ marginBottom: '12px' }}>
        <button
          onClick={() => {
            onColorSelect(null); // null を渡してクリア処理を実行
            onClose();
          }}
          style={{
            width: '100%',
            padding: '8px 12px',
            backgroundColor: '#f7f7f7',
            border: '1px solid #ddd',
            borderRadius: '2px',
            cursor: 'pointer',
            fontSize: '12px',
            fontWeight: '500',
            color: '#d94f4f',
            transition: 'all 0.15s ease',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '6px',
          }}
          onMouseEnter={(e) => {
            e.target.style.backgroundColor = '#f0f0f0';
            e.target.style.borderColor = '#d94f4f';
          }}
          onMouseLeave={(e) => {
            e.target.style.backgroundColor = '#f7f7f7';
            e.target.style.borderColor = '#ddd';
          }}
          title={__('Clear Color Setting', 'zenblocks')}
        >
          <span style={{ fontSize: '14px' }}>🗑️</span>
          {__('Clear Color', 'zenblocks')}
        </button>
      </div>

      {/* カスタムカラーピッカー */}
      <div style={{ marginBottom: '12px' }}>
        <div style={{ 
          fontSize: '11px', 
          marginBottom: '6px', 
          color: '#757575',
          fontWeight: '500',
          textTransform: 'uppercase',
          letterSpacing: '0.3px'
        }}>
          {__('Custom', 'zenblocks')}
        </div>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
        }}>
          <input
            type="color"
            value={selectedColor}
            onChange={(e) => {
              const newColor = e.target.value;
              setSelectedColor(newColor);
              onColorSelect(newColor);
              // パネルを閉じる処理を削除
            }}
            onMouseDown={(e) => {
              // カラーピッカー操作中のフラグを設定
              e.stopPropagation();
              e.currentTarget.setAttribute('data-color-picker-active', 'true');
            }}
            onMouseUp={(e) => {
              // カラーピッカー操作終了
              e.stopPropagation();
              setTimeout(() => {
                e.currentTarget.removeAttribute('data-color-picker-active');
              }, 100);
            }}
            onBlur={(e) => {
              // フォーカス離脱時にフラグをクリア
              e.currentTarget.removeAttribute('data-color-picker-active');
            }}
            style={{
              width: '32px',
              height: '32px',
              border: '1px solid #ddd',
              borderRadius: '2px',
              cursor: 'pointer',
              backgroundColor: 'transparent',
              padding: '0',
            }}
          />
          <div style={{ flex: 1 }}>
            <input
              type="text"
              value={selectedColor}
              onChange={(e) => {
                const newColor = e.target.value;
                if (/^#[0-9A-F]{6}$/i.test(newColor) || /^#[0-9A-F]{3}$/i.test(newColor)) {
                  setSelectedColor(newColor);
                  onColorSelect(newColor);
                  // パネルを閉じる処理を削除
                }
              }}
              onBlur={(e) => {
                const value = e.target.value;
                // 3桁のカラーコードを6桁に変換
                if (/^#[0-9A-F]{3}$/i.test(value)) {
                  const expandedColor = '#' + value.slice(1).split('').map(c => c + c).join('');
                  setSelectedColor(expandedColor);
                  onColorSelect(expandedColor);
                  e.target.value = expandedColor;
                }
              }}
              style={{
                width: '100%',
                padding: '6px 8px',
                border: '1px solid #ddd',
                borderRadius: '2px',
                fontSize: '12px',
                fontFamily: 'Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace',
                color: '#1e1e1e',
                backgroundColor: '#fff',
              }}
              placeholder="#e63946"
            />
          </div>
        </div>
      </div>

    </div>
  );
};

// フォーマット処理ロジック（テキストカラー変更）
export const applyHighlight = (editorRef, currentRange, selectedColor = '#e63946') => {
  if (!currentRange || !editorRef?.current) {
    return;
  }

  // より確実な選択範囲の復元
  const selection = window.getSelection();
  try {
    selection.removeAllRanges();
    
    // currentRangeが有効かチェック
    if (currentRange.startContainer && currentRange.endContainer) {
      const newRange = currentRange.cloneRange();
      selection.addRange(newRange);
      
      // 復元されたかダブルチェック
      if (selection.toString().length === 0) {
        return;
      }
    } else {
      return;
    }
  } catch (error) {
    console.error('選択範囲復元エラー:', error);
    return;
  }
  
  editorRef.current.focus();
  
  // selectedColor が null の場合はクリア処理
  if (selectedColor === null) {
    clearHighlight(editorRef, currentRange);
    return;
  }
  
  // 即座に実行（setTimeout遅延を削除）
  const selectedText = selection.toString();
  if (selectedText) {
    const range = selection.getRangeAt(0);
    
    // より包括的な既存カラー要素の検出
    let colorElement = null;
    
    // 方法1: 選択範囲の共通祖先から検索
    const commonAncestor = range.commonAncestorContainer;
    if (commonAncestor.nodeType === Node.TEXT_NODE) {
      const parent = commonAncestor.parentElement;
      if (parent && (parent.classList.contains('text-color') || parent.style.color)) {
        colorElement = parent;
      }
    }
    
    // 方法2: 選択範囲内の要素を検索
    if (!colorElement) {
      const container = range.commonAncestorContainer;
      if (container.nodeType === Node.ELEMENT_NODE) {
        const colorSpan = container.querySelector('.text-color') || 
                         container.querySelector('[style*="color"]');
        if (colorSpan) {
          colorElement = colorSpan;
        }
      }
    }
    
    // 方法3: 選択開始位置の親要素を確認
    if (!colorElement) {
      let element = range.startContainer;
      while (element && element !== editorRef.current) {
        if (element.nodeType === Node.ELEMENT_NODE) {
          if (element.classList?.contains('text-color') || element.style?.color) {
            colorElement = element;
            break;
          }
        }
        element = element.parentElement;
      }
    }
    
    if (colorElement) {
      // 既存の色を上書き（新しい色に変更）
      colorElement.style.transition = 'none';
      colorElement.style.color = selectedColor;
      
      // 次のフレームでトランジションを再有効化
      requestAnimationFrame(() => {
        colorElement.style.transition = 'color 0.2s ease';
      });
    } else {
      // 新しくテキストカラーを適用
      const span = document.createElement('span');
      span.className = 'text-color';
      
      // トランジションを一時的に無効化してから色を設定
      span.style.transition = 'none';
      span.style.color = selectedColor; // 選択された色を適用
      
      try {
        range.surroundContents(span);
        
        // 次のフレームでトランジションを再有効化
        requestAnimationFrame(() => {
          span.style.transition = 'color 0.2s ease';
        });
      } catch (e) {
        // surroundContentsが失敗した場合はexecCommandを使用
        document.execCommand('foreColor', false, selectedColor);
      }
    }
  }
  
  // カスタムイベントで更新を通知
  const event = new CustomEvent('formatApplied', {
    detail: { 
      command: 'textColor', 
      content: editorRef.current.innerHTML 
    }
  });
  editorRef.current.dispatchEvent(event);
};

// カラークリア処理ロジック
export const clearHighlight = (editorRef, currentRange) => {
  if (!currentRange || !editorRef?.current) return;

  const selection = window.getSelection();
  const selectedText = selection.toString();
  
  if (selectedText) {
    const range = selection.getRangeAt(0);
    
    // 既存のカラー要素を検出（applyHighlight と同じロジック）
    let colorElement = null;
    
    // 方法1: 選択範囲の共通祖先から検索
    const commonAncestor = range.commonAncestorContainer;
    if (commonAncestor.nodeType === Node.TEXT_NODE) {
      const parent = commonAncestor.parentElement;
      if (parent && (parent.classList.contains('text-color') || parent.style.color)) {
        colorElement = parent;
      }
    }
    
    // 方法2: 選択範囲内の要素を検索
    if (!colorElement) {
      const container = range.commonAncestorContainer;
      if (container.nodeType === Node.ELEMENT_NODE) {
        const colorSpan = container.querySelector('.text-color') || 
                         container.querySelector('[style*="color"]');
        if (colorSpan) {
          colorElement = colorSpan;
        }
      }
    }
    
    // 方法3: 選択開始位置の親要素を確認
    if (!colorElement) {
      let element = range.startContainer;
      while (element && element !== editorRef.current) {
        if (element.nodeType === Node.ELEMENT_NODE) {
          if (element.classList?.contains('text-color') || element.style?.color) {
            colorElement = element;
            break;
          }
        }
        element = element.parentElement;
      }
    }
    
    if (colorElement) {
      // span要素を削除してテキストのみを残す
      const textNode = document.createTextNode(colorElement.textContent);
      colorElement.parentNode.replaceChild(textNode, colorElement);
      
      // 選択範囲を新しいテキストノードに設定
      const newRange = document.createRange();
      newRange.selectNodeContents(textNode);
      selection.removeAllRanges();
      selection.addRange(newRange);
    }
  }
  
  // カスタムイベントで更新を通知
  const event = new CustomEvent('formatApplied', {
    detail: { 
      command: 'clearTextColor', 
      content: editorRef.current.innerHTML 
    }
  });
  editorRef.current.dispatchEvent(event);
};

// フォーマット検出ロジック（テキストカラー）
export const detectHighlight = (range) => {
  if (!range) return false;

  const container = range.commonAncestorContainer;
  const parentElement = container.nodeType === Node.TEXT_NODE 
    ? container.parentElement 
    : container;

  let element = parentElement;
  while (element && element !== document.body) {
    const computedStyle = window.getComputedStyle(element);
    
    // クラスベースの検出
    if (element.classList?.contains('text-color')) return true;
    
    // スタイルベースの検出（テキスト色）
    const textColor = computedStyle.color;
    if (textColor && textColor !== 'initial' && textColor !== 'inherit') {
      // カスタムテキストカラーが適用されているかチェック
      if (textColor.includes('230, 57, 70') || // #e63946 (アクセント)
          textColor === '#e63946' ||
          textColor === 'rgb(230, 57, 70)' ||
          element.style.color) {
        return true;
      }
    }
    
    element = element.parentElement;
  }

  return false;
};

// フォーマット情報
export const highlightFormat = {
  key: 'highlight',
  name: __('Text Color', 'zenblocks'),
  title: __('Text Color', 'zenblocks'),
  icon: HighlightIcon, // 関数コンポーネントとして保持
  apply: applyHighlight,
  detect: detectHighlight,
  command: 'foreColor',
  shortcut: 'Ctrl+U',
};

export default highlightFormat;