import { Button, Notice, ToggleControl } from '@wordpress/components';
import { useRef, useState } from '@wordpress/element';
import { api } from '../api';
import { getApiErrorMessage } from '../api-error';
import type { PageViewCaptureFields, SettingsUpdateResponse } from '../types';

interface PageViewCaptureSettingProps {
	value: PageViewCaptureFields;
	canEnable: boolean;
	onSaved: (value: PageViewCaptureFields) => void;
}

export default function PageViewCaptureSetting({
	value,
	canEnable,
	onSaved,
}: PageViewCaptureSettingProps): JSX.Element {
	const [saving, setSaving] = useState<boolean>(false);
	const [error, setError] = useState<string | null>(null);
	const inFlight = useRef<boolean>(false);

	const { page_view_capture: enabled, page_view_capture_decided: decided } = value;

	const save = async (next: boolean): Promise<void> => {
		if (inFlight.current || (next && !canEnable)) {
			return;
		}
		inFlight.current = true;
		setSaving(true);
		setError(null);
		try {
			const result = await api.post<SettingsUpdateResponse>('/settings', { page_view_capture: next });
			onSaved({
				page_view_capture: result.page_view_capture,
				page_view_capture_decided: result.page_view_capture_decided,
			});
		} catch (err: unknown) {
			setError(getApiErrorMessage(err));
		} finally {
			inFlight.current = false;
			setSaving(false);
		}
	};

	return (
		<>
			<p style={{ color: '#757575', marginBottom: 12 }}>
				See which AI shopping agents visit your product pages. When on, page views share basic browser details
				with Mintall.
			</p>
			{error && (
				<div style={{ marginBottom: 12 }}>
					<Notice status="error" isDismissible={false}>
						{error}
					</Notice>
				</div>
			)}
			{decided ? (
				<ToggleControl
					label={enabled ? 'On' : 'Off'}
					checked={enabled}
					disabled={saving || (!enabled && !canEnable)}
					onChange={save}
					__nextHasNoMarginBottom
				/>
			) : (
				<>
					<p style={{ marginBottom: 8 }}>Currently {enabled ? 'on' : 'off'} (default).</p>
					<div style={{ display: 'flex', gap: 8 }}>
						<Button variant="secondary" isBusy={saving} disabled={saving} onClick={() => save(false)}>
							{enabled ? 'Turn off' : 'Keep off'}
						</Button>
						<Button
							variant="secondary"
							isBusy={saving}
							disabled={saving || !canEnable}
							onClick={() => save(true)}
						>
							{enabled ? 'Keep on' : 'Turn on'}
						</Button>
					</div>
				</>
			)}
		</>
	);
}