(function (wp) {
	const el = wp.element.createElement;
	const useState = wp.element.useState;
	const registerPlugin = wp.plugins.registerPlugin;
	const PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel || wp.editPost.PluginDocumentSettingPanel;
	const { useSelect, useDispatch } = wp.data;
	const { TextControl, TextareaControl, CheckboxControl, Button, Modal, TabPanel } = wp.components;

	//PHPから文字列を受け取る
	const T = HaupLocalizeTextSeoFields;

	const HaupSeoMetaPanel = function () {
		const [isModalOpen, setModalOpen] = useState(false);

		// 1. データの監視と取得（リアクティブな情報の収集）
		const { meta, savedMeta, postType } = useSelect(function (select) {
			const editor = select('core/editor');
			const core = select('core');
 
			//投稿タイプを取得して変数に格納
			const pType = editor.getCurrentPostType();
			//投稿IDを取得して変数に格納
			const pId = editor.getCurrentPostId();

			// データベースに現在保存されている「確定済み」のメタ値を取得
			const record = core.getEntityRecord('postType', pType, pId);
			const sMeta = (record && record.meta) ? record.meta : {};

			return {
				// 「現在エディター上で入力中」のメタ値をリアルタイムで取得
				meta: editor.getEditedPostAttribute('meta') || {},
				savedMeta: sMeta,
				postType: pType,
			};
		}, []);

		// 2. データの変更操作を行うための関数を準備
		const { editPost } = useDispatch('core/editor');

		// 3. 差分判定ロジック
		//メタキーを配列化
		const seoKeys = ['seo_title', 'meta_description', 'meta_keywords', 'is_noindex', 'is_nofollow'];
		// いずれかのキーで「入力値」と「保存値」が異なれば true を返す
		const hasChanges = seoKeys.some(key => (meta[key] || '') !== (savedMeta[key] || ''));

		// 4. ガード節（対象外の投稿タイプならここで処理を終了）
		if (!T || !T.post_types.includes(postType)) return null;

		// モーダルの「設定を反映して閉じる」ボタンが押された時の処理
		const handleApplyAndClose = function() {
			// 1. モーダル内で変更した最新の値を、正式にエディターの管理データ（Reduxストア）に書き込む
			// これにより、エディターが「あ、データが更新されたから保存が必要だ」と認識する
			editPost({ meta: meta });
			// 2. モーダルの表示フラグを false にして、画面から消す
			setModalOpen(false);
		};

		//モーダル画面の描画
		//全体
		const modalElement = isModalOpen ? el(Modal, {
			title: T.title,
			onRequestClose: handleApplyAndClose,
			style: { maxWidth: '900px', width: '90%' ,'min-height':'90vh' }
		},
		//タブ
		el(TabPanel, {
			className: "haup-seo-tabs",
			activeClass: "is-active",
			// タブの定義
			tabs: [
				{
					name: 'settings',
					title: T.tab_title_setting,
					className: 'haup-tab-settings',
				},
				{
					name: 'manual',
					title: T.tab_title_manual,
					className: 'haup-tab-manual',
				},
			],
		},
			// 選択されたタブ（tab）に応じた表示内容
			(tab) => {
				if (tab.name === 'settings') {
					// --- 設定タブの中身 ---
					return el('div', { style: { padding: '12px' } },
						el('div', { style: { maxHeight: 'calc(90vh - 220px)', overflow: 'auto' } },
							// 1.タイトル
							el('div', { style: { marginBottom: '12px' } },
								el(TextControl, {
									label: T.panel_title_title_text,
									value: meta['seo_title'] || '',
									__next40pxDefaultSize: true,
									__nextHasNoMarginBottom: true,
									onChange: (val) => editPost({ meta: { seo_title: val } })
								})
							),
							// 2.説明文
							el('div', { style: { marginBottom: '12px' } },
								el(TextareaControl, {
									label: T.panel_description_title_text,
									value: meta['meta_description'] || '',
									rows: 4,
									__nextHasNoMarginBottom: true,
									onChange: (val) => editPost({ meta: { meta_description: val } })
								})
							),
							// 3. キーワード
							el('div', { style: { marginBottom: '12px' } },
								el(TextControl, {
									label: T.panel_keywords_title_text,
									value: meta['meta_keywords'] || '',
									__next40pxDefaultSize: true,
									__nextHasNoMarginBottom: true,
									onChange: (val) => editPost({ meta: { meta_keywords: val } })
								})
							),
							// 4. Noindex
							el('div', { style: { marginBottom: '12px' } },
								el(CheckboxControl, {
									label: T.panel_noindex_title_text,
									checked: meta['is_noindex'] === '1',
									__nextHasNoMarginBottom: true,
									onChange: (val) => editPost({ meta: { is_noindex: val ? '1' : '' } })
								})
							),
							// 5. Nofollow
							el('div', { style: { marginBottom: '12px' } },
								el(CheckboxControl, {
									label: T.panel_nofollow_title_text,
									checked: meta['is_nofollow'] === '1',
									__nextHasNoMarginBottom: true,
									onChange: (val) => editPost({ meta: { is_nofollow: val ? '1' : '' } })
								})
							)
						),
						//ボタン
						el('div', { style: { marginTop: '4px', borderTop: '1px solid #eee', textAlign: 'center' } },
							el('p', { style: { fontSize: '12px', color: '#d94f1d', lineHeight: '1.4', marginBottom: '8px' } }, 
							T.setting_button_notice
							),
							el(Button,
								{
									isPrimary: true, 
									onClick: handleApplyAndClose 
								},
								T.setting_button_text
							)
						)
					);
				} else if (tab.name === 'manual') {
					// --- 解説（マニュアル）タブの中身 ---
					return el('div', { style: { padding: '12px' } },
						// 設定タブと同じスクロール領域を確保
						el('div', { 
							style: { maxHeight: 'calc(90vh - 220px)', overflow: 'auto' },
							// ここでHTMLを流し込む
							dangerouslySetInnerHTML: { __html: T.manual_html_content } 
						}),
        
						// フッター（閉じるボタン）は設定タブと共通のデザイン
						el('div', { style: { marginTop: '4px', borderTop: '1px solid #eee', textAlign: 'center' } },
							el('p', { style: { fontSize: '12px', color: '#666', marginBottom: '8px' } }, 
								T.manual_button_notice
							),
							el(Button, { 
							isPrimary: true, 
							onClick: () => setModalOpen(false) // 説明を見るだけなので editPost は不要
							},
								T.manual_button_text
							  )
						)
					);
				}
			})
		) : null;

		return el(PluginDocumentSettingPanel, {
		name: 'haup-editor-panel-seo-field',
		title: T.title,
		icon: 'admin-generic',
		initialOpen: false,
	},
		el('div', { style: { padding: '10px 0' } },
			el('p', { style: { fontSize: '13px', marginBottom: '15px' } }, T.side_text),

				//変更があったらメッセージを表示
				hasChanges && el('div', {
					style: {
						backgroundColor: '#fff8e5',
						borderLeft: '4px solid #ffb900',
						padding: '10px',
						marginBottom: '15px',
						fontSize: '12px',
						lineHeight: '1.4',
						color: '#444'
					}
				},
					T.side_change_value_notice
				),

				el(Button, { 
					isSecondary: true, 
					onClick: () => setModalOpen(true),
					style: { width: '100%', justifyContent: 'center' }
				}, T.side_button_text),

			modalElement
		)
	);
	};

	registerPlugin('haup-editor-panel-seo-field-plugin', { render: HaupSeoMetaPanel });

})(window.wp);