'use client'
import { ShieldExclamationIcon } from '@assets/icons'
import images from '@assets/images'
import Button from '@components/atoms/Button'
import TextInput from '@components/atoms/TextInput'
import Image from 'next/image'
import { useState } from 'react'
import { useAuth } from '@hooks/useAuth'
import { useRouter } from 'next/navigation'
import CaptchaInput from '@components/atoms/Captcha'
import { encryptAES } from '@utils/helper/CryptoJS'

interface IError {
  message?: string
  type?: 'login' | 'captcha'
}

const LoginForm = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState<IError>({})
  const { login, loginLoading } = useAuth()

  const router = useRouter()

  const handleSubmit = async () => {
    if (!username || !password) {
      setError({
        message: 'Username dan password harus diisi!',
        type: 'login',
      })
      return
    }

    const result = await login({ username, password: encryptAES(password) })

    if (result.success) {
      // Redirect to dashboard
      router.replace('/')
    } else {
      setError({
        message: result.message ?? 'Username atau Password Salah!',
        type: 'login',
      })
    }
  }

  return (
    <div className="mt-[76px] flex w-full flex-col items-center sm:mt-[96px]">
      {error.message && (
        <div className="mb-4 flex items-center gap-2 rounded-md bg-[#FCEBEE] px-4 py-1 text-[#A82E26]">
          <ShieldExclamationIcon className="text-[#A82E26]" />
          <span className="text-sm font-medium">{error.message}</span>
        </div>
      )}

      <form
        onSubmit={e => e.preventDefault()}
        className="flex w-[380px] flex-col gap-8 rounded-lg bg-white p-6 shadow-md sm:w-[420px]"
      >
        <div className="flex flex-col gap-4">
          <div className="flex flex-row items-center gap-2">
            <Image src={images.LOGO_ACC} alt="logo" width={26} height={18} />
            <h1 className="text-[21px] font-semibold text-teksPrimary">Galeri Taksasi Used Car</h1>
          </div>
          <h1 className="border-spacing-2 border-b border-[#EE5E6] text-2xl font-semibold text-[#252525]">Masuk</h1>
          <TextInput
            label="Username"
            type="text"
            value={username}
            onChange={e => {
              setUsername(e.target.value)
              if (error.type === 'login') setError({})
            }}
            error={error && error.type === 'login' ? error.message : ''}
          />
          <TextInput
            label="Password"
            type="password"
            value={password}
            onChange={e => {
              setPassword(e.target.value)
              if (error.type === 'login') setError({})
            }}
            error={error && error.type === 'login' ? error.message : ''}
          />
          {/* Temporarily hiding captcha as requested */}
          <CaptchaInput error={error && error.type === 'captcha' ? error.message : ''} />
        </div>
        <Button onClick={handleSubmit} type="submit" disabled={loginLoading}>
          {loginLoading ? 'Masuk...' : 'Masuk'}
        </Button>
      </form>
    </div>
  )
}

export default LoginForm