import { Suspense } from "react";
import { ProductQueryParams } from "@/types/product";
import { onGetProductPaging } from "@/services/apis/product";
import { ResponseStatus } from "@/types/common";
import LoadingSpinner from "@/components/ui/loading-spinner";
import { SortDirection, Status } from "@/types/common";
import { onSignInCustomer } from "@/services/apis/customer";
import { onGetAppSettingCustomer } from "@/services/apis/appSetting";
import { DeliveryOptions, SettingAppCustomer } from "@/types/appSetting";
import ProductGroupClient from "../../ProductGroupClient";

export default async function ManageGroupProductsPage({
  params,
  searchParams,
}: {
  params: { customerId: string, contentGroupId: string };
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const customerId = params.customerId;
  const contentGroupId = params.contentGroupId;
  let customerError = "";
  let token = "";
  let settingAppCustomer: SettingAppCustomer = {
    deliveryOptions: { online: false, offline: false },
    beUsername: "",
    beAuthKey: "",
    beUserId: "",
    customerEmail: ""
  }
  try {

    const isSignInCustomer = await onSignInCustomer({ loginId: customerId });
    console.log("isSignInCustomer", isSignInCustomer)
    if (
      !isSignInCustomer ||
      isSignInCustomer?.status !== ResponseStatus.SUCCESS
    ) {
      customerError = "Customer authentication failed";
    }
    token = isSignInCustomer?.data?.accessToken;
    const isSettingAppCustomer = await onGetAppSettingCustomer({ customerId: customerId }, token);

    console.log("isSettingAppCustomer", isSettingAppCustomer);
    settingAppCustomer = isSettingAppCustomer.data as SettingAppCustomer;
  
    if (!isSettingAppCustomer || isSettingAppCustomer?.status !== ResponseStatus.SUCCESS) {
      customerError = "Customer app settings not found";
    }

  } catch (error) {
    customerError = "Customer not found";
  }

  if (customerError !== "") {
    return (
      <div className="min-h-screen bg-gray-50 py-12 px-4 flex items-center justify-center">
        <div className="bg-white rounded-xl shadow-sm p-8 max-w-2xl w-full">
          <div className={`text-4xl mb-4 text-red-500 `}>{customerError}</div>
        </div>
      </div>
    );
  }

  const queryParams: ProductQueryParams = {
    customerId: customerId,
    contentGroupId: contentGroupId,
    pageNumber: Number(searchParams.pageNumber) || 1,
    pageSize: Number(searchParams.pageSize) || 10,
    searchKeyName: searchParams.searchKeyName?.toString() || "",
    sortField: searchParams.sortField?.toString(),
    sortDirection: searchParams.sortDirection as SortDirection | undefined,
    // statuses: searchParams.statuses
    //   ? Array.isArray(searchParams.statuses)
    //     ? searchParams.statuses.map((s) => s as Status)
    //     : [searchParams.statuses as Status]
    //   : undefined,
  };

  try {
    const response = await onGetProductPaging(queryParams, token);

    if (!response) {
      throw new Error("Couldn't get product");
    }

    return (
      <Suspense fallback={<LoadingSpinner />}>
        <ProductGroupClient
          initialData={response?.data}
          initialQuery={queryParams}
          customerId={customerId}
          contentGroupId={contentGroupId}
          customerToken={token}
          isSettingAppCustomer={settingAppCustomer}
        />
      </Suspense>
    );
  } catch (error) {
    return (
      <div className="min-h-screen bg-gray-50 py-12 px-4 flex items-center justify-center">
        <div className="bg-white rounded-xl shadow-sm p-8 max-w-md w-full">
          <div className={`text-4xl mb-4 text-red-500 `}>
            Error fetching products
          </div>
        </div>
      </div>
    );
  }
}