/**
 * Custom SVG Manager
 * 
 * カスタムSVGの追加・編集・管理機能
 */

import { useState, useEffect } from "@wordpress/element";
import { Button, Modal, TextareaControl, ToggleControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { adjustViewBoxToPath } from "./IconRenderer";

/**
 * SVGバリデーション関数
 */
const validateSVG = (svgString) => {
  try {
    const parser = new DOMParser();
    const doc = parser.parseFromString(svgString, "image/svg+xml");
    const svg = doc.querySelector("svg");
    
    if (!svg) {
      return { isValid: false, error: "有効なSVG要素が見つかりません" };
    }
    
    const errorNode = doc.querySelector("parsererror");
    if (errorNode) {
      return { isValid: false, error: "SVGの構文にエラーがあります" };
    }
    
    return { isValid: true, error: null };
  } catch (e) {
    return { isValid: false, error: `SVGの解析エラー: ${e.message}` };
  }
};

/**
 * SVGを正規化する関数
 */
const normalizeSVG = (svgString) => {
  try {
    const parser = new DOMParser();
    const doc = parser.parseFromString(svgString, "image/svg+xml");
    const svg = doc.querySelector("svg");
    
    if (!svg) return svgString;
    
    // 基本的なSVG属性を確保
    if (!svg.getAttribute("xmlns")) {
      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    }
    
    // width, heightが設定されていない場合は24に設定
    if (!svg.getAttribute("width")) {
      svg.setAttribute("width", "24");
    }
    if (!svg.getAttribute("height")) {
      svg.setAttribute("height", "24");
    }
    
    // viewBoxが設定されていない場合は自動で設定
    if (!svg.getAttribute("viewBox")) {
      const width = svg.getAttribute("width") || "24";
      const height = svg.getAttribute("height") || "24";
      svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
    }
    
    // currentColorの使用を推奨
    const paths = svg.querySelectorAll("path, circle, rect, line, polyline, polygon, ellipse");
    paths.forEach(path => {
      if (path.getAttribute("stroke") && path.getAttribute("stroke") !== "none") {
        path.setAttribute("stroke", "currentColor");
      }
      if (path.getAttribute("fill") && path.getAttribute("fill") !== "none") {
        path.setAttribute("fill", "currentColor");
      }
    });
    
    const serializer = new XMLSerializer();
    return serializer.serializeToString(svg);
  } catch (e) {
    return svgString;
  }
};

/**
 * カスタムSVGプレビューコンポーネント
 */
const CustomSVGPreview = ({ svgContent, color = "#333333" }) => {
  if (!svgContent) {
    return (
      <div
        style={{
          width: "100px",
          height: "100px",
          border: "1px dashed #ddd",
          borderRadius: "4px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "#999",
          fontSize: "12px",
        }}
      >
        プレビューなし
      </div>
    );
  }

  const validation = validateSVG(svgContent);
  
  if (!validation.isValid) {
    return (
      <div
        style={{
          width: "100px",
          height: "100px",
          border: "1px solid #ff6b6b",
          borderRadius: "4px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "#ff6b6b",
          fontSize: "12px",
          textAlign: "center",
          padding: "8px",
        }}
      >
        エラー:<br />{validation.error}
      </div>
    );
  }

  try {
    // プレビュー用にSVGを処理
    let processedSvg = svgContent;
    
    // currentColorを指定された色に置換
    processedSvg = processedSvg.replace(/stroke="currentColor"/g, `stroke="${color}"`);
    processedSvg = processedSvg.replace(/fill="currentColor"/g, `fill="${color}"`);
    
    // その他の色も置換（none以外）
    processedSvg = processedSvg.replace(/stroke="((?!none|currentColor)[^"]*)"/g, `stroke="${color}"`);
    processedSvg = processedSvg.replace(/fill="((?!none|currentColor)[^"]*)"/g, `fill="${color}"`);
    
    // overflowスタイルを追加
    processedSvg = processedSvg.replace(/<svg([^>]*)>/i, '<svg$1 style="overflow: visible; width: 100%; height: 100%;">');

    return (
      <div
        style={{
          width: "100px",
          height: "100px",
          border: "1px solid #ddd",
          borderRadius: "4px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "#f9f9f9",
        }}
        dangerouslySetInnerHTML={{ __html: processedSvg }}
      />
    );
  } catch (e) {
    return (
      <div
        style={{
          width: "100px",
          height: "100px",
          border: "1px solid #ff6b6b",
          borderRadius: "4px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "#ff6b6b",
          fontSize: "12px",
        }}
      >
        プレビューエラー
      </div>
    );
  }
};

/**
 * カスタムSVG追加モーダル
 */
