/**************** アイコンを選択し、オプションに保存するためのスクリプト ********************/
jQuery(document).ready(function($) {
	/*** IcoMoon アイコンデータ: 確実にデータを取得し、フォールバックが起動していないか確認 ***/
	const iconMapICOMoon = (window.HAIconPicker && window.HAIconPicker.iconMapICOMoon) 
	? window.HAIconPicker.iconMapICOMoon 
	: { 'icon-x-logo': '\\e937' }; // データがない場合のフォールバック

	const $modal = $('#icon-selection-modal');
	let targetInput; 

	// ... (モーダルを開く処理は変更なし) ...
	$('.ha-open-icon-modal').on('click', function() {
		targetInput = $(this).siblings('.ha-icon-input');
		const $grid = $modal.find('.ha-icon-list-grid').empty();
		// ... (アイコンリストの生成ロジックは変更なし) ...
		$.each(iconMapICOMoon, function(className, unicode) {
			$('<button type="button" class="ha-icon-btn ' + className + '">')
				.attr('data-class', className)
				.attr('data-unicode', unicode) 
				.appendTo($grid);
		});

		$modal.fadeIn(200);
	});

	// ... (モーダルを閉じる処理は変更なし) ...
	$modal.on('click', '.ha-close-icon-modal', function(e) {
		e.preventDefault(); 
		$modal.fadeOut(200);
	});

	$modal.on('click', function(e) {
		if ($(e.target).is($modal)) {
			$modal.fadeOut(200);
		}
	});

	// --- 3. アイコンの選択 (変更なし) ---
	$modal.on('click', '.ha-icon-btn', function() {
		const selectedClass = $(this).attr('data-class');
		const selectedUnicode = $(this).attr('data-unicode');

		if (targetInput && targetInput.length) {
			// 1. hidden input に Unicode を保存する
			targetInput.val(selectedUnicode); 

			// 2. プレビューの更新
			const $preview = targetInput.siblings('.ha-icon-preview');
				// 既存のアイコンクラスを削除
				$preview.removeClass(function(index, className) {
				// 'icon-'で始まるクラスを全て削除
					return (className.match(/(^|\s)icon-\S+/g) || []).join(' ');
				});

			// 3.新しいクラスと Unicode をセット
			$preview.addClass(selectedClass);
			$preview.attr('data-unicode', selectedUnicode);

			$modal.fadeOut(100);
		}
	});

	// --- 4. ★追加: アイコンのクリア処理 ---
	$('.ha-clear-icon-btn').on('click', function() {
		const $container = $(this).closest('.ha-icon-picker-container');
		const $input = $container.find('.ha-icon-input');
		const $preview = $container.find('.ha-icon-preview');

		// 1. hidden input の値を空にする (保存時に未設定状態になる)
		$input.val('');

		// 2. プレビューから既存のアイコンクラスを全て削除
		$preview.removeClass(function(index, className) {
			return (className.match(/(^|\s)icon-\S+/g) || []).join(' ');
		});
		
		// 3. data-unicode 属性もクリア
		$preview.attr('data-unicode', '');

		// プレビューが空になり、保存値も空になります。
	});
});


/**************** 選択したアイコンからオプションに保存せずCSS情報を出力するためのスクリプト ****************/
jQuery(document).ready(function($) {
	/*** IcoMoon アイコンデータ: 既存のHAIconPickerからデータを取得 ***/
	const iconMapICOMoon = (window.HAIconPicker && window.HAIconPicker.iconMapICOMoon) 
	? window.HAIconPicker.iconMapICOMoon 
	: { 'icon-x-logo': '\\e937' }; 

	const $modal = $('#icon-selection-modal');
	let $targetPreview;  // プレビュー要素をキャッシュする変数

	// --- 1. モーダルを開く処理 (CSS出力機能専用) ---
	$('.ha-open-css-modal').on('click', function() {
		const $container = $(this).closest('.ha-css-output-container');
		$targetPreview = $container.find('.ha-icon-preview');
		
		const $grid = $modal.find('.ha-icon-list-grid').empty();

		// アイコンリストの生成ロジックは共通
		$.each(iconMapICOMoon, function(className, unicode) {
			$('<button type="button" class="ha-icon-btn ' + className + '">')
				.attr('data-class', className)
				.attr('data-unicode', unicode) 
				.appendTo($grid);
		});

		$modal.fadeIn(200);
	});

	// --- 2. アイコンの選択 (CSS出力機能専用) ---
	// モーダル全体ではなく、モーダル内のアイコンボタンにイベントを適用
	$modal.on('click', '.ha-icon-btn', function() {
		const selectedClass = $(this).attr('data-class');
		const selectedUnicode = $(this).attr('data-unicode');

		if ($targetPreview && $targetPreview.length) {
            
			// ターゲットコンテナのCSS出力要素を探す
			const $cssOutput = $targetPreview.closest('.ha-css-output-container').find('#ha-css-code-output');

			// プレビューの更新
			$targetPreview.removeClass(function(index, className) {
				return (className.match(/(^|\s)icon-\S+/g) || []).join(' ');
			});

			$targetPreview.addClass(selectedClass);
			$targetPreview.attr('data-unicode', selectedUnicode);
            
			// CSSコードの出力を生成してテキストエリアに表示
			const cssValue = selectedUnicode;

			// 生成される文字列の例: content: '\e922'; /* icon-ha-plant10 */
			//const cssCode = `content: '${cssValue}'; /* ${selectedClass} */`;

const cssCode = `.element:before{
	font-family:'hauicon';
	content: '${cssValue}'; /* ${selectedClass} */
}`;

			$cssOutput.val(cssCode);

			$modal.fadeOut(100);
		}
	});

	// --- 3. アイコンのクリア処理 (CSS出力機能専用) ---
	$('.ha-clear-css-btn').on('click', function() {
		const $container = $(this).closest('.ha-css-output-container');
		const $preview = $container.find('.ha-icon-preview');
        const $cssOutput = $container.find('#ha-css-code-output'); // CSS出力エリアもクリア

		// プレビューのクリア
		$preview.removeClass(function(index, className) {
			return (className.match(/(^|\s)icon-\S+/g) || []).join(' ');
		});
		$preview.attr('data-unicode', '');
		
        // テキストエリアの内容をクリア
        $cssOutput.val('');
	});
    
    // --- 4. モーダルを閉じる処理 (共通だが、元のJSに任せるのが理想。ここでは含める) ---
    $modal.on('click', '.ha-close-icon-modal', function(e) {
		e.preventDefault(); 
		$modal.fadeOut(200);
	});

	$modal.on('click', function(e) {
		if ($(e.target).is($modal)) {
			$modal.fadeOut(200);
		}
	});
});