(function () {
	// 必要な依存関係をインポート
	const { createElement, useState } = wp.element;
	const { registerFormatType, insert, create } = wp.richText;
	const { BlockFormatControls } = wp.blockEditor;
	// Toolbar, Popover, Button, Dashicon のみを使用
	const { Toolbar, Popover, Button, Dashicon } = wp.components;

	const el = createElement;
    
	// wp_localize_script の想定変数
	// メニュー
	const ShortcodeButtonTitle =  ShortcodeTitleVal.buttontitle;
	const ShortcodeListTitle = ShortcodeTitleVal.listtitle;
	const PatternInsertInfo = ShortcodeTitleVal.Info;
	//ショートコードの名称
	const SCtitleModdate = ShortcodeTitleVal.moddate;
	const SCtitleToolTip = ShortcodeTitleVal.tooltip;
	const SCtitleCFValue = ShortcodeTitleVal.cfvalue;
	const SCtitleReuseBlock = ShortcodeTitleVal.reuse;
	const SCtitleExcerpt = ShortcodeTitleVal.excerpt;
	const SCtitleOldPostInfo = ShortcodeTitleVal.oldpost;
	const SCtitlePublishWareki = ShortcodeTitleVal.pwareki;
	const SCtitleModdateWareki = ShortcodeTitleVal.mwareki;
	const SCtitleModdateAge = ShortcodeTitleVal.age;
	const SCtitleScreenShot = ShortcodeTitleVal.screenshot;
	const SCtitleModdateQRcode = ShortcodeTitleVal.qrcode;
	const SCtitleHideMailAdress = ShortcodeTitleVal.mailad;
	const SCtitleHideMailLink = ShortcodeTitleVal.maillink;

	//ダッシュアイコンの設定をPHPから受け取る
	const diconShortcode = DashIconInBlockToolBar.dicon;

	// --- 1. ショートコードデータの定義 (フラット化) ---
	// 全てのショートコードを一つの配列で定義
	const fixedShortcodes = [
		//最終更新日
		{
			name: 'ha-mdate',
			title: SCtitleModdate,
			icon: 'calendar', 
			shortcode: '[ha-mdate]'
		},
		//公開日を和暦含みで表示
		{
			name: 'p-wareki',
			title: SCtitlePublishWareki,
			icon: 'calendar', 
			shortcode: '[p-wareki]'
		},
		//公開日を和暦含みで表示
		{
			name: 'm-wareki',
			title: SCtitleModdateWareki,
			icon: 'calendar', 
			shortcode: '[m-wareki]'
		},
		//年齢表示
		{
			name: 'ha-calculate-age',
			title: SCtitleModdateAge,
			icon: 'calendar', 
			shortcode: '[ha-calculate-age birthday="" dead_day="" show_birthday="yes" show_months="yes"]'
		},
		//ツールチップ
		{
			name: 'ha-tooltip',
			title: SCtitleToolTip,
			icon: 'format-status', 
			shortcode: '[ha-tooltip title="" text=""]'
		},
		//カスタムフィールド値
		{
			name: 'ha-field',
			title: SCtitleCFValue,
			icon: 'media-text', 
			shortcode: "[ha-field field='' post_id='' wrap='']"
		},
		//外部サイトのスクショ
		{
			name: 'ha-sshot',
			title: SCtitleScreenShot,
			icon: 'media-text', 
			shortcode: '[ha-sshot snap="" url="" alt="" w="" h="" load="" title=""]'
		},
		//QRコード
		{
			name: 'ha-qrcode',
			title: SCtitleModdateQRcode,
			icon: 'forms', 
			shortcode: '[ha-qrcode]'
		},
		//メールアドレスの難読化
		{
			name: 'ha-email',
			title: SCtitleHideMailAdress,
			icon: 'forms', 
			shortcode: '[ha-email mail=""]'
		},
		//メールリンクの難読化
		{
			name: 'ha-mail-link',
			title: SCtitleHideMailLink,
			icon: 'forms', 
			shortcode: '[ha-mail-link text="" mail="" sub=""]'
		},
		
		
		//再利用ブロック
		{
			name: 'ha-reuse-sc',
			title: SCtitleReuseBlock,
			icon: 'embed-post', 
			shortcode: '[ha-reuse-sc id=""]'
		},
		//説明文または抜粋文
		{
			name: 'ha-excerpt',
			title: SCtitleExcerpt,
			icon: 'embed-post', 
			shortcode: '[ha-excerpt]'
		},
		//古い投稿であることを知らせる
		{
			name: 'ha-excerpt',
			title: SCtitleOldPostInfo,
			icon: 'info', 
			shortcode: '[ha-oldpost day=""]'
		},
	];

	//パネル内に出力するボタンをまとめる
	const allShortcodes = [
		//全てのショートコードを一つの配列で定義の設定プログラムを適用 
		...fixedShortcodes, 
		// ダッシュアイコンの設定（スイッチがあるためPHPから受け取る、有効でない場合は[]を返してエラー回避）
		...(diconShortcode || []), 
	];

	// ----------------------------------------------------------------------
	// 2. ショートコード一覧を表示するカスタムPopoverコンポーネント
	// ----------------------------------------------------------------------
	const ShortcodeListPopover = ({ value, onChange, onClose }) => {
        
		const handleShortcodeInsert = (sc) => {
			const contentToInsert = create({ html: sc.shortcode });
			// リッチテキストにショートコード文字列を挿入
			onChange(insert(value, contentToInsert, value.start, value.end));
			onClose(); // 挿入後にポップオーバーを閉じる
		};

		return (
			el(Popover,
				{
					className: 'haup-simple-shortcode-popover',
					onClose: onClose,
					// Popoverの表示位置（親ボタンの近く）
					position: 'bottom right', 
					focusOnMount: true,
				},
					el('div', { className: 'popover-content-inner' },
					el('div', { className: 'haup-pattern-use-notice' }, PatternInsertInfo ),
					el('h4', {}, ShortcodeListTitle),
						allShortcodes.map(sc =>
							el(Button,
								{
									key: sc.name,
									onClick: () => handleShortcodeInsert(sc),
									className: 'haup-shortcode-list-button',
								},
								el(Dashicon, { icon: sc.icon }),
								el('span', {}, sc.title)
							)
						)
					)
			)
		);
	};


	// ----------------------------------------------------------------------
	// 3. カスタムフォーマットの登録 (親ボタンとして機能)
	// ----------------------------------------------------------------------
	registerFormatType('haup/simple-shortcode-insert', {
		title: 'Shortcode Insert',
		// 以前指定された tagName を使用します
		tagName: 'dropdown-group-shortcode', 
		className: null,

		edit({ value, onChange }) {
			// Popoverの開閉状態を管理
			const [isPopoverOpen, setIsPopoverOpen] = useState(false);
			const openPopover = () => setIsPopoverOpen(true);
			const closePopover = () => setIsPopoverOpen(false);
            
			return (
				el(BlockFormatControls,
					{},
					el(Toolbar,
						{ className: 'haup-simple-toolbar' }, 
						// 親ボタンの作成 (クリックで Popover を開く)
						el(Button,
							{
								className: 'components-toolbar__control haup-shortcode-parent-button',
								label: ShortcodeButtonTitle,
								onClick: openPopover,
								title: ShortcodeButtonTitle,
							},
							// 適切な親アイコン
							el(Dashicon, { icon: 'shortcode' })
							)
					),
					// Popoverの表示
					isPopoverOpen && el(ShortcodeListPopover, {
						value: value,
						onChange: onChange,
						onClose: closePopover,
					})
				)
			);
		}
	});
})();