const ErrorScreen = ({ onReset }) => {
    const [mounted, setMounted] = React.useState(false);
    const [fill, setFill] = React.useState('0%');

    React.useEffect(() => {
        const raf = requestAnimationFrame(() => setMounted(true));
        // animate meter to full shortly after mount
        const t = setTimeout(() => setFill('100%'), 60);
        return () => { cancelAnimationFrame(raf); clearTimeout(t); };
    }, []);

    const payload = {
        error: "UNSUPPORTED_LANGUAGE",
        message: "Input does not conform to JavaScript standards.",
        suggestion: "Have you considered learning JavaScript?"
    };

    const [showToast, setShowToast] = React.useState(false);
    const [toastTimer, setToastTimer] = React.useState(null);
    const [showModal, setShowModal] = React.useState(false);
    const [modalTimer, setModalTimer] = React.useState(null);

    // typewriter for heading
    const headingFull = "HTTP/1.1 418 I'm a Teapot";
    const [headingTyped, setHeadingTyped] = React.useState('');


    const handleTryAgain = () => {
        // show inline toast for 2s then call onReset
        if (toastTimer) return;
        setShowToast(true);
        const t = setTimeout(() => {
            setShowToast(false);
            setToastTimer(null);
            if (typeof onReset === 'function') onReset();
        }, 2000);
        setToastTimer(t);
    };

    const handleConvert = () => {
        if (modalTimer) return;
        // open a blank tab now to avoid popup blockers, then set location after delay
        const newWin = window.open('', '_blank');
        setShowModal(true);
        const t = setTimeout(() => {
            setShowModal(false);
            setModalTimer(null);
            if (newWin) newWin.location.href = 'https://translate.google.com';
        }, 1500);
        setModalTimer(t);
    };

    React.useEffect(() => {
        return () => {
            if (toastTimer) clearTimeout(toastTimer);
            if (modalTimer) clearTimeout(modalTimer);
        };
    }, [toastTimer, modalTimer]);

    React.useEffect(() => {
        let i = 0;
        const iv = setInterval(() => {
            i += 1;
            setHeadingTyped(headingFull.slice(0, i));
            if (i >= headingFull.length) clearInterval(iv);
        }, 50);
        return () => clearInterval(iv);
    }, []);

    return (
        <section className={"error-screen " + (mounted ? 'enter' : '')}>
            <div className="error-heading">{headingTyped}</div>
            <div className="error-sub">Cannot process non-JavaScript input</div>

            <div className="json-block">
                <button
                className="copy-btn"
                onClick={() => navigator.clipboard.writeText(JSON.stringify(payload, null, 2))}
                >
                    Copy
                </button>
                <pre>{JSON.stringify(payload, null, 2)}</pre>
            </div>

            <div className="confidence">
                <div className="confidence-label">IDENTITY VERIFIED: 99.99% NOT JAVASCRIPT</div>
                <div className="confidence-bar">
                    <div className="confidence-inner" style={{ width: fill }} />
                </div>
            </div>

            <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
                <button className="analyze-btn active" onClick={handleTryAgain} disabled={!!toastTimer}>Try Again</button>
                <button className="analyze-btn" onClick={handleConvert} disabled={!!modalTimer}>Convert to JavaScript</button>
            </div>

            {showToast && <div className="toast">Just learn JavaScript bro.</div>}

            {showModal && (
                <div className="fake-modal">
                    <div className="fake-modal-card">
                        <div>Initiating conversion...</div>
                        <div style={{ marginTop: 8, opacity: 0.9, fontSize: '0.92rem' }}>Redirecting to conversion engine...</div>
                    </div>
                </div>
            )}
        </section>
    );
}