/* /assets/js/bridge/blocks-api.js (UI-KERN UND KOMPONENTEN-SCHICHT) */

(function (B) {
	
	const PluginName = 'bridge-blocks-api';

	if (!B || typeof grapesjs === 'undefined') {
		console.warn(`%c[${PluginName}] %cBridgeParts (B) oder GrapesJS fehlt. Exit.`, 'color:orange; font-weight:bold;', 'color:inherit;');
		return;
	}

	B.LOG_CONFIG = B.LOG_CONFIG || { PLUGINS: {} };
	B.LOG_CONFIG.PLUGINS[PluginName] = true;	
	
	const log = (message, color = '#1E90FF', type = 'info', force = false) => B.log(PluginName, message, color, type, force);
	
	const qs = new URLSearchParams(location.search);
	const requestedMode = (qs.get('mode') || 'templates').toLowerCase();
	B.EDITOR_MODE = (B.EDITOR_MODE || requestedMode.toUpperCase());
	const EDITOR_MODE = (B.EDITOR_MODE || 'TEMPLATES').toLowerCase();
	log(`START: SKRIPT-AUSFÜHRUNG GESTARTET. Editor Modus: ${EDITOR_MODE}.`, '#DC143C');

	const TARGET_CAT_ID = 'custom';
	const PLACEHOLDER_ID = 'api-placeholder-loading';
	const REFERENCE_COMPONENT_TYPE = 'library-reference';
	
	// --- NEUE KONSTANTEN FÜR SPEICHERN-LOGIK ---
	// Annahme: ID der aktuellen Seite/Template ist global in B verfügbar
	const CURRENT_ENTITY_ID = Number(B.CURRENT_ENTITY_ID || qs.get('id') || 0); 
	// Annahme: Basis-URL der API ist in B verfügbar
	const API_KERNEL_URL = B.API_KERNEL_URL || B.API_BASE || '/api.php'; 
	// -------------------------------------------

// --------------------------------------------------------
// (1) Kern-Logik: Platzhalter und Kategorien registrieren (SYNCHRON)
// --------------------------------------------------------
	const preRegisterCategoriesAndPlaceholders = (editor) => {
		const bm = editor.BlockManager;
		
		bm.add(PLACEHOLDER_ID, {
			label: 'Lade Custom-Blöcke...',
			category: TARGET_CAT_ID,
			content: '<div style="padding: 10px; color: #1e3a8a; background-color: #eef2ff; border: 1px solid #c7d2fe; text-align: center;">⚙️ Custom-Blöcke werden geladen...</div>',
			attributes: { class: 'gjs-block__api-placeholder' },
		});

		const cat = bm.getCategories().get(TARGET_CAT_ID);
		if (!cat) {
			bm.addCategory(TARGET_CAT_ID, { label: 'Custom', open: true, order: 1 });
		}
		log('Platzhalter und Kategorie registriert.', '#008000');
	};

// --------------------------------------------------------
// (2) Komponenten-Logik (ASYNCHRONER WORKAROUND & FIX)
// --------------------------------------------------------
	const rehydrateLegacyReferences = (editor) => {
		try {
			const wrapper = editor.DomComponents?.getWrapper?.();
			if (!wrapper) return;

			const candidates = wrapper.find('[data-lib-kind][data-lib-id]');
			if (!candidates || !candidates.length) return;

			let patched = 0;

			candidates.forEach((component) => {
				const attrs = (typeof component.getAttributes === 'function') ? (component.getAttributes() || {}) : {};
				const attrKind = component.get('lib-kind') || attrs['data-lib-kind'] || '';
				const attrId = component.get('lib-id') || attrs['data-lib-id'] || '';
				if (!attrKind || !attrId) return;

				if (typeof component.syncReferenceAttributes === 'function') {
					component.syncReferenceAttributes();
				} else if (component.get && component.set && component.get('type') !== REFERENCE_COMPONENT_TYPE) {
					const parent = component.parent && component.parent();
					if (!parent || typeof parent.components !== 'function') return;

					const atIndex = parent.components().indexOf(component);
					const startContent = typeof component.toHTML === 'function' ? component.toHTML() : '';
					const classes = component.get && typeof component.get === 'function'
						? (component.get('classes') || [])
						: [];
					const normalizedClasses = Array.isArray(classes)
						? classes
						: (classes.models || classes.collection || []);

					const newComponent = {
						type: REFERENCE_COMPONENT_TYPE,
						'lib-kind': attrKind,
						'lib-id': attrId,
						startContent,
						attributes: {
							...attrs,
							'data-lib-kind': attrKind,
							'data-lib-id': attrId,
							'data-lib-ref': attrs['data-lib-ref'] || '1',
						},
					};

					if (normalizedClasses && normalizedClasses.length) {
						newComponent.classes = normalizedClasses.map((cls) => {
							if (typeof cls === 'string') return { name: cls };
							if (cls && typeof cls.get === 'function') return { name: cls.get('name') };
							if (cls && cls.name) return { name: cls.name };
							return null;
						}).filter(Boolean);
					}

					component.remove();
					parent.components().add(newComponent, { at: atIndex });
					patched++;
				}
			});

			if (patched) {
				log(`REHYDRATE`, `${patched} Legacy-Referenzen in Referenz-Komponenten umgewandelt.`, '#228B22');
			}
		} catch (error) {
			log('REF REHYDRATE ERROR', error?.message || String(error), '#dc3545', 'error', true);
		}
	};

	const registerReferenceComponent = (editor) => {
		const domc = editor.DomComponents;
		const defaultType = domc.getType('default');
		
		if (!defaultType) return;
		
		log(`Starte Registrierung des Komponententyps '${REFERENCE_COMPONENT_TYPE}'.`, '#1E90FF');

		const ReferenceModel = defaultType.model.extend({
				defaults: {
					...defaultType.model.prototype.defaults,
					components: [],
					editable: false,
					removable: true,
					draggable: true,
					copyable: true,
					droppable: false,
					traits: [
						{ type: 'text', name: 'lib-id', label: 'Library ID', changeProp: true },
						{ type: 'text', name: 'lib-kind', label: 'Library Kind', changeProp: true },
					],
					'lib-id': '',
					'lib-kind': '',
					startContent: '',
					rawHtml: '',
				},

				initialize(props = {}, opts = {}) {
					defaultType.model.prototype.initialize.apply(this, [props, opts]);

					this.on('change:lib-kind change:lib-id', () => {
						this.ensureReferenceMetadata();
						this.reloadComponentContent();
					});

					this.ensureReferenceMetadata();
					const id = this.get('lib-id');
					const kind = this.get('lib-kind');
					const startContent = this.get('startContent');

					log(`INIT LÄUFT. lib-kind: ${kind}, lib-id: ${id}.`, '#8A2BE2');

					if (startContent) {
						this.setPreviewHtml(startContent);
						this.unset('startContent');
					} else if (kind && id) {
						this.reloadComponentContent({ forced: true, reason: 'INIT_LOAD' });
					}
				},

				ensureReferenceMetadata() {
					const attrsCurrent = this.get('attributes') || {};
					let attrs = Array.isArray(attrsCurrent) ? {} : { ...attrsCurrent };
					const kind = this.get('lib-kind') || attrs['data-lib-kind'] || '';
					const id = this.get('lib-id') || attrs['data-lib-id'] || '';
					let changed = false;

					if (!this.get('lib-kind') && kind) {
						this.set('lib-kind', kind, { silent: true });
					}
					if (!this.get('lib-id') && id) {
						this.set('lib-id', id, { silent: true });
					}

					if (attrs['data-lib-kind'] !== kind) {
						attrs['data-lib-kind'] = kind;
						changed = true;
					}
					if (attrs['data-lib-id'] !== id) {
						attrs['data-lib-id'] = id;
						changed = true;
					}
					if (attrs['data-lib-ref'] !== '1') {
						attrs['data-lib-ref'] = '1';
						changed = true;
					}

					if (changed) {
						this.set('attributes', attrs);
					}
				},

				getCachedApiItem(kind, id) {
					const key = `${kind}-${id}`;
					const item = B.ApiItemCache?.[key];
					return item || null;
				},

				fetchReference(kind, id) {
					if (!kind || !id) return Promise.resolve(null);
					const key = `${kind}-${id}`;
					const cached = this.getCachedApiItem(kind, id);
					if (cached && cached.html) return Promise.resolve(cached);
					if (typeof B.getApiItem !== 'function') return Promise.resolve(cached);
					return B.getApiItem(kind, id)
						.then((data) => {
							if (!data) return cached;
							const normalized = {
								html: data.html || data.item?.html || '',
								content: data.content || data.item?.content || '',
							};
							B.ApiItemCache = B.ApiItemCache || {};
							B.ApiItemCache[key] = { ...(B.ApiItemCache[key] || {}), ...normalized };
							return B.ApiItemCache[key];
						})
						.catch(() => cached);
				},

				renderError(message) {
					return `<div class="lib-ref-placeholder">${message}</div>`;
				},

				setPreviewHtml(html) {
					const safeHtml = html || this.renderError('Referenz lädt …');
					this.set('rawHtml', safeHtml);
					const comps = this.components();
					if (comps && comps.length) comps.reset([]);
					this.trigger('preview:update');
				},

				reloadComponentContent(opts = {}) {
					const kind = this.get('lib-kind');
					const id = this.get('lib-id');
					const reason = opts.reason || (opts.forced ? 'FORCED' : 'AUTO');
					log(`RELOAD START (${reason}). Kind: ${kind}, ID: ${id}.`, '#8A2BE2');

					if (!kind || !id) {
						log('RELOAD FEHLER: lib-kind oder lib-id fehlt.', '#dc3545', 'error', true);
						this.setPreviewHtml(this.renderError('🛑 Fehler: Referenz unvollständig.'));
						return;
					}

					const cached = this.getCachedApiItem(kind, id);
					if (cached && cached.html) {
						this.setPreviewHtml(cached.html);
					}

					this.fetchReference(kind, id)
						.then((item) => {
							if (item && item.html) {
								this.setPreviewHtml(item.html);
								log(`INHALT erfolgreich für ${kind}/${id} geladen.`, '#008000');
							} else {
								log(`RELOAD FEHLER: Inhalt ${kind}/${id} nicht gefunden.`, '#dc3545', 'error', true);
								this.setPreviewHtml(
									this.renderError(`🛑 Fehler: Inhalt für ${kind}/${id} nicht gefunden.`)
								);
							}
						})
						.catch((error) => {
							log('RELOAD FETCH ERROR', error?.message || String(error), '#dc3545', 'error', true);
							this.setPreviewHtml(this.renderError('🛑 Fehler beim Laden der Referenz.'));
						});
				},

				toHTML(opts = {}) {
					const raw = this.get('rawHtml');
					if (raw) return raw;
					return defaultType.model.prototype.toHTML.call(this, opts);
				},

				syncReferenceAttributes() {
					this.ensureReferenceMetadata();
				},
			}, {
				isComponent: (el) => el && el.nodeType === 1 && el.hasAttribute('lib-id'),
			});

			const ReferenceView = defaultType.view.extend({
				initialize(opts = {}) {
					defaultType.view.prototype.initialize.apply(this, [opts]);
					this.listenTo(this.model, 'preview:update', this.renderPreview);
				},

				render() {
					defaultType.view.prototype.render.apply(this, arguments);
					this.el.classList.add('lib-ref');
					this.renderPreview();
					return this;
				},

				renderPreview() {
					const html = this.model.get('rawHtml') || this.model.renderError('Referenz lädt …');
					this.el.innerHTML = '';
					const wrap = document.createElement('div');
					wrap.className = 'lib-ref-inner';
					wrap.innerHTML = html;
					wrap.setAttribute('contenteditable', 'false');
					wrap.style.pointerEvents = 'none';
					wrap.style.userSelect = 'none';
					this.el.appendChild(wrap);
				},
			});

			domc.addType(REFERENCE_COMPONENT_TYPE, {
				model: ReferenceModel,
				view: ReferenceView,
			});

			log(`Komponententyp '${REFERENCE_COMPONENT_TYPE}' registriert.`, '#008000');
	};
	
// --------------------------------------------------------
// (3) HINZUGEFÜGT: Speichern-Befehl (Command)
// --------------------------------------------------------
	const registerSaveCommand = (editor) => {
		
		editor.Commands.add('save-data', {
			run: function(editor, sender) {
				// 💡 FIX: Sicherstellen, dass sender existiert und die 'set'-Methode hat (nur bei Buttons)
				if (sender && typeof sender.set === 'function') {
					sender.set('active', 0); // Schaltet den Button nach dem Klick ab
				}

				if (!CURRENT_ENTITY_ID) {
					log('SAVE ABORT', 'Speichern abgebrochen: Keine Entity ID verfügbar (B.CURRENT_ENTITY_ID fehlt oder ist 0).', 'red', 'error', true);
					alert('Speichern fehlgeschlagen: Die ID des aktuellen Elements fehlt.');
					return;
				}

				// 1. Daten extrahieren
					const htmlContent = editor.getHtml() + '<style>' + editor.getCss() + '</style>';
					// 2. KRITISCH: Holt die JSON-Repräsentation des Editors
					let jsonProjectDataRaw = '';
					try {
						const jsonProjectData = editor.getProjectData();
						jsonProjectDataRaw = JSON.stringify(jsonProjectData);
					} catch (e) {
						console.error('[bridge-blocks-api] getProjectData stringify failed', e);
						jsonProjectDataRaw = '';
					}

				const resource = EDITOR_MODE;
				const action = `${resource}.update`;

				log('SAVE START', 'Starte Speichern des Inhalts an die API...', '#FF4500');

				// 3. Daten für den POST-Request vorbereiten
					const dataToSend = {
						action,
						id: CURRENT_ENTITY_ID, 
						html: htmlContent,
						// 🚨 KRITISCH: Server erwartet das Feld 'json'
						json: jsonProjectDataRaw, 
					};

				if (B.CURRENT_ENTITY_NAME) {
					dataToSend.name = B.CURRENT_ENTITY_NAME;
				}

				// 4. API-Aufruf (fetch)
				fetch(API_KERNEL_URL, {
					method: 'POST',
					headers: {
						// Wichtig: JSON-Daten senden
						'Content-Type': 'application/json', 
					},
					body: JSON.stringify(dataToSend),
				})
				.then(response => {
					if (!response.ok) {
						log('SAVE FAILED (HTTP)', `Speichern fehlgeschlagen: HTTP-Status ${response.status}.`, 'red', 'error', true);
						throw new Error(`HTTP Error: ${response.status}`);
					}
					return response.json();
				})
				.then(data => {
					if (data.ok === false) {
						log('SAVE FAILED (API)', `Speichern fehlgeschlagen: API-Fehler: ${data.error || 'Unbekannt'}`, 'red', 'error', true);
						alert(`Speichern fehlgeschlagen: ${data.error || 'API-Fehler'}`);
					} else {
						log('SAVE SUCCESS', `Speichern erfolgreich für Aktion ${action}.`, '#008000', 'info', true);
						// 💡 HINZUGEFÜGT: Bestätigung an das Elternfenster senden
						window.parent.postMessage({ source: 'editor', type: 'save:success' }, '*');
						editor.refresh(); // Optional: Editor-Ansicht aktualisieren
					}
				})
				.catch(error => {
					log('SAVE FAILED (FETCH)', `FEHLER beim Speichern: ${error.message}`, 'red', 'error', true);
					alert('Speichern fehlgeschlagen. Netzwerk- oder JSON-Parse-Fehler.');
				});
			}
		});
		
		// Eventuell den Button in der Toolbar registrieren (falls noch nicht geschehen)
		editor.Panels.addButton('options', {
			id: 'save-data',
			className: 'fa fa-floppy-o',
			command: 'save-data', 
			attributes: { title: 'Speichern (Strg/Cmd + S)' }
		});
		
		// Tastenkürzel für Speichern hinzufügen
		editor.Keymaps.add('ctrl-s', 'save-data', 'ctrl+s');
		editor.Keymaps.add('cmd-s', 'save-data', 'cmd+s');

		log('Speichern-Command und Button/Keymap registriert.', '#FF4500');
	};
	
// --------------------------------------------------------
// (4) Plugin-Funktion (AKTUALISIERT)
// --------------------------------------------------------
	const plugin = (editor) => {
		preRegisterCategoriesAndPlaceholders(editor);	
		registerReferenceComponent(editor);	
		registerSaveCommand(editor); // HINZUGEFÜGT: Speichern-Logik
		
		editor.on('load', () => {
			rehydrateLegacyReferences(editor);
			log("GrapesJS 'load' Event: Delegiere asynchrones Laden der API-Blöcke an library-api.", '#1E90FF');
			if (B.loadAndRegisterApiBlocks) { 
				setTimeout(() => {
					B.loadAndRegisterApiBlocks(editor);
				}, 500);
			} else {
				log(`FEHLER: B.loadAndRegisterApiBlocks ist nicht definiert. library-api.js wurde nicht geladen oder nicht richtig initialisiert.`, 'red', 'error', true);
				editor.BlockManager.remove(PLACEHOLDER_ID);
			}
		});
	};

// --------------------------------------------------------
// (5) Export an Bridge Core (unverändert)
// --------------------------------------------------------
	if (B.registerGrapesJSPlugin) {
		B.registerGrapesJSPlugin(PluginName, plugin);
		log(`PLUGIN REGISTER: '${PluginName}' zur Bridge Plugin Registry hinzugefügt.`, '#008000');
	} else {
		log(`FEHLER: B.registerGrapesJSPlugin fehlt. Plugin-Registrierung gescheitert.`, 'red', 'error', true);
	}

})(window.BridgeParts || (window.BridgeParts = {}));