"use client";

import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useSession } from "next-auth/react";
import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { date, string, z } from "zod";
import ClockLoader from "react-spinners/ClockLoader";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
type Checked = DropdownMenuCheckboxItemProps["checked"];

import { Input } from "@/components/ui/input";
import Image from "next/image";
import { User } from "lucide-react";
import { toast, Flip } from "react-toastify";
import Link from "next/link";
import AddressComponent from "@/components/admin/user/AddressComponent";
const formSchema = z.object({
  name: z.string(),
  email: z.string().email({
    message: "Please a valid email address",
  }),
  mobile: z.string(),
  gender: z.string(),
  date_of_birth: z.date(),
  image: z.any()
      .optional()
      .refine(
          (value) =>
              typeof value === "undefined" || (typeof window !== "undefined" && value instanceof FileList),
          {
            message: "Invalid file input",
          }
      ),
  editedBy: z.string().default(""),
});
type FormData = z.infer<typeof formSchema>;
type Profile = {
  full_name: string;
  mobile_number: string;
  picture: {
    file_url: string;
  };
  gender: string;
  date_of_birth: Date;
};
type Account = {
  id: string;
  userId: number;
  type: string;
  provider: string;
};
type User = {
  email: string;
  profile: Profile;
  account: Account;
};
async function getUserByUuid(params: string) {
  const res = await fetch(`http://localhost:3000/api/user/${params}`, {
    method: "GET",
  });
  return res.json();
}

