import React, { useState, useEffect } from 'react';
import LoginComponent from '../components/LoginComponent';
import Logo from '../assets/images/campfire_logs_square_logo_bg_match.png';

const LoginPage = React.forwardRef(({ onLogin }, ref) => {
    const [showLogin, setShowLogin] = useState(false);
    const [isTransitioning, setIsTransitioning] = useState(true);
    const [showKendoCredit, setShowKendoCredit] = useState(false);

    useEffect(() => {
        // Prevent scrollbar during initial load
        document.body.style.overflow = 'hidden';
        
        // First transition: move logo and copyright to final positions
        const transitionTimer = setTimeout(() => {
            setIsTransitioning(false);
        }, 800); // Match copyright transition timing

        // Second: fade in login component after transition completes
        const loginTimer = setTimeout(() => {
            setShowLogin(true);
        }, 1500); // Give copyright more time to transition

        // Third: show KendoReact credit after login appears
        const kendoTimer = setTimeout(() => {
            setShowKendoCredit(true);
        }, 1800); // After login form appears

        // Re-enable scrolling after everything is completely done
        const scrollTimer = setTimeout(() => {
            document.body.style.overflow = 'auto';
        }, 2000); // After all transitions complete

        return () => {
            clearTimeout(transitionTimer);
            clearTimeout(loginTimer);
            clearTimeout(kendoTimer);
            clearTimeout(scrollTimer);
            // Cleanup: restore scrolling if component unmounts
            document.body.style.overflow = 'auto';
        };
    }, []);

    return (
        <div 
            ref={ref} 
            style={{ 
                textAlign: 'center', 
                width: '400px', 
                margin: '0 auto',
                transition: 'all 0.8s ease-in-out',
                transform: isTransitioning ? 'translateY(150px)' : 'translateY(30px)',
                overflow: 'hidden'
            }}
        >
            <img 
                src={Logo} 
                alt="Campfire Logs Logo" 
                width="350" 
                height="280" 
                style={{ 
                    display: 'block', 
                    margin: '0 auto',
                    transition: 'all 0.8s ease-in-out'
                }} 
            />
            <hr style={{ 
                backgroundColor: '#edbd7d', 
                height: '2px', 
                border: 'none', 
                width: '400px', 
                margin: '5px auto 25px auto'
            }}/>            
            <div style={{ 
                opacity: showLogin ? 1 : 0, 
                transition: 'opacity 0.5s ease-in-out',
                visibility: showLogin ? 'visible' : 'hidden',
                position: 'relative',
                width: '100%',
                marginTop: '20px'
            }}>
                <LoginComponent onLogin={onLogin} />
            </div>
            
            {/* KendoReact Credit - appears after login form */}
            <div style={{
                opacity: showKendoCredit ? 1 : 0,
                transition: 'opacity 0.6s ease-in-out',
                visibility: showKendoCredit ? 'visible' : 'hidden',
                position: 'fixed',
                bottom: '65px',
                left: '50%',
                transform: 'translateX(-50%)',
                fontSize: '12px',
                fontStyle: 'italic',
                zIndex: 1000,
                padding: '5px 0',
                lineHeight: '1.2'
            }}>
                Powered by{' '}
                <a 
                    href="https://www.telerik.com/kendo-react-ui" 
                    target="_blank" 
                    rel="noopener noreferrer" 
                    style={{ 
                        color: '#d94f27', 
                        textDecoration: 'none',
                        transition: 'color 0.2s ease',
                        cursor: 'pointer',
                        display: 'inline-block',
                        padding: '2px 4px',
                        margin: '-2px -4px',
                        borderRadius: '2px'
                    }}
                    onMouseEnter={(e) => e.target.style.color = '#ff6f48'}
                    onMouseLeave={(e) => e.target.style.color = '#d94f27'}
                >
                    KendoReact UI
                </a>
            </div>
        </div>
    );
});

export default LoginPage;