import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import style from '../styles/price-action.module.css';
import { Button, Link, useToast } from '@chakra-ui/react';
// import { ScaleIcon } from '@heroicons/react/24/outline'; // Tidak perlu lagi
import product from 'next-seo/lib/jsonld/product';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Image from '~/components/ui/image';
import { getAuth } from '~/libs/auth';
import { upsertUserCart } from '~/services/cart';
import LazyLoad from 'react-lazy-load';
import ProductSimilar from '../../../../src/lib/product/components/ProductSimilar';
import { IProductDetail } from '~/types/product';
import ImageNext from 'next/image';
import { useProductCartContext } from '@/contexts/ProductCartContext';
import { createSlug } from '~/libs/slug';
import formatCurrency from '~/libs/formatCurrency';
import { useProductDetail } from '../stores/useProductDetail';
import useDevice from '@/core/hooks/useDevice';
import DesktopView from '@/core/components/views/DesktopView';
import MobileView from '@/core/components/views/MobileView';

type Props = {
  variantId: number | null;
  quantity?: number;
  source?: 'buy' | 'add_to_cart';
  products: IProductDetail;
  onCompare?: () => void; 
};

type Status = 'idle' | 'loading' | 'success';

const AddToQuotation = ({
  variantId,
  quantity = 1,
  source = 'add_to_cart',
  products,
  onCompare
}: Props) => {
  const auth = getAuth();
  const router = useRouter();
  const toast = useToast({
    position: 'top',
    isClosable: true,
  });

  const { askAdminUrl } = useProductDetail();
  const { isMobile, isDesktop } = useDevice();

  const [product, setProducts] = useState(products);
  const [status, setStatus] = useState<Status>('idle');
  const {
    productCart,
    setRefreshCart,
    setProductCart,
    refreshCart,
    isLoading,
    setIsloading,
  } = useProductCartContext();

  const productSimilarQuery = [
    product?.name,
    `fq=-product_id_i:${product.id}`,
    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`,
  ].join('&');
  const [addCartAlert, setAddCartAlert] = useState(false);
  const hasPrice =
    !!product?.lowest_price && Number(product.lowest_price.price) > 0;

  const handleButton = async () => {
    if (typeof auth !== 'object') {
      const currentUrl = encodeURIComponent(router.asPath);
      router.push(`/login?next=${currentUrl}`);
      return;
    }

    if (!variantId || isNaN(quantity) || typeof auth !== 'object') return;
    if (status === 'success') return;
    setStatus('loading');
    await upsertUserCart({
      userId: auth.id,
      type: 'product',
      id: variantId,
      qty: quantity,
      selected: true,
      source: source,
      qtyAppend: true,
    });
    setStatus('idle');
    setRefreshCart(true);
    setAddCartAlert(true);

    toast({
      title: 'Tambah ke keranjang',
      description: 'Berhasil menambahkan barang ke keranjang belanja',
      status: 'success',
      duration: 3000,
      isClosable: true,
      position: 'top',
    });

    if (source === 'buy') {
      router.push('/shop/quotation?source=buy');
    }
  };
  useEffect(() => {
    if (status === 'success')
      setTimeout(() => {
        setStatus('idle');
      }, 3000);
  }, [status]);

  return (
    <div className='w-full flex flex-col gap-3'> 
      
      {/* 3. TAMPILAN DESKTOP: GRID 2 KOLOM (Bandingkan & Penawaran) */}
      <DesktopView>
        <div className="grid grid-cols-2 gap-3 w-full">
            {/* Tombol Kiri: Bandingkan */}
            <Button
                onClick={onCompare} 
                variant="outline"
                colorScheme="gray"
                className="w-full border border-gray-300 p-2 gap-2 flex items-center justify-center text-gray-600 hover:text-red-600 hover:border-red-600 transition-all font-normal text-sm"
            >
                {/* UPDATE ICON DISINI */}
                <ImageNext src="/images/logo-bandingkan.svg" width={15} height={15} alt="bandingkan" />
                Bandingkan
            </Button>

            {/* Tombol Kanan: Penawaran (Link WA) */}
            <Button
                as={Link}                                                          
                href={askAdminUrl}
                target='_blank'
                variant="outline"
                colorScheme="gray"
                className="w-full border border-gray-300 p-2 gap-2 flex items-center justify-center text-gray-600 hover:text-red-600 hover:border-red-600 transition-all font-normal text-sm"
                _hover={{ textDecoration: 'none' }}
                onClick={handleButton}
            >
                <ImageNext src="/images/doc_red.svg" width={20} height={20} alt="penawaran" />
                Penawaran
            </Button>
        </div>
      </DesktopView>

      {/* TAMPILAN MOBILE */}
      <MobileView>
          <Button
            onClick={handleButton}
            color={'red'}
            colorScheme='white'
            className='w-full border-2 p-2 gap-1 hover:bg-slate-100 flex items-center'
            isDisabled={!hasPrice}
          >
            <ImageNext
              src='/images/doc.svg'
              alt='penawaran instan'
              className=''
              width={25}
              height={25}
            />
          </Button>
      </MobileView>

      <BottomPopup
        className='!container'
        title='Berhasil Ditambahkan'
        active={addCartAlert}
        close={() => {
          setAddCartAlert(false);
        }}
      >
        <div className='flex mt-4'>
          <div className='w-[10%]'>
            <ImageNext
              src={product.image}
              alt={product.name}
              className='h-32 object-contain object-center w-full border border-gray_r-4'
              width={80}
              height={80}
            />
          </div>
          <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
            {!!product.manufacture.name ? (
              <Link
                href={createSlug(
                  '/shop/brands/',
                  product.manufacture.name,
                  product.manufacture.id.toString()
                )}
                className=' hover:underline'
                color={'red'}
              >
                {product.manufacture.name}
              </Link>
            ) : (
              '-'
            )}
            <p className='text-ellipsis overflow-hidden'>{product.name}</p>
            <p>{product.code}</p>
            {!!product.lowest_price && product.lowest_price.price > 0 && (
              <>
                <div className='flex items-end gap-x-2'>
                  {product.lowest_price.discount_percentage > 0 && (
                    <>
                      <div className='badge-solid-red'>
                        {Math.floor(product.lowest_price.discount_percentage)}%
                      </div>
                      <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                        Rp {formatCurrency(product.lowest_price.price || 0)}
                      </div>
                    </>
                  )}
                  <div className='text-danger-500 font-semibold'>
                    Rp{' '}
                    {formatCurrency(product.lowest_price.price_discount || 0)}
                  </div>
                </div>
              </>
            )}

            {(!!product.lowest_price && product.lowest_price.price === 0) ||
            product.lowest_price.price < 0 ? (
              <span>
                Hubungi kami untuk dapatkan harga terbaik,{' '}
                <Link
                  href={askAdminUrl}
                  target='_blank'
                  className='font-medium underline'
                  color={'red'}
                >
                  klik disini
                </Link>
              </span>
            ) : (
              <span>
                Hubungi kami untuk dapatkan harga terbaik,{' '}
                <Link
                  href={askAdminUrl}
                  target='_blank'
                  className='font-medium underline'
                  color={'red'}
                >
                  klik disini
                </Link>
              </span>
            )}
          </div>
          <div className='ml-3 flex items-center font-normal'>
            <Link
              href='/shop/cart'
              className='flex-1 py-2 text-gray_r-12 btn-yellow'
            >
              Lihat Keranjang
            </Link>
          </div>
        </div>
        <div className='mt-8 mb-4'>
          <div className='text-h-sm font-semibold mb-6'>
            Kamu Mungkin Juga Suka
          </div>
          <LazyLoad>
            <ProductSimilar query={productSimilarQuery} />
          </LazyLoad>
        </div>
      </BottomPopup>
    </div>
  );
};

export default AddToQuotation;