const UserClient = () => {
  const { data: session, status } = useSession();
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState<User>();
  const [gmailEidtOption, setGmailEidtOption] = useState<string>("");
  const [editOption, setEditOption] = useState<boolean>(false);
  const [gender, setGender] = useState("");
  const [avatar, setAvatar] = useState("");
  const [avatarPreview, setAvatarPreview] = useState("/user.png");
  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      mobile: "",
      gender: "",
    },
  });

  const setProfileAvatar = (e:any)=> {
    setAvatar(e.target.files[0]);

    console.log(e.target.files[0])
  }

  useEffect(() => {
    async function data() {
      if (session) {
        //?-------------- User data Fatching--------------//
        const { User, provider } = await getUserByUuid(session?.user.uuid);
        if (User) {
          form.reset({
            name: User.profile.full_name,
            email: User.email,
            mobile: User.profile.mobile_number,
            gender: User.profile.gender,
            date_of_birth: new Date(User.profile.date_of_birth),
          });
        }
        setGender(User?.profile.gender);
        setAvatarPreview(User?.profile?.picture?.file_url);
        setGmailEidtOption(provider);
        setUser(User);
        setLoading(false);
      }
    }
    data();
  }, [session, status, form]);

  async function onSubmit(data: FormData) {
    const formData = new FormData();
    formData.append("name", data.name);
    formData.append("email", data.email);
    formData.append("mobile", data.mobile);
    formData.append("gender", gender);
    formData.append("date_of_birth", data.date_of_birth.toISOString());
    formData.append("editedBy", data.name);
    // if (data.image && data.image[0]) {
    //   formData.append("image", data.image[0]);
    // }
    formData.append("profileImage", avatar);
    
    try {
      const response = await fetch(`/api/user/${session?.user.uuid}`, {
        method: "PUT",
        body: formData,
      });
      if (response.ok && user) {
        setEditOption(!editOption);
        const updatedUser = {
          ...user,
          profile: {
            ...user.profile,
            full_name: data.name,
            mobile_number: data.mobile,
            gender: gender,
            date_of_birth: data.date_of_birth,
          },
        };

        // Update the user state
        setUser(updatedUser);

        // Reset the form with new values
        form.reset({
          name: data.name,
          email: data.email,
          mobile: data.mobile,
          gender: gender,
        });
        toast.success("Details Updated!", {
          position: "bottom-right",
          autoClose: 4000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "colored",
          transition: Flip,
        });
      }
    } catch (error: any) {
      console.log("Error ▄︻デ══━一💥:", error);
    }
  }

  if (loading) {
    return (
      <div className="h-screen  flex justify-center items-center">
        <ClockLoader color="#01b8eb" />
      </div>
    );
  }

  return (
    <div className="max-w-[1350px] flex items-center justify-center min-h-[calc(100vh-280px)] mx-auto my-6">
      <Card className="max-w-[1200px] w-full max-sm:max-w-[550px] max-sm:p-10 max-md:p-8 bg-blue-2 shadow-md shadow-black/30 p-14">
        <div className="flex gap-5 flex-col">
          <p className="text-heading2-bold  text-grey-1 max-sm:text-heading4-bold mb-3">
            Profile
          </p>

          {!editOption && user ? (
            <div className="flex flex-col gap-3 p-3">
              <div className="flex items-center space-x-2">
                <Label htmlFor="terms" className="font-bold">
                  Name:
                </Label>
                <p>{user.profile.full_name}</p>
              </div>
              <div className="flex items-center space-x-2">
                <Label htmlFor="terms" className="font-bold">
                  Gender
                </Label>
                <p>{user?.profile?.gender}</p>
              </div>
              <div className="flex items-center space-x-2">
                <Label htmlFor="terms" className="font-bold">
                  Date of Birth
                </Label>
                <p>{format(new Date(user.profile.date_of_birth), "PPP")}</p>
              </div>
              <div className="flex items-center space-x-2">
                <Label htmlFor="terms" className="font-bold">
                  Mobile Number
                </Label>
                <p>{user.profile.mobile_number}</p>
              </div>
              <div className="flex items-center space-x-2">
                <Label htmlFor="terms" className="font-bold">
                  Email
                </Label>
                <p>{user.email}</p>
              </div>
            </div>
          ) : (
            ""
          )}

          {editOption ? (
            <Form {...form}>
              <form
                // onSubmit={form.handleSubmit(onSubmit)}
                onSubmit={form.handleSubmit(onSubmit)}
                className="space-y-8"
              >
                {gmailEidtOption === "credentials" ? (
                  <>
                    <Image
                      src={avatarPreview}
                      width={600}
                      height={600}
                      alt="user image preview"
                      className="rounded-full bg-center w-[100px] h-[100px] object-fill"
                    />
                    <FormField
                      control={form.control}
                      name="image"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Preview</FormLabel>
                          <FormControl>
                            <Input
                              type="file"
                              accept="image/*"
                              onChange={(
                                e: React.ChangeEvent<HTMLInputElement>
                              ) => {
                                const files = e.target.files;
                                if (files && files.length > 0) {
                                  const file = files[0];
                                  const reader = new FileReader();

                                  reader.onload = (
                                    event: ProgressEvent<FileReader>
                                  ) => {
                                    if (
                                      event.target &&
                                      typeof event.target.result === "string"
                                    ) {
                                      setAvatarPreview(event.target.result);
                                      setAvatar(event.target.result);
                                    }
                                  };

                                  reader.readAsDataURL(file);
                                  field.onChange(files);
                                }
                              }}
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </>
                ) : null}

                <FormField
                  control={form.control}
                  name="name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Full Name</FormLabel>
                      <FormControl>
                        <Input {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                {gmailEidtOption === "credentials" ? (
                  <>
                    <div className="flex items-end w-[100%] gap-5">
                      <FormField
                        control={form.control}
                        name="email"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>Email</FormLabel>
                            <FormControl>
                              <Input {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <Button className="text-white">
                        <Link
                          href={`/login/resetPassword/${session?.user.uuid}`}
                        >
                          Reset Password
                        </Link>
                      </Button>
                    </div>
                  </>
                ) : null}
                <FormField
                  control={form.control}
                  name="mobile"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Mobile</FormLabel>
                      <FormControl>
                        <Input {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="gender"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Gender</FormLabel>
                      <FormControl>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="outline">
                              {gender || "Select Gender"}
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent className="w-56">
                            <DropdownMenuLabel>Select Gender</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuRadioGroup
                              value={gender}
                              onValueChange={(value) => {
                                setGender(value);
                                field.onChange(value); // Update form field value
                              }}
                            >
                              <DropdownMenuRadioItem value="MALE">
                                Male
                              </DropdownMenuRadioItem>
                              <DropdownMenuRadioItem value="FEMALE">
                                Female
                              </DropdownMenuRadioItem>
                              <DropdownMenuRadioItem value="OTHER">
                                Other
                              </DropdownMenuRadioItem>
                            </DropdownMenuRadioGroup>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="date_of_birth"
                  render={({ field }) => (
                    <FormItem className="flex flex-col">
                      <FormLabel>Date of birth</FormLabel>
                      <Popover>
                        <PopoverTrigger asChild>
                          <FormControl>
                            <Button
                              variant={"outline"}
                              className={cn(
                                "w-[240px] pl-3 text-left font-normal",
                                !field.value && "text-muted-foreground"
                              )}
                            >
                              {field.value ? (
                                format(field.value, "PPP")
                              ) : (
                                <span>Pick a date</span>
                              )}
                              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                            </Button>
                          </FormControl>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="start">
                          <Calendar
                            mode="single"
                            selected={field.value}
                            onSelect={field.onChange}
                            disabled={(date) =>
                              date > new Date() || date < new Date("1900-01-01")
                            }
                            initialFocus
                          />
                        </PopoverContent>
                      </Popover>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <div className="grid w-full max-w-sm items-center gap-1.5">
                  <Label htmlFor="picture">Picture</Label>
                  <Input id="picture" type="file" onChange={(e)=>setProfileAvatar(e)} />
                </div>

                <div className="flex gap-4">
                  <Button type="submit" className="text-white">
                    Submit
                  </Button>
                  <Button
                    onClick={() => setEditOption(!editOption)}
                    className="text-white bg-secondery"
                  >
                    Cancel
                  </Button>
                </div>
              </form>
            </Form>
          ) : (
            ""
          )}
          {!editOption && (
            <Button
              className="text-white"
              onClick={() => setEditOption(!editOption)}
            >
              Edit Profile
            </Button>
          )}
          {/* <AddressComponent uuid={session?.user.uuid} /> */}
        </div>
      </Card>
    </div>
  );
};

export default UserClient;