/**
 * view.js
 * Frontend JavaScript for the Form Block
 * Handles form validation and submission
 */
class FormBlock {
	constructor() {
		this.controller = new window.jvbForm();

		document.querySelectorAll('.jvb-form-block form').forEach(form => {
			this.controller.registerForm(form, {autosave: true});
		});

		this.controller.subscribe((event, data) => {
			if (event === 'form-submit') {
				this.handleFormSubmission(data);
			}
		});
	}

	async handleFormSubmission(data) {
		let formId = data.formId;
		let formConfig = data.config;
		let formData = data.fullData;
		let form = formConfig.element;

		let headers = {
			'X-WP-Nonce': jvbSettings.nonce,
			'Content-Type': 'application/json'
		};

		let block = form.closest('.jvb-form-block');
		this.controller.showFormStatus(formId, 'uploading');

		try {
			const response = await fetch(`${jvbSettings.api}forms`, {
				method: 'POST',
				headers,
				body: JSON.stringify(formData)
			});

			if (!response.ok) {
				this.controller.showFormStatus(formId, 'error');
				const errorData = await response.json().catch(() => ({}));
				throw new Error(errorData.message || `Request failed with status ${response.status}`);
			}

			this.controller.showFormStatus(formId, 'submitted');
			this.controller.showSummary(formId, '.jvb-form-block');
		} catch (error) {
			throw error;
		} finally {
			this.controller.store.delete(formId);
		}
	}
}

document.addEventListener('DOMContentLoaded', function() {
	new FormBlock();
});