"use client";

import { signup } from "@/app/lib/actions/auth";
import Link from "next/link";
import { useFormState, useFormStatus } from "react-dom";
import signupSvg from "@/app/signup/signup.svg";
import Image from "next/image";

export default function Page() {
  const [errorMessage, dispatch] = useFormState(signup, undefined);

  return (
    <section className="text-gray-600 body-font">
      <div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
        <div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
          <Image
            width={600}
            className="object-cover object-center rounded"
            alt="signup"
            src={signupSvg}
          />
        </div>
        <form
          action={dispatch}
          className="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0"
        >
          <h2 className="text-gray-900 text-lg font-medium title-font mb-5">
            注册
          </h2>
          <div className="relative mb-4">
            <label
              htmlFor="username"
              className="leading-7 text-sm text-gray-600"
            >
              账号
            </label>
            <input
              id="username"
              className="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              type="text"
              required
              name="username"
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="password"
              className="leading-7 text-sm text-gray-600"
            >
              密码
            </label>
            <input
              id="password"
              className="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              required
              type="password"
              name="password"
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="confirm_password"
              className="leading-7 text-sm text-gray-600"
            >
              确认密码
            </label>
            <input
              id="confirm_password"
              className="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              required
              type="password"
              name="confirm_password"
            />
          </div>
          <SignupButton className="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" />
          <Link href="/signin" className="btn btn-link">
            已经有账号？点此直接登录。
          </Link>
          {errorMessage ? (
            <p className="text-xs text-red-400 mt-3">{errorMessage}</p>
          ) : null}
        </form>
      </div>
    </section>
  );
}

// export default function Page() {
//   const [errorMessage, dispatch] = useFormState(signup, undefined);

//   return (
//     <form action={dispatch}>
//       <input name="username" required />
//       <input type="password" name="password" placeholder="密码" required />
//       <input
//         type="password"
//         name="confirm_password"
//         placeholder="确认密码"
//         required
//       />
//       <div>{errorMessage && <p>{errorMessage}</p>}</div>
//       <LoginButton />
//     </form>
//   );
// }

function SignupButton({ className }: { className: string | undefined }) {
  const { pending } = useFormStatus();

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    if (pending) {
      event.preventDefault();
    }
  };

  return (
    <button
      className={className}
      aria-disabled={pending}
      type="submit"
      onClick={handleClick}
    >
      注册
    </button>
  );
}