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, "Kolom ini wajib diisi"),
  username: z.string().min(1, "Kolom ini wajib diisi"),
  email: z.string().email("Alamat email tidak valid").min(1, "Kolom ini wajib diisi"),
  password: z.string().min(6, "Kata sandi harus minimal 6 karakter"),
  companyName: z.string().min(1, "Kolom ini wajib diisi"),
  position: z.string().min(1, "Kolom ini wajib diisi"),
  workExperience: z.string().min(1, "Kolom ini wajib diisi"),
  address: z.string().min(1, "Kolom ini wajib diisi"),
  phoneNumber: z.string().min(1, "Kolom ini wajib diisi"),
  terms: z.boolean().refine((val) => val, "Anda harus menyetujui persyaratan dan layanan"),
});

// 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 atau username sudah terdaftar")) {
        setErrorFields({
          email: "Email is already registered",
          username: "Username is already registered",
        });
      } else if (message.includes("Nomor telepon sudah terdaftar")) {
        setErrorFields({
          phoneNumber: "Nomor telepon sudah terdaftar",
        });
      } else {
        setErrorMessage(message);
      }
    }
  };

  return (
    <div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
      {/* Image */}
      <div className="relative h-[40vw] lg:h-screen -z-20 lg:mt-24">
        <div className="-translate-y-[calc(35vw+1rem)] lg:translate-y-0 w-full lg:translate-x-[calc(10vh-45vw)] ">
          <span className="absolute scale-50 lg:scale-50 -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 flex rounded-3xl"></span>
          <span className="absolute scale-[85%] lg:scale-[70%] -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 flex rounded-3xl"></span>
          <span className="absolute scale-[120%] lg:scale-90 -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 flex rounded-3xl"></span>
          <span className="absolute scale-150 lg:scale-110 -rotate-12 w-[100vw] h-[100vw] lg:w-[140vh] lg:h-[140vh] border border-gray-300 hidden lg:flex rounded-3xl"></span>
        </div>
      </div>

      {/* Logo */}
      <div className="absolute top-7 left-6">
        <img src="../src/assets/logos/amati-logo.png" alt="Amati Logo" className="h-4 w-full object-contain" />
      </div>

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

        {/* Form column */}
        <div className="w-full md:w-1/2 mx-auto md:mx-20">

          {/* Title and Already have an account */}
          <div className="flex flex-col gap-1 mb-7">
            <h1 className="text-3xl lg:text-4xl font-extrabold text-left">Daftar Akun</h1>
            <p className="text-sm md:text-sm text-gray-400">
              Sudah punya akun?{' '}
              <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">
                <div className="space-y-4">
                  <FormField name="name" render={({ field }) => (
                    <FormItem>
                      <FormLabel className="font-bold text-sm">Nama Lengkap</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="Masukkan nama lengkap sesuai dengan Kartu Identitas"
                          {...field}
                          className={`${form.formState.errors.name ? "border-red-500" : ""} truncate text-sm md:text-base`}
                          style={{ width: "100%" }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )} />
                </div>

                <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">Nama Perusahaan</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Nama Perusahaan"
                        {...field}
                        className={form.formState.errors.companyName ? "border-red-500" : ""}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )} />

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

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

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

                <FormField name="phoneNumber" render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-bold text-sm">Nomor Telepon</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="Nomor Telepon"
                        {...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"
                          >
                            Saya setuju dengan syarat dan layanan
                          </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"
                    className="w-full flex items-center justify-between text-base font-medium md:w-auto bg-[--primary-color] text-white"
                  >
                    <span className="flex-grow text-left">Daftar Akun</span>
                    <TbArrowNarrowRight className="ml-12 h-5 w-5" />
                  </Button>
                </div>
              </div>
            </form>
          </Form>
        </div>
      </div>
    </div>
  );
}