import { createLazyFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Input } from '@/shadcn/components/ui/input.tsx';
import { Button } from '@/shadcn/components/ui/button.tsx';
import { Alert } from '@/shadcn/components/ui/alert.tsx';
import { Checkbox } from "@/shadcn/components/ui/checkbox";
import { Form, FormField, FormControl, FormLabel, FormMessage, FormItem } from '@/shadcn/components/ui/form.tsx';
import { TbArrowNarrowRight } from 'react-icons/tb';
import client from "../../honoClient";

// Define the schema for validation
const formSchema = z.object({
  name: z.string().min(1, "This field is required"),
  username: z.string().min(1, "This field is required"),
  email: z.string().email("Invalid email address").min(1, "This field is required"),
  password: z.string().min(6, "Password must be at least 6 characters long"),
  companyName: z.string().min(1, "This field is required"),
  position: z.string().min(1, "This field is required"),
  workExperience: z.string().min(1, "This field is required"),
  address: z.string().min(1, "This field is required"),
  phoneNumber: z.string().min(1, "This field is required"),
  terms: z.boolean().refine((val) => val, "You must agree to the terms and services"),
});

// Define the form type
type FormSchema = z.infer<typeof formSchema>;

export const Route = createLazyFileRoute("/register/")({
  component: RegisterPage,
});

export default function RegisterPage() {
  const [errorFields, setErrorFields] = useState<Partial<Record<keyof FormSchema, string>> | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const navigate = useNavigate();

  const form = useForm<FormSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      username: "",
      email: "",
      password: "",
      companyName: "",
      position: "",
      workExperience: "",
      address: "",
      phoneNumber: "",
      terms: false,
    },
  });

  const handleSubmit = async (values: FormSchema) => {
    try {
      const res = await client.register.$post({
        json: values,
      });

      if (res.ok) {
        // Redirect to login page on success
        navigate({ to: "/login", replace: true });
      } else {
        // Handle non-200 responses from backend
        const errorData = await res.json();
        throw new Error(errorData.message || "An unknown error occurred");
      }
    } catch (error: any) {
      const message = error.message;

      if (message.includes("Email or username has been registered")) {
        setErrorFields({
          email: "Email is already registered",
          username: "Username is already registered",
        });
      } else if (message.includes("Phone number has been registered")) {
        setErrorFields({
          phoneNumber: "Phone number is already registered",
        });
      } else {
        setErrorMessage(message);
      }
    }
  };

  return (
    <div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
      {/* Bagian Gambar */}
      <div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-start absolute -top-56 lg:top-0 left-0 lg:-translate-x-[400px] overflow-hidden lg:overflow-visible">
        <div className="flex absolute border border-slate-300 rounded-2xl w-[480px] h-[455px] lg:w-[800px] lg:h-[900px] lg:top-11 items-center justify-center -rotate-[19deg] lg:-rotate-[12deg]">
          <div className="flex absolute border border-slate-400 rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
            <div className="flex absolute border border-slate-500 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
              <div className="hidden lg:flex absolute border border-slate-600 rounded-2xl w-3/5 h-3/5">
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Title */}
      <div className="absolute top-6 left-6 text-base font-bold z-20">
        Amati
      </div>

      {/* Main content */}
      <div className="flex-1 flex flex-col md:flex-row items-center justify-center pt-[151.2px] lg:pt-[82.4px] lg:pl-[224px] md:justify-center lg:justify-end space-x-12 px-6 md:px-0 z-20">

        {/* Form column */}
        <div className="w-[306px] max-w-lg md:w-1/2 mx-auto md:mx-20">

          {/* Title and Already have an account */}
          <div className="mb-12 h-[75px]">
            <h1 className="h-[51px] text-[33px] lg:text-[42px] font-extrabold leading-[56px] tracking-[-0.8px] text-left">Register an Account</h1>
            <p className="w-[229.5px] text-sm md:text-sm leading-[15.944px] tracking-[-0.8px] text-[#00000099]">
              Already have an account?{' '}
              <a href="/login" className="text-blue-500 font-semibold hover:text-blue-800">
                Sign In now
              </a>
            </p>
          </div>

          <Form {...form}>
            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
              {errorMessage && (
                <Alert variant="destructive">
                  <p>{errorMessage}</p>
                </Alert>
              )}

              {Object.keys(errorFields || {}).length > 0 && (
                <Alert variant="destructive">
                  {Object.values(errorFields || {}).map((msg, idx) => (
                    <p key={idx}>{msg}</p>
                  ))}
                </Alert>
              )}

              {/* Form fields */}
              <div className="space-y-4">
                <FormField name="name" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Full Name</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Insert your full name according to Citizenship Card"
                        {...field}
                        className={`${form.formState.errors.name ? "border-red-500" : ""
                          } text-sm md:text-base`}
                        style={{ width: "100%" }}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

                <FormField name="username" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Username</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Username"
                        {...field}
                        className={form.formState.errors.username ? "border-red-500" : ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

                <FormField name="email" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Email</FormLabel>
                    <FormControl>
                      <Input
                        type="email"
                        placeholder="eg; user@mail.com"
                        {...field}
                        className={form.formState.errors.email ? "border-red-500" : ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

                <FormField name="password" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Password</FormLabel>
                    <FormControl>
                      <Input
                        type="password"
                        placeholder="******"
                        {...field}
                        className={form.formState.errors.password ? "border-red-500" : ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

                <FormField name="companyName" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Company Name</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Company Name"
                        {...field}
                        className={form.formState.errors.companyName ? "border-red-500" : ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

                <FormField name="position" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Position</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Position"
                        {...field}
                        className={form.formState.errors.position ? "border-red-500" : ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

                <FormField name="workExperience" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Work Experience</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Work Experience"
                        {...field}
                        className={form.formState.errors.workExperience ? "border-red-500" : ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

                <FormField name="address" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Address</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Address"
                        {...field}
                        className={form.formState.errors.address ? "border-red-500" : ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

                <FormField name="phoneNumber" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Phone Number</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Phone Number"
                        {...field}
                        className={form.formState.errors.phoneNumber ? "border-red-500" : ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

                <FormField
                  control={form.control}
                  name="terms"
                  render={() => (
                    <FormItem>
                      <FormControl>
                        <div className="flex items-center space-x-0.5 pb-10">
                          <Checkbox
                            checked={!!form.watch("terms")}
                            onCheckedChange={(checked) => form.setValue("terms", !!checked)}
                            className={`border ${form.formState.errors.terms ? "border-red-500" : "border-[#00000099]"}`}
                            onChange={form.register("terms").onChange}
                            onBlur={form.register("terms").onBlur}
                            name="terms"
                            ref={form.register("terms").ref}
                            id="terms"
                          />
                          <label
                            htmlFor="terms"
                            className="text-sm font-normal leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[#00000099] p-2 rounded"
                          >
                            I am agree to Terms and Services
                          </label>
                        </div>
                      </FormControl>
                      {form.formState.errors.terms && (
                        <FormMessage>{form.formState.errors.terms.message}</FormMessage>
                      )}
                    </FormItem>
                  )}
                />
              </div>

              <div className="space-y-4 pb-6">
                <div className="flex justify-end">
                  <Button
                    type="submit"
                    style={{ backgroundColor: "#2555FF", color: "white" }}
                    className="w-full flex items-center justify-between text-base font-medium md:w-auto"
                  >
                    <span className="flex-grow text-left">Create Account</span>
                    <TbArrowNarrowRight className="ml-12 h-5 w-5" />
                  </Button>
                </div>
              </div>
            </form>
          </Form>
        </div>
      </div>
    </div>
  );
}