import { Card, CardContent } from "@/components/ui/card";
import { Mail, Lock, User, Phone } from "lucide-react";
import { Link } from "react-router-dom";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

import overlay from "@/assets/overlay.jpg";
import { useCallback, useState } from "react";
import { useForm, type SubmitHandler } from "react-hook-form";

interface RegisterForm {
  fullName: string;
  email: string;
  phoneNumber: string;
  password: string;
  repeatPassword: string;
}

export default function RegisterPage() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<RegisterForm>();

  const [isLoading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");

  const onSubmit: SubmitHandler<RegisterForm> = useCallback(
    async (data) => {
      console.log({ data });

      setLoading(true);
      setError("");
      setSuccess("");

      try {
        const response = await fetch("/api/v1/register", {
          method: "POST",
          body: JSON.stringify({
            full_name: data.fullName,
            email: data.email,
            ...(data.phoneNumber ? { phone_number: data.phoneNumber } : {}),
            password: data.password,
          }),
          headers: {
            "Content-Type": "application/json",
          },
        });
        if (response.status != 200) {
          const json = await response.json();
          const text = json.error || "Unexpected error happened";
          setError(
            `Failed to create an account. ${
              text[0].toUpperCase() + text.slice(1)
            }`
          );
        } else {
          setSuccess(
            "Account has been created. You can now log into your new account"
          );
          reset();
        }
      } catch (err) {
        console.log(err);
        setError("Failed to create account. Unexpected error happened");
      } finally {
        setLoading(false);
      }
    },
    [reset]
  );

  return (
    <div
      className="relative min-h-screen bg-cover bg-center bg-white"
      style={{ backgroundImage: `url(${overlay})` }}
    >
      <div className="relative z-10 flex items-center justify-center min-h-screen">
        <Card className="sm:w-96 sm:min-w-96 sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/90 backdrop-blur-md">
          <div className="flex flex-col items-center pt-16 sm:pt-0">
            <img
              src="/icon.png"
              alt="icon"
              className="w-16 h-16 mb-4 mt-2 sm:mt-6"
            />

            <div className="px-4 sm:mt-4 mt-8">
              <h2 className="text-2xl font-bold text-gray-800 text-left w-full">
                Sign Up
              </h2>
              <h4 className="text-base mb-3 text-gray-400 text-left">
                Fill up this form to start using homelab services and tools.
              </h4>
            </div>

            <CardContent className="w-full space-y-4">
              <form onSubmit={handleSubmit(onSubmit)}>
                <div className="mb-4">
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <Input
                      id="full_name"
                      type="text"
                      placeholder="Full Name"
                      className="pl-10"
                      {...register("fullName", { required: true })}
                      aria-invalid={errors.fullName ? "true" : "false"}
                    />
                  </div>
                  {!!errors.fullName && (
                    <p className="text-red-600 opacity-70 text-sm">
                      {errors.fullName.message ?? "Full Name is required"}
                    </p>
                  )}
                </div>

                <div className="mb-4">
                  <div className="relative">
                    <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <Input
                      id="email"
                      type="email"
                      placeholder="Email Address"
                      className="pl-10"
                      {...register("email", {
                        required: true,
                        pattern: {
                          value: /\S+@\S+\.\S+/,
                          message: "Invalid email",
                        },
                      })}
                      aria-invalid={errors.email ? "true" : "false"}
                    />
                  </div>
                  {!!errors.email && (
                    <p className="text-red-600 opacity-70 text-sm">
                      {errors.email.message ?? "Email is required"}
                    </p>
                  )}
                </div>

                <div className="mb-4">
                  <div className="relative">
                    <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <Input
                      id="phone_number"
                      type="tel"
                      placeholder="Phone Number"
                      className="pl-10"
                      {...register("phoneNumber", {
                        required: false,
                      })}
                      aria-invalid={errors.phoneNumber ? "true" : "false"}
                    />
                  </div>
                  {!!errors.phoneNumber && (
                    <p className="text-red-600 opacity-70 text-sm">
                      {errors.phoneNumber.message ?? "Phone Number is required"}
                    </p>
                  )}
                </div>

                <div className="mb-4">
                  <div className="relative">
                    <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <Input
                      id="password"
                      type="password"
                      placeholder="Password"
                      className="pl-10"
                      {...register("password", {
                        required: true,
                        validate: (password) => {
                          if (password.length < 8) {
                            return "Password must be at least 8 characters long";
                          }
                          if (!password.match(/[a-zA-Z]+/gi)) {
                            return "Password must contain characters";
                          }
                          if (
                            password
                              .split("")
                              .every((c) => c.toLowerCase() == c)
                          ) {
                            return "Password should contain at least 1 uppercase character";
                          }
                          if (!password.match(/\d+/gi)) {
                            return "Password should contain at least 1 digit";
                          }
                        },
                      })}
                      aria-invalid={errors.password ? "true" : "false"}
                    />
                  </div>
                  {!!errors.password && (
                    <p className="text-red-600 opacity-70 text-sm">
                      {errors.password.message ?? "Password is required"}
                    </p>
                  )}
                </div>

                <div className="mb-4">
                  <div className="relative">
                    <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <Input
                      id="repeat_password"
                      type="password"
                      placeholder="Repeat Password"
                      className="pl-10"
                      {...register("repeatPassword", {
                        required: true,
                        validate: (repeatPassword, { password }) => {
                          if (repeatPassword != password) {
                            return "Password does not match";
                          }
                        },
                      })}
                      aria-invalid={errors.repeatPassword ? "true" : "false"}
                    />
                  </div>
                  {!!errors.repeatPassword && (
                    <p className="text-red-600 opacity-70 text-sm">
                      {errors.repeatPassword.message ?? "Password is required"}
                    </p>
                  )}
                </div>

                {success.length > 0 && (
                  <div className="border border-green-400 p-2 rounded bg-green-200 text-sm">
                    {success}
                  </div>
                )}

                {error.length > 0 && (
                  <div className="border border-red-400 p-2 rounded bg-red-200 text-sm">
                    {error}
                  </div>
                )}

                <Button className="w-full mt-2 mb-4" loading={isLoading}>
                  Register
                </Button>
                <div className="text-sm text-center text-gray-600">
                  Already have an account?{" "}
                  <Link to="/login" className="text-blue-600 hover:underline">
                    Login
                  </Link>
                </div>
              </form>
            </CardContent>
          </div>
        </Card>
      </div>
    </div>
  );
}