'use client';

import { useState, useEffect } from "react";
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Ship, InfoIcon, GlobeIcon, ChevronDownIcon, ArrowLeft } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@/components/ui/dropdown-menu"
import { useTranslation } from '@/i18n/client'
import { useRouter, useParams, usePathname, useSearchParams } from 'next/navigation';
import { signIn, useSession } from 'next-auth/react';
import { buttonVariants } from "@/components/ui/button"
import Link from "next/link"
import Image from 'next/image';
import { useFormState } from 'react-dom';
import {
    InputOTP,
    InputOTPGroup,
    InputOTPSlot,
} from "@/components/ui/input-otp"
import { requestPasswordResetAction } from "@/lib/users/auth/partners-auth";
import Loading from "../common/loading/loading";

type LoginMethod = 'username' | 'sgips';

type OtpUser = {
    name: string;
    vndrcd: string;
    phone: string;
    email: string;
    nation_cd: string;
    userId: number; // 백엔드에서 생성된 로컬 DB 사용자 ID
};

export function LoginForm() {
    const params = useParams() || {};
    const pathname = usePathname() || '';
    const router = useRouter();
    const searchParams = useSearchParams();

    const lng = params.lng as string;
    const { t, i18n } = useTranslation(lng, 'login');
    const { toast } = useToast();
    const { data: session, status } = useSession();

    // 상태 관리
    const [loginMethod, setLoginMethod] = useState<LoginMethod>('username');
    const [isFirstAuthLoading, setIsFirstAuthLoading] = useState(false);
    const [showForgotPassword, setShowForgotPassword] = useState(false);

    // MFA 관련 상태
    const [showMfaForm, setShowMfaForm] = useState(false);
    const [mfaToken, setMfaToken] = useState('');
    const [tempAuthKey, setTempAuthKey] = useState('');
    const [mfaUserId, setMfaUserId] = useState<number | null>(null);
    const [mfaUserEmail, setMfaUserEmail] = useState('');
    const [mfaUserName, setMfaUserName] = useState(''); // Email OTP 전송 시 필요
    const [mfaCountdown, setMfaCountdown] = useState(0);
    const [mfaType, setMfaType] = useState<'sms' | 'email'>('sms'); // MFA 타입

    // 일반 로그인 폼 데이터
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    // S-Gips 로그인 폼 데이터
    const [sgipsUsername, setSgipsUsername] = useState('');
    const [sgipsPassword, setSgipsPassword] = useState('');

    // OTP 사용자 선택 관련 상태
    const [otpUsers, setOtpUsers] = useState<OtpUser[]>([]);
    const [showUserSelectionDialog, setShowUserSelectionDialog] = useState(false);
    const [selectedOtpUser, setSelectedOtpUser] = useState<OtpUser | null>(null);

    const [isMfaLoading, setIsMfaLoading] = useState(false);
    const [isSmsLoading, setIsSmsLoading] = useState(false);

    // 서버 액션 상태
    const [passwordResetState, passwordResetAction] = useFormState(requestPasswordResetAction, {
        success: false,
        error: undefined,
        message: undefined,
    });

    // // 영문 페이지에서 S-Gips 로그인 비활성화 시 기본 로그인 방법 설정
    // useEffect(() => {
    //     if (lng === 'en' && loginMethod === 'sgips') {
    //         setLoginMethod('username');
    //     }
    // }, [lng, loginMethod]);

    // 이미 로그인된 사용자 리다이렉트 처리
    useEffect(() => {
        if (status === 'authenticated' && session?.user) {
            const callbackUrlParam = searchParams?.get('callbackUrl');
            
            if (callbackUrlParam) {
                try {
                    // URL 객체로 파싱
                    const callbackUrl = new URL(callbackUrlParam);
                    
                    // pathname + search만 사용 (호스트 제거)
                    const relativeUrl = callbackUrl.pathname + callbackUrl.search;
                    router.push(relativeUrl);
                } catch {
                    // 유효하지 않은 URL이면 그대로 사용 (이미 상대 경로일 수 있음)
                    router.push(callbackUrlParam);
                }
            } else {
                // callbackUrl이 없으면 기본 대시보드로 리다이렉트
                router.push(`/${lng}/partners/dashboard`);
            }
        }
    }, [status, session, router, lng, searchParams]);

    const handleChangeLanguage = (lang: string) => {
        const segments = pathname.split('/');
        segments[1] = lang;
        router.push(segments.join('/'));
    };

    const currentLanguageText = i18n.language === 'ko' ? t('languages.korean') : t('languages.english');

    // 세분화된 에러 메시지 처리 함수
    const getErrorMessage = (error: { errorCode?: string; message?: string }, provider: 'email' | 'sgips') => {
        const errorCode = error.errorCode;
        
        if (!errorCode) {
            return error.message || t('authenticationFailed');
        }

        switch (errorCode) {
            case 'INVALID_CREDENTIALS':
                return provider === 'sgips' ? t('sgipsInvalidCredentials') : t('invalidCredentials');
            case 'ACCOUNT_LOCKED':
                return t('accountLocked');
            case 'ACCOUNT_DEACTIVATED':
                return t('accountDeactivated');
            case 'RATE_LIMITED':
                return t('rateLimited');
            case 'VENDOR_NOT_FOUND':
                return t('vendorNotFound');
            case 'SYSTEM_ERROR':
                return t('systemError');
            default:
                return error.message || t('authenticationFailed');
        }
    };

    const goToVendorRegistration = () => {
        router.push(`/${lng}/partners/repository`);
    };

    // MFA 카운트다운 효과
    useEffect(() => {
        if (mfaCountdown > 0) {
            const timer = setTimeout(() => setMfaCountdown(mfaCountdown - 1), 1000);
            return () => clearTimeout(timer);
        }
    }, [mfaCountdown]);

    // 서버 액션 결과 처리
    useEffect(() => {
        if (passwordResetState.success && passwordResetState.message) {
            toast({
                title: t('resetLinkSent'),
                description: passwordResetState.message,
            });
            setShowForgotPassword(false);
        } else if (passwordResetState.error) {
            toast({
                title: t('errorTitle'),
                description: passwordResetState.error,
                variant: 'destructive',
            });
        }
    }, [passwordResetState, toast, t]);

    // 1차 인증 수행 (공통 함수)
    const performFirstAuth = async (username: string, password: string, provider: 'email' | 'sgips') => {
        try {
            const response = await fetch('/api/auth/first-auth', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    username,
                    password,
                    provider
                }),
            });

            const result = await response.json();

            if (!response.ok) {
                // 세분화된 에러 메시지 처리
                const error = new Error(result.error || t('authenticationFailed')) as Error & { errorCode?: string };
                error.errorCode = result.errorCode;
                throw error;
            }

            return result;
        } catch (error) {
            console.error('First auth error:', error);
            throw error;
        }
    };

    // SMS 토큰 전송
    const handleSendSms = async (userIdParam?: number) => {
        const targetUserId = userIdParam || mfaUserId;
        if (!targetUserId || mfaCountdown > 0) return;

        setIsSmsLoading(true);
        try {
            const requestBody: { userId: number; phone?: string; name?: string } = { userId: targetUserId };

            // S-GIPS 사용자인 경우 추가 정보 포함
            if (selectedOtpUser) {
                requestBody.phone = selectedOtpUser.phone;
                requestBody.name = selectedOtpUser.name;
            }

            const response = await fetch('/api/auth/send-sms', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(requestBody),
            });

            if (response.ok) {
                setMfaCountdown(60);
                if (selectedOtpUser) {
                    toast({
                        title: t('smsSent'),
                        description: t('smsCodeSentTo', { name: selectedOtpUser.name, phone: selectedOtpUser.phone }),
                    });
                } else {
                    toast({
                        title: t('smsSent'),
                        description: t('smsCodeSent'),
                    });
                }
            } else {
                const errorData = await response.json();
                toast({
                    title: t('errorTitle'),
                    description: errorData.message || t('smsFailure'),
                    variant: 'destructive',
                });
            }
        } catch (error) {
            console.error('SMS send error:', error);
            toast({
                title: t('errorTitle'),
                description: t('smsError'),
                variant: 'destructive',
            });
        } finally {
            setIsSmsLoading(false);
        }
    };

    // Email OTP 전송
    const handleSendEmail = async (userIdParam?: number, emailParam?: string, userNameParam?: string) => {
        const targetUserId = userIdParam || mfaUserId;
        const targetEmail = emailParam || mfaUserEmail;
        const targetUserName = userNameParam || mfaUserName;
        
        if (!targetUserId || mfaCountdown > 0) return;

        setIsSmsLoading(true);
        try {
            const response = await fetch('/api/auth/send-email-otp', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    userId: targetUserId,
                    email: targetEmail,
                    userName: targetUserName,
                }),
            });

            if (response.ok) {
                setMfaCountdown(60);
                toast({
                    title: '이메일 인증번호 전송',
                    description: `${targetEmail}로 인증번호가 전송되었습니다.`,
                });
            } else {
                const errorData = await response.json();
                toast({
                    title: t('errorTitle'),
                    description: errorData.error || '이메일 전송에 실패했습니다.',
                    variant: 'destructive',
                });
            }
        } catch (error) {
            console.error('Email OTP send error:', error);
            toast({
                title: t('errorTitle'),
                description: '이메일 전송 중 오류가 발생했습니다.',
                variant: 'destructive',
            });
        } finally {
            setIsSmsLoading(false);
        }
    };

    // MFA 토큰 검증 및 최종 로그인
    const handleMfaSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        if (!mfaToken || mfaToken.length !== 6) {
            toast({
                title: t('errorTitle'),
                description: t('enterSixDigitCode'),
                variant: 'destructive',
            });
            return;
        }

        if (!tempAuthKey) {
            toast({
                title: t('errorTitle'),
                description: t('authSessionExpired'),
                variant: 'destructive',
            });
            setShowMfaForm(false);
            return;
        }

        setIsMfaLoading(true);

        try {
            // NextAuth의 credentials-mfa 프로바이더로 최종 인증 (mfaType 포함)
            const result = await signIn('credentials-mfa', {
                userId: mfaUserId,
                smsToken: mfaToken,
                tempAuthKey: tempAuthKey,
                mfaType: mfaType, // 'sms' 또는 'email'
                redirect: false,
            });

            if (result?.ok) {
                toast({
                    title: t('authenticationComplete'),
                    description: t('loginCompleted'),
                });

                // 콜백 URL 처리
                const callbackUrlParam = searchParams?.get('callbackUrl');
                if (callbackUrlParam) {
                    try {
                        const callbackUrl = new URL(callbackUrlParam);
                        const relativeUrl = callbackUrl.pathname + callbackUrl.search;
                        router.push(relativeUrl);
                    } catch {
                        router.push(callbackUrlParam);
                    }
                } else {
                    router.push(`/${lng}/partners/dashboard`);
                }
            } else {
                let errorMessage = t('invalidAuthCode');
                
                if (result?.error) {
                    switch (result.error) {
                        case 'CredentialsSignin':
                            errorMessage = t('authCodeExpired');
                            break;
                        case 'AccessDenied':
                            errorMessage = t('accessDenied');
                            break;
                        default:
                            errorMessage = t('mfaAuthFailed');
                    }
                }

                toast({
                    title: t('errorTitle'),
                    description: errorMessage,
                    variant: 'destructive',
                });
            }
        } catch (error) {
            console.error('MFA verification error:', error);
            toast({
                title: t('errorTitle'),
                description: t('mfaAuthError'),
                variant: 'destructive',
            });
        } finally {
            setIsMfaLoading(false);
        }
    };

    // 일반 사용자명/패스워드 1차 인증 처리
    const handleUsernameLogin = async (e: React.FormEvent) => {
        e.preventDefault();

        if (!username || !password) {
            toast({
                title: t('errorTitle'),
                description: t('credentialsRequired'),
                variant: 'destructive',
            });
            return;
        }

        setIsFirstAuthLoading(true);

        try {
            // 1차 인증만 수행 (세션 생성 안함)
            const authResult = await performFirstAuth(username, password, 'email');

            if (authResult.success) {
                const userMfaType = authResult.mfaType || 'sms';
                
                toast({
                    title: t('firstAuthComplete'),
                    description: userMfaType === 'email' ? '이메일 인증을 진행합니다.' : t('proceedingSmsAuth'),
                });

                // MFA 화면으로 전환
                setTempAuthKey(authResult.tempAuthKey);
                setMfaUserId(authResult.userId);
                setMfaUserEmail(authResult.email);
                setMfaUserName(authResult.userName || '');
                setMfaType(userMfaType);
                setShowMfaForm(true);

                // MFA 타입에 따라 자동으로 OTP 전송
                setTimeout(() => {
                    if (userMfaType === 'email') {
                        handleSendEmail(authResult.userId, authResult.email, authResult.userName);
                    } else {
                        handleSendSms(authResult.userId);
                    }
                }, 500);

                toast({
                    title: userMfaType === 'email' ? '이메일 인증 필요' : t('smsAuthRequired'),
                    description: userMfaType === 'email' ? '이메일로 인증번호를 전송하고 있습니다.' : t('sendingCodeToPhone'),
                });
            }
        } catch (error: unknown) {
            console.error('Username login error:', error);
            
            const errorMessage = getErrorMessage(error as { errorCode?: string; message?: string }, 'email');

            toast({
                title: t('errorTitle'),
                description: errorMessage,
                variant: 'destructive',
            });
        } finally {
            setIsFirstAuthLoading(false);
        }
    };

    // S-Gips 1차 인증 처리
    const handleSgipsLogin = async (e: React.FormEvent) => {
        e.preventDefault();

        if (!sgipsUsername || !sgipsPassword) {
            toast({
                title: t('errorTitle'),
                description: t('credentialsRequired'),
                variant: 'destructive',
            });
            return;
        }

        setIsFirstAuthLoading(true);

        try {
            // S-Gips 1차 인증만 수행 (세션 생성 안함)
            const authResult = await performFirstAuth(sgipsUsername, sgipsPassword, 'sgips');

            if (authResult.success) {
                const users = authResult.otpUsers || [];

                if (users.length === 0) {
                    toast({
                        title: t('errorTitle'),
                        description: t('noUsersFound'),
                        variant: 'destructive',
                    });
                    return;
                }

                // 사용자 선택 다이얼로그 표시 (항상)
                setOtpUsers(users);
                setShowUserSelectionDialog(true);
            }
        } catch (error: unknown) {
            console.error('S-Gips login error:', error);

            const errorMessage = getErrorMessage(error as { errorCode?: string; message?: string }, 'sgips');

            toast({
                title: t('errorTitle'),
                description: errorMessage,
                variant: 'destructive',
            });
        } finally {
            setIsFirstAuthLoading(false);
        }
    };

    // 선택된 OTP 사용자와 함께 MFA 진행
    const proceedWithSelectedUser = async (user: OtpUser, tempAuthKey: string) => {
        try {

            // 사용자 정보를 기반으로 MFA 진행
            setTempAuthKey(tempAuthKey);
            setSelectedOtpUser(user);
            setMfaUserId(user.userId); // 선택된 사용자의 userId 설정
            setMfaUserEmail(user.email);
            setShowMfaForm(true);

            // 선택된 사용자의 userId를 직접 전달하여 SMS 전송
            setTimeout(() => {
                handleSendSms(user.userId);
            }, 2000);

            toast({
                title: t('sgipsAuthComplete'),
                description: t('sendingCodeToSelectedUser', { name: user.name }),
            });
        } catch (error) {
            console.error('Proceeding with selected user error:', error);
            toast({
                title: t('errorTitle'),
                description: t('mfaSetupError'),
                variant: 'destructive',
            });
        }
    };

    // OTP 사용자 선택 처리
    const handleUserSelection = async (user: OtpUser) => {
        setShowUserSelectionDialog(false);

        try {
            // 선택된 사용자에 대한 임시 인증 세션 생성 요청
            const response = await fetch('/api/auth/select-sgips-user', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    userId: user.userId,
                    email: user.email,
                    name: user.name
                }),
            });

            const result = await response.json();

            if (!response.ok || !result.success) {
                toast({
                    title: t('errorTitle'),
                    description: result.error || t('mfaSetupError'),
                    variant: 'destructive',
                });
                return;
            }

            // 임시 인증 세션 생성 성공, MFA 진행
            await proceedWithSelectedUser(user, result.tempAuthKey);
        } catch (error) {
            console.error('User selection error:', error);
            toast({
                title: t('errorTitle'),
                description: t('mfaSetupError'),
                variant: 'destructive',
            });
        }
    };

    // MFA 화면에서 뒤로 가기
    const handleBackToLogin = () => {
        setShowMfaForm(false);
        setMfaToken('');
        setTempAuthKey('');
        setMfaUserId(null);
        setMfaUserEmail('');
        setMfaUserName('');
        setMfaType('sms'); // 기본값으로 초기화
        setMfaCountdown(0);
        setSelectedOtpUser(null);
        setShowUserSelectionDialog(false);
        setOtpUsers([]);
    };

    // 세션 로딩 중이거나 이미 인증된 상태에서는 로딩 표시
    if (status === 'loading') {
        return (
            <Loading message={t('loading')} />
        );
    }

    // 이미 인증된 상태에서는 빈 화면 (리다이렉트 중)
    if (status === 'authenticated' && session?.user) {
        return (
            <Loading message={t('redirecting')} />
        );
    }

    return (
        <div className="container relative flex h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
            {/* Left Content */}
            <div className="flex flex-col w-full h-screen lg:p-2">
                {/* Top bar with Logo + eVCP (left) and "Request Vendor Repository" (right) */}
                <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                        <Ship className="w-4 h-4" />
                        <span className="text-md font-bold">eVCP</span>
                    </div>
                    <Link
                        href="/partners/repository"
                        className={cn(buttonVariants({ variant: "ghost" }))}
                    >
                        <InfoIcon className="w-4 h-4 mr-1" />
                        {t('registerVendor')}
                    </Link>
                </div>

                {/* Content section that occupies remaining space, centered vertically */}
                <div className="flex-1 flex items-center justify-center">
                    <div className="mx-auto w-full flex flex-col space-y-6 sm:w-[350px]">
                        <div className="p-6 md:p-8">
                            <div className="flex flex-col gap-6">
                                {/* Header */}
                                <div className="flex flex-col items-center text-center">
                                    {!showMfaForm ? (
                                        <>
                                            <h1 className="text-2xl font-bold">{t('loginMessage')}</h1>
                                            <p className="text-xs text-muted-foreground mt-2">
                                                {t('loginDescription')}
                                            </p>
                                        </>
                                    ) : (
                                        <>
                                            <div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 mb-4">
                                                {mfaType === 'email' ? '📧' : '🔐'}
                                            </div>
                                            <h1 className="text-2xl font-bold">
                                                {mfaType === 'email' ? '이메일 인증' : t('smsVerification')}
                                            </h1>
                                            <p className="text-sm text-muted-foreground mt-2">
                                                {selectedOtpUser
                                                    ? t('firstAuthCompleteForSgips', { name: selectedOtpUser.name, email: mfaUserEmail })
                                                    : mfaType === 'email'
                                                        ? `${mfaUserEmail}로 인증번호가 전송되었습니다.`
                                                        : t('firstAuthCompleteFor', { email: mfaUserEmail })
                                                }
                                            </p>
                                            <p className="text-xs text-muted-foreground mt-1">
                                                {mfaType === 'email' 
                                                    ? '이메일에서 받은 6자리 인증번호를 입력해주세요.' 
                                                    : t('enterSixDigitCodeInstructions')}
                                            </p>
                                        </>
                                    )}
                                </div>

                                {/* 로그인 폼 또는 MFA 폼 */}
                                {!showMfaForm ? (
                                    <>
                                        {/* Login Method Tabs */}
                                        <div className="flex rounded-lg bg-muted p-1">
                                            <button
                                                type="button"
                                                onClick={() => setLoginMethod('username')}
                                                className={cn(
                                                    "flex-1 rounded-md px-3 py-2 text-sm font-medium transition-all",
                                                    loginMethod === 'username'
                                                        ? "bg-background text-foreground shadow-sm"
                                                        : "text-muted-foreground hover:text-foreground"
                                                )}
                                            >
                                                {t('generalLogin')}
                                            </button>
                                            {/* S-Gips 로그인은 영문 페이지에서 비활성화 0925 구매 요청사항*/}
                                            {lng !== 'en' && (
                                                <button
                                                    type="button"
                                                    onClick={() => setLoginMethod('sgips')}
                                                    className={cn(
                                                        "flex-1 rounded-md px-3 py-2 text-sm font-medium transition-all",
                                                        loginMethod === 'sgips'
                                                            ? "bg-background text-foreground shadow-sm"
                                                            : "text-muted-foreground hover:text-foreground"
                                                    )}
                                                >
                                                    {t('sgipsLogin')}
                                                </button>
                                            )}
                                        </div>

                                        {/* Username Login Form */}
                                        {loginMethod === 'username' && (
                                            <form onSubmit={handleUsernameLogin} className="grid gap-4">
                                                <div className="grid gap-2">
                                                    <Input
                                                        id="username"
                                                        type="text"
                                                        placeholder={t('emailPlaceholder')}
                                                        required
                                                        className="h-10"
                                                        value={username}
                                                        onChange={(e) => setUsername(e.target.value)}
                                                        disabled={isFirstAuthLoading}
                                                    />
                                                </div>
                                                <div className="grid gap-2">
                                                    <Input
                                                        id="password"
                                                        type="password"
                                                        placeholder={t('password')}
                                                        required
                                                        className="h-10"
                                                        value={password}
                                                        onChange={(e) => setPassword(e.target.value)}
                                                        disabled={isFirstAuthLoading}
                                                    />
                                                </div>
                                                <Button
                                                    type="submit"
                                                    className="w-full"
                                                    variant="samsung"
                                                    disabled={isFirstAuthLoading || !username || !password}
                                                >
                                                    {isFirstAuthLoading ? t('authenticating') : t('login')}
                                                </Button>
                                            </form>
                                        )}

                                        {/* S-Gips Login Form - 영문 페이지에서 비활성화 0925 구매 요청사항*/}
                                        {loginMethod === 'sgips' && lng !== 'en' && (
                                            <form onSubmit={handleSgipsLogin} className="grid gap-4">
                                                <div className="grid gap-2">
                                                    <Input
                                                        id="sgipsUsername"
                                                        type="text"
                                                        placeholder={t('sgipsId')}
                                                        required
                                                        className="h-10"
                                                        value={sgipsUsername}
                                                        onChange={(e) => setSgipsUsername(e.target.value)}
                                                        disabled={isFirstAuthLoading}
                                                    />
                                                </div>
                                                <div className="grid gap-2">
                                                    <Input
                                                        id="sgipsPassword"
                                                        type="password"
                                                        placeholder={t('sgipsPassword')}
                                                        required
                                                        className="h-10"
                                                        value={sgipsPassword}
                                                        onChange={(e) => setSgipsPassword(e.target.value)}
                                                        disabled={isFirstAuthLoading}
                                                    />
                                                </div>
                                                <Button
                                                    type="submit"
                                                    className="w-full"
                                                    variant="default"
                                                    disabled={isFirstAuthLoading || !sgipsUsername || !sgipsPassword}
                                                >
                                                    {isFirstAuthLoading ? t('sgipsAuthenticating') : t('sgipsLogin')}
                                                </Button>
                                                <p className="text-xs text-muted-foreground text-center">
                                                    {t('sgipsAutoSms')}
                                                </p>
                                            </form>
                                        )}

                                        {/* Additional Links */}
                                        <div className="flex flex-col gap-2 text-center">
                                            <Button
                                                type="button"
                                                variant="link"
                                                className="text-blue-600 hover:text-blue-800 text-sm"
                                                onClick={goToVendorRegistration}
                                            >
                                                {t('newVendor')}
                                            </Button>

                                            {loginMethod === 'username' && (
                                                <Button
                                                    type="button"
                                                    variant="link"
                                                    className="text-blue-600 hover:text-blue-800 text-sm"
                                                    onClick={() => setShowForgotPassword(true)}
                                                >
                                                    {t('forgotPassword')}
                                                </Button>
                                            )}
                                        </div>
                                    </>
                                ) : (
                                    /* MFA 입력 폼 */
                                    <div className="space-y-6">
                                        {/* 뒤로 가기 버튼 */}
                                        <div className="flex items-center justify-start">
                                            <Button
                                                type="button"
                                                variant="ghost"
                                                size="sm"
                                                onClick={handleBackToLogin}
                                                className="text-blue-600 hover:text-blue-800"
                                            >
                                                <ArrowLeft className="w-4 h-4 mr-1" />
                                                {t('backToLogin')}
                                            </Button>
                                        </div>

                                        {/* OTP 재전송 섹션 (SMS/Email) */}
                                        <div className="bg-gray-50 p-4 rounded-lg">
                                            <h3 className="text-sm font-medium text-gray-900 mb-2">
                                                {t('resendCode')}
                                            </h3>
                                            <p className="text-xs text-gray-600 mb-3">
                                                {mfaType === 'email' 
                                                    ? '이메일을 받지 못하셨나요?' 
                                                    : t('didNotReceiveCode')}
                                            </p>
                                            <Button
                                                onClick={() => {
                                                    if (mfaType === 'email') {
                                                        handleSendEmail();
                                                    } else {
                                                        handleSendSms();
                                                    }
                                                }}
                                                disabled={isSmsLoading || mfaCountdown > 0}
                                                variant="outline"
                                                size="sm"
                                                className="w-full"
                                                type="button"
                                            >
                                                {isSmsLoading ? (
                                                    t('sending')
                                                ) : mfaCountdown > 0 ? (
                                                    t('resendAvailable', { seconds: mfaCountdown })
                                                ) : (
                                                    mfaType === 'email' ? '인증번호 재전송' : t('resendCode')
                                                )}
                                            </Button>
                                        </div>

                                        {/* SMS 토큰 입력 폼 */}
                                        <form onSubmit={handleMfaSubmit} className="space-y-6">
                                            <div className="space-y-4">
                                                <div className="text-center">
                                                    <label className="block text-sm font-medium text-gray-700 mb-3">
                                                        {t('enterSixDigitCode')}
                                                    </label>
                                                    <div className="flex justify-center">
                                                        <InputOTP
                                                            maxLength={6}
                                                            value={mfaToken}
                                                            onChange={(value) => setMfaToken(value)}
                                                        >
                                                            <InputOTPGroup>
                                                                <InputOTPSlot index={0} />
                                                                <InputOTPSlot index={1} />
                                                                <InputOTPSlot index={2} />
                                                                <InputOTPSlot index={3} />
                                                                <InputOTPSlot index={4} />
                                                                <InputOTPSlot index={5} />
                                                            </InputOTPGroup>
                                                        </InputOTP>
                                                    </div>
                                                </div>
                                            </div>

                                            <Button
                                                type="submit"
                                                className="w-full"
                                                variant="samsung"
                                                disabled={isMfaLoading || mfaToken.length !== 6}
                                            >
                                                {isMfaLoading ? t('authenticating') : t('authenticationComplete')}
                                            </Button>
                                        </form>

                                        {/* 도움말 */}
                                        <div className="bg-yellow-50 p-3 rounded-lg border border-yellow-200">
                                            <div className="flex">
                                                <div className="flex-shrink-0">
                                                    ⚠️
                                                </div>
                                                <div className="ml-2">
                                                    <h4 className="text-xs font-medium text-yellow-800">
                                                        {t('didNotReceiveCode')}
                                                    </h4>
                                                    <div className="mt-1 text-xs text-yellow-700">
                                                        <ul className="list-disc list-inside space-y-1">
                                                            <li>{t('checkPhoneNumber')}</li>
                                                            <li>{t('checkSpamFolder')}</li>
                                                            <li>{t('useResendButton')}</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )}

                                {/* OTP 사용자 선택 다이얼로그 */}
                                {showUserSelectionDialog && !showMfaForm && (
                                    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                                        <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4 max-h-[80vh] overflow-y-auto">
                                            <div className="flex justify-between items-center mb-4">
                                                <h3 className="text-lg font-semibold">{t('selectUser')}</h3>
                                                <button
                                                    onClick={() => setShowUserSelectionDialog(false)}
                                                    className="text-gray-400 hover:text-gray-600"
                                                >
                                                    ✕
                                                </button>
                                            </div>
                                            <div className="space-y-3">
                                                <p className="text-sm text-gray-600 mb-4">
                                                    {t('selectUserDescription')}
                                                </p>
                                                {otpUsers.map((user, index) => (
                                                    <div
                                                        key={index}
                                                        className="border rounded-lg p-4 hover:bg-gray-50 cursor-pointer"
                                                        onClick={() => handleUserSelection(user)}
                                                    >
                                                        <div className="flex justify-between items-start">
                                                            <div className="flex-1">
                                                                <div className="font-medium text-gray-900">{user.name}</div>
                                                                <div className="text-sm text-gray-600">{user.email}</div>
                                                                <div className="text-sm text-gray-500">{user.phone}</div>
                                                                <div className="text-xs text-gray-400 mt-1">Vendor: {user.vndrcd}</div>
                                                            </div>
                                                            <Button
                                                                size="sm"
                                                                variant="outline"
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    handleUserSelection(user);
                                                                }}
                                                            >
                                                                {t('select')}
                                                            </Button>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                            <div className="flex justify-end mt-6">
                                                <Button
                                                    variant="outline"
                                                    onClick={() => setShowUserSelectionDialog(false)}
                                                >
                                                    {t('cancel')}
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                )}

                                {/* 비밀번호 재설정 다이얼로그 */}
                                {showForgotPassword && !showMfaForm && (
                                    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                                        <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
                                            <div className="flex justify-between items-center mb-4">
                                                <h3 className="text-lg font-semibold">{t('resetPassword')}</h3>
                                                <button
                                                    onClick={() => {
                                                        setShowForgotPassword(false);
                                                    }}
                                                    className="text-gray-400 hover:text-gray-600"
                                                >
                                                    ✕
                                                </button>
                                            </div>
                                            <form action={passwordResetAction} className="space-y-4">
                                                <div>
                                                    <p className="text-sm text-gray-600 mb-3">
                                                        {t('resetDescription')}
                                                    </p>
                                                    <Input
                                                        name="email"
                                                        type="email"
                                                        placeholder={t('emailAddress')}
                                                        required
                                                    />
                                                </div>
                                                <div className="flex gap-2">
                                                    <Button
                                                        type="button"
                                                        variant="outline"
                                                        className="flex-1"
                                                        onClick={() => {
                                                            setShowForgotPassword(false);
                                                        }}
                                                    >
                                                        {t('cancel')}
                                                    </Button>
                                                    <Button
                                                        type="submit"
                                                        className="flex-1"
                                                    >
                                                        {t('sendResetLink')}
                                                    </Button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                )}

                                {/* Language Selector - MFA 화면에서는 숨김 */}
                                {!showMfaForm && (
                                    <div className="text-center text-sm mx-auto">
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button variant="ghost" className="flex items-center gap-2">
                                                    <GlobeIcon className="h-4 w-4" />
                                                    <span>{currentLanguageText}</span>
                                                    <ChevronDownIcon className="h-4 w-4" />
                                                </Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <DropdownMenuRadioGroup
                                                    value={i18n.language}
                                                    onValueChange={(value) => handleChangeLanguage(value)}
                                                >
                                                    <DropdownMenuRadioItem value="en">
                                                        {t('languages.english')}
                                                    </DropdownMenuRadioItem>
                                                    <DropdownMenuRadioItem value="ko">
                                                        {t('languages.korean')}
                                                    </DropdownMenuRadioItem>
                                                </DropdownMenuRadioGroup>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </div>
                                )}
                            </div>
                        </div>

                        {/* Terms - MFA 화면에서는 숨김 */}
                        {!showMfaForm && (
                            <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
                                {t("agreement")}{" "}
                                <Link
                                    href={`/${lng}/privacy`}
                                    className="underline underline-offset-4 hover:text-primary"
                                >
                                    {t("privacyPolicy")}
                                </Link>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            {/* Right BG 이미지 영역 */}
            <div className="relative hidden h-full flex-col p-10 text-white dark:border-r md:flex">
                <div className="absolute inset-0">
                    <Image
                        src="/images/02.jpg"
                        alt="Background image"
                        fill
                        priority
                        sizes="(max-width: 1024px) 100vw, 50vw"
                        className="object-cover"
                    />
                </div>
                <div className="relative z-10 mt-auto">
                    <blockquote className="space-y-2">
                        <p className="text-sm">&ldquo;{t("blockquote")}&rdquo;</p>
                    </blockquote>
                </div>
            </div>
        </div>
    )
}