path: root/src-migrate/modules/product-detail/components/PriceAction.tsx

import style from '../styles/price-action.module.css';

import Image from 'next/image';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import formatCurrency from '~/libs/formatCurrency';
import { IProductDetail } from '~/types/product';
import { useProductDetail } from '../stores/useProductDetail';
import AddToCart from './AddToCart';
import AddToQuotation from './AddToQuotation';
import { getAuth } from '~/libs/auth';
import useDevice from '@/core/hooks/useDevice';
import odooApi from '~/libs/odooApi';
import { Button, Skeleton } from '@chakra-ui/react';
import DesktopView from '@/core/components/views/DesktopView';
import MobileView from '@/core/components/views/MobileView';
import { TicketIcon } from '@heroicons/react/24/solid';

type Props = {
  product: IProductDetail;
};

const PPN: number = process.env.NEXT_PUBLIC_PPN
  ? parseFloat(process.env.NEXT_PUBLIC_PPN)
  : 0;
const PriceAction = ({ product }: Props) => {
  const {
    activePrice,
    setActive,
    activeVariantId,
    quantityInput,
    setQuantityInput,
    askAdminUrl,
    isApproval,
    setIsApproval,
    selectedVariant,
    sla,
  } = useProductDetail();
  const [qtyPickUp, setQtyPickUp] = useState(0);
  const { isDesktop, isMobile } = useDevice();
  useEffect(() => {
    setActive(selectedVariant);
    if (product.variants.length > 2 && product.variants[0].price.price === 0) {
      const variants = product.variants;
      for (let i = 0; i < variants.length; i++) {
        if (variants[i].price.price > 0) {
          setActive(variants[i]);
          break;
        }
      }
    }
  }, [product, setActive, selectedVariant]);

  useEffect(() => {
    const fetchData = async () => {
      const qty_available = await odooApi(
        'GET',
        `/api/v1/product_variant/${selectedVariant.id}/qty_available`
      );

      setQtyPickUp(qty_available?.qty);
    };
    fetchData();
  }, [selectedVariant]);

  useEffect(() => {
    setQuantityInput('1');
  }, [selectedVariant]);

  const price = activePrice?.price_discount || activePrice?.price || 0;
  const pricedigit = String(Math.floor(price)).length;
  const fontSize = pricedigit >= 9 ? '20px' : undefined;

  // voucher hanya diterapkan kalau TIDAK ada discount_percentage (bukan flash/price rule)
  let voucherCut = 0;

  // apply voucher only when NOT a flash/price rule
  if (activePrice && !(activePrice.discount_percentage > 0)) {
    voucherCut = getVoucherCut(product, activePrice);
  }

  const basePriceForDisplay =
    Number(activePrice?.price_discount ?? 0) || Number(activePrice?.price ?? 0);

  const finalAfterVoucher = Math.max(basePriceForDisplay - voucherCut, 0);
  const hasVoucherApplied = voucherCut > 0 && !activePrice?.discount_percentage;

  // let voucherPastiHemat = 0;

  // if (
  //   product?.voucher_pasti_hemat
  //     ? product?.voucher_pasti_hemat.length
  //     : voucherPastiHemat > 0
  // ) {
  //   const stringVoucher = product?.voucher_pasti_hemat[0];
  //   const validJsonString = stringVoucher.replace(/'/g, '"');
  //   voucherPastiHemat = JSON.parse(validJsonString);
  // }

  // --- (1) helper: hitung potongan voucher berdasar product-level voucher + harga variant aktif
  function getVoucherCut(
    product: IProductDetail,
    activePrice?: { price?: number; price_discount?: number }
  ) {
    try {
      const raw = Array.isArray((product as any)?.new_voucher_pasti_hemat)
        ? (product as any).new_voucher_pasti_hemat[0]
        : (product as any)?.new_voucher_pasti_hemat;

      if (!raw) return 0;

      const discount_type = String(
        raw.discount_type ?? raw.discountType ?? ''
      ).toLowerCase();
      const discount_amount = Number(
        raw.discount_amount ?? raw.discountAmount ?? 0
      );
      const max_discount = Number(raw.max_discount ?? raw.maxDiscount ?? 0);
      const min_purchase = Number(raw.min_purchase ?? raw.minPurchase ?? 0);

      // base price ambil price_discount dulu, kalau kosong pakai price
      const base =
        Number(activePrice?.price_discount ?? 0) ||
        Number(activePrice?.price ?? 0);
      if (!base) return 0;
      if (min_purchase > 0 && base < min_purchase) return 0;

      let cut = 0;
      if (discount_type.startsWith('percent')) {
        // support nilai 0..1 atau 0..100
        const pct =
          discount_amount <= 1 ? discount_amount * 100 : discount_amount;
        cut = Math.floor(base * (pct / 100));
      } else {
        cut = Math.floor(discount_amount || 0);
      }

      if (max_discount > 0) cut = Math.min(cut, max_discount);
      return Math.max(0, cut);
    } catch {
      return 0;
    }
  }

  return (
    <div
      className={`block md:sticky md:top-[150px] md:py-6 fixed  bottom-0 left-0 right-0 bg-white p-2 z-10 ${
        isMobile &&
        'pb-6 pt-6  rounded-lg  shadow-[rgba(0,0,4,0.1)_0px_-4px_4px_0px] '
      }`}
      id='price-section'
    >
      {!!activePrice && activePrice.price > 0 && (
        <>
          <DesktopView>
            <div className='flex items-end gap-x-2'>
              {/* Jika ada discount_percentage (flash/price rule) → pakai UI lama */}
              {activePrice.discount_percentage > 0 ? (
                <>
                  <div className={style['disc-badge']}>
                    {Math.floor(activePrice.discount_percentage)}%
                  </div>
                  <div
                    className={style['main-price']}
                    style={fontSize ? { fontSize } : undefined}
                  >
                    Rp {formatCurrency(activePrice.price_discount || 0)}
                  </div>
                  <div className={style['disc-price']}>
                    Rp {formatCurrency(activePrice.price || 0)}
                  </div>
                </>
              ) : hasVoucherApplied ? (
                // Tidak ada discount bawaan, tapi ada voucher → tampilkan harga setelah voucher
                <>
                  <div
                    className={`${style['main-price']} inline-flex items-center gap-2 leading-none bg-red-100 px-2 py-0.5 rounded-md border border-red-500 `}
                    style={fontSize ? { fontSize } : undefined}
                  >
                    <TicketIcon className='w-5 h-5 shrink-0' aria-hidden />
                    Rp {formatCurrency(finalAfterVoucher)}
                  </div>
                  {/* <div className={style['disc-price']}>
                    Rp {formatCurrency(basePriceForDisplay)}
                  </div> */}
                </>
              ) : (
                // Normal tanpa disc & tanpa voucher
                <div
                  className={style['main-price']}
                  style={fontSize ? { fontSize } : undefined}
                >
                  Rp {formatCurrency(basePriceForDisplay)}
                </div>
              )}
            </div>

            <div className='h-1' />
            <div className={style['secondary-text']}>
              Termasuk PPN: Rp{' '}
              {formatCurrency(
                Math.round(
                  (activePrice.discount_percentage > 0
                    ? Number(activePrice.price_discount || 0)
                    : hasVoucherApplied
                    ? finalAfterVoucher
                    : basePriceForDisplay) * PPN
                )
              )}
            </div>
          </DesktopView>

          <MobileView>
            <div className='flex items-end gap-x-2'>
              {/* Jika ada discount_percentage (flash/price rule) → pakai UI lama */}
              {activePrice.discount_percentage > 0 ? (
                <>
                  <div className={style['disc-badge']}>
                    {Math.floor(activePrice.discount_percentage)}%
                  </div>
                  <div
                    className={style['main-price']}
                    style={fontSize ? { fontSize } : undefined}
                  >
                    Rp {formatCurrency(activePrice.price_discount || 0)}
                  </div>
                  <div className={style['disc-price']}>
                    Rp {formatCurrency(activePrice.price || 0)}
                  </div>
                </>
              ) : hasVoucherApplied ? (
                // Tidak ada discount bawaan, tapi ada voucher → tampilkan harga setelah voucher
                <>
                  <div
                    className={`${style['main-price']} inline-flex items-center gap-2 leading-none bg-red-100 px-2 py-0.5 rounded-md border border-red-500`}
                    style={fontSize ? { fontSize } : undefined}
                  >
                    <TicketIcon className='w-5 h-5 shrink-0' aria-hidden />
                    Rp {formatCurrency(finalAfterVoucher)}
                  </div>
                  {/* <div className={`${style['disc-price']}`}>
                    Rp {formatCurrency(basePriceForDisplay)}
                  </div> */}
                </>
              ) : (
                // Normal tanpa disc & tanpa voucher
                <div
                  className={style['main-price']}
                  style={fontSize ? { fontSize } : undefined}
                >
                  Rp {formatCurrency(basePriceForDisplay)}
                </div>
              )}
            </div>

            <div className='h-1' />
            <div className={style['secondary-text']}>
              Termasuk PPN: Rp{' '}
              {formatCurrency(
                Math.round(
                  (activePrice.discount_percentage > 0
                    ? Number(activePrice.price_discount || 0)
                    : hasVoucherApplied
                    ? finalAfterVoucher
                    : basePriceForDisplay) * PPN
                )
              )}
            </div>
          </MobileView>
        </>
      )}

      {!!activePrice && activePrice.price === 0 && (
        <span>
          Hubungi kami untuk dapatkan harga terbaik,{' '}
          <Link
            href={askAdminUrl}
            target='_blank'
            className={style['contact-us']}
          >
            klik disini
          </Link>
        </span>
      )}

      <DesktopView>
        <div className='h-4' />
        <div className='flex gap-x-3 items-center'>
          {/* Qty */}
          <div className='relative flex items-center'>
            <button
              type='button'
              className='absolute left-0 px-2 py-1 h-full text-gray-500'
              onClick={() =>
                setQuantityInput(String(Math.max(1, Number(quantityInput) - 1)))
              }
            >
              -
            </button>
            <input
              type='number'
              id='quantity'
              min={1}
              value={quantityInput}
              onChange={(e) => setQuantityInput(e.target.value)}
              className={style['quantity-input']}
            />
            <button
              type='button'
              className='absolute right-0 px-2 py-1 h-full text-gray-500'
              onClick={() =>
                setQuantityInput(String(Number(quantityInput) + 1))
              }
            >
              +
            </button>
          </div>

          {/* Stok */}
          <div className='min-w-[89px]'>
            <Skeleton
              isLoaded={sla}
              h='21px'
              className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
            >
              Stock : {sla?.qty}
            </Skeleton>
          </div>

          {/* Pickup badge */}
          <div className='shrink-0'>
            {qtyPickUp > 0 && (
              <div className='flex items-center'>
                <Link href='/panduan-pick-up-service' className='group'>
                  <Image
                    src='/images/PICKUP-NOW.png'
                    className='group-hover:scale-105 transition-transform duration-200'
                    alt='pickup now'
                    width={100}
                    height={12}
                  />
                </Link>
              </div>
            )}
          </div>
        </div>
        {/* <span className='block text-[12px] text-red-500 italic mt-1'>
          * {qtyPickUp} barang bisa di pickup
        </span> */}
      </DesktopView>

      {/* ===== MOBILE: grid kiri-kanan, kanan hanya qty ===== */}
      <MobileView>
        <div className='grid grid-cols-12 items-start gap-3'>
          {/* Kiri */}
          <div className='col-span-8 mt-2'>
            <div className='flex items-center gap-1'>
              <Skeleton
                isLoaded={sla}
                h='21px'
                w='auto' // ⬅️ penting: biar selebar konten
                display='inline-block' // ⬅️ penting: jangan full width
                className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
              >
                Stock : {sla?.qty}
              </Skeleton>

              {qtyPickUp > 0 && (
                <Link
                  href='/panduan-pick-up-service'
                  className='inline-block shrink-0'
                >
                  <Image
                    src='/images/PICKUP-NOW.png'
                    className='align-middle'
                    alt='pickup now'
                    width={90}
                    height={12}
                  />
                </Link>
              )}
            </div>

            {/* {qtyPickUp > 0 && (
              <div className='text-[12px] mt-1 text-red-500 italic'>
                * {qtyPickUp} barang bisa di pickup
              </div>
            )} */}
          </div>

          {/* Kanan: hanya qty, rata kanan */}
          <div className='col-span-4 flex justify-end'>
            <div className='inline-flex items-stretch border rounded-xl overflow-hidden'>
              <button
                type='button'
                className='h-11 w-11 md:h-12 md:w-12 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95 select-none touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'
                onClick={() =>
                  setQuantityInput(
                    String(Math.max(1, Number(quantityInput) - 1))
                  )
                }
                aria-label='Kurangi'
              >
                <span className='text-2xl leading-none'>–</span>
              </button>

              <input
                type='number'
                id='quantity'
                min={1}
                value={quantityInput}
                onChange={(e) => setQuantityInput(e.target.value)}
                className='h-11 md:h-12 w-16 md:w-20 text-center text-lg md:text-xl outline-none border-x
               [appearance:textfield] 
               [&::-webkit-outer-spin-button]:appearance-none 
               [&::-webkit-inner-spin-button]:appearance-none'
              />

              <button
                type='button'
                className='h-11 w-11 md:h-12 md:w-12 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95 select-none touch-manipulation focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500'
                onClick={() =>
                  setQuantityInput(String(Number(quantityInput) + 1))
                }
                aria-label='Tambah'
              >
                <span className='text-2xl leading-none'>+</span>
              </button>
            </div>
          </div>
        </div>
      </MobileView>
      <div className='h-4' />

      <DesktopView>
        <div className={`${style['action-wrapper']}`}>
          <AddToCart
            products={product}
            variantId={activeVariantId}
            quantity={Number(quantityInput)}
          />
          {!isApproval && (
            <AddToCart
              source='buy'
              products={product}
              variantId={activeVariantId}
              quantity={Number(quantityInput)}
            />
          )}
        </div>
        <div className='mt-4'>
          <AddToQuotation
            source='buy'
            products={product}
            variantId={activeVariantId}
            quantity={Number(quantityInput)}
          />
        </div>
      </DesktopView>
      <MobileView>
        <div className='grid grid-cols-12 gap-2'>
          <div className='col-span-2'>
            <AddToQuotation
              source='buy'
              products={product}
              variantId={activeVariantId}
              quantity={Number(quantityInput)}
            />
          </div>
          <div className='col-span-5'>
            <AddToCart
              products={product}
              variantId={activeVariantId}
              quantity={Number(quantityInput)}
            />
          </div>
          <div className='col-span-5'>
            {!isApproval && (
              <AddToCart
                source='buy'
                products={product}
                variantId={activeVariantId}
                quantity={Number(quantityInput)}
              />
            )}
          </div>
        </div>
      </MobileView>
    </div>
  );
};

export default PriceAction;