import { useEffect, useState } from 'react';
import './preload.css';

const splitNameForPreload = (name: string) => {
    if (!name) return { part1: 'Ser', part2: 'v', part3: 'er' };
    const len = name.length;
    const cut1 = Math.max(1, Math.ceil(len * 0.4));
    const cut2 = Math.min(len - 1, cut1 + Math.max(1, Math.ceil(len * 0.2)));
    return {
        part1: name.slice(0, cut1),
        part2: name.slice(cut1, cut2),
        part3: name.slice(cut2),
    };
};

interface PreloadProps {
    logoUrl?: string | null;
    appName?: string;
}

export function Preload({ logoUrl, appName }: PreloadProps) {
    const [hidden, setHidden] = useState(false);
    const [removed, setRemoved] = useState(false);

    useEffect(() => {
        document.body.classList.add('preloading');

        const minTime = 800;
        const startTime = Date.now();

        const hidePreloader = () => {
            const elapsed = Date.now() - startTime;
            const remaining = Math.max(0, minTime - elapsed);

            setTimeout(() => {
                setHidden(true);
                document.body.classList.remove('preloading');
                setTimeout(() => setRemoved(true), 700);
            }, remaining);
        };

        if (document.readyState === 'complete') {
            hidePreloader();
        } else {
            window.addEventListener('load', hidePreloader);
            return () => window.removeEventListener('load', hidePreloader);
        }

        return () => {
            document.body.classList.remove('preloading');
        };
    }, []);

    if (removed) return null;

    const src = logoUrl || '/mostwanted/img/logosmall.png';

    return (
        <div id="preloader" className={hidden ? 'hidden' : ''}>
            <div className="preloader-bg"></div>
            <div className="preloader-inner">
                <div className="preloader-logo-wrap">
                    <img src={src} alt="MostWanted" className="preloader-logo" width={100} height={100} />
                    <div className="preloader-ring"></div>
                    <div className="preloader-ring preloader-ring--2"></div>
                </div>
                <div className="preloader-name">
                    {(() => {
                        const { part1, part2, part3 } = splitNameForPreload(appName || '');
                        return (
                            <>
                                <span className="lin">{part1}</span>
                                <span className="two">{part2}</span>
                                <span className="death">{part3}</span>
                            </>
                        );
                    })()}
                </div>
                <div className="preloader-bar-wrap">
                    <div className="preloader-bar"></div>
                </div>
                <div className="preloader-tagline">Prepare for battle.</div>
            </div>
        </div>
    );
}

export default Preload;