import type { StoreConfig } from './config/defaultStoreConfig';

/**
 * Tienda pausada o todavía sin publicar. El backend responde `status: 'closed'` con
 * sólo la marca del comercio (nombre, logo, colores). Antes respondía 404: la tienda
 * seguía mostrando el catálogo cacheado y, cuando el caché vencía, caía al diseño de
 * ejemplo de la plantilla en lugar de avisar que está en pausa.
 */
export default function StoreClosedPage({ config }: { config: StoreConfig }) {
	const noEncontrada = config.closedReason === 'no_encontrada';
	// Sin tienda no hay marca: no se muestra el nombre ni el logo de la plantilla.
	const nombre = noEncontrada ? '' : config.identity?.name?.trim() || 'La tienda';
	const logo = noEncontrada ? '' : config.identity?.logoUrl?.trim();
	const primario = noEncontrada ? '#0f766e' : config.theme?.primary || '#0f766e';
	const inicial = nombre.charAt(0).toUpperCase() || 'T';
	const pausada = config.closedReason === 'pausada';
	const titulo = noEncontrada
		? 'No encontramos esta tienda'
		: pausada
			? 'La tienda está en pausa'
			: 'Estamos preparando la tienda';
	const texto = noEncontrada
		? 'Revisá que la dirección esté bien escrita. Si la tienda cambió de dirección, pedile el link nuevo al comercio.'
		: pausada
			? 'Por el momento no estamos tomando pedidos online. Volvé a visitarnos en unos días.'
			: 'Muy pronto vas a poder comprar online acá. Volvé a visitarnos en unos días.';

	return (
		<main
			style={{
				minHeight: '100vh',
				display: 'grid',
				placeItems: 'center',
				padding: '32px 16px',
				background: config.theme?.background || '#f6f7f6',
				color: config.theme?.text || '#14211f',
				fontFamily: 'system-ui, "Segoe UI", Roboto, sans-serif'
			}}
		>
			<div
				style={{
					width: '100%',
					maxWidth: 460,
					display: 'grid',
					gap: 18,
					textAlign: 'center',
					justifyItems: 'center'
				}}
			>
				{noEncontrada ? (
					<div
						aria-hidden
						style={{ width: 56, height: 56, borderRadius: 14, display: 'grid', placeItems: 'center', background: '#e2e8f0', color: '#475569', fontWeight: 800, fontSize: 26 }}
					>
						?
					</div>
				) : logo ? (
					// eslint-disable-next-line @next/next/no-img-element
					<img
						src={logo}
						alt={nombre}
						style={{ maxWidth: 180, maxHeight: 72, objectFit: 'contain' }}
					/>
				) : (
					<div
						aria-hidden
						style={{
							width: 56,
							height: 56,
							borderRadius: 14,
							display: 'grid',
							placeItems: 'center',
							background: primario,
							color: '#fff',
							fontWeight: 800,
							fontSize: 24
						}}
					>
						{inicial}
					</div>
				)}
				{nombre && (
					<p
						style={{
							margin: 0,
							fontSize: 13,
							letterSpacing: '0.08em',
							textTransform: 'uppercase',
							opacity: 0.7
						}}
					>
						{nombre}
					</p>
				)}
				<h1 style={{ margin: 0, fontSize: 28, lineHeight: 1.2 }}>{titulo}</h1>
				<p style={{ margin: 0, opacity: 0.8, lineHeight: 1.55 }}>{texto}</p>
			</div>
		</main>
	);
}