"use client"
import Image from "next/image";
import background from "../../../public/images/background.png";
import loginImg from "../../../public/images/logo-login.png";
import midsuit from "../../../public/images/midsuit-login.png";
import { useEffect, useState } from "react";
import { useLoginMutation } from "@/services/api";
import { useAppDispatch } from "@/lib/hooks";
import { setRoles, setToken, setUser } from "@/lib/slice/auth";
import { useRouter } from "next/navigation";
import { useLocale } from "@/lib/hooks/useLocale";
import { LanguageSwitcher } from "@/components/LanguageSwitcher";

export default function LoginPage(){
    const [login, {data: loginData, error: loginError}] = useLoginMutation();
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const dispatch = useAppDispatch();
    const router = useRouter();
    const { t } = useLocale();


    useEffect(() => {
        if(loginData){
            dispatch(setUser(loginData.user))
            dispatch(setToken(loginData.token))
            dispatch(setRoles(loginData.roles))
            router.push("/karyawan")
        }
    }, [loginData, loginError])

    return (
        <div className="relative flex flex-col items-center justify-center min-h-screen bg-black">
            <Image src={background} layout="fill" objectFit="cover" className="absolute z-0 opacity-50" alt=""/>
            
            {/* Language Switcher positioned at top right */}
            <div className="absolute top-4 right-4 z-20">
                <LanguageSwitcher />
            </div>
            
            <div className="relative z-10 flex flex-col items-center justify-center w-full h-full p-4 space-y-4">
                <div className="flex flex-col items-center justify-center w-full max-w-sm px-12 pb-6 space-y-8 bg-white rounded-lg">                
                    <div className="w-full flex flex-col space-y-1">
                        <div className="flex items-center justify-center w-full">
                            <Image src={loginImg} width={150} height={150} alt=""/>
                        </div>
                        <div className="text-2xl font-bold text-[#292929] w-full">{t('auth.loginTitle')}</div>
                        <div className="text-sm text-[#9F9F9F] text-start w-full">{t('auth.loginSubtitle')}</div>
                    </div>
                    <div className="flex flex-col space-y-4 w-full">
                        <input 
                            type="text" 
                            placeholder={t('auth.usernamePlaceholder')} 
                            className="w-full px-6 py-4 border border-gray-300 rounded-lg" 
                            value={username} 
                            onChange={(e) => setUsername(e.target.value)}
                        />
                        <input 
                            type="password" 
                            placeholder={t('auth.passwordPlaceholder')} 
                            className="w-full px-6 py-4 border border-gray-300 rounded-lg" 
                            value={password} 
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    <div className="w-full flex flex-col space-y-1">
                        {loginError && <div className="text-xs text-red-500">{(loginError as any).data.message}</div>}
                        <button className="w-full px-6 py-4 text-white bg-[#A36A4D] rounded-lg"
                            onClick={async () => {
                                await login({username, password})
                            }}
                        >{t('auth.loginButton')}</button>
                        <div className="flex gap-4 px-8 py-4 mt-4 items-center justify-center">
                            <div className="text-xs text-[#313678]">{t('auth.poweredBy')}</div>
                            <div>
                                <Image src={midsuit} alt="midsuit" width={100} height={40}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}