export const CustomSVGModal = ({ 
  isOpen, 
  onClose, 
  onSave,
  initialSVG = "" 
}) => {
  const [svgContent, setSvgContent] = useState(initialSVG);
  const [autoNormalize, setAutoNormalize] = useState(true);

  // initialSVGが変更された時にsvgContentを更新
  useEffect(() => {
    setSvgContent(initialSVG);
  }, [initialSVG]);

  if (!isOpen) return null;

  const validation = validateSVG(svgContent);

  const handleSave = () => {
    if (!validation.isValid || !svgContent.trim()) {
      return;
    }

    let finalSvg = svgContent;
    
    if (autoNormalize) {
      finalSvg = normalizeSVG(svgContent);
    }

    try {
      // Base64エンコードして保存
      const encodedSvg = btoa(finalSvg);
      const customIconValue = `custom-svg-${encodedSvg}`;
      
      // onSaveコールバックを実行（ここでonCloseは呼ばない）
      onSave(customIconValue);
      
      // コンテンツをクリア
      setSvgContent("");
    } catch (error) {
      console.error("カスタムSVG保存エラー:", error);
    }
  };

  const handleClose = () => {
    setSvgContent(""); // モーダルを閉じる時にコンテンツをクリア
    onClose();
  };

  return (
    <Modal
      title={__("Add Custom SVG", "zenblocks")}
      onRequestClose={handleClose}
      style={{ maxWidth: "700px", width: "90vw" }}
    >
      <div style={{ minHeight: "400px" }}>
        {/* SVG入力 */}
        <div style={{ marginBottom: "16px" }}>
          <TextareaControl
            label={__("SVG Code", "zenblocks")}
            value={svgContent}
            onChange={setSvgContent}
            placeholder={__("Paste SVG code here...", "zenblocks")}
            rows={10}
            style={{ fontFamily: "monospace", fontSize: "12px" }}
          />
        </div>

        {/* オプション */}
        <div style={{ marginBottom: "16px" }}>
          <ToggleControl
            label={__("Auto-normalize SVG", "zenblocks")}
            help={__("Applies currentColor usage, auto viewBox settings, etc.", "zenblocks")}
            checked={autoNormalize}
            onChange={setAutoNormalize}
          />
        </div>

        {/* プレビューとステータス */}
        <div style={{ 
          display: "flex", 
          gap: "16px", 
          marginBottom: "24px",
          alignItems: "flex-start" 
        }}>
          {/* プレビュー */}
          <div>
            <label style={{ 
              display: "block", 
              marginBottom: "8px", 
              fontSize: "14px",
              fontWeight: "600" 
            }}>
              {__("Preview", "zenblocks")}
            </label>
            <CustomSVGPreview svgContent={svgContent} />
          </div>

          {/* ステータス */}
          <div style={{ flex: 1 }}>
            <label style={{ 
              display: "block", 
              marginBottom: "8px", 
              fontSize: "14px",
              fontWeight: "600" 
            }}>
              {__("Status", "zenblocks")}
            </label>
            <div
              style={{
                padding: "12px",
                borderRadius: "4px",
                backgroundColor: validation.isValid ? "#d4edda" : "#f8d7da",
                border: `1px solid ${validation.isValid ? "#c3e6cb" : "#f5c6cb"}`,
                color: validation.isValid ? "#155724" : "#721c24",
                fontSize: "14px",
              }}
            >
              {validation.isValid ? (
                <>
                  <strong>✓ 有効なSVG</strong>
                  <br />
                  SVGが正常に解析されました
                </>
              ) : (
                <>
                  <strong>✗ エラー</strong>
                  <br />
                  {validation.error}
                </>
              )}
            </div>
          </div>
        </div>

        {/* 使用ガイド */}
        <div style={{ 
          padding: "12px", 
          backgroundColor: "#e7f3ff", 
          borderRadius: "4px",
          marginBottom: "16px",
          fontSize: "12px",
          color: "#004085"
        }}>
          <strong>💡 ヒント:</strong>
          <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
            <li>stroke="currentColor" や fill="currentColor" を使用すると、アイコン色設定が適用されます</li>
            <li>viewBoxが設定されていると、サイズ変更時にアイコンが適切にスケールされます</li>
            <li>不要な要素やスタイルは削除して、シンプルなSVGにすることを推奨します</li>
          </ul>
        </div>

        {/* アクションボタン */}
        <div style={{ 
          display: "flex", 
          justifyContent: "flex-end", 
          gap: "8px" 
        }}>
          <Button isSecondary onClick={handleClose}>
            {__("Cancel", "zenblocks")}
          </Button>
          <Button 
            isPrimary 
            onClick={handleSave}
            disabled={!validation.isValid || !svgContent.trim()}
          >
            {__("Save", "zenblocks")}
          </Button>
        </div>
      </div>
    </Modal>
  );
};

/**
 * カスタムSVG追加ボタン
 */
export const CustomSVGButton = ({ onSave }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <>
      <Button
        isSecondary
        onClick={() => setIsModalOpen(true)}
        style={{ width: "100%" }}
      >
        {__("Add Custom SVG", "zenblocks")}
      </Button>

      <CustomSVGModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onSave={(customIconValue) => {
          onSave(customIconValue);
          setIsModalOpen(false);
        }}
      />
    </>
  );
};

/**
 * カスタムSVG編集機能
 */
export const EditCustomSVGButton = ({ iconValue, onSave }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  // カスタムSVGでない場合は表示しない
  if (!iconValue || !iconValue.startsWith("custom-svg-")) {
    return null;
  }

  // Base64デコードして元のSVGを取得
  let initialSVG = "";
  try {
    const encodedSvg = iconValue.replace("custom-svg-", "");
    initialSVG = atob(encodedSvg);
  } catch (e) {
    console.error("Failed to decode custom SVG:", e);
  }

  return (
    <>
      <Button
        isSecondary
        isSmall
        onClick={() => setIsModalOpen(true)}
      >
        {__("Edit", "zenblocks")}
      </Button>

      <CustomSVGModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onSave={onSave}
        initialSVG={initialSVG}
      />
    </>
  );
};
