'use client'

import type { SessionData } from '@/types/Auth'
import { useEffect, useReducer, useState } from 'react'
import { useRouter } from 'next/navigation'

import { useLocalStorage } from 'usehooks-ts'
import { useQuery } from '@tanstack/react-query'

import { axiosInstance } from '@/libs/axios'
import { useSessionStore } from '@/store/session'

interface AccountState {
  loginId: string
  pwd: string
}

export default function Login() {
  const router = useRouter()
  //비밀번호 보이기 숨기기
  const [pwShow, setPwShow] = useState(false)
  //ID 저장 체크박스
  const [idSave, setIdSave] = useState(false)
  //Q.PARTNERS 체크박스
  const [isPartners, setIsPartners] = useState(false)
  //로그인 상태
  const [isLogin, setIsLogin] = useState(false)

  const { session, setSession } = useSessionStore()
  const [value, setValue, removeValue] = useLocalStorage<{ indivisualData: string }>('hanasysIndivisualState', { indivisualData: '' })

  const reducer = (state: AccountState, newState: Partial<AccountState>) => ({ ...state, ...newState })
  const [account, setAccount] = useReducer(reducer, {
    loginId: '',
    pwd: '',
  })

  interface LoginData {
    code: number
    message: string | null
    result: SessionData
  }

  const {
    data: loginData,
    isPending,
    error,
  } = useQuery<LoginData, Error>({
    queryKey: ['login', 'account'],
    queryFn: async () => {
      const { data } = await axiosInstance('').post<LoginData>(`/api/auth`, {
        loginId: account.loginId,
        pwd: account.pwd,
      })

      return data
    },
    enabled: isLogin,
    staleTime: 0,
    retry: false,
  })

  useEffect(() => {
    setIsLogin(false)
    if (loginData?.code === 200) {
      // 유저 정보 저장
      setValue({
        indivisualData: account.pwd,
      })
      // 세션 정보 저장
      setSession({
        ...session,
        ...loginData?.result,
      })
      router.push('/')
    }
  }, [loginData])

  return (
    <>
      <div className="login-form-wrap">
        <div className="login-form mb15">
          <div className="login-input id">
            <input
              type="text"
              className="login-frame"
              placeholder="Input Frame ID"
              value={account.loginId}
              onChange={(e) => setAccount({ loginId: e.target.value })}
            />
            <button className="login-icon">
              <i className="del-icon"></i>
            </button>
          </div>
        </div>
        <div className="login-form">
          <div className="login-input pw">
            <input
              type={`${pwShow ? 'text' : 'password'}`}
              className="login-frame"
              placeholder="Input Frame PW"
              value={account.pwd}
              onChange={(e) => setAccount({ pwd: e.target.value })}
            />
            <button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}>
              <i className="show-icon"></i>
            </button>
          </div>
        </div>
        <div className="login-check-warp">
          <div className="check-form-box">
            <input type="checkbox" id="ch01" checked={idSave} onChange={() => setIdSave(!idSave)} />
            <label htmlFor="ch01">ID Save</label>
          </div>
          <div className="toggle-form">
            <label className="toggle-btn">
              <input type="checkbox" checked={isPartners} onChange={() => setIsPartners(!isPartners)} />
              <span className="slider"></span>
            </label>
            <div className="toggle-name">Q.PARTNERS</div>
          </div>
        </div>
        <div className="login-btn-wrap">
          <button className="btn-frame icon login" onClick={() => setIsLogin(true)}>
            お問い合わせ <i className="btn-arr"></i>
          </button>
        </div>
      </div>
    </>
  )
}