(function (wp) {
	// 必要な部品のインポート
	var el = wp.element.createElement;
	var useState = wp.element.useState;
	var registerPlugin = wp.plugins.registerPlugin;
	var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel || wp.editPost.PluginDocumentSettingPanel;
	//var Button = wp.components.Button;
	//var Modal = wp.components.Modal;
	var useSelect = wp.data.useSelect; // 投稿タイプ取得
	var { Button, Modal, TabPanel } = wp.components;
	var ExternalLink = wp.components.ExternalLink; //外部ページへのリンクを使いたい場合は追加

	//文字列
	const T =HaupLocalizeTextHelpbox;

	var HaupMetaPanel  = function () {
			//指定した投稿タイプで出力
			//現在の投稿タイプを取得
			var postType = useSelect(function (select) {
				return select('core/editor').getCurrentPostType();
			}, []);

			// 表示を許可する投稿タイプのリスト（配列）
			//var allowedPostTypes = ['post','page']; // 投稿タイプを配列指定
			// PHPで指定した配列をwp_localize_scriptで渡す
			var allowedPostTypes = T.post_types; // 投稿タイプを配列指定

				// リストに含まれていない場合は表示しない
				if (!allowedPostTypes.includes(postType)) {
					return null;
				}

		// モーダルの開閉状態を管理
		var state = useState(false);
		var isModalOpen = state[0];
		var setModalOpen = state[1];

		// モーダル本体（開いている時だけ定義）
		var modalElement = isModalOpen ? el(
			Modal,
			{
				title: T.modal_title,
				onRequestClose: function () { setModalOpen(false); },
				shouldCloseOnClickOutside: true,
				style:{
					'max-width':'900px',
					'width':'90%'
				}
			},
			T.common_message ? el('div', {
				 className: 'haup-common-header-message',
				style: { 
					marginBottom: '15px', 
					padding: '10px', 
					backgroundColor: '#f9f9f9', // 軽く背景色をつけると見やすい
					borderLeft: '4px solid #007cba' // WordPress風のアクセント
				},
				dangerouslySetInnerHTML: { __html: T.common_message }
			}) : null,

			// --- ここで TabPanel を展開 ---
			el(TabPanel, {
				className: 'haup-manual-tabs',
				activeClass: 'is-active',
				tabs: T.tabs, // PHPから受け取ったタブ配列
				children: function (tab) {
					return el('div', {
						className: 'tab-content-container',
						style: { 
							padding: '15px', 
							maxHeight: '60vh', 
							overflowY: 'auto',
							border: '1px solid #e0e0e0',
							marginTop: '-1px'
						},
						dangerouslySetInnerHTML: { __html: tab.body }
					});
				}
			}),
			el('div', { style: { padding: '20px', lineHeight: '1.6' } },
				// 閉じるボタン
				el('div', { style: { marginTop: '20px', textAlign: 'right' } },
					el(Button, { isPrimary: true, onClick: function () { setModalOpen(false); } }, T.close_text)
				)
			)
		) : null;

		// サイドバーに表示するボタン
		return el(
			PluginDocumentSettingPanel,
			{
				name: 'haup-helpbox-modal-panel',
				title: T.sidepanel_title,
				icon: 'editor-help',
				initialOpen: false, //パネルを閉じておく
			},
			el('p', { style: { fontSize: '13px' } }, T.sidepanel_text),
			el(Button, { 
				isSecondary: true, 
				onClick: function () { setModalOpen(true); } 
			}, T.sidepanel_button_title),
			el('div', { style: { 'text-align': 'right','margin-top':'8px' } },
				el(ExternalLink, { href: T.link_url }, T.link_title),
			),
			// モーダル要素のレンダリング
			modalElement
		);
	};

	registerPlugin('haup-editor-panel-helpbox-plugin', { render: HaupMetaPanel  });

})(window.wp);