import DefaultModal from "@/components/shared/ui/default-modal"
import { Alert, Button, Card, Checkbox, Divider, Flex, Form, Input } from "antd"
import { useForm } from "antd/lib/form/Form"
import { signIn } from "next-auth/react"
import { useRouter } from "next/router"
import React, { useCallback, useState } from "react"
import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons"

interface ILoginFormValue {
  username: string
  password: string
}

const LoginForm = () => {
  const router = useRouter()
  const [form] = useForm<ILoginFormValue>()
  const [isLoading, setIsLoading] = useState(false)
  const [showPasswordModal, setShowPasswordModal] = useState(false)

  const handleFinish = useCallback(async (value: ILoginFormValue) => {
    setIsLoading(true)

    try {
      console.log(value)
      await signIn("login-credentials", { username: value.username, password: value.password })
    } catch (error) {
      setIsLoading(false)
    }
  }, [])

  // 카카오톡 로그인 핸들러
  const handleKakaoLogin = () => {
    // 카카오톡 로그인 처리 로직 구현
    console.log("카카오톡 로그인 진행")
  }

  const onFinish = () => {}

  const onFinishFail = () => {}

  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }}>
      <Card style={{ width: "320px" }}>
        <Form name="normal_login" initialValues={{ remember: true }} onFinish={onFinish} className="login-form">
          <Form.Item>
            <Button
              type="link"
              htmlType="button"
              className="login-form-button"
              style={{
                height: "40px",
                width: "100%",
                backgroundColor: "#FEE500",
                color: "#000000",
                marginBottom: "20px",
              }}
              onClick={handleKakaoLogin}
              block
            >
              카카오 로그인
            </Button>
          </Form.Item>

          <Divider>OR LOGIN WITH EMAIL</Divider>

          <Form.Item name="username" rules={[{ required: true, message: "Please input your username!" }]}>
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="아이디" />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: "Please input your Password!" }]}>
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              placeholder="비밀번호"
              iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>로그인 기억</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="" style={{ float: "right" }}>
              비밀번호 찾기
            </a>
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
              style={{ height: "40px", width: "100%" }}
              block
            >
              로그인
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="link" htmlType="button">
              계정이 없으신가요? 회원가입!
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
// <Flex justify={"center"} align={"center"} vertical>
//   <h1>코딩스쿨 로그인</h1>
//   <Card>
//     {router?.query.error && router?.query.error !== "CredentialsSignin" ? (
//       <div className="mb-3">
//         <Alert message={`로그인 중 오류가 발생했습니다. ${router?.query.error}`} type="warning" />
//       </div>
//     ) : null}
//     <Flex>
//       <a className="flex items-center justify-center h-20 grow btn" onClick={() => signIn("github")}>
//         <svg width="28" height="28" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
//           <path
//             fillRule="evenodd"
//             clipRule="evenodd"
//             d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
//             fill="#24292f"
//           />
//         </svg>
//         카카오톡
//       </a>
//     </Flex>
//     <Divider> OR LOGIN with EMAIL</Divider>
//     <Form<ILoginFormValue>
//       form={form}
//       layout="vertical"
//       initialValues={{ username: "admin", password: "admin" }}
//       onFinish={handleFinish}
//     >
//       <div className="mb-3">
//         {router?.query.error === "CredentialsSignin" ? (
//           <>
//             <Alert message="로그인을 실패했습니다. 아이디 또는 비밀번호를 다시 확인해주세요." type="error" />
//           </>
//         ) : (
//           <></>
//         )}
//       </div>
//       <Form.Item name="username" rules={[{ required: true, message: "아이디를 입력해주세요" }]}>
//         <Input size="large" placeholder="아이디" />
//       </Form.Item>

//       <Form.Item name="password" rules={[{ required: true, message: "비밀번호를 입력해주세요" }]}>
//         <Input placeholder="비밀번호" type="password" size="large" />
//       </Form.Item>

//       <Button size="large" type="primary" htmlType="submit" className="w-full" loading={isLoading}>
//         로그인
//       </Button>

//       <a className="inline-block mt-2 text-gray-400" onClick={() => setShowPasswordModal(true)}>
//         비밀번호 찾기
//       </a>
//     </Form>
//   </Card>
// </Flex>

export default React.memo(LoginForm)
