"use client";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
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 { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { Calendar } from "@/components/ui/calendar";
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 { z } from "zod";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { AccountSecurityForm } from "@/components/user/profile/account-security-form";
import { NotificationsForm } from "@/components/user/profile/notifications-form";
import { ProfileForm } from "@/components/user/profile/profile-form";
import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
type Checked = DropdownMenuCheckboxItemProps["checked"];
import { Input } from "@/components/ui/input";
import Image from "next/image";
import Cookies from "js-cookie";
import { User } from "lucide-react";
import { toast, Flip } from "react-toastify";
import Link from "next/link";
import Loader from "@/components/common/Loader";

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(`/api/user/${params}`, {
    method: "GET",
  });
  return res.json();
}

const ProfileClient = () => {
  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);
    formData.append("profileImage", avatar);
    
    try {
      const response = await fetch(`/api/user/${session?.user.uuid}`, {
        method: "PUT",
        body: formData,
      });
      if (response.ok) {
        Cookies.remove("picUrl")
      }
      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">
        <Loader/>
      </div>
    );
  }

  return (
    <>
      <div className="space-y-6 pt-5 px-2">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Profile</h1>
          <p className="text-muted-foreground">
            Manage your account settings and preferences.
          </p>
        </div>
        <Separator />
        <Tabs defaultValue="general" className="w-full">
          <TabsList className="grid w-full max-w-md grid-cols-3">
            <TabsTrigger value="general">General</TabsTrigger>
            <TabsTrigger value="security">Security</TabsTrigger>
            {/* <TabsTrigger value="notifications">Notifications</TabsTrigger> */}
          </TabsList>
          <TabsContent value="general" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>General Information</CardTitle>
                <CardDescription>
                  Update your personal information and profile details.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <ProfileForm />
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="security" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>Security Settings</CardTitle>
                <CardDescription>
                  Manage your password and security preferences.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <AccountSecurityForm />
              </CardContent>
            </Card>
          </TabsContent>
          {/* <TabsContent value="notifications" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle>Notification Preferences</CardTitle>
                <CardDescription>
                  Configure how you receive notifications.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <NotificationsForm />
              </CardContent>
            </Card>
          </TabsContent> */}
        </Tabs>
      </div>


      {/* old code */}
      {/* <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>
            )}
          </div>
        </Card>
      </div> */}
    </>
  );
};

export default ProfileClient;