"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 unlocker 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? Download it <a href="https://git.neru.rip/neru/HexUnlocked" target="_blank" rel="noreferrer" className={styles.link}>here</a>
                            </p>
                        </div>
                    )}
                </div>
            </div>
        );
    }

    return <>{children}</>;
}