import React, { useState, useEffect } from "react";
import Link from "next/link";
import Cookies from "js-cookie";
import Image from "next/image";
import { Image as AntImage } from "antd";
import apiInterceptor from "@/interceptor/interceptor";
import { productInterface } from "@/INTERFACES/product";
import { categoryInterface } from "@/INTERFACES/category";
import { subCategoryInterface } from "@/INTERFACES/subCategory";
import { topSellersInterface } from "@/INTERFACES/topSellers";
import { userActivity } from "@/components/commonFunctions/userActivity";
import jwt from "jsonwebtoken";
import FilterDropDown from "./FilterDropDown";
import FeaturedButton from "./FeaturedButton";
import toast, { Toaster } from "react-hot-toast";
import { twMerge } from "tailwind-merge";

type Categories = { [key: string]: categoryInterface };
type SubCategories = { [key: string]: subCategoryInterface };
type Sellers = { [key: string]: topSellersInterface };
type CheckedItems = string[];
type FilterItems = { [key: string]: { name: string; image: string } };

const Index = () => {
  const token: any = Cookies.get("jazz_admin_token");
  const decodedToken = jwt.decode(token);
  const userId = decodedToken ? decodedToken.sub : null;

  const [product, setProduct] = useState<productInterface[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [isLoading, setIsLoading] = useState(true);

  const [categories, setCategories] = useState<Categories>({});
  const [subCategories, setSubCategories] = useState<SubCategories>({});
  const [sellers, setSellers] = useState<Sellers>({});
  const [searchTerm, setSearchTerm] = useState("");
const [isSearchMode, setIsSearchMode] = useState(false);

  const [checkedCategories, setCheckedCategories] = useState<CheckedItems>([]);
  const [checkedSubCategories, setCheckedSubCategories] =
    useState<CheckedItems>([]);
  const [checkedSellers, setCheckedSellers] = useState<CheckedItems>([]);

  const [filterCategories, setFilterCategories] = useState<FilterItems>({});
  const [filterSubCategories, setFilterSubCategories] = useState<FilterItems>(
    {}
  );
  const [filterSellers, setFilterSellers] = useState<FilterItems>({});

  const [recommendedFilerEnabled, setRecommendedFilerEnabled] =
    useState<boolean>(false);

  const [recommendProducts, setRecommendProducts] = useState<string[]>([]);
  const [nonRecommendProducts, setNonRecommendProducts] = useState<string[]>(
    []
  );

  async function fetchProducts() {
    const accessToken = Cookies.get("jazz_token");

    let fetchedproducts = [];
    let fetchedpages = 0;

    if (recommendedFilerEnabled) {
      const url = `api/getFeaturedProducts?page=${currentPage}`;

      const response = await apiInterceptor.get(url, {
        headers: {
          authorization: `Bearer ${accessToken}`,
        },
      });
      console.log("url>>", url);
      console.log("recom_products>>", response.data.products);

      fetchedproducts = response.data.products.data;
      fetchedpages = response.data.products.last_page;
    } else {
      let queries = [];
      if (checkedCategories.length)
        queries.push(`categoryId=${checkedCategories[0]}`);
      if (checkedSubCategories.length)
        queries.push(`subCategoryId=${checkedSubCategories[0]}`);
      if (checkedSellers.length) queries.push(`userId=${checkedSellers[0]}`);
      queries.push(`page=${currentPage}`);

      const filterQueries = queries ? `?${queries.join("&")}` : "";
      const url = `api/admin/products${filterQueries}`;

      const response = await apiInterceptor.get(url, {
        headers: {
          authorization: `Bearer ${accessToken}`,
        },
      });
      fetchedproducts = response.data.products.data;
      fetchedpages = response.data.products.pagination.total_pages;
    }

    setProduct(fetchedproducts);
    setTotalPage(fetchedpages);
  }

  async function fetchCategories() {
    const accessToken = Cookies.get("jazz_token");

    const response = await apiInterceptor.get(
      `/api/admin/category?per_page=100`,
      {
        headers: {
          authorization: `Bearer ${accessToken}`,
        },
      }
    );
    const data: categoryInterface[] = response.data.categories.data;

    const filterItems: FilterItems = {};
    data.forEach((category) => {
      filterItems[category._id] = {
        name: category.categoryName,
        image: category.categoryImage,
      };
    });
    setFilterCategories(filterItems);

    const items: Categories = {};
    data.forEach((category) => {
      items[category._id] = category;
    });
    console.log("catagories>>", items);
    setCategories(items);
  }

  async function fetchSubCategories() {
    const accessToken = Cookies.get("jazz_token");

    const response = await apiInterceptor.get(
      `/api/admin/subCategory?per_page=1000`,
      {
        headers: {
          authorization: `Bearer ${accessToken}`,
        },
      }
    );
    const data: subCategoryInterface[] = response.data.subCategories.data;

    const filterItems: FilterItems = {};
    data.forEach((subcategory) => {
      filterItems[subcategory._id] = {
        name: subcategory.subCategoryName,
        image: subcategory.subCategoryImage ?? "",
      };
    });
    setFilterSubCategories(filterItems);

    const items: SubCategories = {};
    data.forEach((subcategory) => {
      items[subcategory._id] = subcategory;
    });
    setSubCategories(items);
  }

  async function fetchSellers() {
    const accessToken = Cookies.get("jazz_token");

    const response = await apiInterceptor.get(`/api/getSellers`, {
      headers: {
        authorization: `Bearer ${accessToken}`,
      },
    });
    const data: topSellersInterface[] = response.data.sellers;

    const filterItems: FilterItems = {};
    data.forEach((seller) => {
      filterItems[seller._id] = {
        name: seller.firstName + " " + seller.lastName,
        image: "",
      };
    });
    setFilterSellers(filterItems);

    const items: Sellers = {};
    data.forEach((seller) => {
      items[seller._id] = seller;
    });
    setSellers(items);
  }

  async function fetchData() {
    const needLoading = !Boolean(product.length);
    try {
      if (needLoading) setIsLoading(true);

      await fetchProducts();
      await fetchCategories();
      await fetchSubCategories();
      await fetchSellers();
    } catch (error) {
      console.error("Error Catched:", error);
    } finally {
      if (needLoading) setIsLoading(false);
    }
  }
const handleKeywordSearch = async () => {
  const keyword = searchTerm.trim();
  if (!keyword) {
    toast.error("Please enter a keyword to search.");
    return;
  }

  const accessToken = Cookies.get("jazz_token");

  try {
    setIsLoading(true);
    setIsSearchMode(true); // <-- set search mode

    const response = await apiInterceptor.get(
      `/api/getProducts?keyword=${keyword}`,
      {
        headers: {
          authorization: `Bearer ${accessToken}`,
        },
      }
    );

    const products = response.data.products?.data || response.data.products || [];
    setProduct(products);
    setTotalPage(1);
    setCurrentPage(1);
  } catch (error) {
    console.error("Error fetching products by keyword:", error);
    toast.error("Failed to search products.");
  } finally {
    setIsLoading(false);
  }
};



  useEffect(() => {
    fetchData();
  }, [currentPage]);

useEffect(() => {
  if (!isSearchMode) {
    fetchData();
  }
}, [currentPage]);

useEffect(() => {
  if (!isSearchMode) {
    setCurrentPage(1);
    fetchData();
  }
}, [checkedCategories, checkedSubCategories, checkedSellers, recommendedFilerEnabled]);


  const handleNextPage = () => {
    if (currentPage < totalPage) {
      setCurrentPage(currentPage + 1);
    }
  };

  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const handleDelete = async (productId: string) => {
    const accessToken = Cookies.get("jazz_token");
    await apiInterceptor.delete(`/api/admin/products/${productId}`, {
      headers: { authorization: `Bearer ${accessToken}` },
    });
    setProduct((prevData) => prevData.filter((item) => item._id !== productId));
  };

  function markProductRecommended(id: string) {
    if (recommendProducts.includes(id)) {
      setRecommendProducts(recommendProducts.filter((e) => e !== id));
    } else {
      setRecommendProducts(recommendProducts.concat([id]));
    }
  }

  function markProductNotRecommended(id: string) {
    if (nonRecommendProducts.includes(id)) {
      setNonRecommendProducts(nonRecommendProducts.filter((e) => e !== id));
    } else {
      setNonRecommendProducts(nonRecommendProducts.concat([id]));
    }
  }

  async function handleSaveChanges() {
    if (!recommendProducts && !nonRecommendProducts) return;

    try {
      const accessToken = Cookies.get("jazz_token");

      if (recommendProducts.length) {
        await apiInterceptor.post(
          `/api/admin/setRecomendedProducts`,
          {
            productsIds: recommendProducts,
            status: true,
          },
          {
            headers: {
              authorization: `Bearer ${accessToken}`,
            },
          }
        );
      }

      if (nonRecommendProducts.length) {
        await apiInterceptor.post(
          `/api/admin/setRecomendedProducts`,
          {
            productsIds: nonRecommendProducts,
            status: false,
          },
          {
            headers: {
              authorization: `Bearer ${accessToken}`,
            },
          }
        );
      }
      toast.success("Changes Saved");
      await fetchProducts();
      setRecommendProducts([]);
      setNonRecommendProducts([]);
    } catch (error) {
      console.error("Error saving changes:", error);
      toast.error("Failed to save changes");
    }
  }

  function getDateTime(date: Date | string | null) {
    if (date) {
      date = new Date(date);

      const day = String(date.getDate()).padStart(2, "0");
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const year = date.getFullYear();
      const formattedDate = `${day}-${month}-${year}`;

      const hours = date.getHours();
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const period = hours >= 12 ? "PM" : "AM";
      const hours12 = hours % 12 || 12;
      const formattedTime = `${String(hours12).padStart(
        2,
        "0"
      )}:${minutes} ${period}`;
      return formattedDate + " " + formattedTime;
    } else {
      const formattedTime = `--:-- --`;
      return formattedTime;
    }
  }

  function handleNewProduct() {
    userActivity(
      userId,
      "admin",
      "Add New Product",
      {
        pageVisit: `/`,
      },
      navigator.userAgent
    );
  }
  // const filteredProducts = product.filter((item) =>
  //   item.productTitle.toLowerCase().includes(searchTerm.toLowerCase())
  // );

  return (
    <>
      <div className="flex flex-col gap-2 p-3 bg-white">
        <Toaster />
        <div className="flex justify-between items-center">
          <Link
            className="px-3 py-2 rounded hover:bg-[#FE342B] bg-[#383736] text-white"
            href={"/admin/product/addProduct"}
            onClick={handleNewProduct}
          >
            Add Product
          </Link>

          <div className="flex gap-2 items-center">
            <div className="flex">
          <input
  type="text"
  placeholder="Search by product name"
  value={searchTerm}
  onChange={(e) => setSearchTerm(e.target.value)}
  onKeyDown={(e) => e.key === "Enter" && handleKeywordSearch()}
  className="p-[.28rem] pe-[.4rem] bg-white bg-opacity-100 border border-zinc-300"
/>

              <button
                onClick={handleKeywordSearch}
                className="ml-2 px-3 py-2 bg-[#383736] hover:bg-[#FE342B] text-white rounded"
              >
                Search
              </button>
            </div>

            <FeaturedButton
              text="Featured"
              checked={recommendedFilerEnabled}
              setChecked={setRecommendedFilerEnabled}
              className={twMerge(
                "p-[.28rem] pe-[.4rem] bg-white bg-opacity-100 border border-zinc-300",
                recommendedFilerEnabled &&
                  "bg-blue-50 border-blue-400 text-blue-400"
              )}
            />
            <FilterDropDown
              text="Category"
              filterItems={filterCategories}
              checkedItems={checkedCategories}
              setCheckedItems={setCheckedCategories}
              multiselect={false}
            />
            <FilterDropDown
              text="SubCategory"
              filterItems={filterSubCategories}
              checkedItems={checkedSubCategories}
              setCheckedItems={setCheckedSubCategories}
              multiselect={false}
            />
            <FilterDropDown
              text="Seller"
              filterItems={filterSellers}
              checkedItems={checkedSellers}
              setCheckedItems={setCheckedSellers}
              multiselect={false}
            />
            {(Boolean(recommendProducts.length) ||
              Boolean(nonRecommendProducts.length)) && (
              <button
                onClick={handleSaveChanges}
                className="py-[.28rem] px-2 bg-[#FE342B]  hover:bg-[#d13931] rounded text-white"
              >
                Save Changes
              </button>
            )}
          </div>
        </div>
        {isLoading ? (
          <div className="flex justify-center items-center">
            <Image
              src={"/images/loading.gif"}
              height={50}
              width={50}
              alt="loading..."
            />
          </div>
        ) : (
          <>
            <div className="overflow-hidden overflow-x-auto">
              <div className="inline-block">
                <div className="">
                  <table className="min-w-full text-center text-sm font-light">
                    <thead className="border-b bg-neutral-100 font-medium">
                      <tr>
                        <th className="border bg-neutral-10 p-2">#</th>
                        <th className="border bg-neutral-10 p-2">IMAGE</th>
                        <th className="border bg-neutral-10 p-2">
                          PRODUCT NAME
                        </th>
                        <th className="border bg-neutral-10 p-2">CATEGORY</th>
                        <th className="border bg-neutral-10 p-2">
                          SUBCATEGORY
                        </th>
                        <th className="border bg-neutral-10 p-2">
                          SELLING PRICE
                        </th>
                        <th className="border bg-neutral-10 p-2">
                          UPLOAD DATE
                        </th>
                        <th className="border bg-neutral-10 p-2">
                          SELLER NAME
                        </th>
                        <th className="border bg-neutral-10 p-2">CONTACT</th>

                        <th className="border bg-neutral-10 p-2">Action</th>
                      </tr>
                    </thead>

{product.map((item, index) => (
                      <tbody key={item._id}>
                        <tr className=" hover:bg-neutral-100">
                          <td className="border bg-neutral-10 p-1 font-medium">
                            {index + 1}
                          </td>
                          <td className="border bg-neutral-10 p-1">
                            <div className="flex justify-center items-center">
                              <AntImage
                                src={`https://api.jazzagain.com/public/${item.productFeaturedImage}`}
                                height={60}
                                width={60}
                                alt=""
                              />
                            </div>
                          </td>

                          <td className="border bg-neutral-10 p-1">
                            {item.productTitle}
                          </td>
                          <td className="border bg-neutral-10 p-1">
                            {categories[item.categoryId]
                              ? categories[item.categoryId].categoryName
                              : "-"}
                          </td>
                          <td className="border bg-neutral-10 p-1">
                            {subCategories[item.subCategoryId]
                              ? subCategories[item.subCategoryId]
                                  .subCategoryName
                              : "-"}
                          </td>
                          <td className="border bg-neutral-10 p-1">
                            {item.productSellingPrice}
                          </td>
                          <td className="border bg-neutral-10 p-1 whitespace-nowrap">
                            {getDateTime(item?.created_at)}
                          </td>
                          <td className="border bg-neutral-10  p-1">
                            {sellers[item.seller._id]
                              ? sellers[item.seller._id].firstName +
                                " " +
                                sellers[item.seller._id].lastName
                              : "-"}
                          </td>
                          <td className="border bg-neutral-10 p-1">
                            {sellers[item.seller._id]?.phone || "-"}
                          </td>

                          <td className="border bg-neutral-10 p-1">
                            <div className="flex gap-2 justify-center items-center">
                              <FeaturedButton
                                checked={
                                  item.isRecomended
                                    ? !nonRecommendProducts.includes(item._id)
                                    : recommendProducts.includes(item._id)
                                }
                                setChecked={() =>
                                  item.isRecomended
                                    ? markProductNotRecommended(item._id)
                                    : markProductRecommended(item._id)
                                }
                              />
                              <Link
                                href={`/admin/product/update-product/${item._id}`}
                                className="bg-[#383736] hover:bg-[#2d2d2c] rounded text-white px-3 py-2"
                              >
                                Update
                              </Link>
                              <button
                                className="bg-[#FE342B]  hover:bg-[#d13931] rounded text-white px-3 py-2"
                                onClick={() => handleDelete(item._id)}
                              >
                                Delete
                              </button>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    ))}
                  </table>
                </div>
              </div>
            </div>

            <div className="mx-3 mt-4 flex justify-between sm:px-[2rem]">
              <button
                onClick={handlePrevPage}
                className="bg-[#383736] hover:bg-[#FE342B] text-white px-4 py-2 rounded"
              >
                Previous
              </button>
              <button
                onClick={handleNextPage}
                className="bg-[#383736] hover:bg-[#FE342B] text-white px-4 py-2 rounded"
              >
                Next
              </button>
            </div>
          </>
        )}
      </div>
    </>
  );
};

export default Index;