'use client';

import { useEffect, useState } from 'react';
import { useWebsocketStore } from '../store/useWebsocketStore';
import styles from '../styles/AppContainer.module.css';

export default function AppContainer({
	children
}: {
	children: React.ReactNode;
}) {
	const { connect, isConnected } = useWebsocketStore();
	const [showHelp, setShowHelp] = useState(false);

	useEffect(() => {
		connect();

		const timer = setTimeout(() => {
			setShowHelp(true);
		}, 3000);

		return () => clearTimeout(timer);
	}, [connect]);

	if (!isConnected) {
		return (
			<div className={styles.overlay}>
				<div className={styles.card}>
					<h1 className={styles.title}>Hex: Unlocked</h1>
					<p className={styles.subtitle}>Awaiting WebSocket connection</p>

					<div className={styles.spinner}></div>

					{showHelp && (
						<div className={styles.helpText}>
							<p style={{ marginBottom: '0.5rem' }}>
								Make sure the client is running.
							</p>
							<p>
								Don't have it? {}
								<a
									href='https://git.neru.rip/neru/HexUnlocked/releases/latest'
									target='_blank'
									rel='noreferrer'
									className={styles.link}
								>
									Get it here
								</a>
							</p>
						</div>
					)}
				</div>
			</div>
		);
	}

	return <>{children}</>;
}