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 komponen Chakra UI
import { 
  Button, 
  Tabs, 
  TabList, 
  TabPanels, 
  Tab, 
  TabPanel, 
  Table, 
  Tbody, 
  Tr, 
  Td,
  Th, 
  Thead,
  Box,
  Spinner,
  Center,
  Text
} from '@chakra-ui/react';

// Import Icons
import {
  AlertTriangle,
  MessageCircleIcon,
  Share2Icon,
  ExternalLink
} from 'lucide-react';

import { LazyLoadComponent } from 'react-lazy-load-image-component';

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 dynamic from 'next/dynamic';

// 1. IMPORT MODAL (Baru)
import ProductComparisonModal from './ProductComparisonModal';

import { gtagProductDetail } from '@/core/utils/googleTag';

type Props = {
  product: IProductDetail;
};

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

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);

  console.log('Render ProductDetail for product ID:', product);
  
  // State Data dari Magento
  const [specsMatrix, setSpecsMatrix] = useState<any[]>([]); 
  const [upsellIds, setUpsellIds] = useState<number[]>([]);
  const [relatedIds, setRelatedIds] = useState<number[]>([]); 
  
  const [loadingSpecs, setLoadingSpecs] = useState(false);

  // 2. STATE MODAL COMPARE (Baru)
  const [isCompareOpen, setCompareOpen] = useState(false);

  useEffect(() => {
    try {
      setAuth(getAuth() ?? null);
    } catch {}
  }, []);

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

  const {
    setAskAdminUrl,
    askAdminUrl,
    activeVariantId,
    setIsApproval,
    isApproval,
    selectedVariant, 
    setSelectedVariant,
  } = 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]);

  // =========================================================================
  // 1. LOGIC INISIALISASI VARIANT
  // =========================================================================
  useEffect(() => {
    if (typeof auth === 'object') {
      setIsApproval(auth?.feature?.soApproval);
    }
    const variantInit =
      product?.variants?.find((variant) => variant.is_in_bu) ||
      product?.variants?.[0];
    
    setSelectedVariant(variantInit);

    setSpecsMatrix([]);
    setUpsellIds([]);
    setRelatedIds([]);
    
  }, [product, auth]); 

  // =========================================================================
  // 2. LOGIC FETCH DATA
  // =========================================================================
  useEffect(() => {
    const fetchMagentoData = async () => {
      const allVariantIds = product.variants.map(v => v.id);
      
      if (allVariantIds.length === 0) return;

      const mainId = allVariantIds[0];

      setLoadingSpecs(true);
      
      try {
        const params = new URLSearchParams({
            skus: allVariantIds.join(','),
            main_sku: String(mainId)
        });

        const endpoint = `/api/magento-product?${params.toString()}`;

        const response = await fetch(endpoint, {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' }
        });

        if (!response.ok) {
            setSpecsMatrix([]);
            setUpsellIds([]);
            setRelatedIds([]);
            return;
        }

        const data = await response.json();

        // 1. Specs Matrix (Processed Grouping)
        if (data.specsMatrix && Array.isArray(data.specsMatrix)) {
           const processed = processMatrixData(data.specsMatrix);
           setSpecsMatrix(processed);
        } else {
           setSpecsMatrix([]);
        }

        // 2. Upsell & Related
        if (data.upsell_ids && Array.isArray(data.upsell_ids)) setUpsellIds(data.upsell_ids);
        else setUpsellIds([]);

        if (data.related_ids && Array.isArray(data.related_ids)) setRelatedIds(data.related_ids);
        else setRelatedIds([]);

      } catch (error) {
        console.error("Gagal mengambil data Magento:", error);
        setSpecsMatrix([]);
      } finally {
        setLoadingSpecs(false);
      }
    };

    fetchMagentoData();

  }, [product.id]); 

  // =========================================================================
  // HELPER 1: GROUPING DATA BY LABEL (Separator ':')
  // =========================================================================
  const processMatrixData = (rawMatrix: any[]) => {
      const groups: any = {};
      const result: any[] = [];

      rawMatrix.forEach(item => {
          // Cek Label: "Group Name : Sub Label"
          if (item.label && item.label.includes(' : ')) {
              const parts = item.label.split(' : ');
              const groupName = parts[0].trim(); 
              const childLabel = parts.slice(1).join(' : ').trim();

              if (!groups[groupName]) {
                  groups[groupName] = {
                      type: 'group',
                      label: groupName,
                      children: []
                  };
                  result.push(groups[groupName]);
              }
              
              groups[groupName].children.push({
                  ...item,
                  label: childLabel // Override label jadi pendek
              });

          } else {
              result.push({ ...item, type: 'single' });
          }
      });

      return result;
  };


  // =========================================================================
  // HELPER 2: RENDER SPEC VALUE
  // =========================================================================
  const renderSpecValue = (val: any) => {
    if (!val) return '-';
    const strVal = String(val).trim();

    // URL Link
    const isUrl = !strVal.includes(' ') && (
      strVal.startsWith('http') || 
      strVal.startsWith('www.')
    );
    if (isUrl) {
      const href = strVal.startsWith('http') ? strVal : `https://${strVal}`;
      return (
        <a 
          href={href} 
          target="_blank" 
          rel="noopener noreferrer"
          className="text-red-600 hover:underline inline-flex items-center gap-1"
        >
          <ExternalLink size={14} /> Link
        </a>
      );
    }

    // HTML
    if (strVal.includes('<') && strVal.includes('>')) {
       return (
         <div 
           className="prose prose-sm text-gray-700"
           dangerouslySetInnerHTML={{ __html: strVal }}
         />
       );
    }

    // Teks Biasa
    return strVal;
  };


  const allImages = (() => {
    const arr: string[] = [];
    if (product?.image) arr.push(product.image);
    if (
      Array.isArray(product?.image_carousel) &&
      product.image_carousel.length
    ) {
      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] || '');
  const hasPrice = Number(product?.lowest_price?.price) > 0;

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

  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;
    const elRef = sliderRef.current;
    elRef.scrollTo({ left: i * elRef.clientWidth, behavior: 'smooth' });
    setCurrentIdx(i);
    setMainImage(allImages[i] || '');
  };

  return (
    <>
      {/* 3. MODAL POPUP DIRENDER DISINI */}
      {/* Render di luar layout utama agar tidak tertutup elemen lain */}
      <ProductComparisonModal 
        isOpen={isCompareOpen} 
        onClose={() => setCompareOpen(false)} 
      />

      <div className='relative'>
        {isDesktop && !hasPrice && (
          <div className='absolute inset-0 z-[20] flex items-center justify-center pointer-events-none select-none'>
            <img
              src='/images/produk_tidak_tersedia.svg'
              alt='Produk tidak tersedia'
              className='w-[47%] opacity-50 -translate-x-[3%]  -translate-y-[-70%]'
            />
          </div>
        )}
      </div>

      <div className='relative'>
        {isMobile && !hasPrice && (
          <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-[-197%]'
            />
          </div>
        )}
      </div>

      <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'>
              {/* ... Image Slider ... */}
              {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) => (
                        <div key={i} className='w-full flex-shrink-0 snap-center flex justify-center items-center'>
                          <img src={img} alt={`Gambar ${i + 1}`} className='w-[85%] aspect-square object-contain' onError={(e) => { (e.target as HTMLImageElement).src = '/images/noimage.jpeg'; }} />
                        </div>
                      ))
                    ) : (
                      <div className='w-full flex-shrink-0 snap-center flex justify-center items-center'>
                        <img src={mainImage || '/images/noimage.jpeg'} alt='Gambar produk' className='w-[85%] aspect-square object-contain' />
                      </div>
                    )}
                  </div>
                  {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>
              ) : (
                <>
                  <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>

            {/* ===== Kolom kanan: info ===== */}
            {isDesktop && (
              <div className='md:w-8/12 px-4 md:pl-6'>
                {!hasPrice && (
                  <div className='bg-red-50 p-2 py-1.5 rounded-lg border border-red-500 flex gap-1 items-center '>
                    <AlertTriangle
                      size={18}
                      className='text-red-600 shrink-0 mx-2'
                    />
                    <h1 className='text-red-600 font-normal text-h-sm'>
                      Maaf untuk saat ini Produk yang anda cari tidak tersedia
                    </h1>
                  </div>
                )}
                <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>
            )}
            {isMobile && (
              <div className='md:w-8/12 px-4 md:pl-6 relative'>
                {!hasPrice && (
                  <div className='bg-red-50 p-2 py-1.5 border-b border-red-500 flex gap-1 items-center w-screen relative left-1/2 right-1/2 -translate-x-1/2'>
                    <AlertTriangle
                      size={18}
                      className='text-red-600 shrink-0 mx-2'
                    />
                    <h1 className='text-red-600 font-normal text-h-sm'>
                      Maaf untuk saat ini Produk yang anda cari tidak tersedia
                    </h1>
                  </div>
                )}
                <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' />

            {/* === SECTION TABS: DESKRIPSI & SPESIFIKASI === */}
            <div className={style['section-card']}>
              <Tabs variant="unstyled">
                <TabList borderBottom="1px solid" borderColor="gray.200">
                  <Tab 
                    _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }}
                    color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}
                  >
                    Deskripsi
                  </Tab>
                  <Tab 
                    _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }}
                    color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}
                  >
                    Spesifikasi
                  </Tab>
                  <Tab 
                    _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }}
                    color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}
                  >
                    Detail Lainnya
                  </Tab>
                </TabList>

                <TabPanels>
                  {/* DESKRIPSI */}
                  <TabPanel px={0} py={6}>
                    <div className='overflow-x-auto text-sm text-gray-700'>
                      <div
                        className={style['description']}
                        dangerouslySetInnerHTML={{
                          __html:
                            !product.description || product.description === '<p><br></p>'
                              ? '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
                              : product.description,
                        }}
                      />
                    </div>
                  </TabPanel>

                  {/* SPESIFIKASI (MATRIKS & SPLIT PIPA) */}
                  <TabPanel px={0} py={2}>
                    <Box border="1px solid" borderColor="gray.200" borderRadius="sm" overflowX="auto">
                        {loadingSpecs ? (
                            <Center py={6}><Spinner color='red.500' /></Center>
                        ) : specsMatrix.length > 0 ? (
                            // Cek Single vs Multi Variant
                            (() => {
                                const isSingleVariant = product.variants.length === 1;
                                const globalAlign = isSingleVariant ? "left" : "center";
                                
                                return (
                                    <Table variant="simple" size="md">
                                        <Thead bg="red.600">
                                            <Tr>
                                                <Th 
                                                    width={isSingleVariant ? "30%" : "20%"} 
                                                    borderColor="whiteAlpha.300" 
                                                    color="white" 
                                                    fontSize="sm" 
                                                    textTransform="none"
                                                    verticalAlign="middle"
                                                >
                                                    Spesifikasi
                                                </Th>
                                                
                                                {product.variants.map(v => (
                                                    <Th 
                                                        key={v.id} 
                                                        borderColor="whiteAlpha.300" 
                                                        color="white" 
                                                        textAlign={globalAlign}
                                                        fontSize="sm" 
                                                        textTransform="none"
                                                        verticalAlign="middle"
                                                    >
                                                        {isSingleVariant ? 'Detail' : (v.attributes && v.attributes.length > 0 ? v.attributes.join(' - ') : v.code)}
                                                    </Th>
                                                ))}
                                            </Tr>
                                        </Thead>
                                        <Tbody>
                                            {specsMatrix.map((row, i) => {
                                                
                                                // CASE 1: GROUPING (Label punya ' : ')
                                                if (row.type === 'group') {
                                                    return (
                                                        <Tr key={i}>
                                                            {/* Header Group Kiri */}
                                                            <Td fontWeight="bold" borderColor="gray.200" fontSize="sm" verticalAlign="middle">{row.label}</Td>
                                                            
                                                            {/* Content Group Kanan */}
                                                            {product.variants.map(v => (
                                                                <Td key={v.id} borderColor="gray.200" textAlign={globalAlign} fontSize="sm" verticalAlign="middle">
                                                                    <div className={`inline-block text-left`}>
                                                                        <div className="flex flex-col gap-0">
                                                                            {row.children.map((child: any, idx: number) => {
                                                                                const rawVal = child.values[v.id];
                                                                                if (!rawVal || rawVal === '-') return null;
                                                                                
                                                                                return (
                                                                                    <div key={idx} className="grid grid-cols-[auto_auto] gap-x-2">
                                                                                        <span className="font-semibold text-gray-600 whitespace-nowrap">
                                                                                            {child.label}:
                                                                                        </span>
                                                                                        <span>{renderSpecValue(rawVal)}</span>
                                                                                    </div>
                                                                                );
                                                                            })}
                                                                        </div>
                                                                    </div>
                                                                </Td>
                                                            ))}
                                                        </Tr>
                                                    );
                                                }

                                                // CASE 2: SINGLE ITEM
                                                return (
                                                    <Tr key={i}>
                                                        <Td fontWeight="bold" borderColor="gray.200" fontSize="sm" verticalAlign="middle">{row.label}</Td>
                                                        {product.variants.map(v => {
                                                            const rawValue = row.values[v.id] || '-';
                                                            return (
                                                                <Td key={v.id} borderColor="gray.200" textAlign={globalAlign} fontSize="sm" verticalAlign="middle">
                                                                    {renderSpecValue(rawValue)}
                                                                </Td>
                                                            );
                                                        })}
                                                    </Tr>
                                                );
                                            })}
                                        </Tbody>
                                    </Table>
                                );
                            })()
                        ) : (
                            <Box p={4} color="gray.500" fontSize="sm"><Text>Spesifikasi teknis belum tersedia.</Text></Box>
                        )}
                    </Box>
                  </TabPanel>
                  
                   {/* DETAIL LAINNYA */}
                   <TabPanel px={0} py={6}><p className="text-gray-500 text-sm">Informasi tambahan belum tersedia.</p></TabPanel>
                </TabPanels>
              </Tabs>
            </div>
          </div>
        </div>

        {isDesktop && (
          <div className='md:w-3/12'>
            {/* 4. INTEGRASI: PASSING HANDLER MODAL KE PRICE ACTION */}
            <PriceAction 
                product={product} 
                onCompare={() => setCompareOpen(true)}
            />
            
            <div className='flex gap-x-5 items-center justify-center py-4'>
              <Button as={Link} href={askAdminUrl} variant='link' target='_blank' colorScheme='gray' leftIcon={<MessageCircleIcon size={18} />} isDisabled={!hasPrice}>Ask Admin</Button>
              <span>|</span>
              <div className={hasPrice ? '' : 'opacity-40 pointer-events-none'}><AddToWishlist productId={product.id} /></div>
              <span>|</span>
              {canShare && (<RWebShare data={{ text: 'Check out this product', title: `${product.name} - Indoteknik.com`, url: (process.env.NEXT_PUBLIC_SELF_HOST || '') + (router?.asPath || '/'), }}><Button variant='link' colorScheme='gray' leftIcon={<Share2Icon size={18} />} isDisabled={!hasPrice}>Share</Button></RWebShare>)}
            </div>

            <div className='h-6' />
            <div className={style['heading']}>Produk Serupa</div>
            <div className='h-4' />
            <SimilarSide product={product} relatedIds={relatedIds} />
          </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} upsellIds={upsellIds} />
          </LazyLoadComponent>
        </div>
        <div className='h-6 md:h-0' />
      </div>
    </>
  );
};

export default ProductDetail;