path: root/components/login/login-form-shi.tsx

'use client';

import { useState, useEffect } from "react";
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { SendIcon, Loader2, GlobeIcon, ChevronDownIcon, Ship } 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 {
    InputOTP,
    InputOTPGroup,
    InputOTPSlot,
} from "@/components/ui/input-otp"
import { signIn } from 'next-auth/react';
import { sendOtpAction } from "@/lib/users/send-otp";
import { verifyTokenAction } from "@/lib/users/verifyToken";
import { buttonVariants } from "@/components/ui/button"
import Link from "next/link"
import Image from 'next/image'; // 추가: Image 컴포넌트 import
import { KnoxSSOButton } from './saml-login-button'; // SAML 로그인 버튼 import

export function LoginFormSHI({
    className,
    ...props
}: React.ComponentProps<"div">) {

    const params = useParams() || {};
    const pathname = usePathname() || '';
    const router = useRouter();
    const searchParams = useSearchParams();
    const token = searchParams?.get('token') || null;
    

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

    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 [email, setEmail] = useState('');
    const [otpSent, setOtpSent] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [otp, setOtp] = useState('');

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsLoading(true);
        try {
            const result = await sendOtpAction(email, lng);
            
            if (result.success) {
                setOtpSent(true);
                toast({
                    title: t('otpSentTitle'),
                    description: t('otpSentMessage'),
                });
            } else {
                // Handle specific error types
                let errorMessage = t('defaultErrorMessage');
                
                // You can handle different error types differently
                if (result.error === 'userNotFound') {
                    errorMessage = t('userNotFoundMessage');
                }
                
                toast({
                    title: t('errorTitle'),
                    description: result.message || errorMessage,
                    variant: 'destructive',
                });
            }
        } catch (error) {
            // This will catch network errors or other unexpected issues
            console.error(error);
            toast({
                title: t('errorTitle'),
                description: t('networkErrorMessage'),
                variant: 'destructive',
            });
        } finally {
            setIsLoading(false);
        }
    };

    async function handleOtpSubmit(e: React.FormEvent) {
        e.preventDefault();
        setIsLoading(true);
        
        try {
            // next-auth의 Credentials Provider로 로그인 시도
            const result = await signIn('credentials-otp', {
                email,
                code: otp,
                redirect: false, // 커스텀 처리 위해 redirect: false
            });

            if (result?.ok) {
                // 토스트 메시지 표시
                toast({
                    title: t('loginSuccess'),
                    description: t('youAreLoggedIn'),
                });

                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 (e) {
                    // 유효하지 않은 URL이면 그대로 사용 (이미 상대 경로일 수 있음)
                    router.push(callbackUrlParam);
                  }
                } else {
                  // callbackUrl이 없으면 기본 대시보드로 리다이렉트
                  router.push(`/${lng}/evcp/report`);
                }
              
            } else {
                toast({
                    title: t('errorTitle'),
                    description: t('defaultErrorMessage'),
                    variant: 'destructive',
                });
            }
        } catch (error) {
            console.error('Login error:', error);
            toast({
                title: t('errorTitle'),
                description: t('defaultErrorMessage'),
                variant: 'destructive',
            });
        } finally {
            setIsLoading(false);
        }
    }

    useEffect(() => {
        const verifyToken = async () => {
            if (!token) return;
            setIsLoading(true);

            try {
                const data = await verifyTokenAction(token);

                if (data.valid) {
                    setOtpSent(true);
                    setEmail(data.email ?? '');
                } else {
                    toast({
                        title: t('errorTitle'),
                        description: t('invalidToken'),
                        variant: 'destructive',
                    });
                }
            } catch (error) {
                toast({
                    title: t('errorTitle'),
                    description: t('defaultErrorMessage'),
                    variant: 'destructive',
                });
            } finally {
                setIsLoading(false);
            }
        };
        verifyToken();
    }, [token, toast, t]);

    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">
                        {/* <img
              src="/images/logo.png"
              alt="logo"
              className="h-8 w-auto"
            /> */}
                        <Ship className="w-4 h-4" />
                        <span className="text-md font-bold">eVCP</span>
                    </div>
                </div>

                {/* Content section that occupies remaining space, centered vertically */}
                <div className="flex-1 flex items-center justify-center">
                    {/* Your form container */}
                    <div className="mx-auto w-full flex flex-col space-y-6 sm:w-[350px]">

                        {/* Here's your existing login/OTP forms: */}
                         {/* {!otpSent ? ( */}
          
                             <form onSubmit={handleOtpSubmit} className="p-6 md:p-8"> 
                            {/* <form onSubmit={handleOtpSubmit} className="p-6 md:p-8"> */}
                                <div className="flex flex-col gap-6">
                                    <div className="flex flex-col items-center text-center">
                                        <h1 className="text-2xl font-bold">{t('loginMessage')}</h1>
                                    </div>
                                    <div className="grid gap-2">
                                        <Input
                                            id="email"
                                            type="email"
                                            placeholder="test@samsung.com"
                                            required
                                            className="h-10"
                                            value={email}
                                            onChange={(e) => setEmail(e.target.value)}
                                        />
                                    </div>
                                    <Button type="submit" className="w-full" variant="samsung" disabled={isLoading}>
                                        {isLoading ? t('sending') : t('ContinueWithEmail')}
                                    </Button>

                                    {/* 구분선과 "Or continue with" 섹션 추가 */}
                                    <div className="relative">
                                        <div className="absolute inset-0 flex items-center">
                                            <span className="w-full border-t"></span>
                                        </div>
                                        <div className="relative flex justify-center text-xs uppercase">
                                            <span className="bg-background px-2 text-muted-foreground">
                                                {t('orContinueWith')}
                                            </span>
                                        </div>
                                    </div>

                                    {/* SAML 로그인 버튼 - 로직 분리 */}
                                    <KnoxSSOButton />

                                    {/* 언어 선택 드롭다운 */}
                                    <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>
                            </form>
                        {/* ) 
                        
                        
                        : (
                            <form onSubmit={handleOtpSubmit} className="flex flex-col gap-4 p-6 md:p-8">
                                <div className="flex flex-col gap-6">
                                    <div className="flex flex-col items-center text-center">
                                        <h1 className="text-2xl font-bold">{t('loginMessage')}</h1>
                                    </div>
                                    <div className="grid gap-2 justify-center">
                                        <InputOTP
                                            maxLength={6}
                                            value={otp}
                                            onChange={(value) => setOtp(value)}
                                        >
                                            <InputOTPGroup>
                                                <InputOTPSlot index={0} />
                                                <InputOTPSlot index={1} />
                                                <InputOTPSlot index={2} />
                                                <InputOTPSlot index={3} />
                                                <InputOTPSlot index={4} />
                                                <InputOTPSlot index={5} />
                                            </InputOTPGroup>
                                        </InputOTP>
                                    </div>
                                    <Button type="submit" className="w-full" disabled={isLoading}>
                                        {isLoading ? t('verifying') : t('verifyOtp')}
                                    </Button>
                                    <div className="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>
                            </form>
                        )}  */}

                        <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 hover:[&_a]:text-primary">
                            {t('termsMessage')} <a href="#">{t('termsOfService')}</a> {t('and')}
                            <a href="#">{t('privacyPolicy')}</a>.
                        </div>
                    </div>
                </div>
            </div>

            {/* Right BG 이미지 영역 - Image 컴포넌트로 수정 */}
            <div className="relative hidden h-full flex-col p-10 text-white dark:border-r md:flex">
                {/* Image 컴포넌트로 대체 */}
                <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>
                        {/* <footer className="text-sm">SHI</footer> */}
                    </blockquote>
                </div>
            </div>
        </div>
    )
}