/**
 * Tax form: owns state, validation (Zod), and errors.
 * Notifies page via onChange(formId, value) and onInteraction().
 */
import { __ } from '@wordpress/i18n';
import { memo, useState, useEffect, useCallback, useRef } from '@wordpress/element';
import { Flex } from '@wordpress/components';
import { SettingsField } from './settings-field';
import type { TaxSettings } from '../../types/settings';
import type { SettingsFieldSelectOption } from './settings-field';
import { taxSettingsSchema } from './utils/schemas';
import { getSectionFieldErrors } from './utils/getSettingsFieldErrors';

export const TAX_FORM_ID = 'tax' as const;

export interface TaxFormProps {
	defaultValue: TaxSettings;
	onChange: (formId: string, value: TaxSettings) => void;
	onInteraction?: () => void;
	resetTrigger?: number;
	submitErrors?: Record<string, string>;
	vatStatusOptions: SettingsFieldSelectOption[];
}

function TaxFormInner({
	defaultValue,
	onChange,
	onInteraction,
	resetTrigger = 0,
	submitErrors,
	vatStatusOptions,
}: TaxFormProps) {
	const [value, setValue] = useState<TaxSettings>(() => ({ ...defaultValue }));
	const [errors, setErrors] = useState<Record<string, string>>({});
	const hasInteracted = useRef(false);

	useEffect(() => {
		setValue({ ...defaultValue });
		setErrors({});
		hasInteracted.current = false;
	}, [defaultValue, resetTrigger]);

	useEffect(() => {
		const result = taxSettingsSchema.safeParse(value);
		if (result.success) {
			setErrors({});
		} else {
			setErrors(getSectionFieldErrors(result.error));
		}
	}, [value]);

	const displayErrors = submitErrors ?? errors;

	const handleChange = useCallback(
		(field: keyof TaxSettings, v: string) => {
			if (!hasInteracted.current) {
				hasInteracted.current = true;
				onInteraction?.();
			}
			const next = { ...value, [field]: v };
			setValue(next);
			onChange(TAX_FORM_ID, next);
		},
		[value, onChange, onInteraction]
	);

	return (
		<Flex direction="column" gap={3}>
			<SettingsField
				kind="text"
				label={__('VAT number', 'parcel2go-shipping')}
				value={value.vatNumber}
				onChange={(v) => handleChange('vatNumber', v)}
				error={displayErrors.vatNumber}
			/>
			<SettingsField
				kind="text"
				label={__('EORI', 'parcel2go-shipping')}
				value={value.eori}
				onChange={(v) => handleChange('eori', v)}
				error={displayErrors.eori}
			/>
			<SettingsField
				kind="select"
				label={__('VAT status', 'parcel2go-shipping')}
				value={value.vatStatus}
				onChange={(v) => handleChange('vatStatus', v)}
				options={vatStatusOptions}
				error={displayErrors.vatStatus}
			/>
		</Flex>
	);
}

export const TaxForm = memo(TaxFormInner);