import React from "react";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { DataTable } from "@/app/(home)/user/data-table";
import { columns, Address } from "@/app/(home)/user/columns";
import { toast, Flip } from "react-toastify";
import { useSession } from "next-auth/react";
import { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { date, z } from "zod";
import { Button } from "@/components/ui/button";
const formSchema = z.object({
  address_line: z.string(),
  post_code: z.string(),
  city: z.string(),
  district: z.string(),
  division: z.string(),
  updated_by: z.string().default(""),
});
type FormData = z.infer<typeof formSchema>;
type User = {
  email: string;
  profile: Profile;
};
type Profile = {
  full_name: string;
  mobile_number: string;
  picture: {
    file_url: string;
  };
  gender: string;
  address: Address[];
};
// type Address = {
//   address_line: string;
//   post_code: string;
//   city: string;
//   district: string;
//   division: string;
//   is_default: boolean;
// };
async function getUserByUuid(
  params: string
): Promise<{ User: User; UserAddresses: Address[] }> {
  const res = await fetch(`http://localhost:3000/api/user/${params}`, {
    method: "GET",
  });
  return res.json();
}
interface AddressComponentProps {
  uuid?: string;
}

const AddressComponent: React.FC<AddressComponentProps> = ({ uuid }) => {
  const { data: session, status } = useSession();
  const [addresses, setAddresses] = useState<Array<Address>>([]);
  const [defaultAddress, setDefaultAddress] = useState<Address>();
  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      address_line: "",
      post_code: "",
      city: "",
      district: "",
      division: "",
    },
  });
  useEffect(() => {
    async function data() {
      if (uuid) {
        //?-------------- User data Fatching--------------//
        const { User, UserAddresses } = await getUserByUuid(uuid);
        const defaultfAdd = UserAddresses.find(
          (address) => address.is_default === true
        );
        setDefaultAddress(defaultfAdd || undefined);
        setAddresses(UserAddresses);
      }
    }
    data();
  }, [session, uuid]);
  async function addNewAddress(data: z.infer<typeof formSchema>) {
    const response = await fetch(`/api/user/updateddress/${uuid}`, {
      method: "POST",
      body: JSON.stringify({
        address_line: data.address_line,
        post_code: data.post_code,
        city: data.city,
        district: data.district,
        division: data.division,
        updated_by: session?.user.role,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    });
    const result = await response.json();
    if (session) {
      const { UserAddresses } = await getUserByUuid(uuid!);
      setAddresses(UserAddresses);
      const newDefaultAddress = UserAddresses.find((addr) => addr.is_default);
      setDefaultAddress(newDefaultAddress);
    }

    if (response.ok) {
      toast.success(result.message, {
        position: "bottom-right",
        autoClose: 4000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "colored",
        transition: Flip,
      });
      form.reset();
    }
  }

  async function updateDefaultAddress(addressId: string, profileId: number) {
    try {
      const response = await fetch(`/api/user/updateddress`, {
        method: "PUT",
        body: JSON.stringify({ uuid: addressId, profileId: profileId }),
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (response.ok) {
        // Refresh addresses after updating
        if (session) {
          const { UserAddresses } = await getUserByUuid(session.user.uuid);

          if (UserAddresses) {
            setAddresses(UserAddresses);
            const newDefaultAddress = UserAddresses.find(
              (addr) => addr.is_default
            );
            setDefaultAddress(newDefaultAddress);
          }
        }
        toast.success("Default address updated successfully");
      } else {
        toast.error("Failed to update default address");
      }
    } catch (error) {
      console.error("Error updating default address:", error);
      toast.error("An error occurred while updating default address");
    }
  }

  async function deleteAddress(addressId: string) {
    try {
      const response = await fetch(`/api/user/updateddress/${addressId}`, {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (response.ok) {
        // Refresh addresses after deleting
        if (session) {
          const { UserAddresses } = await getUserByUuid(session.user.uuid);
          setAddresses(UserAddresses);
          const newDefaultAddress = UserAddresses.find(
            (addr) => addr.is_default
          );
          setDefaultAddress(newDefaultAddress);
        }
        toast.success("Address deleted successfully");
      } else {
        toast.error("Failed to delete address");
      }
    } catch (error) {
      console.error("Error deleting address:", error);
      toast.error("An error occurred while deleting address");
    }
  }
  return (
    <div>
      <p className="text-heading2-bold  text-grey-1 max-sm:text-heading4-bold mb-3">
        Address
      </p>
      {defaultAddress ? (
        <div className="mb-4 p-4 border rounded">
          <h3 className="font-bold">Default Address:</h3>
          <p>
            {defaultAddress.address_line}, {defaultAddress.city},
            {defaultAddress.district} , {defaultAddress.post_code},
            {defaultAddress.division}
          </p>
        </div>
      ) : (
        <p className="mb-4">No default address set.</p>
      )}
      <DataTable
        columns={columns}
        data={addresses}
        updateDefaultAddress={updateDefaultAddress}
        deleteAddress={deleteAddress}
      />
      <div className="flex gap-1">
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(addNewAddress)}
            className="space-y-8 flex items-center"
          >
            <div className="flex flex-wrap">
              <FormField
                control={form.control}
                name="address_line"
                render={({ field }) => (
                  <FormItem>
                    <FormItem>
                      <FormLabel>Address Line</FormLabel>
                      <FormControl>
                        <Input {...field} type="text" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="post_code"
                render={({ field }) => (
                  <FormItem>
                    <FormItem>
                      <FormLabel>Post Code</FormLabel>
                      <FormControl>
                        <Input {...field} type="text" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="city"
                render={({ field }) => (
                  <FormItem>
                    <FormItem>
                      <FormLabel>City</FormLabel>
                      <FormControl>
                        <Input {...field} type="text" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="district"
                render={({ field }) => (
                  <FormItem>
                    <FormItem>
                      <FormLabel>District</FormLabel>
                      <FormControl>
                        <Input {...field} type="text" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="division"
                render={({ field }) => (
                  <FormItem>
                    <FormItem>
                      <FormLabel>Division</FormLabel>
                      <FormControl>
                        <Input {...field} type="text" />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  </FormItem>
                )}
              />
            </div>
            <Button className=" text-white">Add new address</Button>
          </form>
        </Form>
      </div>
    </div>
  );
};

export default AddressComponent;