import { cssFontFamilyValue, type CustomFontEntry } from './google-fonts';

export type CtaFields = {
	cta_label?: string | null;
	cta_url?: string | null;
	product_url?: string | null;
};

export function shouldShowCta( fields: CtaFields ): boolean {
	const label = String( fields.cta_label || '' ).trim();
	const url = String( fields.cta_url || fields.product_url || '' ).trim();
	return Boolean( label && url );
}

export function resolveCtaUrl( fields: CtaFields ): string {
	return String( fields.cta_url || fields.product_url || '' ).trim();
}

export function notificationClassNames( opts: {
	prefix: string;
	template: string;
	position: string;
	animation: string;
	extra?: string[];
} ): string {
	const parts = [
		opts.prefix,
		opts.prefix + '--' + opts.position,
		opts.prefix + '--' + opts.template,
		opts.prefix + '--animation-' + opts.animation,
		...( opts.extra || [] ),
	];
	return parts.filter( Boolean ).join( ' ' );
}

function cssWeight(
	style: Record< string, unknown >,
	key: string,
	fallback = 500
) {
	const raw = Number( style[ key ] );
	return String(
		Number.isFinite( raw ) && raw >= 100 && raw <= 900
			? Math.round( raw )
			: fallback
	);
}

function cssPx( value: unknown, fallback: number ) {
	const raw = Number( value );
	return ( Number.isFinite( raw ) ? raw : fallback ) + 'px';
}

export function styleCssVars(
	prefix: string,
	style: Record< string, unknown >,
	customFonts?: CustomFontEntry[] | null
): Record< string, string > {
	const fontSize = Number( style.font_size );
	const resolvedFontSize = Number.isFinite( fontSize ) ? fontSize : 13;
	const vars: Record< string, string > = {
		[ `--${ prefix }-bg` ]: String( style.background || '#ffffff' ),
		[ `--${ prefix }-text` ]: String( style.text || '#172033' ),
		[ `--${ prefix }-muted` ]: String( style.muted_text || '#667085' ),
		[ `--${ prefix }-accent` ]: String( style.accent || '#635bff' ),
		[ `--${ prefix }-border` ]: String( style.border || '#e4e7ec' ),
		[ `--${ prefix }-label-color` ]: String(
			style.label_color || style.accent || '#635bff'
		),
		[ `--${ prefix }-headline-color` ]: String(
			style.headline_color || style.text || '#172033'
		),
		[ `--${ prefix }-message-color` ]: String(
			style.message_color || style.text || style.muted_text || '#667085'
		),
		[ `--${ prefix }-label-size` ]: cssPx( style.label_size, 10 ),
		[ `--${ prefix }-headline-size` ]: cssPx(
			style.headline_size,
			resolvedFontSize + 1
		),
		[ `--${ prefix }-message-size` ]: cssPx(
			style.message_size,
			resolvedFontSize
		),
		[ `--${ prefix }-label-weight` ]: cssWeight( style, 'label_weight' ),
		[ `--${ prefix }-headline-weight` ]: cssWeight(
			style,
			'headline_weight'
		),
		[ `--${ prefix }-message-weight` ]: cssWeight(
			style,
			'message_weight'
		),
		[ `--${ prefix }-font-size` ]: resolvedFontSize + 'px',
		[ `--${ prefix }-width` ]: cssPx( style.width, 420 ),
		[ `--${ prefix }-radius` ]: cssPx( style.radius, 18 ),
	};

	const labelFont = cssFontFamilyValue(
		String( style.label_font || '' ),
		customFonts
	);
	const headlineFont = cssFontFamilyValue(
		String( style.headline_font || '' ),
		customFonts
	);
	const messageFont = cssFontFamilyValue(
		String( style.message_font || '' ),
		customFonts
	);
	if ( labelFont ) {
		vars[ `--${ prefix }-label-font` ] = labelFont;
	}
	if ( headlineFont ) {
		vars[ `--${ prefix }-headline-font` ] = headlineFont;
	}
	if ( messageFont ) {
		vars[ `--${ prefix }-message-font` ] = messageFont;
	}

	return vars;
}

export function isHiddenForViewport(
	display: { hide_mobile?: boolean; hide_desktop?: boolean },
	isMobileViewport: boolean
): boolean {
	if ( display.hide_mobile && isMobileViewport ) {
		return true;
	}
	if ( display.hide_desktop && ! isMobileViewport ) {
		return true;
	}
	return false;
}

export const MOBILE_MAX_WIDTH_PX = 600;
