"use client";
import React from "react";
import ProductTitle from "./product-title";
import ProductOptions from "../product-options";
import ProductEstimatedDate from "../product-estimated-date";
import ProductQuantityOption from "../product-quantity-option";
import { UploadDesignIcon } from "@/modules/icons/upload-design-icon";
import { BrowseDesignsIcon } from "@/modules/icons/browse-designs-icon";
import StarRating from "@/modules/ui/star-rating";
import { useRouter } from "next/navigation";
import { CategoryData, ProductOptionDataModel, VariantGroup } from "@/lib/types/models";
import { useProductSelection } from "@/lib/hooks/useProductSelection";

export default function ProductSelection({
  categoryData,
  productData = [],
  variantGroups = [],
  averageRating = 0,
  totalReviews = 0,
}: {
  categoryData: CategoryData;
  productData: ProductOptionDataModel[];
  variantGroups: VariantGroup[];
  averageRating?: number;
  totalReviews?: number;
}) {
  const router = useRouter();
  const {
    selections,
    visibleVariantGroups,
    availableItemsMap,
    unlockedIndex,
    activeProduct,
    matchedProduct,
    isConfigured,
    deliveryTimeList,
    holidaysList,
    handleSelectionChange,
    resetSelections,
    store,
  } = useProductSelection(productData, variantGroups);

  const startUploadDesign = (type: "uploadDesign" | "browseDesign") => {
    if (!isConfigured) return;
    const query = new URLSearchParams({
      designType: type,
      productId: store.selectQuantityAndEstimatedDate.productId || matchedProduct?._id || "",
      quantity: store.selectQuantityAndEstimatedDate.quantity || "",
    }).toString();
    router.push(type === "browseDesign" ? `/tool?${query}` : `/upload-design?${query}`);
  };

  return (
    <>
      <ProductTitle categoryData={categoryData} onClickRefresh={resetSelections} />

      <div className="flex gap-2 items-center pb-4">
        <StarRating fillRating={averageRating} />
        <div className="text-primary font-semibold">({totalReviews} Reviews)</div>
      </div>

      {categoryData?.shortDescription && (
        <div
          className="text-neutral-black-70 text-[14px] lg:text-[16px] pb-6"
          dangerouslySetInnerHTML={{ __html: categoryData.shortDescription }}
        />
      )}

      <div className="flex flex-col gap-3 lg:gap-4">
        {visibleVariantGroups.length > 0 && (
          <ProductOptions
            variantGroups={visibleVariantGroups}
            selections={selections}
            availableItemsMap={availableItemsMap}
            unlockedIndex={unlockedIndex}
            onSelectionChange={handleSelectionChange}
          />
        )}
        <ProductQuantityOption
          deliveryTimeList={deliveryTimeList}
          holidaysList={holidaysList}
          turnaroundTimeData={activeProduct?.turnaroundOptions || []}
        />
      </div>

      <ProductEstimatedDate />

      <button
        type="button"
        disabled={!isConfigured}
        className="w-full flex justify-between items-center h-[48px] lg:h-[60px] text-left px-5 lg:px-8 bg-primary disabled:bg-opacity-50 disabled:cursor-not-allowed rounded-full text-[16px] font-semibold text-white cursor-pointer transition-all hover:bg-primary/90"
        onClick={() => startUploadDesign("uploadDesign")}
      >
        <div>
          <div>Upload Design</div>
          <div className="text-[12px] lg:text-[14px] font-normal">Have a design? Upload and edit it</div>
        </div>
        <UploadDesignIcon />
      </button>

      <button
        type="button"
        disabled={!isConfigured}
        className="my-3 w-full flex justify-between items-center h-[48px] lg:h-[60px] text-left px-5 lg:px-8 bg-black disabled:bg-opacity-50 disabled:cursor-not-allowed rounded-full text-[16px] font-semibold text-white cursor-pointer transition-all hover:bg-black/90"
        onClick={() => startUploadDesign("browseDesign")}
      >
        <div>
          <div>Browse Designs</div>
          <div className="text-[12px] lg:text-[14px] font-normal">Choose one of our templates</div>
        </div>
        <BrowseDesignsIcon />
      </button>
    </>
  );
}