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

export default function ConnectionBanner(): 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 message = err instanceof Error ? err.message : 'Failed to start connection. Please try again.';
			setError(message);
			setConnecting(false);
		}
	};

	return (
		<div
			className="mintall-card"
			style={{ borderColor: '#2271b1', borderWidth: 2, textAlign: 'center', padding: '48px 24px' }}
		>
			<div style={{ maxWidth: 480, margin: '0 auto' }}>
				<h2 style={{ fontSize: 22, marginBottom: 8 }}>Welcome to Mintall Keep</h2>
				<p style={{ color: '#50575e', marginBottom: 24, lineHeight: 1.6 }}>
					Connect your store to protect product images with C2PA digital credentials and make them
					discoverable by AI shopping agents.
				</p>

				{error && <p style={{ color: '#d63638', fontSize: 13, marginBottom: 12 }}>{error}</p>}

				<Button
					variant="primary"
					isBusy={connecting}
					disabled={connecting}
					onClick={handleConnect}
					__next40pxDefaultSize
					style={{ width: '100%', maxWidth: 360, justifyContent: 'center' }}
				>
					{connecting ? 'Connecting...' : 'Connect to Mintall'}
				</Button>
			</div>
		</div>
	);
}