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

import {
  AutoComplete,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
} from '@choc-ui/chakra-autocomplete';
import style from '../styles/information.module.css';

import dynamic from 'next/dynamic';
import Link from 'next/link';
import { useEffect, useRef, useState } from 'react';
import axios from 'axios';

import currencyFormat from '@/core/utils/currencyFormat';
import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box, Center, Icon } from '@chakra-ui/react';
import { ChevronDownIcon } from '@heroicons/react/24/outline';
import ImageNext from 'next/image';
import { formatToShortText } from '~/libs/formatNumber';
import { createSlug } from '~/libs/slug';
import { IProductDetail } from '~/types/product';
import { useProductDetail } from '../stores/useProductDetail';
import useVariant from '../hook/useVariant';

// Import View Components
import MobileView from '@/core/components/views/MobileView'; // Pastikan path import benar

// Import Modal Compare
import ProductComparisonModal from './ProductComparisonModal';

const Skeleton = dynamic(() =>
  import('@chakra-ui/react').then((mod) => mod.Skeleton)
);

type Props = {
  product: IProductDetail;
};

const Information = ({ product }: Props) => {
  const { selectedVariant, setSelectedVariant, setSla, sla } = useProductDetail();

  const [inputValue, setInputValue] = useState<string | null>(
    selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
  );
  const [disableFilter, setDisableFilter] = useState<boolean>(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const [variantOptions, setVariantOptions] = useState<any[]>(
    product?.variants
  );
  const variantId = selectedVariant?.id;
  const { slaVariant, isLoading } = useVariant({ variantId });

  const [warranties, setWarranties] = useState<Record<string, string>>({});
  const [loadingWarranty, setLoadingWarranty] = useState(false);

  // State untuk Modal Compare
  const [isCompareOpen, setIsCompareOpen] = useState(false);

  useEffect(() => {
    const fetchWarrantyDirectly = async () => {
       if (!product?.variants || product.variants.length === 0) return;

       setLoadingWarranty(true);
       try {
         const skus = product.variants.map((v) => v.id).join(',');
         const mainSku = product.variants[0].id;

         const res = await axios.get('/api/magento-product', {
             params: { skus, main_sku: mainSku }
         });

         if (res.data && res.data.warranties) {
             setWarranties(res.data.warranties);
         }
       } catch (error) {
         console.error("Gagal ambil garansi:", error);
       } finally {
         setLoadingWarranty(false);
       }
    };

    fetchWarrantyDirectly();
  }, [product]);

  useEffect(() => {
    if (selectedVariant) {
      setInputValue(
        selectedVariant?.code +
          (selectedVariant?.attributes[0]
            ? ' - ' + selectedVariant?.attributes[0]
            : '')
      );
    }
  }, [selectedVariant]);

  useEffect(() => {
    if (isLoading) {
      setSla(null);
    }
    if (slaVariant) {
      setSla(slaVariant);
    }
  }, [slaVariant, isLoading, setSla]);

  const handleOnChange = (vals: any) => {
    setDisableFilter(true);
    let code = vals.replace(/\s-\s.*$/, '').trim();
    let variant = product?.variants.find((item) => item.code === code);
    
    if (variant) {
      setSelectedVariant(variant);
      setInputValue(
        variant?.code +
          (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
      );
      setVariantOptions(product?.variants); 
    }
  };

  const handleOnKeyUp = (e: any) => {
    setDisableFilter(false);
    setInputValue(e.target.value);
  };

  const rowStyle = {
    backgroundColor: '#ffffff',
    fontSize: '13px',
    borderBottom: '1px dashed #e2e8f0',
    padding: '8px 0',
    marginBottom: '0px'
  };

  return (
    <div className={style['wrapper']}>
      <div className='realtive mb-5'>
        <label className='form-label mb-2 text-lg text-red-600'>
          Pilih Variant * :{' '}
          <span className='text-gray_r-9 text-sm'>
            {product?.variants?.length} Variants
          </span>{' '}
        </label>
        <AutoComplete
          disableFilter={disableFilter}
          openOnFocus
          className='form-input'
          onChange={(vals) => handleOnChange(vals)}
        >
          <InputGroup>
            <AutoCompleteInput
              ref={inputRef}
              value={inputValue as string}
              onChange={(e) => handleOnKeyUp(e)}
              onFocus={() => setDisableFilter(true)}
            />
            <InputRightElement className='mr-4'>
              <ChevronDownIcon
                className='h-6 w-6 text-gray-500'
                onClick={() => inputRef?.current?.focus()}
              />
            </InputRightElement>
          </InputGroup>

          <AutoCompleteList>
            {variantOptions
              .sort((a: any, b: any) => {
                return a.code.localeCompare(b.code, undefined, { numeric: true, sensitivity: 'base' });
              })
              .map((option, cid) => (
              <AutoCompleteItem
                key={`option-${cid}`}
                value={
                  option.code +
                  (option?.attributes[0] ? ' - ' + option?.attributes[0] : '')
                }
                _selected={
                  option.id === selectedVariant?.id
                    ? { bg: 'gray.300' }
                    : undefined
                }
                textTransform='capitalize'
              >
                <div
                  key={cid}
                  className='flex gap-x-2 w-full justify-between px-3 items-center p-2'
                >
                  <div className='text-small'>
                    {option.code +
                      (option?.attributes[0]
                        ? ' - ' + option?.attributes[0]
                        : '')}
                  </div>
                  <div className={option?.price?.discount_percentage ? 'flex gap-x-4 items-center justify-between' : ''}>
                    {option?.price?.discount_percentage > 0 && (
                      <>
                        <div className='badge-solid-red text-xs'>
                          {Math.floor(option?.price?.discount_percentage)}%
                        </div>
                        <div className='min-w-16 sm:min-w-24 text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
                          {currencyFormat(option?.price?.price)}
                        </div>
                      </>
                    )}
                    <div className='min-w-20 sm:min-w-28 text-danger-500 font-semibold'>
                      {currencyFormat(option?.price?.price_discount)}
                    </div>
                  </div>
                </div>
              </AutoCompleteItem>
            ))}
          </AutoCompleteList>
        </AutoComplete>

        {/* === TOMBOL BANDINGKAN PRODUK (HANYA MOBILE) === */}
        <MobileView>
            <div 
                className="flex items-center justify-between py-3 px-4 mt-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors group"
                onClick={() => setIsCompareOpen(true)}
            >
                <div className="flex items-center gap-3">
                    <div className="bg-red-50 p-2 rounded-full group-hover:bg-red-100 transition-colors">
                        <ImageNext src="/images/logo-bandingkan.svg" width={15} height={15} alt="bandingkan" />
                    </div>
                    <div className="flex flex-col">
                        <span className="text-sm font-bold text-gray-800">Bandingkan Produk</span>
                        <span className="text-xs text-gray-500">Coba bandingkan dengan produk lainnya</span>
                    </div>
                </div>
                <div className="flex items-center gap-2">
                    <span className="bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">Baru</span>
                    <Icon as={ChevronDownIcon} className="w-4 h-4 text-gray-400 transform -rotate-90" />
                </div>
            </div>
        </MobileView>

        {/* Render Modal (Logic open/close ada di dalam component) */}
        {isCompareOpen && (
            <ProductComparisonModal 
                isOpen={isCompareOpen} 
                onClose={() => setIsCompareOpen(false)} 
                mainProduct={product}
                selectedVariant={selectedVariant}
            />
        )}
      </div>

      {/* ITEM CODE */}
      <div className={style['row']} style={rowStyle}>
        <div className={style['label']} style={{ color: '#6b7280' }}>Item Code</div>
        <div className={style['value']}>{selectedVariant?.code}</div>
      </div>

      {/* MANUFACTURE */}
      <div className={style['row']} style={rowStyle}>
        <div className={style['label']} style={{ color: '#6b7280' }}>Manufacture</div>
        <div className={style['value']}>
          {!!product.manufacture.name ? (
            <Link
              href={createSlug(
                '/shop/brands/',
                product.manufacture.name,
                product.manufacture.id.toString()
              )}
            >
              {product?.manufacture.logo ? (
                <ImageNext
                  height={50}
                  width={100}
                  src={product.manufacture.logo}
                  alt={product.manufacture.name}
                  className='h-8 object-fit'
                />
              ) : (
                <p className='font-bold text-red-500'>
                  {product.manufacture.name}
                </p>
              )}
            </Link>
          ) : (
            '-'
          )}
        </div>
      </div>

      {/* BERAT BARANG */}
      <div className={style['row']} style={rowStyle}>
        <div className={style['label']} style={{ color: '#6b7280' }}>Berat Barang</div>
        <div className={style['value']}>
          {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'}
        </div>
      </div>

      {/* TERJUAL */}
      <div className={style['row']} style={{ ...rowStyle, borderBottom: 'none' }}>
        <div className={style['label']} style={{ color: '#6b7280' }}>Terjual</div>
        <div className={style['value']}>
          {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
        </div>
      </div>

      {/* === DETAIL INFORMASI PRODUK === */}
      <div className="mt-6 border-t pt-4">
        <h2 className="hidden md:block font-bold text-gray-800 text-sm mb-4">
          Detail Informasi Produk
        </h2>
        
        <SimpleGrid columns={{ base: 3, md: 3 }} spacing={{ base: 2, md: 10 }}>
            <Flex 
              direction={{ base: 'column', md: 'row' }} 
              align="center" 
              textAlign={{ base: 'center', md: 'left' }}
              gap={{ base: 2, md: 3 }}
            >
                <img src="/images/produk_asli.svg" alt="Distributor Resmi" className="w-8 h-8 md:w-10 md:h-10 shrink-0" />
                <Box>
                    <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text>
                    <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">Jaminan Produk Asli</Text>
                </Box>
            </Flex>

            <Flex 
              direction={{ base: 'column', md: 'row' }} 
              align="center" 
              textAlign={{ base: 'center', md: 'left' }}
              gap={{ base: 2, md: 3 }}
            >
                <img src="/images/estimasi.svg" alt="Estimasi Penyiapan" className="w-8 h-8 md:w-9 md:h-9 shrink-0" />
                <Box>
                    <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text>
                    {isLoading ? (
                        <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
                    ) : (
                        <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">
                            {sla?.sla_date || '-'}
                        </Text>
                    )}
                </Box>
            </Flex>

            <Flex 
              direction={{ base: 'column', md: 'row' }} 
              align="center" 
              textAlign={{ base: 'center', md: 'left' }}
              gap={{ base: 2, md: 3 }}
            >
                <img src="/images/garansi.svg" alt="Garansi Produk" className="w-8 h-8 md:w-10 md:h-10 shrink-0" />
                <Box>
                    <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
                    {loadingWarranty ? (
                          <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
                    ) : (
                        <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">
                            {selectedVariant && warranties[selectedVariant.id] ? warranties[selectedVariant.id] : '-'}
                        </Text>
                    )}
                </Box>
            </Flex>
        </SimpleGrid>
      </div>
    </div>
  );
};

export default Information;