/**
 * Login Page Component
 * @description Main authentication page with 2-column responsive layout.
 * Left column displays branding/marketing content, right column contains auth form.
 * Supports both Sign In and Register modes with animated transitions.
 * Includes Forgot Password modal with OTP verification.
 * Follows AgenticIQ Enterprise Coding Guidelines v1.0
 */

import { useState } from 'react';
import agenticiqLogo from '@/assets/images/logo/AgenticIQLogo.svg';
import topRightGlow from '@/assets/images/backgrounds/top-right-glow.svg';
import bottomLeftWave1 from '@/assets/images/backgrounds/bottom-left-wave1 .svg';
import bottomLeftWave2 from '@/assets/images/backgrounds/bottom-left-wave2.svg';
import logoGlowBg from '@/assets/images/backgrounds/logo-glow-bg.svg';
import { AuthFormCard, ForgotPasswordModal } from '@/components/auth';

/**
 * LoginPage component
 * @description Full-page login layout with responsive 2-column grid structure.
 * Mobile-first design that stacks columns on smaller screens.
 * @returns {JSX.Element} LoginPage element
 */
export function LoginPage(): JSX.Element {
    const [showForgotPwd, setShowForgotPwd] = useState(false);

    const handleSignIn = (email: string, password: string): void => {
        console.log('Sign in:', { email, password });
    };

    const handleRegister = (data: {
        firstName: string;
        lastName: string;
        email: string;
        password: string;
    }): void => {
        console.log('Register:', data);
    };

    const handleGoogleAuth = (): void => {
        console.log('Google auth clicked');
    };

    const handleAzureAuth = (): void => {
        console.log('Azure auth clicked');
    };

    const handleForgotPasswordClick = (): void => {
        setShowForgotPwd(true);
    };

    const handleForgotPasswordClose = (): void => {
        setShowForgotPwd(false);
    };

    const handleForgotPasswordSubmit = (email: string): void => {
        console.log('Password recovery requested for:', email);
    };

    const handleOtpVerify = (otp: string): void => {
        console.log('OTP verification:', otp);
    };

    return (
        <div className="login-page">
            <div className="relative min-h-screen w-full overflow-hidden bg-white">
                {/* Decorative Background Elements */}
                <BackgroundDecorations />

                {/* AgenticIQ Logo */}
                <div className="absolute left-[80px] top-[54px] z-20">
                    <img
                        src={agenticiqLogo}
                        alt="AgenticIQ Logo"
                        className="h-[117px] w-auto"
                    />
                </div>

                {/* Left Side Text Content */}
                <LeftColumnText />

                {/* Main Content Grid */}
                <div className="relative z-10 grid min-h-screen grid-cols-1 lg:grid-cols-[1fr_600px] xl:grid-cols-[1fr_620px]">
                    {/* Left Column - Branding/Marketing Content */}
                    <LeftColumn />

                    {/* Right Column - Auth Form Card */}
                    <div className="flex items-center justify-start px-6 py-12 lg:px-0 lg:py-16">
                        <AuthFormCard
                            initialMode="signin"
                            onSignIn={handleSignIn}
                            onRegister={handleRegister}
                            onGoogleAuth={handleGoogleAuth}
                            onAzureAuth={handleAzureAuth}
                            onForgotPassword={handleForgotPasswordClick}
                        />
                    </div>
                </div>
            </div>

            {/* Forgot Password Modal */}
            <ForgotPasswordModal
                isOpen={showForgotPwd}
                onClose={handleForgotPasswordClose}
                onSubmit={handleForgotPasswordSubmit}
                onVerify={handleOtpVerify}
            />
        </div>
    );
}

/**
 * BackgroundDecorations component
 * @description Renders decorative background images matching Figma design.
 * @returns {JSX.Element} Background decoration elements
 */
function BackgroundDecorations(): JSX.Element {
    return (
        <div className="pointer-events-none absolute inset-0 z-0" aria-hidden="true">
            {/* Logo glow background */}
            <img
                src={logoGlowBg}
                alt=""
                className="absolute left-0 top-0 h-auto w-auto opacity-[0.08]"
                style={{ width: '550px', height: 'auto', maxHeight: '350px' }}
            />

            {/* Top-right glow decoration */}
            <img
                src={topRightGlow}
                alt=""
                className="absolute right-0 top-0 h-auto w-auto opacity-[0.15]"
                style={{ width: '515px', height: 'auto', maxHeight: '614px' }}
            />

            {/* Bottom-left wave decoration 1 */}
            <img
                src={bottomLeftWave1}
                alt=""
                className="absolute bottom-0 left-0 h-auto w-auto opacity-[0.15]"
                style={{ width: '559px', height: 'auto', maxHeight: '613px' }}
            />

            {/* Bottom-left wave decoration 2 */}
            <img
                src={bottomLeftWave2}
                alt=""
                className="absolute bottom-0 left-0 h-auto w-auto opacity-[0.15]"
                style={{ width: '350px', height: 'auto', maxHeight: '500px' }}
            />
        </div>
    );
}

/**
 * LeftColumnText component
 * @description Left side text content (heading and description).
 * @returns {JSX.Element} Text elements positioned as per Figma
 */
function LeftColumnText(): JSX.Element {
    return (
        <>
            <h1
                className="absolute text-[36px] font-semibold text-black leading-normal whitespace-pre-wrap z-20"
                style={{ left: '110px', top: '348px', width: '513px' }}
            >
                Engineering the Future with Intelligent Agents
            </h1>
            <p
                className="absolute text-[24px] font-normal text-[rgba(0,0,0,0.75)] leading-normal whitespace-pre-wrap z-20"
                style={{ left: '110px', top: '482px', width: '607px' }}
            >
                Deploy intelligent agents that automate complex workflows, enhance decision-making, and scale your operations. Built for enterprise reliability with seamless integration capabilities.
            </p>
        </>
    );
}

/**
 * LeftColumn component
 * @description Empty container for left side content.
 * @returns {JSX.Element} Left column container
 */
function LeftColumn(): JSX.Element {
    return (
        <div className="flex flex-col justify-center px-6 py-12 sm:px-12 md:px-16 lg:px-20 xl:px-28">
            {/* Text content is positioned absolutely on page level */}
        </div>
    );
}
