import { Button, Skeleton } from '@chakra-ui/react';
import { HeartIcon } from '@heroicons/react/24/outline';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { toast } from 'react-hot-toast';
import LazyLoad from 'react-lazy-load';
import ImageNext from 'next/image';
import odooApi from '@/core/api/odooApi';
import Divider from '@/core/components/elements/Divider/Divider';
import Image from '@/core/components/elements/Image/Image';
import Link from '@/core/components/elements/Link/Link';
import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import MobileView from '@/core/components/views/MobileView';
import { updateItemCart } from '@/core/utils/cart';
import currencyFormat from '@/core/utils/currencyFormat';
import { gtagAddToCart } from '@/core/utils/googleTag';
import { createSlug } from '@/core/utils/slug';
import whatsappUrl from '@/core/utils/whatsappUrl';
import { getAuth } from '~/libs/auth';
import SimilarBottom from '~/modules/product-detail/components/SimilarBottom';
import ProductSimilar from '../ProductSimilar';

const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
  const router = useRouter();
  const { slug } = router.query;
  const { srsltid } = router.query;
  let auth = getAuth();
  const [quantity, setQuantity] = useState('1');
  const [selectedVariant, setSelectedVariant] = useState(product.id);
  const [quantityInput, setQuantityInput] = useState(String(1));
  const [qtyPickUp, setQtyPickUp] = useState(0);
  const [informationTab, setInformationTab] = useState(
    informationTabOptions[0].value
  );
  const [addCartAlert, setAddCartAlert] = useState(false);

  const [isLoadingSLA, setIsLoadingSLA] = useState(true);

  const getLowestPrice = () => {
    const lowest = product.lowestPrice;
    return lowest;
  };

  const [activeVariant, setActiveVariant] = useState({
    id: null,
    code: product.code,
    name: product.name,
    price: getLowestPrice(),
    stock: product.stockTotal,
    weight: product.weight,
    isFlashSale: product.isFlashSale,
  });

  useEffect(() => {
    if (selectedVariant) {
      setActiveVariant({
        id: product.id,
        code: product.code,
        name: product.name,
        price: product.price,
        stock: product.stockTotal,
        weight: product.weight,
        isFlashSale: product.isFlashSale,
      });
    }
  }, [selectedVariant, product]);

  const validAction = (q) => {
    if (!selectedVariant) {
      toast.error('Pilih varian terlebih dahulu');
      return false;
    }
    if (!Number.isInteger(q) || q < 1) {
      toast.error('Jumlah barang minimal 1');
      return false;
    }
    return true;
  };

  const getQty = () => Math.max(1, toInt(quantityInput));

  const handleClickCart = async () => {
    const q = getQty();

    if (!auth) {
      router.push(`/login?next=/shop/product/${slug}?srsltid=${srsltid}`);
      return;
    }
    if (!validAction(q)) return;

    gtagAddToCart(activeVariant, q);
    updateItemCart({
      productId: product.id,
      quantity: q,
      programLineId: null,
      selected: true,
      source: null,
    });
    setAddCartAlert(true);
  };

  const handleClickBuy = async () => {
    const q = getQty();

    let isLoggedIn = typeof auth === 'object';
    if (!isLoggedIn) {
      const currentUrl = encodeURIComponent(router.asPath);
      await router.push(`/login?next=${currentUrl}`);
      await new Promise((resolve) => {
        const t = setInterval(() => {
          const newAuth = getAuth();
          if (typeof newAuth === 'object') {
            auth = newAuth;
            clearInterval(t);
            resolve(null);
          }
        }, 500);
      });
    }

    if (!validAction(q)) return;

    updateItemCart({
      productId: product.id,
      quantity: q,
      programLineId: null,
      selected: true,
      source: 'buy',
    });
    router.push(`/shop/checkout?source=buy`);
  };

  const toInt = (v) => {
    const n = parseInt(String(v ?? '').trim(), 10);
    return Number.isFinite(n) ? n : 0;
  };

  const validQuantity = (q) => {
    if (!Number.isInteger(q) || q < 1) {
      toast.error('Jumlah barang minimal 1');
      return false;
    }
    return true;
  };

  const handleButton = (variant) => {
    const quantity = Math.max(1, toInt(quantityInput)); // clamp min 1
    if (!validQuantity(quantity)) return;

    updateItemCart({
      productId: variant,
      quantity,
      programLineId: null,
      selected: true,
      source: 'buy',
    });
    router.push('/shop/quotation?source=buy');
  };

  const productSimilarQuery = [
    product?.name,
    `fq=-product_id_i:${product.id}`,
    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`,
  ].join('&');

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

      setIsLoadingSLA(false);
    };
    fetchData();
  }, [product]);

  const [fakeStock] = useState(() => {
    // inisialisasi sekali doang pas pertama kali komponen dibuat
    return Math.floor(Math.random() * 100) + 1;
  });

  const getImageVariant = (img) => {
    if (!img || img.trim() === '') return '/images/noimage.jpeg';
    return `${img}?variant=True`;
  };

  return (
    <MobileView>
      <div className='relative'>
        {!product.price.price > 0 && (
          <div className='absolute inset-0 z-[50] flex items-center justify-center pointer-events-none select-none'>
            <img
              src='/images/produk_tidak_tersedia.svg'
              alt='Produk tidak tersedia'
              className='w-[100%] opacity-[1000%] -translate-x-[0%]  -translate-y-[-160%]'
            />
          </div>
        )}
      </div>
      {/* ===== BAR BAWAH  ===== */}
      <div className='px-4 fixed bottom-0 left-0 right-0 bg-white z-10 pb-6 pt-4 rounded-t-2xl shadow-[rgba(0,0,4,0.1)_0px_-4px_4px_0px]'>
        {/* HARGA & PPN */}
        {activeVariant.isFlashSale &&
        activeVariant?.price?.discountPercentage > 0 ? (
          <>
            <div className='flex gap-x-1 items-center'>
              <div className='bg-danger-500 px-2 py-1.5 rounded text-white text-caption-2'>
                {activeVariant?.price?.discountPercentage}%
              </div>
              <div className='text-gray_r-11 line-through text-caption-1'>
                {currencyFormat(activeVariant?.price?.price)}
              </div>
              <div className='text-danger-500 font-semibold'>
                {currencyFormat(activeVariant?.price?.priceDiscount)}
              </div>
            </div>
            <div className='text-gray_r-9 text-base font-normal mt-1'>
              Termasuk PPN:{' '}
              {currencyFormat(
                activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN
              )}
            </div>
          </>
        ) : (
          <div className='text-danger-500 font-semibold mt-1 text-3xl'>
            {activeVariant?.price?.price > 0 ? (
              <>
                {currencyFormat(activeVariant?.price?.price)}
                <div className='text-gray_r-9 text-base font-normal mt-1'>
                  Termasuk PPN:{' '}
                  {currencyFormat(
                    activeVariant?.price.price * process.env.NEXT_PUBLIC_PPN
                  )}
                </div>
              </>
            ) : null}
          </div>
        )}

        <div className='grid grid-cols-12 items-center gap-3 mt-3'>
          {product?.price?.price > 0 && (
            <div className='col-span-7'>
              <div
                className={`text-[14px] ${
                  product?.sla?.qty < 10 ? 'text-red-600 font-medium' : ''
                }`}
              >
                {/* Stock : {activeVariant?.stock ?? 0} */}
                Stock : {fakeStock}{' '}
              </div>
              {qtyPickUp > 0 && (
                <div className='text-[16px] mt-0.5 text-red-500 italic'>
                  * {qtyPickUp} barang bisa di pickup
                </div>
              )}
            </div>
          )}
          <div className='col-span-5 flex justify-end'>
            {product?.price?.price > 0 && (
              <div className='inline-flex items-stretch border rounded-xl overflow-hidden'>
                <button
                  type='button'
                  className='h-10 w-10 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95'
                  onClick={() =>
                    setQuantityInput(
                      String(Math.max(1, Number(quantityInput || 1) - 1))
                    )
                  }
                  aria-label='Kurangi'
                >
                  <span className='text-2xl leading-none'>–</span>
                </button>
                <input
                  type='number'
                  min={1}
                  value={quantityInput}
                  onChange={(e) => setQuantityInput(e.target.value)}
                  className='h-10 w-16 text-center text-lg outline-none border-x
                     [appearance:textfield]
                     [&::-webkit-outer-spin-button]:appearance-none
                     [&::-webkit-inner-spin-button]:appearance-none'
                />
                <button
                  type='button'
                  className='h-10 w-10 grid place-items-center text-gray-700 hover:bg-gray-100 active:scale-95'
                  onClick={() =>
                    setQuantityInput(String(Number(quantityInput || 1) + 1))
                  }
                  aria-label='Tambah'
                >
                  <span className='text-2xl leading-none'>+</span>
                </button>
              </div>
            )}
          </div>
        </div>

        <div className='h4' />
        {/* TOMBOL AKSI */}
        <div className='flex gap-2 mt-3'>
          {/* Tombol Dokumen */}
          <Button
            onClick={() => handleButton(product.id)}
            className='flex items-center justify-center p-2 border-2 hover:bg-slate-100'
            variant='outline'
            title='Lihat Dokumen'
            isDisabled={product?.price?.price <= 0}
          >
            <ImageNext
              src='/images/doc.svg'
              width={18}
              height={18}
              alt='Dokumen'
            />
          </Button>
          {/* Container untuk tombol aksi utama */}
          <div className='flex-1 flex gap-2'>
            <Button
              onClick={() =>
                handleClickCart(product.id, Number(quantityInput || 1))
              }
              className='flex-1'
              colorScheme='red'
              variant='outline'
              isDisabled={product?.price?.price <= 0}
            >
              Keranjang
            </Button>
            <Button
              onClick={() =>
                handleClickBuy(product.id, Number(quantityInput || 1))
              }
              className='flex-1'
              colorScheme='red'
              isDisabled={product?.price?.price <= 0}
            >
              Beli
            </Button>
          </div>
        </div>
      </div>

      <Image
        src={getImageVariant(product?.image)}
        alt={product.name}
        className='h-72 object-contain object-center w-full border-b border-gray_r-4'
      />

      <div className='p-4'>
        <div className='flex items-end mb-2'>
          {product.manufacture?.name ? (
            <Link
              href={createSlug(
                '/shop/brands/',
                product.manufacture?.name,
                product.manufacture?.id
              )}
            >
              {product.manufacture?.name}
            </Link>
          ) : (
            <div>-</div>
          )}
          <button type='button' className='ml-auto' onClick={toggleWishlist}>
            {wishlist.data?.productTotal > 0 ? (
              <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
            ) : (
              <HeartIcon className='w-6' />
            )}
          </button>
        </div>
        <h1 className='font-medium text-h-lg leading-8 md:text-title-md md:leading-10 mb-3'>
          {activeVariant?.name}
        </h1>
      </div>

      <Divider />

      <div className='p-4'>
        <h2 className='font-semibold'>Informasi Produk</h2>
        <div className='flex gap-x-4 mt-4 mb-3'>
          {informationTabOptions.map((option) => (
            <TabButton
              value={option.value}
              key={option.value}
              active={informationTab == option.value}
              onClick={() => setInformationTab(option.value)}
            >
              {option.label}
            </TabButton>
          ))}
        </div>

        <TabContent
          active={informationTab == 'specification'}
          className='rounded border border-gray_r-6 divide-y divide-gray_r-6'
        >
          {(!product?.price?.price || product?.price?.price <= 0) && (
            <SpecificationContent label='Ketersediaan'>
              <span>
                {isLoadingSLA ? (
                  <Skeleton width='100px' height='full' />
                ) : product?.sla?.slaDate != '-' ? (
                  <button
                    type='button'
                    title={`Masa Persiapan Barang ${product?.sla?.slaDate}`}
                    className={`flex gap-x-1 items-center p-2 h-8 rounded-lg w-full ${
                      product?.sla?.slaDate === 'indent'
                        ? 'bg-indigo-900'
                        : 'btn-light'
                    }`}
                  >
                    <div
                      className={`flex-1 text-sm  ${
                        product?.sla?.slaDate === 'indent' ? 'text-white' : ''
                      }`}
                    >
                      {product?.sla?.slaDate}
                    </div>
                    <div className='flex-end'>
                      <svg
                        aria-hidden='true'
                        fill='none'
                        stroke='currentColor'
                        stroke-width='1.5'
                        className={`w-7 h-7 text-sm ${
                          product?.sla?.slaDate === 'indent' ? 'text-white' : ''
                        }`}
                      >
                        <path
                          d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
                          stroke-linecap='round'
                          stroke-linejoin='round'
                        ></path>
                      </svg>
                    </div>
                  </button>
                ) : (
                  '-'
                )}
              </span>
            </SpecificationContent>
          )}

          <SpecificationContent label='Nomor SKU'>
            <span>SKU-{product?.id}</span>
          </SpecificationContent>
          <SpecificationContent label='Part Number'>
            <span>{activeVariant?.code || '-'}</span>
          </SpecificationContent>
          {product?.price?.price > 0 && (
            <SpecificationContent label='Stok'>
              {activeVariant?.stock > 0 && (
                <span className='flex gap-x-1.5'>
                  <div className='badge-solid-red'>Ready Stock</div>
                  <div className='badge-gray'>
                    {activeVariant?.stock > 5 ? '> 5' : '< 5'}
                  </div>
                </span>
              )}
              {activeVariant?.stock == 0 && (
                <a
                  href={whatsappUrl('product', {
                    name: product.name,
                    url: createSlug(
                      '/shop/product/',
                      product.name,
                      product.id,
                      true
                    ),
                  })}
                  className='text-danger-500 font-medium'
                >
                  Tanya Stok
                </a>
              )}
            </SpecificationContent>
          )}
          <SpecificationContent label='Berat Barang'>
            {activeVariant?.weight > -1 && (
              <span>{activeVariant?.weight} KG</span>
            )}
            {activeVariant?.weight == -1 && (
              <a
                href={whatsappUrl('productWeight', {
                  name: product.name,
                  url: createSlug(
                    '/shop/product/',
                    product.name,
                    product.id,
                    true
                  ),
                })}
                className={`text-danger-501 font-medium ${
                  !product?.price?.price || product?.price?.price <= 0
                    ? 'pointer-events-none opacity-50 cursor-default'
                    : ''
                }`}
              >
                Tanya Berat
              </a>
            )}
          </SpecificationContent>
        </TabContent>

        <TabContent
          active={informationTab == 'description'}
          className='leading-6 text-gray_r-11'
          dangerouslySetInnerHTML={{
            __html:
              product.description != ''
                ? product.description
                : 'Belum ada deskripsi produk.',
          }}
        />
      </div>

      <Divider />

      <div className='p-4'>
        <h2 className='font-semibold mb-4'>Kamu Mungkin Juga Suka</h2>
        <LazyLoad>
          <SimilarBottom product={product} />
        </LazyLoad>
        {/* <LazyLoad>
          <ProductSimilar query={productSimilarQuery} />
        </LazyLoad> */}
      </div>

      <BottomPopup
        title='Berhasil Ditambahkan'
        active={addCartAlert}
        close={() => setAddCartAlert(false)}
      >
        <div className='flex mt-4'>
          <div className='w-[15%]'>
            <Image
              src={getImageVariant(product?.image)}
              alt={product.name}
              className='h-20 object-contain object-center w-full border border-gray_r-4'
            />
          </div>
          <div className='ml-3 flex flex-1 items-center text-sm font-normal'>
            {product.name}
          </div>
          <div className='ml-3 flex items-center text-sm 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>
            <SimilarBottom product={product} />
          </LazyLoad>
          {/* <LazyLoad>
            <ProductSimilar query={productSimilarQuery} />
          </LazyLoad> */}
        </div>
      </BottomPopup>
    </MobileView>
  );
};

const informationTabOptions = [
  { value: 'specification', label: 'Spesifikasi' },
  // { value: 'description', label: 'Deskripsi' },
  // { value: 'information', label: 'Info Penting' }
];

const TabButton = ({ children, active, ...props }) => {
  const activeClassName = active
    ? 'text-danger-500 underline underline-offset-4'
    : 'text-gray_r-11';
  return (
    <button
      {...props}
      type='button'
      className={`font-medium pb-1 ${activeClassName}`}
    >
      {children}
    </button>
  );
};

const TabContent = ({ children, active, className, ...props }) => (
  <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
    {children}
  </div>
);

const SpecificationContent = ({ children, label }) => (
  <div className='flex justify-between p-3'>
    <span className='text-gray_r-11'>{label}</span>
    {children}
  </div>
);

export default ProductMobileVariant;