import { Modal, Notice, Spinner } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
import { api } from '../api';
import type { ProductSnapshot } from '../types';

interface SnapshotModalProps {
	productId: number;
	productName: string;
	onClose: () => void;
}

export default function SnapshotModal({ productId, productName, onClose }: SnapshotModalProps): JSX.Element {
	const [snapshot, setSnapshot] = useState<ProductSnapshot | null>(null);
	const [loading, setLoading] = useState<boolean>(true);
	const [error, setError] = useState<string | null>(null);

	useEffect(() => {
		let cancelled = false;
		setLoading(true);
		setError(null);
		api.get<ProductSnapshot>(`/products/${productId}/snapshot`)
			.then((data) => {
				if (!cancelled) setSnapshot(data);
			})
			.catch((err: unknown) => {
				if (cancelled) return;
				const message =
					err && typeof err === 'object' && 'message' in err
						? String((err as { message: unknown }).message)
						: 'This product has no certificate data yet.';
				setError(message);
			})
			.finally(() => {
				if (!cancelled) setLoading(false);
			});
		return () => {
			cancelled = true;
		};
	}, [productId]);

	return (
		<Modal title={`Machine-readable record — ${productName}`} onRequestClose={onClose}>
			<div style={{ minWidth: 480, maxWidth: 640 }}>
				{loading && (
					<div style={{ textAlign: 'center', padding: '24px' }}>
						<Spinner />
					</div>
				)}
				{!loading && error && (
					<Notice status="info" isDismissible={false}>
						{error}
					</Notice>
				)}
				{!loading && !error && snapshot && (
					<pre
						style={{
							background: '#f0f0f1',
							padding: 12,
							borderRadius: 4,
							maxHeight: 400,
							overflow: 'auto',
							fontSize: 12,
						}}
					>
						{JSON.stringify(snapshot, null, 2)}
					</pre>
				)}
			</div>
		</Modal>
	);
}