import { useRouter } from 'next/router'
import { toast } from 'react-hot-toast'
import useAuth from '@/core/hooks/useAuth';
import Image from '@/core/components/elements/Image/Image'
import Link from '@/core/components/elements/Link/Link'
import { createSlug } from '@/core/utils/slug'
import currencyFormat from '@/core/utils/currencyFormat'
import { updateItemCart } from '@/core/utils/cart'
import whatsappUrl from '@/core/utils/whatsappUrl'
import {useState } from 'react';
import rejectProductApi from '../../../lib/transaction/api/rejectProductApi'
// import {useTransaction} from 'C:\Users\Indoteknik\next-indoteknik\src\lib\transaction\hooks\useTransaction.js'
import useTransaction from '../../../lib/transaction/hooks/useTransaction';
import ImageNext from 'next/image';

const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
  const router = useRouter()
  const id = router.query.id
  const auth = useAuth();
  const { transaction } = useTransaction({id});
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [reason, setReason] = useState(''); 

  

  const addItemToCart = () => {
    toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 })
    updateItemCart({
      productId: product.id,
      quantity: 1
    })
    return
  }
  
  const checkoutItem = () => {
    router.push(`/shop/checkout?product_id=${product.id}&qty=${product.quantity}`)
  }
  
  const openModal = (product) => {
    setSelectedProduct(product);
    setIsModalOpen(true);
  };
  
  const closeModal = () => {
    setIsModalOpen(false);
    setSelectedProduct(null);
    setReason('');
  };
  
  const handleRejectProduct = async () => {
    try {
      if (!reason.trim()) {
        toast.error('Masukkan alasan terlebih dahulu');
        return;
      }else{
        let idSo = transaction?.data.id
        let idProduct = selectedProduct.id
        await rejectProductApi({ idSo, idProduct, reason}); 
        closeModal();
        toast.success("Produk berhasil di reject")
        setTimeout(() => {
          window.location.reload();
        }, 1500);
      }
    } catch (error) {
      toast.error('Gagal reject produk. Silakan coba lagi.');
    }
  };
  
  const Card = () => (
    <div className='flex gap-x-3'>
      <div className='w-4/12 flex items-center gap-x-2'>
       
      <div className="relative">
      <Image
          src={product.parent.image}
          alt={product.parent.name}
          className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
        />
          <div className="absolute top-0 right-4 flex  mt-3">
            <div className="gambarB ">
              {product.isSni && (
                <ImageNext
                  src="/images/sni-logo.png"
                  alt="SNI Logo"
                  className="w-2 h-5 object-contain object-top   sm:h-6"
                  width={50}
                  height={50}
                />
              )}
            </div>
            <div className="gambarC  ">
              {product.isTkdn && (
                <ImageNext
                  src="/images/TKDN.png"
                  alt="TKDN"
                  className="w-5 h-6 object-contain object-top  ml-1 mr-1 sm:h-6"
                  width={50}
                  height={50}
                />
              )}
            </div>
          </div>
        </div>

      </div>
      <div className='w-8/12 flex flex-col'>
        <p className='product-card__title wrap-line-ellipsis-2'>{product.parent.name}</p>
        <p className='text-caption-2 text-gray_r-11 mt-1'>
          {product.code || '-'}
          {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''}
        </p>
        <p className='text-caption-2 text-gray_r-11 mt-1'>
          Berat Item : {product?.weight} Kg x {product?.quantity} Barang
        </p>
        <div className='flex flex-wrap gap-x-1 items-center mt-auto'>
          {product.hasFlashsale && (
            <>
              <p className='text-caption-2 text-gray_r-11 line-through'>
                {currencyFormat(product.price.price)}
              </p>
              <span className='badge-red'>{product.price.discountPercentage}%</span>
            </>
          )}
        </div>
        <p className='text-caption-2 text-gray_r-11 mt-1'>
          {product.price.priceDiscount > 0
            ? currencyFormat(product.price.priceDiscount) + ' × ' + product.quantity + ' Barang'
            : ''}
        </p>
        <p className='text-caption-2 text-gray_r-12 font-bold mt-2'>
          {product.price.priceDiscount > 0 ? (
            currencyFormat(product.quantity * product.price.priceDiscount)
          ) : (
            <a
              href={whatsappUrl('product', {
                name: product.name,
                url: createSlug('/shop/product/', product.name, product.id, true)
              })}
              className='underline text-danger-500'
            >
              Call for Inquiry{' '}
            </a>
          )}
        </p>
      </div>
    </div>
  )

  if (openOnClick) {
    return (
      <>
        <Link href={createSlug('/shop/product/', product.parent.name, product.parent.id)}>
          <Card />
        </Link>
        {buyMore  && (!transaction?.data?.productsRejectLine.some(pr => pr.id === product.id)) && (
          <div className='flex justify-end gap-x-2 mb-2'>
            <button
              type='button'
              onClick={addItemToCart}
              className='btn-yellow text-gray_r-12 py-2 px-3 text-caption-1'
            >
              Tambah Keranjang
            </button>
            {/* {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) && (transaction.data.isReaject == false) && ( */}
            {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) && (router.asPath.includes("/my/quotations/")) && (
                      !transaction?.data?.productsRejectLine.some(pr => pr.id === product.id) && (
                        <button
                          className="bg-red-500 text-white py-1 px-3 rounded"
                          onClick={() => openModal(product)}
                        >
                          Reject
                        </button>
                      )
                    )}
                      {isModalOpen && (
                        <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center'>
                          <div className='bg-white p-4 rounded w-96
                            ease-in-out opacity-100
                            transform transition-transform duration-300  scale-100'>
                            <h2 className='text-lg mb-2'>Berikan Alasan</h2>
                            <textarea
                              value={reason}
                              onChange={(e) => setReason(e.target.value)}
                              className='w-full p-2 border rounded'
                              rows='4'
                            ></textarea>
                            <div className='mt-4 flex justify-end'>
                              <button
                                className='bg-gray-300 text-black py-1 px-3 rounded mr-2'
                                onClick={closeModal}
                              >
                                Batal
                              </button>
                              <button
                                className='bg-red-500 text-white py-1 px-3 rounded'
                                onClick={handleRejectProduct}
                              >
                                Reject
                              </button>
                            </div>
                          </div>
                        </div>
                      )}
          </div>
          
        )}
      </>
    )
  }

  return <Card />
}

export default VariantCard