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';

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]);

  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);
  }

  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'>
              {activePrice.discount_percentage > 0 && (
                <>
                  <div className={style['disc-badge']}>
                    {Math.floor(activePrice.discount_percentage)}%
                  </div>
                  <div className={style['disc-price']}>
                    Rp {formatCurrency(activePrice.price || 0)}
                  </div>
                </>
              )}
              <div className={style['main-price']}>
                Rp {formatCurrency(activePrice.price_discount || 0)}
              </div>
            </div>
            <div className='h-1' />
            <div className={style['secondary-text']}>
              Termasuk PPN: Rp{' '}
              {formatCurrency(Math.round(activePrice.price_discount * PPN))}
            </div>
          </DesktopView>
          <MobileView>
            <div className='flex items-end gap-x-2'>
              {activePrice.discount_percentage > 0 ? (
                <>
                  <div className={style['disc-badge']}>
                    {Math.floor(activePrice.discount_percentage)}%
                  </div>

                  {/* harga setelah diskon (main-price) di kiri */}
                  <div className={style['main-price']}>
                    Rp {formatCurrency(activePrice.price_discount || 0)}
                  </div>

                  {/* harga coret di kanan */}
                  <div className={style['disc-price']}>
                    Rp {formatCurrency(activePrice.price || 0)}
                  </div>
                </>
              ) : (
                // kalau tidak ada diskon, tampilkan harga normal saja
                <div className={style['main-price']}>
                  Rp {formatCurrency(activePrice.price || 0)}
                </div>
              )}
            </div>

            <div className='text-md text-gray-500 shadow-0'>
              Termasuk PPN: Rp{' '}
              {formatCurrency(Math.round(activePrice.price_discount * 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-5 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>
            <Skeleton
              isLoaded={sla}
              h='21px'
              className={sla?.qty < 10 ? 'text-red-600 font-medium' : ''}
            >
              Stock : {sla?.qty}{' '}
            </Skeleton>
          </div>

          {/* Pickup badge */}
          <div>
            {qtyPickUp > 0 && (
              <div className='flex items-center gap-2'>
                <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='text-[12px] text-red-500 italic'>
          * {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;