path: root/src-migrate/modules/product-detail/components/ProductDetail.tsx

import style from '../styles/product-detail.module.css';

import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useRef, useState, UIEvent } from 'react';

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

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 = getAuth();

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

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

  useEffect(() => {
    const createdAskUrl = whatsappUrl({
      template: 'product',
      payload: {
        manufacture: product.manufacture.name,
        productName: product.name,
        url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath,
      },
      fallbackUrl: router.asPath,
    });

    setAskAdminUrl(createdAskUrl);
  }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl]);

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

  // Gabungkan semua gambar produk (utama + tambahan)
  const allImages = (() => {
    const arr: string[] = [];
    if (product?.image) arr.push(product.image); // selalu masukkan utama, baik mobile maupun desktop
    if (
      Array.isArray(product?.image_carousel) &&
      product.image_carousel.length
    ) {
      // hindari duplikat jika image utama juga ada di carousel
      const set = new Set(arr);
      for (const img of product.image_carousel) {
        if (!set.has(img)) {
          arr.push(img);
          set.add(img);
        }
      }
    }
    return arr;
  })();

  const [mainImage, setMainImage] = useState(allImages[0] || '');

  useEffect(() => {
    // update mainImage jika sumber gambar berubah dan mainImage tidak ada di daftar
    if (!allImages.includes(mainImage)) {
      setMainImage(allImages[0] || '');
    }
  }, [allImages]); // eslint-disable-line react-hooks/exhaustive-deps

  // ===== Slider mobile (tanpa dependency) =====
  const sliderRef = useRef<HTMLDivElement | null>(null);
  const [currentIdx, setCurrentIdx] = useState(0);

  const handleMobileScroll = (e: UIEvent<HTMLDivElement>) => {
    const el = e.currentTarget;
    if (!el) return;
    const idx = Math.round(el.scrollLeft / el.clientWidth);
    if (idx !== currentIdx) {
      setCurrentIdx(idx);
      setMainImage(allImages[idx] || '');
    }
  };

  const scrollToIndex = (i: number) => {
    const el = sliderRef.current;
    if (!el) return;
    el.scrollTo({ left: i * el.clientWidth, behavior: 'smooth' });
    setCurrentIdx(i);
    setMainImage(allImages[i] || '');
  };
  // ============================================

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'>
          {/* ===== Kolom kiri: gambar ===== */}
          <div className='md:w-4/12'>
            {/* === MOBILE: Slider swipeable, tanpa thumbnail carousel === */}
            {isMobile ? (
              <div className='relative'>
                <div
                  ref={sliderRef}
                  onScroll={handleMobileScroll}
                  className='flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar'
                  style={{
                    scrollBehavior: 'smooth',
                    msOverflowStyle: 'none',
                    scrollbarWidth: 'none',
                  }}
                >
                  {allImages.length > 0 ? (
                    allImages.map((img, i) => (
                      // slide tetap selebar viewport untuk snap mulus
                      <div
                        key={i}
                        className='w-full flex-shrink-0 snap-center flex justify-center items-center'
                      >
                        {/* gambar diperkecil */}
                        <img
                          src={img}
                          alt={`Gambar ${i + 1}`}
                          className='w-[85%] aspect-square object-contain'
                          onError={(e) => {
                            (e.target as HTMLImageElement).src =
                              '/path/to/fallback-image.jpg';
                          }}
                        />
                      </div>
                    ))
                  ) : (
                    <div className='w-full flex-shrink-0 snap-center flex justify-center items-center'>
                      <img
                        src={mainImage || '/path/to/fallback-image.jpg'}
                        alt='Gambar produk'
                        className='w-[85%] aspect-square object-contain'
                      />
                    </div>
                  )}
                </div>

                {/* Dots indicator */}
                {allImages.length > 1 && (
                  <div className='absolute bottom-2 left-0 right-0 flex justify-center gap-2'>
                    {allImages.map((_, i) => (
                      <button
                        key={i}
                        aria-label={`Ke slide ${i + 1}`}
                        className={`w-2 h-2 rounded-full ${
                          currentIdx === i ? 'bg-gray-800' : 'bg-gray-300'
                        }`}
                        onClick={() => scrollToIndex(i)}
                      />
                    ))}
                  </div>
                )}
              </div>
            ) : (
              <>
                {/* === DESKTOP: Tetap seperti sebelumnya === */}
                <ProductImage product={{ ...product, image: mainImage }} />

                {/* Carousel horizontal (thumbnail) – hanya desktop */}
                {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 =
                                '/path/to/fallback-image.jpg';
                            }}
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </>
            )}
          </div>
          {/* <<=== TUTUP kolom kiri */}

          {/* ===== Kolom kanan: info ===== */}
          <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}
              variant='link'
              target='_blank'
              colorScheme='gray'
              leftIcon={<MessageCircleIcon size={18} />}
            >
              Ask Admin
            </Button>

            <span>|</span>

            <AddToWishlist productId={product.id} />

            <span>|</span>

            <RWebShare
              data={{
                text: 'Check out this product',
                title: `${product.name} - Indoteknik.com`,
                url: SELF_HOST + router.asPath,
              }}
            >
              <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;