import React from "react";
import {
  getPriceString,
  isValidSpecValue,
  validateSpecValue,
} from "../../utils/functions";
import ColorChips from "../ColorChips";
import PickLabel from "../PickLabel";
import RankingLabel from "../RankingLabel";
import RingProgress from "../RingProgress";
import Link from "../shared/Link";
import { IProductV2Props } from "./ProductV2.types";

const NUMBER_OF_HIGHLIGHT_INDEX = 3;
const NUMBER_OF_KEY_SPEC_PREVIEW = 4;

const ProductV2 = ({
  className = "",
  isMobile,
  index,
  parentCategory,
  category,
  productData,
  scoreInfoType = "totalScore",
  showIndex = false,
  NewTabLink,
  NextImage,
}: IProductV2Props) => {
  const {
    thumbnailUrl,
    brandName,
    modelName,
    productName,
    colors,
    pickType,
    price,
    keySpec,
    totalScoreInfo,
    rankingScoreInfo,
    rankingRuleTagInfo,
    reviewAverage,
    reviewCount,
  } = {
    ...productData,
    brandName: productData.brandName ?? "",
    productName: productData.productName ?? "",
  };

  const isHighLightedIndex =
    index !== undefined && index <= NUMBER_OF_HIGHLIGHT_INDEX;
  const showReviewAverageAndCount = reviewCount !== 0;
  const keySpecPreviewList = keySpec?.specList
    .filter((spec) => !spec.hiddenOnEmptyValue && isValidSpecValue(spec.value))
    .slice(0, NUMBER_OF_KEY_SPEC_PREVIEW);

  const scoreInfo =
    scoreInfoType === "totalScore"
      ? totalScoreInfo
      : { ...rankingScoreInfo, title: "랭킹 점수" };

  return (
    <div className={`px-[1rem] pc:px-0 ${className}`}>
      <Link
        href={`/product/${parentCategory}/${category}/detail/${modelName}`}
        className={isMobile ? "" : "flex"}
        NewTabLink={NewTabLink}
      >
        {/* pc 제품 이미지 영역 */}
        <div
          className={`relative flex flex-col gap-y-[1rem] ${
            isMobile ? "hidden" : ""
          }`}
        >
          <div
            className={`${
              showIndex
                ? `absolute top-0 left-0 z-10 flex h-[3rem] w-[3rem] items-center justify-center rounded-[0.5rem] text-heading-5 font-bold ${
                    isMobile ? "" : "font-extrabold"
                  } ${
                    isHighLightedIndex
                      ? "bg-gray-10 text-white"
                      : "bg-gray-2 text-gray-10"
                  }`
                : ""
            }`}
          >
            {index}
          </div>

          <div className="h-[20rem] w-[20rem]">
            {NextImage ? (
              <NextImage
                src={thumbnailUrl}
                key={`nosearchPick_${brandName}_${modelName}_${productName}`}
                alt={`nosearchPick_${brandName}_${modelName}_${productName}`}
                layout="responsive"
                objectFit="contain"
                width={0}
                height={0}
                placeholder="blur"
                priority
              />
            ) : (
              <img
                src={thumbnailUrl}
                alt={modelName}
                className={`h-[20rem] w-[20rem] bg-white object-contain`}
              />
            )}
          </div>

          <ColorChips
            wrapperClassName="mx-auto"
            colors={colors ?? ""}
            shape="square"
            chipWidth="1.2"
            chipHeight="1.2"
          />
        </div>

        <div
          className={`mx-[2rem] border-r border-solid border-gray-3 ${
            isMobile ? "hidden" : ""
          }`}
        />

        {/* mobile 컨텐츠 */}
        <div
          className={`rounded-[1rem] ${
            isMobile
              ? "border border-solid border-gray-3 py-[1.6rem]"
              : "w-full max-w-[48rem] rounded-none border-none px-0 py-[1rem]"
          }`}
        >
          <div
            className={`flex gap-x-[0.8rem] ${
              isMobile ? "px-[1.6rem]" : "px-0"
            }`}
          >
            {/* 제품 이미지 정보 */}
            <div
              className={`relative flex flex-col gap-y-[0.4rem] ${
                isMobile ? "" : "hidden"
              }`}
            >
              <div
                className={`${
                  showIndex
                    ? `absolute top-0 left-0 z-10 flex h-[2.8rem] w-[2.8rem] items-center justify-center rounded-[0.5rem] text-heading-6 font-bold ${
                        isMobile ? "" : "font-extrabold"
                      } ${
                        isHighLightedIndex
                          ? "bg-gray-10 text-white"
                          : "bg-gray-2 text-gray-10"
                      }`
                    : ""
                }`}
              >
                {index}
              </div>

              <div className="h-[11rem] w-[11rem]">
                {NextImage ? (
                  <NextImage
                    src={thumbnailUrl}
                    key={`nosearchPick_${brandName}_${modelName}_${productName}`}
                    alt={`nosearchPick_${brandName}_${modelName}_${productName}`}
                    layout="responsive"
                    objectFit="contain"
                    width={0}
                    height={0}
                    placeholder="blur"
                    priority
                  />
                ) : (
                  <img
                    src={thumbnailUrl}
                    alt={modelName}
                    className={`h-[11rem] w-[11rem] bg-white object-contain`}
                  />
                )}
              </div>

              <ColorChips
                wrapperClassName="mx-auto"
                colors={colors ?? ""}
                shape="square"
                chipWidth="1"
                chipHeight="1"
              />
            </div>

            {/* 픽 라벨 / 제품명 / 가격 / 별점 및 후기 수 */}
            <div className="flex flex-col gap-y-[0.4rem]">
              {pickType !== "none" && (
                <div className="flex flex-wrap items-center gap-x-[0.4rem]">
                  <PickLabel
                    type="label"
                    pickType={pickType}
                    labelStyle="!w-fit !text-detail-4 !px-[0.6rem]"
                  />

                  {rankingRuleTagInfo && (
                    <RankingLabel
                      className={`!px-[0.6rem] !py-[0.2rem] ${
                        isMobile
                          ? "!text-detail-4"
                          : "!text-body-9 !font-medium"
                      }`}
                      rankingTagName={rankingRuleTagInfo.name}
                      rank={rankingRuleTagInfo.rank}
                    />
                  )}
                </div>
              )}

              <div className="break-keep text-body-3 font-medium text-gray-10 line-clamp-2">
                {validateSpecValue(brandName)} {validateSpecValue(modelName)}{" "}
                {validateSpecValue(productName)}
              </div>

              <div
                className={`flex flex-col gap-y-[0.4rem] ${
                  isMobile ? "" : "flex-row gap-x-[1.2rem]"
                }`}
              >
                <div className="text-body-2 font-bold text-gray-10">
                  {getPriceString(price)}
                </div>

                {showReviewAverageAndCount && (
                  <div className="flex items-center gap-x-[0.4rem]">
                    <span className="text-[#FF9900]">★</span>
                    <span className="text-body-6 font-medium text-gray-10">
                      {reviewAverage}
                    </span>
                    <span className="text-body-7 text-gray-6">
                      ({reviewCount})
                    </span>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* 주요 스펙 */}
          <div
            className={`mt-[1.6rem] grid w-full grid-cols-2 gap-y-[0.4rem] gap-x-[0.8rem] px-[1.6rem] ${
              isMobile ? "mx-auto" : "w-fit px-0"
            }`}
          >
            {keySpecPreviewList?.map((specItem) => {
              const { name, value } = specItem;
              return (
                <div
                  className="flex items-center gap-x-[0.4rem]"
                  key={`${name}_${value}}`}
                >
                  <span className="whitespace-nowrap text-detail-4 text-gray-7">
                    {name}
                  </span>
                  <span className="text-body-10 text-gray-10 line-clamp-1">
                    {value}
                  </span>
                </div>
              );
            })}
          </div>

          <div className="my-[1.6rem] border-t border-dashed border-gray-3" />

          <div
            className={`flex flex-col gap-y-[1.6rem] ${
              isMobile ? "pl-[1.6rem]" : ""
            }`}
          >
            {/* 랭킹 그룹 점수 */}
            <div
              className={`scrollbar-hide flex flex-nowrap overflow-auto ${
                isMobile ? "" : "gap-x-[2rem]"
              }`}
              onClick={(e) => e.preventDefault()}
            >
              <div
                className={`flex flex-col items-center justify-center gap-y-[0.3rem] ${
                  isMobile ? "mr-[2rem]" : ""
                }`}
              >
                <div className="whitespace-nowrap text-center text-body-5 font-bold text-gray-10">
                  {scoreInfo.title}
                </div>
                <RingProgress
                  labelClassName={`!font-extrabold ${
                    isMobile ? "!text-heading-5" : "!text-heading-4"
                  }`}
                  trackWidth={isMobile ? 50 * 0.125 : 56 * 0.125}
                  indicatorWidth={isMobile ? 50 * 0.125 : 56 * 0.125}
                  size={isMobile ? 50 + 50 * 0.25 : 56 + 56 * 0.25}
                  progressEnd={scoreInfo.score}
                />
              </div>

              {scoreInfo.composedScoreList.map((composedScoreItem) => {
                const { title, score } = composedScoreItem;
                const ringProgressWidth = 45 * 0.125;
                const ringProgressSize = 45 + 45 * 0.25;

                return (
                  <div
                    key={`${title}_${score}`}
                    className={`flex flex-col items-center justify-center gap-y-[0.3rem] ${
                      isMobile ? "mr-[2rem]" : ""
                    }`}
                  >
                    <div className="whitespace-nowrap text-center text-body-7 text-gray-10">
                      {title}
                    </div>
                    <RingProgress
                      labelClassName="!text-heading-6 !font-bold"
                      trackWidth={ringProgressWidth}
                      indicatorWidth={ringProgressWidth}
                      size={ringProgressSize}
                      progressEnd={score}
                    />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </Link>
    </div>
  );
};

export default ProductV2;