import clsx from 'clsx';
import ImageNext from 'next/image';
import { useRouter } from 'next/router';
import { useMemo, useEffect, useState } from 'react';

import Image from '@/core/components/elements/Image/Image';
import Link from '@/core/components/elements/Link/Link';
import currencyFormat from '@/core/utils/currencyFormat';
import { sellingProductFormat } from '@/core/utils/formatValue';
import { createSlug } from '@/core/utils/slug';
import whatsappUrl from '@/core/utils/whatsappUrl';
import useUtmSource from '~/hooks/useUtmSource';
import useDevice from '@/core/hooks/useDevice';
import { BadgePercent, Tag } from 'lucide-react';
import { TicketIcon } from '@heroicons/react/24/solid';
import DesktopView from '@/core/components/views/DesktopView';
import MobileView from '@/core/components/views/MobileView';

const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
  const router = useRouter();
  const utmSource = useUtmSource();
  const [discount, setDiscount] = useState(0);
  const { isDesktop, isMobile } = useDevice();
  let voucherPastiHemat = 0;
  voucherPastiHemat = product?.newVoucherPastiHemat[0]
    ? product?.newVoucherPastiHemat[0]
    : product?.newVoucherPastiHemat;

  const callForPriceWhatsapp = whatsappUrl('product', {
    name: product.name,
    manufacture: product.manufacture?.name,
    url: createSlug('/shop/product/', product.name, product.id, true),
  });

  const image = useMemo(() => {
    if (!isDesktop && product.image_mobile) {
      return product.image_mobile + '?ratio=square';
    } else {
      if (product.image) return product.image + '?ratio=square';
      return '/images/noimage.jpeg';
    }
  }, [product.image, product.image_mobile]);

  const URL = {
    product:
      createSlug('/shop/product/', product?.name, product?.id) +
      `?utm_source=${utmSource}`,
    manufacture: createSlug(
      '/shop/brands/',
      product?.manufacture?.name,
      product?.manufacture.id
    ),
  };

  const hitungDiscountVoucher = () => {
    let countDiscount = 0;
    if (voucherPastiHemat.discountType === 'percentage') {
      countDiscount =
        product?.lowestPrice.priceDiscount *
        (voucherPastiHemat.discountAmount / 100);
      if (
        voucherPastiHemat.maxDiscount > 0 &&
        countDiscount > voucherPastiHemat.maxDiscount
      ) {
        countDiscount = voucherPastiHemat.maxDiscount;
      }
    } else {
      countDiscount = voucherPastiHemat.discountAmount;
    }

    setDiscount(countDiscount);
  };

  useEffect(() => {
    hitungDiscountVoucher();
  }, []);

  if (variant == 'vertical') {
    return (
      <>
        <DesktopView>
          <div className='rounded '>
            <Link href={URL.product} className='relative' aria-label='Produk'>
              <div className='relative'>
                <Image
                  src={image}
                  alt={product?.name}
                  className='gambarA w-full object-contain object-center h-36 sm:h-48'
                />

                <div className='absolute top-0 right-0 flex mt-3 z-20'>
                  <div className='gambarB '>
                    {product?.isSni && (
                      <ImageNext
                        src='/images/sni-logo.png'
                        alt='SNI Logo'
                        className='w-4 h-5 object-contain object-top   sm:h-6'
                        width={50}
                        height={50}
                        loading='eager'
                      />
                    )}
                  </div>
                  <div className='gambarC  '>
                    {product?.isTkdn && (
                      <ImageNext
                        src='/images/TKDN.png'
                        alt='TKDN'
                        className='w-11 h-6 object-contain object-top  ml-1 mr-1 sm:h-6'
                        width={50}
                        height={50}
                        loading='eager'
                      />
                    )}
                  </div>
                </div>
              </div>

              {(product?.lowestPrice?.discountPercentage ?? 0) > 0 && (
                <div className='absolute right-0 top-1.5 '>
                  <div className='bg-red-600 text-white px-2 py-1 rounded-l-lg shadow-sm text-xs font-bold leading-none'>
                    {Math.floor(product.lowestPrice.discountPercentage)}%
                  </div>
                </div>
              )}

              {(product?.variantTotal > 1 || product?.isInBu) && (
                <div className='absolute bottom-1.5 left-1.5 z-30 flex items-center gap-2'>
                  {' '}
                  {product?.variantTotal > 1 && (
                    <div className='badge-gray'>
                      {' '}
                      {product.variantTotal} Varian{' '}
                    </div>
                  )}{' '}
                  {product?.isInBu && (
                    <Image
                      src='/images/PICKUP-NOW.png'
                      alt='Pick Up Now'
                      width={83}
                      height={24}
                      className='drop-shadow-sm'
                      loading='eager'
                    />
                  )}{' '}
                </div>
              )}
              {router.pathname != '/' && product?.flashSale?.id > 0 && (
                <div className='absolute bottom-0 w-full grid'>
                  <div className='absolute bottom-0 w-full h-full'>
                    <ImageNext
                      src='/images/BG-FLASH-SALE.jpg'
                      className='h-full'
                      width={1000}
                      height={100}
                      loading='eager'
                    />
                  </div>
                  <div className='relative'>
                    {/* <div className='flex gap-x-1 items-center p-2 justify-center'>
                      <div className='bg-yellow-400 rounded-lg p-1 h-6 w-19 flex items-center justify-center '>
                        <span className='text-sm font-bold text-black'>
                          {Math.floor(product?.lowestPrice.discountPercentage)}%
                        </span>
                      </div>
                      <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
                        <ImageNext
                          src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                          alt='flash sale'
                          width={13}
                          height={5}
                          loading='eager'
                        />
                        <span className='text-white text-[9px] md:text-[10px] font-semibold'>
                          {product?.flashSale?.tag != 'false' ||
                          product?.flashSale?.tag
                            ? product?.flashSale?.tag
                            : 'FLASH SALE'}
                        </span>
                      </div>
                    </div> */}
                  </div>
                </div>
              )}
              {/* {product.variantTotal > 1 && (
                <div className='absolute badge-gray bottom-1.5 left-1.5'>
                  {product.variantTotal} Varian
                </div>
              )} */}
            </Link>

            <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
              <div className='flex justify-between '>
                {product?.manufacture?.name ? (
                  <Link
                    href={URL.manufacture}
                    className='mb-1 mt-1 truncate'
                    aria-label={product.manufacture.name}
                  >
                    {product.manufacture.name}
                  </Link>
                ) : (
                  <div>-</div>
                )}
              </div>

              {/* ⬇️ line clamp desktop dibiarkan seperti aslinya */}
              <Link
                href={URL.product}
                aria-label={product?.name}
                className={`mb-2 !text-gray_r-12 leading-6 block`}
                style={{
                  WebkitLineClamp: 2,
                  display: '-webkit-box',
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                }}
                title={product?.name}
              >
                {product?.name}
              </Link>
              {/* ---------- HARGA ---------- */}
              {product?.flashSale?.id > 0 &&
              product?.lowestPrice.discountPercentage > 0 ? (
                // ===== CASE FLASH SALE =====
                <div className='mb-2'>
                  <div className='flex items-baseline gap-1 min-w-0'>
                    <span className='text-danger-500 text-sm font-semibold whitespace-nowrap'>
                      {product?.lowestPrice.priceDiscount > 0 ? (
                        currencyFormat(product?.lowestPrice.priceDiscount)
                      ) : (
                        <a
                          rel='noopener noreferrer'
                          target='_blank'
                          href={callForPriceWhatsapp}
                          aria-label='Call for Inquiry'
                        >
                          Call for Inquiry
                        </a>
                      )}
                    </span>

                    <span
                      className='text-gray_r-11 line-through text-xs sm:text-caption-2 
        whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
                    >
                      {currencyFormat(product.lowestPrice.price)}
                    </span>
                  </div>

                  {product?.lowestPrice.priceDiscount > 0 && (
                    <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
                      <span className='shrink-0'>Include PPN:&nbsp;</span>
                      <span
                        className='truncate'
                        title={currencyFormat(
                          Math.round(
                            Number(product.lowestPrice.priceDiscount) *
                              process.env.NEXT_PUBLIC_PPN
                          )
                        )}
                      >
                        {currencyFormat(
                          Math.round(
                            Number(product.lowestPrice.priceDiscount) *
                              process.env.NEXT_PUBLIC_PPN
                          )
                        )}
                      </span>

                      {/* {currencyFormat(
                        Math.round(
                          Number(product.lowestPrice.priceDiscount) *
                            process.env.NEXT_PUBLIC_PPN
                        )
                      )} */}
                    </div>
                  )}
                </div>
              ) : (
                // ===== BUKAN FLASH SALE =====
                (() => {
                  const basePrice = Number(
                    product?.lowestPrice?.priceDiscount || 0
                  );
                  const voucherCut = Number(discount || 0);
                  const finalAfterVoucher = Math.max(basePrice - voucherCut, 0);

                  // CASE 1: ada harga (>0)
                  if (Number(product?.lowestPrice?.price) > 0) {
                    if (voucherCut > 0) {
                      return (
                        <div className='mb-2'>
                          {/* baris harga sekarang + harga coret */}
                          <div className='flex items-baseline gap-1 min-w-0'>
                            {/* harga setelah voucher */}
                            <span className='inline-flex items-center gap-1 text-danger-500 font-semibold text-xs whitespace-nowrap rounded bg-red-50 px-1.5 py-0.5 border border-solid border-danger-500'>
                              <TicketIcon className='h-4 w-4 shrink-0 text-danger-400' />
                              {currencyFormat(finalAfterVoucher)}
                            </span>

                            {/* [OPTIONAL] harga sebelum voucher (coret) kalau mau muncul */}
                            {/* <span
                className='text-gray_r-11 line-through text-[11px] leading-snug 
                whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
              >
                {currencyFormat(basePrice)}
              </span> */}
                          </div>

                          {/* PPN pakai harga finalAfterVoucher */}
                          <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
                            <span className='shrink-0'>Include PPN:&nbsp;</span>
                            <span
                              className='truncate'
                              title={currencyFormat(
                                Math.round(
                                  finalAfterVoucher *
                                    process.env.NEXT_PUBLIC_PPN
                                )
                              )}
                            >
                              {currencyFormat(
                                Math.round(
                                  finalAfterVoucher *
                                    process.env.NEXT_PUBLIC_PPN
                                )
                              )}
                            </span>

                            {/* {currencyFormat(
                              Math.round(
                                finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
                              )
                            )} */}
                          </div>
                        </div>
                      );
                    }

                    // CASE 1b: ga ada voucher
                    return (
                      <div className='text-danger-500 font-semibold mb-2'>
                        {currencyFormat(basePrice)}
                        <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
                          <span className='shrink-0'>Include PPN:&nbsp;</span>
                          <span
                            className='truncate'
                            title={currencyFormat(
                              Math.round(
                                Number(product.lowestPrice.price) *
                                  process.env.NEXT_PUBLIC_PPN
                              )
                            )}
                          >
                            {currencyFormat(
                              Math.round(
                                Number(product.lowestPrice.price) *
                                  process.env.NEXT_PUBLIC_PPN
                              )
                            )}
                          </span>

                          {/* {currencyFormat(
                            Math.round(
                              Number(product.lowestPrice.price) *
                                process.env.NEXT_PUBLIC_PPN
                            )
                          )} */}
                        </div>
                      </div>
                    );
                  }

                  // CASE 2: harga 0 → call for inquiry
                  return (
                    <div className='text-danger-500 font-semibold mb-2'>
                      <a
                        rel='noopener noreferrer'
                        target='_blank'
                        href={callForPriceWhatsapp}
                        aria-label='Call for Inquiry'
                      >
                        Call for Inquiry
                      </a>
                    </div>
                  );
                })()
              )}
              {/* ---------- /HARGA ---------- */}

              <div className='flex w-full items-center gap-x-1 '>
                {(product?.stockTotal > 0 || product?.qtySold > 0) && (
                  <div className='flex w-full items-center gap-x-2 flex-nowrap min-w-0'>
                    {product?.stockTotal > 0 && (
                      <div className='badge-solid-red text-center shrink-0 whitespace-nowrap py-1.5'>
                        Ready Stock
                      </div>
                    )}

                    {product?.qtySold > 0 && (
                      <div className='text-gray_r-9 text-xs flex-1 min-w-0 truncate'>
                        {sellingProductFormat(product?.qtySold)} Terjual
                      </div>
                    )}
                  </div>
                )}
              </div>
            </div>
          </div>
        </DesktopView>

        <MobileView>
          <div className='rounded shadow-sm'>
            <Link href={URL.product} className='relative' aria-label='Produk'>
              <div className='relative'>
                <div
                  className='relative w-full overflow-hidden'
                  style={{ aspectRatio: '1 / 1' }}
                >
                  <Image
                    src={image}
                    alt={product?.name}
                    fill
                    sizes='(max-width:640px) 100vw, 50vw'
                    className='object-contain object-center bg-white'
                  />
                </div>

                {/* SNI / TKDN (kanan-atas, tetap) */}
                <div className='absolute top-0 right-0 flex mt-3 z-20'>
                  <div className='gambarB'>
                    {product?.isSni && (
                      <ImageNext
                        src='/images/sni-logo.png'
                        alt='SNI Logo'
                        className='w-4 h-5 object-contain object-top sm:h-6'
                        width={50}
                        height={50}
                        loading='eager'
                      />
                    )}
                  </div>
                  <div className='gambarC'>
                    {product?.isTkdn && (
                      <ImageNext
                        src='/images/TKDN.png'
                        alt='TKDN'
                        className='w-11 h-6 object-contain object-top ml-1 mr-1 sm:h-6'
                        width={50}
                        height={50}
                        loading='eager'
                      />
                    )}
                  </div>
                </div>

                {/* BADGE DISKON Kanan-ATAS */}
                {(product?.lowestPrice?.discountPercentage ?? 0) > 0 && (
                  <div className='absolute right-0 top-1.5 '>
                    <div className='bg-red-600 text-white px-2 py-1 rounded-l-lg shadow-sm text-xs font-bold leading-none'>
                      {Math.floor(product.lowestPrice.discountPercentage)}%
                    </div>
                  </div>
                )}

                {/* BOTTOM-LEFT: Varian + PICK UP NOW  */}
                {(product?.variantTotal > 1 || product?.isInBu) && (
                  <div className='absolute bottom-1.5 left-1.5 z-30 flex items-center gap-2'>
                    {product?.variantTotal > 1 && (
                      <div className='badge-gray'>
                        {product.variantTotal} Varian
                      </div>
                    )}
                    {product?.isInBu && (
                      <Image
                        src='/images/PICKUP-NOW.png'
                        alt='Pick Up Now'
                        width={83}
                        height={24}
                        className='drop-shadow-sm'
                        loading='eager'
                      />
                    )}
                  </div>
                )}
              </div>

              {router.pathname != '/' && product?.flashSale?.id > 0 && (
                <div className='absolute bottom-0 w-full grid z-10'>
                  <div className='absolute bottom-0 w-full h-full'>
                    <ImageNext
                      src='/images/BG-FLASH-SALE.jpg'
                      className='h-full'
                      width={1000}
                      height={100}
                      loading='eager'
                    />
                  </div>
                </div>
              )}
            </Link>

            {/* ⬇️ konten bawah (tidak diubah) */}
            <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5 min-w-0'>
              <div className='flex justify-between '>
                {product?.manufacture?.name ? (
                  <Link
                    href={URL.manufacture}
                    className='mt-1 truncate'
                    aria-label={product.manufacture.name}
                  >
                    {product.manufacture.name}
                  </Link>
                ) : (
                  <div>-</div>
                )}
              </div>

              <Link
                href={URL.product}
                aria-label={product?.name}
                className='block mb-1 leading-6 !text-gray_r-12 line-clamp-2'
                title={product?.name}
                style={{
                  display: '-webkit-box',
                  WebkitLineClamp: 2,
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                }}
              >
                {product?.name}
              </Link>

              {/* ---------- HARGA ---------- */}
              {product?.flashSale?.id > 0 &&
              product?.lowestPrice.discountPercentage > 0 ? (
                // ===== CASE FLASH SALE =====
                <div className='mb-2'>
                  <div className='flex items-baseline gap-1 min-w-0'>
                    <span className='text-danger-500 text-sm font-semibold whitespace-nowrap'>
                      {product?.lowestPrice.priceDiscount > 0 ? (
                        currencyFormat(product?.lowestPrice.priceDiscount)
                      ) : (
                        <a
                          rel='noopener noreferrer'
                          target='_blank'
                          href={callForPriceWhatsapp}
                          aria-label='Call for Inquiry'
                        >
                          Call for Inquiry
                        </a>
                      )}
                    </span>

                    <span
                      className='text-gray_r-11 line-through text-xs sm:text-caption-2 
           whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
                    >
                      {currencyFormat(product.lowestPrice.price)}
                    </span>
                  </div>
                  {product?.lowestPrice.priceDiscount > 0 && (
                    <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
                      <span className='shrink-0'>Include PPN:&nbsp;</span>
                      <span
                        className='truncate'
                        title={currencyFormat(
                          Math.round(
                            Number(product.lowestPrice.priceDiscount) *
                              process.env.NEXT_PUBLIC_PPN
                          )
                        )}
                      >
                        {currencyFormat(
                          Math.round(
                            Number(product.lowestPrice.priceDiscount) *
                              process.env.NEXT_PUBLIC_PPN
                          )
                        )}
                      </span>
                      {/* {currencyFormat(
                        Math.round(
                          Number(product.lowestPrice.priceDiscount) *
                            process.env.NEXT_PUBLIC_PPN
                        )
                      )} */}
                    </div>
                  )}
                </div>
              ) : (
                // ===== BUKAN FLASH SALE =====
                (() => {
                  const basePrice = product?.lowestPrice?.priceDiscount || 0;
                  const voucherCut = discount || 0;
                  const finalAfterVoucher = Math.max(basePrice - voucherCut, 0);

                  // CASE 1: ada harga (>0)
                  if (product?.lowestPrice?.price > 0) {
                    if (voucherCut > 0) {
                      return (
                        <div className='mb-2'>
                          {/* baris harga sekarang + harga coret */}
                          <div className='flex items-baseline gap-1 min-w-0'>
                            {/* harga setelah voucher */}
                            <span className='inline-flex items-center gap-1 text-danger-500 font-semibold text-xs whitespace-nowrap rounded bg-red-50 px-2 py-0.5 border border-solid border-danger-500'>
                              <TicketIcon className='h-4 w-4 shrink-0 text-danger-500' />
                              {currencyFormat(finalAfterVoucher)}
                            </span>

                            {/* harga sebelum voucher, dicoret, truncate kalau kepanjangan */}
                            {/* <span
                              className='text-gray_r-11 line-through text-[11px] leading-snug 
                     whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
                            >
                              {currencyFormat(basePrice)}
                            </span> */}
                          </div>

                          {/* PPN pakai harga finalAfterVoucher */}
                          <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
                            <span className='shrink-0'>Include PPN:&nbsp;</span>
                            <span
                              className='truncate'
                              title={currencyFormat(
                                finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
                              )}
                            >
                              {currencyFormat(
                                finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
                              )}
                            </span>

                            {/* {currencyFormat(
                              finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
                            )} */}
                          </div>
                        </div>
                      );
                    }

                    // CASE 1b: ga ada voucher
                    return (
                      <div className='text-danger-500 font-semibold mb-2'>
                        {currencyFormat(basePrice)}
                        <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
                          <span className='shrink-0'>Include PPN:&nbsp;</span>
                          <span
                            className='truncate'
                            title={currencyFormat(
                              product.lowestPrice.price *
                                process.env.NEXT_PUBLIC_PPN
                            )}
                          >
                            {currencyFormat(
                              product.lowestPrice.price *
                                process.env.NEXT_PUBLIC_PPN
                            )}
                          </span>
                          {/* {currencyFormat(
                            product.lowestPrice.price *
                              process.env.NEXT_PUBLIC_PPN
                          )} */}
                        </div>
                      </div>
                    );
                  }

                  // CASE 2: harga 0 → call for inquiry
                  return (
                    <div className='text-danger-500 font-semibold mb-2'>
                      <a
                        rel='noopener noreferrer'
                        target='_blank'
                        href={callForPriceWhatsapp}
                        aria-label='Call for Inquiry'
                      >
                        Call for Inquiry
                      </a>
                    </div>
                  );
                })()
              )}
              {/* ---------- /HARGA ---------- */}

              {(product?.stockTotal > 0 || product?.qtySold > 0) && (
                <div className='flex w-full items-center gap-x-2 flex-nowrap min-w-0'>
                  {product?.stockTotal > 0 && (
                    <div className='badge-solid-red text-center shrink-0 whitespace-nowrap py-1.5'>
                      Ready Stock
                    </div>
                  )}

                  {product?.qtySold > 0 && (
                    <div className='text-gray_r-9 text-xs flex-1 min-w-0 truncate'>
                      {sellingProductFormat(product?.qtySold)} Terjual
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        </MobileView>
      </>
    );
  }

  if (variant == 'horizontal') {
    return (
      <div className='flex bg-white'>
        <div className='w-4/12'>
          <Link
            href={URL.product}
            className='relative'
            aria-label={product?.name}
          >
            <div className='relative'>
              <Image
                src={image}
                alt={product?.name}
                className='gambarA w-full object-contain object-center h-36 sm:h-48'
              />
              <div className='absolute top-0 right-0 flex  mt-3'>
                <div className='gambarB '>
                  {product?.isSni && (
                    <ImageNext
                      src='/images/sni-logo.png'
                      alt='SNI Logo'
                      className='w-4 h-5 object-contain object-top   sm:h-6'
                      width={50}
                      height={50}
                      loading='eager'
                    />
                  )}
                </div>
                <div className='gambarC  '>
                  {product?.isTkdn && (
                    <ImageNext
                      src='/images/TKDN.png'
                      alt='TKDN'
                      className='w-11 h-6 object-contain object-top  ml-1 sm:h-6'
                      width={50}
                      height={50}
                      loading='eager'
                    />
                  )}
                </div>
              </div>
            </div>
            {product.variantTotal > 1 && (
              <div className='absolute badge-gray bottom-1.5 left-1.5'>
                {product.variantTotal} Varian
              </div>
            )}
          </Link>
        </div>
        <div className='w-8/12 p-2'>
          {product.flashSale.id > 0 && (
            <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
              <ImageNext
                src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
                alt='flash sae'
                width={15}
                height={10}
                loading='eager'
              />
              <span className='text-white text-xs font-semibold'>
                {' '}
                {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
                  ? product?.flashSale?.tag
                  : 'FLASH SALE'}
              </span>
            </div>
          )}
          {product?.manufacture?.name ? (
            <div className='flex justify-between'>
              <Link
                href={URL.manufacture}
                className='mb-1'
                aria-label={product?.manufacture.name}
              >
                {product.manufacture.name}
              </Link>
              {/* {product?.is_in_bu && (
              <div className='bg-red-500 rounded'>
                <span className='p-[6px] text-xs text-white'>
                  Click & Pickup
                </span>
              </div>
            )} */}
            </div>
          ) : (
            <div>-</div>
          )}
          <Link
            href={URL.product}
            aria-label={product?.name}
            className={`mb-3 !text-gray_r-12 leading-6 `}
            style={{
              display: '-webkit-box',
              WebkitLineClamp: 2,
              WebkitBoxOrient: 'vertical',
              overflow: 'hidden',
            }}
          >
            {product?.name}
          </Link>

          {/* ---------- HARGA ---------- */}
          {product?.flashSale?.id > 0 &&
          product?.lowestPrice.discountPercentage > 0 ? (
            // ===== CASE FLASH SALE =====
            <div className='mb-2'>
              <div className='flex items-baseline gap-1 min-w-0'>
                <span className='text-danger-500 text-sm font-semibold whitespace-nowrap'>
                  {product?.lowestPrice.priceDiscount > 0 ? (
                    currencyFormat(product?.lowestPrice.priceDiscount)
                  ) : (
                    <a
                      rel='noopener noreferrer'
                      target='_blank'
                      href={callForPriceWhatsapp}
                      aria-label='Call for Inquiry'
                    >
                      Call for Inquiry
                    </a>
                  )}
                </span>

                <span
                  className='text-gray_r-11 line-through text-xs sm:text-caption-2 
           whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
                >
                  {currencyFormat(product.lowestPrice.price)}
                </span>
              </div>
            </div>
          ) : (
            // ===== BUKAN FLASH SALE =====
            (() => {
              const basePrice = product?.lowestPrice?.priceDiscount || 0;
              const voucherCut = discount || 0;
              const finalAfterVoucher = Math.max(basePrice - voucherCut, 0);

              // CASE 1: ada harga (>0)
              if (product?.lowestPrice?.price > 0) {
                if (voucherCut > 0) {
                  return (
                    <div className='mb-2'>
                      {/* baris harga sekarang + harga coret */}
                      <div className='flex items-baseline gap-1 min-w-0'>
                        {/* harga setelah voucher */}
                        <span className='inline-flex items-center gap-1 text-danger-500 font-semibold text-xs whitespace-nowrap rounded bg-red-50 px-2.5 py-0.5 border border-solid border-danger-500'>
                          <TicketIcon className='h-4 w-4 shrink-0 text-danger-500' />
                          {currencyFormat(finalAfterVoucher)}
                        </span>

                        {/* harga sebelum voucher, dicoret, truncate kalau kepanjangan */}
                        {/* <span
                              className='text-gray_r-11 line-through text-[11px] leading-snug 
                     whitespace-nowrap overflow-hidden text-ellipsis max-w-[40%]'
                            >
                              {currencyFormat(basePrice)}
                            </span> */}
                      </div>

                      {/* PPN pakai harga finalAfterVoucher */}
                      <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
                        <span className='shrink-0'>Include PPN:&nbsp;</span>
                        {/* {currencyFormat(
                          finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
                        )} */}
                        <span
                          className='truncate'
                          title={currencyFormat(
                            finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
                          )}
                        >
                          {currencyFormat(
                            finalAfterVoucher * process.env.NEXT_PUBLIC_PPN
                          )}
                        </span>
                      </div>
                    </div>
                  );
                }

                // CASE 1b: ga ada voucher
                return (
                  <div className='text-danger-500 font-semibold mb-2'>
                    {currencyFormat(basePrice)}
                    <div className='text-gray_r-9 text-[10px] font-normal flex items-center gap-1 min-w-0'>
                      <span className='shrink-0'>Include PPN:&nbsp;</span>

                      {currencyFormat(
                        product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN
                      )}
                    </div>
                  </div>
                );
              }

              // CASE 2: harga 0 → call for inquiry
              return (
                <div className='text-danger-500 font-semibold mb-2'>
                  <a
                    rel='noopener noreferrer'
                    target='_blank'
                    href={callForPriceWhatsapp}
                    aria-label='Call for Inquiry'
                  >
                    Call for Inquiry
                  </a>
                </div>
              );
            })()
          )}
          {/* ---------- /HARGA ---------- */}

          <div className='flex w-full items-center gap-x-1 '>
            {product?.stockTotal > 0 && (
              <div className='badge-solid-red py-1.5'>Ready Stock</div>
            )}
            {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
            {product?.qtySold > 0 && (
              <div className='text-gray_r-9 text-[11px]'>
                {sellingProductFormat(product?.qtySold) + ' Terjual'}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
};

export default ProductCard;