const AnalyzingScreen = ({ onComplete }) => {
    const [progress, setProgress] = React.useState(0);
    const [logs, setLogs] = React.useState([]);
    const [mounted, setMounted] = React.useState(false);
    const titleFull = 'Running Analysis...';
    const [titleTyped, setTitleTyped] = React.useState('');

    const messages = [
        "Initializing parser...",
        "Parsing syntax tree...",
        "Running static analysis...",
        "Checking JavaScript compliance...",
        "Evaluating language fingerprint...",
        "Cross-referencing ECMAScript spec..."
    ];

    const logIndexRef = React.useRef(0);
    const calledCompleteRef = React.useRef(false);
    const containerRef = React.useRef(null);

    // progress from 0 -> 100 over 3000ms
    React.useEffect(() => {
        const raf = requestAnimationFrame(() => setMounted(true));
        let ti = 0;
        const tiv = setInterval(() => {
            ti += 1;
            setTitleTyped(titleFull.slice(0, ti));
            if (ti >= titleFull.length) clearInterval(tiv);
        }, 45);

        const duration = 3000;
        const start = Date.now();
        const tick = 40; // ms
        const id = setInterval(() => {
            const elapsed = Date.now() - start;
            const pct = Math.min(100, Math.round((elapsed / duration) * 100));
            setProgress(pct);
            if (pct >= 100) {
                clearInterval(id);
                if (!calledCompleteRef.current) {
                    calledCompleteRef.current = true;
                    if (typeof onComplete === 'function') onComplete();
                }
            }
        }, tick);

        return () => { clearInterval(id); clearInterval(tiv); cancelAnimationFrame(raf); };
    }, [onComplete]);

    // append log lines every 600ms
    React.useEffect(() => {
        const id = setInterval(() => {
            const i = logIndexRef.current;
            if (i < messages.length) {
                setLogs((prev) => [...prev, messages[i]]);
                logIndexRef.current = i + 1;
            } else {
                clearInterval(id);
            }
        }, 600);

        return () => clearInterval(id);
    }, []);

    // auto-scroll logs
    React.useEffect(() => {
        if (containerRef.current) {
            containerRef.current.scrollTop = containerRef.current.scrollHeight;
        }
    }, [logs]);

    return (
        <section className={"analyzing-screen " + (mounted ? 'enter' : '')}>
            <div className="title">{titleTyped}</div>

            <div className="progress">
                <div className="progress-inner" style={{ width: progress + '%' }} />
                <div className="progress-label">{progress}%</div>
            </div>

            <div className="log-container" ref={containerRef}>
                {logs.map((l, idx) => (
                    <div key={idx} className="log-line">{l}</div>
                ))}
                <div className="log-line">
                    <span className="cursor">|</span>
                </div>
            </div>
        </section>
    );
}