/**
 * Inline error display with contextual action links.
 */
export function ErrorMessage( { error } ) {
	const { settingsUrl, dashboardUrl } = window.repivotData || {};

	if ( ! error ) return null;

	const code = error.code || 'UNKNOWN';
	const message = error.message || 'Something went wrong.';

	// Show upgrade prompt for credit issues.
	if ( code === 'INSUFFICIENT_CREDITS' ) {
		return (
			<div className="repivot-error repivot-error--upgrade">
				<div className="repivot-error-icon">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
						<circle cx="10" cy="10" r="9" stroke="#f59e0b" strokeWidth="1.5"/>
						<path d="M10 6v5M10 13v1" stroke="#f59e0b" strokeWidth="1.5" strokeLinecap="round"/>
					</svg>
				</div>
				<div className="repivot-error-body">
					<strong>Plan limit reached</strong>
					<p>{ message }</p>
					<a
						href="https://www.repivot.ai/billing"
						target="_blank"
						rel="noopener noreferrer"
						className="repivot-error-action"
					>
						Upgrade Plan
					</a>
				</div>
			</div>
		);
	}

	// Not connected.
	if ( code === 'NOT_CONNECTED' ) {
		return (
			<div className="repivot-error repivot-error--connect">
				<div className="repivot-error-icon">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
						<circle cx="10" cy="10" r="9" stroke="#6b7280" strokeWidth="1.5"/>
						<path d="M7 7l6 6M13 7l-6 6" stroke="#6b7280" strokeWidth="1.5" strokeLinecap="round"/>
					</svg>
				</div>
				<div className="repivot-error-body">
					<strong>Not connected</strong>
					<p>Connect your Repivot account to see analytics.</p>
					{ settingsUrl && (
						<a href={ settingsUrl } className="repivot-error-action">
							Connect
						</a>
					) }
				</div>
			</div>
		);
	}

	// Generic error.
	return (
		<div className="repivot-error">
			<div className="repivot-error-icon">
				<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
					<circle cx="10" cy="10" r="9" stroke="#ef4444" strokeWidth="1.5"/>
					<path d="M10 6v5M10 13v1" stroke="#ef4444" strokeWidth="1.5" strokeLinecap="round"/>
				</svg>
			</div>
			<div className="repivot-error-body">
				<strong>Error</strong>
				<p>{ message }</p>
			</div>
		</div>
	);
}