import { Notice } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { api } from '../api';
import type { OAuthInitResponse } from '../types';

interface ConnectNoticeProps {
	/** Context-specific line explaining what connecting unlocks on this page. */
	message?: string;
}

/**
 * Inline "Connect to Mintall" notice. Lets unconnected merchants see the rest of
 * a page's UI while still offering a one-click path into the OAuth flow.
 */
export default function ConnectNotice({ message }: ConnectNoticeProps): JSX.Element {
	const [connecting, setConnecting] = useState(false);
	const [error, setError] = useState<string | null>(null);

	const handleConnect = async (): Promise<void> => {
		setConnecting(true);
		setError(null);
		try {
			const result = await api.post<OAuthInitResponse>('/oauth/init');
			window.location.href = result.redirect_url;
		} catch (err: unknown) {
			const m = err instanceof Error ? err.message : 'Failed to start connection. Please try again.';
			setError(m);
			setConnecting(false);
		}
	};

	return (
		<div style={{ marginBottom: 16 }}>
			<Notice
				status="warning"
				isDismissible={false}
				actions={[{ label: connecting ? 'Connecting…' : 'Connect to Mintall', onClick: handleConnect }]}
			>
				{error ?? message ?? 'Connect to Mintall to get started.'}
			</Notice>
		</div>
	);
}