import React from 'react';
import { __ } from '@wordpress/i18n';

/**
 * リンクフォーマット機能
 * 完全独立モジュール - 他の機能に影響しない
 */

// アイコン定義
export const LinkIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
  </svg>
);

// フォーマット処理ロジック
export const applyLink = (editorRef, currentRange) => {
  if (!currentRange || !editorRef?.current) return;

  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(currentRange);
  
  editorRef.current.focus();
  
  setTimeout(() => {
    const selectedText = selection.toString();
    
    // 既存のリンクをチェック
    const parentElement = selection.getRangeAt(0).commonAncestorContainer.parentElement;
    if (parentElement && parentElement.tagName === 'A') {
      // リンクを解除
      const textNode = document.createTextNode(parentElement.textContent);
      parentElement.parentNode.replaceChild(textNode, parentElement);
    } else {
      // 新しいリンクを作成
      let url = prompt(__('Enter link URL', 'zenblocks'), 'https://');
      
      if (url && url.trim() !== '' && url !== 'https://') {
        // 簡単なURL検証
        if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('mailto:')) {
          url = 'https://' + url;
        }
        
        // リンクを作成
        document.execCommand('createLink', false, url);
      }
    }
    
    // カスタムイベントで更新を通知
    const event = new CustomEvent('formatApplied', {
      detail: { 
        command: 'link', 
        content: editorRef.current.innerHTML 
      }
    });
    editorRef.current.dispatchEvent(event);
  }, 10);
};

// フォーマット検出ロジック
export const detectLink = (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 tagName = element.tagName?.toLowerCase();
    
    // aタグの検出
    if (tagName === 'a') return true;
    
    element = element.parentElement;
  }

  return false;
};

// 現在のリンクURLを取得
export const getCurrentLinkUrl = (range) => {
  if (!range) return null;

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

  let element = parentElement;
  while (element && element !== document.body) {
    const tagName = element.tagName?.toLowerCase();
    
    if (tagName === 'a') {
      return element.getAttribute('href');
    }
    
    element = element.parentElement;
  }

  return null;
};

// フォーマット情報
export const linkFormat = {
  key: 'link',
  name: __('Link', 'zenblocks'),
  title: __('Link', 'zenblocks'),
  icon: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", // パス文字列に変更
  apply: applyLink,
  detect: detectLink,
  getCurrentUrl: getCurrentLinkUrl,
  command: 'createLink',
  shortcut: 'Ctrl+K',
};

export default linkFormat;