import style from '../styles/product-detail.module.css';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useMemo, useState } from 'react';
import dynamic from 'next/dynamic';

import { Button } from '@chakra-ui/react';
import { MessageCircleIcon, Share2Icon } from 'lucide-react';
import { LazyLoadComponent } from 'react-lazy-load-image-component';

const RWebShare = dynamic(
  () => import('react-web-share').then(m => m.RWebShare),
  { ssr: false }
);

import useDevice from '@/core/hooks/useDevice';
import { getAuth } from '~/libs/auth';
import { whatsappUrl } from '~/libs/whatsappUrl';
import ProductPromoSection from '~/modules/product-promo/components/Section';
import { IProductDetail } from '~/types/product';
import { useProductDetail } from '../stores/useProductDetail';
import AddToWishlist from './AddToWishlist';
import Breadcrumb from './Breadcrumb';
import ProductImage from './Image';
import Information from './Information';
import PriceAction from './PriceAction';
import SimilarBottom from './SimilarBottom';
import SimilarSide from './SimilarSide';
import { gtagProductDetail } from '@/core/utils/googleTag';

type Props = { product: IProductDetail };

const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST || '';

const ProductDetail = ({ product }: Props) => {
  const { isDesktop, isMobile } = useDevice();
  const router = useRouter();

  const [auth, setAuth] = useState<any>(null);
  useEffect(() => {
    try {
      setAuth(getAuth() ?? null);
    } catch {}
  }, []);

  const {
    setAskAdminUrl,
    askAdminUrl,
    activeVariantId,
    setIsApproval,
    isApproval,
    setSelectedVariant,
  } = useProductDetail();

  useEffect(() => {
    try {
      gtagProductDetail(product);
    } catch {}
  }, [product]);

  const currentPath = router?.asPath || '/';
  useEffect(() => {
    const createdAskUrl = whatsappUrl({
      template: 'product',
      payload: {
        manufacture: product.manufacture?.name ?? '',
        productName: product.name ?? '',
        url: SELF_HOST + currentPath,
      },
      fallbackUrl: currentPath,
    });
    setAskAdminUrl(createdAskUrl);
  }, [currentPath, product.manufacture?.name, product.name, setAskAdminUrl]);

  useEffect(() => {
    if (auth && typeof auth === 'object') {
      setIsApproval(!!auth?.feature?.soApproval);
    }
    const selectedVariant =
      product?.variants?.find(v => v.is_in_bu) || product?.variants?.[0] || null;
    setSelectedVariant(selectedVariant);
  }, [auth, product?.variants, setIsApproval, setSelectedVariant]);

  const allImages = useMemo(() => {
    const arr: string[] = [];
    if (Array.isArray(product?.image_carousel)) arr.push(...product.image_carousel);
    if (product?.image) arr.unshift(product.image);
    return arr;
  }, [product?.image, product?.image_carousel]);

  const [mainImage, setMainImage] = useState(allImages[0] || '');
  useEffect(() => {
    if (!allImages.includes(mainImage)) setMainImage(allImages[0] || '');
  }, [allImages, mainImage]);

  const canShare =
    typeof navigator !== 'undefined' && typeof (navigator as any).share === 'function';

  return (
    <>
      <div className='md:flex md:flex-wrap'>
        <div className='w-full mb-4 md:mb-0 px-4 md:px-0'>
          <Breadcrumb id={product.id} name={product.name} />
        </div>

        <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
          <div className='md:flex md:flex-wrap'>
            <div className='md:w-4/12'>
              <ProductImage product={{ ...product, image: mainImage }} />

              {allImages.length > 0 && (
                <div className='mt-4 overflow-x-auto'>
                  <div className='flex space-x-3 pb-3'>
                    {allImages.map((img, index) => (
                      <div
                        key={index}
                        className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${
                          mainImage === img
                            ? 'border-red-500 ring-2 ring-red-200'
                            : 'border-gray-200 hover:border-gray-300'
                        }`}
                        onClick={() => setMainImage(img)}
                      >
                        <img
                          src={img}
                          alt={`Thumbnail ${index + 1}`}
                          className='w-full h-full object-cover rounded-sm'
                          loading='lazy'
                          onError={e => {
                            (e.target as HTMLImageElement).src = '/images/noimage.jpeg';
                          }}
                        />
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            <div className='md:w-8/12 px-4 md:pl-6'>
              <div className='h-6 md:h-0' />
              <h1 className={style['title']}>{product.name}</h1>
              <div className='h-3 md:h-0' />
              <Information product={product} />
              <div className='h-6' />
            </div>
          </div>

          <div className='h-full'>
            {isMobile && (
              <div className='px-4 pt-6'>
                <PriceAction product={product} />
              </div>
            )}

            <div className='h-4 md:h-10' />
            {!!activeVariantId && !isApproval && (
              <ProductPromoSection product={product} productId={activeVariantId} />
            )}

            <div className='h-0 md:h-6' />

            <div className={style['section-card']}>
              <h2 className={style['heading']}>Informasi Produk</h2>
              <div className='h-4' />
              <div className='overflow-x-auto'>
                <div
                  className={style['description']}
                  dangerouslySetInnerHTML={{
                    __html:
                      !product.description || product.description === '<p><br></p>'
                        ? 'Belum ada deskripsi'
                        : product.description,
                  }}
                />
              </div>
            </div>
          </div>
        </div>

        {isDesktop && (
          <div className='md:w-3/12'>
            <PriceAction product={product} />
            <div className='flex gap-x-5 items-center justify-center'>
              <Button
                as={Link}
                href={/* askAdminUrl sudah di-set di effect */ askAdminUrl}
                variant='link'
                target='_blank'
                colorScheme='gray'
                leftIcon={<MessageCircleIcon size={18} />}
              >
                Ask Admin
              </Button>

              <span>|</span>

              <AddToWishlist productId={product.id} />

              <span>|</span>

              {canShare && (
                <RWebShare
                  data={{
                    text: 'Check out this product',
                    title: `${product.name} - Indoteknik.com`,
                    url: SELF_HOST + currentPath,
                  }}
                >
                  <Button variant='link' colorScheme='gray' leftIcon={<Share2Icon size={18} />}>
                    Share
                  </Button>
                </RWebShare>
              )}
            </div>

            <div className='h-6' />
            <div className={style['heading']}>Produk Serupa</div>
            <div className='h-4' />
            <SimilarSide product={product} />
          </div>
        )}

        <div className='md:w-full pt-4 md:py-10 px-4 md:px-0'>
          <div className={style['heading']}>Kamu Mungkin Juga Suka</div>
          <div className='h-6' />
          <LazyLoadComponent>
            <SimilarBottom product={product} />
          </LazyLoadComponent>
        </div>

        <div className='h-6 md:h-0' />
      </div>
    </>
  );
};

export default ProductDetail;