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'; // <--- 1. TAMBAHAN IMPORT AXIOS

import currencyFormat from '@/core/utils/currencyFormat';
import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box } from '@chakra-ui/react';
import { ChevronDownIcon } from '@heroicons/react/24/outline';
import Image 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';

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

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

       setLoadingWarranty(true);
       try {
         // Ambil semua SKU untuk dikirim ke API
         const skus = product.variants.map((v) => v.id).join(',');
         const mainSku = product.variants[0].id;
         console.log("Fetching warranties for SKUs:", skus);
         console.log("Main SKU:", mainSku);

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

         // Simpan hasil ke state lokal
         if (res.data && res.data.warranties) {
             setWarranties(res.data.warranties);
         }
         console.log("Warranties API Response:", res);
         console.log("Warranties fetched:", 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);
  };

  // STYLE CUSTOM UNTUK BARIS (Item Code, dll)
  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>
      </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 ? (
                <Image
                  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 (Updated Layout) === */}
      <div className="mt-6 border-t pt-4">
        <h2 className="font-bold text-gray-800 text-sm mb-4">Detail Informasi Produk</h2>
        
        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
            {/* 1. Distributor Resmi */}
            <Flex align="center" className="gap-3">
                <img 
                    src="/images/produk_asli.svg" 
                    alt="Distributor Resmi" 
                    className="w-10 h-10 shrink-0" 
                />
                <Box>
                    <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text>
                    <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">Jaminan Produk Asli</Text>
                </Box>
            </Flex>

            {/* 2. Estimasi Penyiapan */}
            <Flex align="center" className="gap-3">
                <img 
                    src="/images/estimasi.svg" 
                    alt="Estimasi Penyiapan" 
                    className="w-9 h-9 shrink-0" 
                />
                <Box>
                    <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text>
                    {isLoading ? (
                        <Skeleton height="12px" width="60px" mt="2px" />
                    ) : (
                        <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
                            {sla?.sla_date || '3 - 7 Hari'}
                        </Text>
                    )}
                </Box>
            </Flex>

            {/* 3. Garansi Produk */}
            <Flex align="center" className="gap-3">
                <img 
                    src="/images/garansi.svg" 
                    alt="Garansi Produk" 
                    className="w-10 h-10 shrink-0" 
                />
                <Box>
                    <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
                    
                    {/* Menggunakan Loading State & Data dari 'warranties' */}
                    {loadingWarranty ? (
                         <Skeleton height="12px" width="80px" mt="2px" />
                    ) : (
                        <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
                            {selectedVariant && warranties[selectedVariant.id] 
                                ? warranties[selectedVariant.id] 
                                : '-'}
                        </Text>
                    )}
                </Box>
            </Flex>
        </SimpleGrid>
      </div>

    </div>
  );
};

export default Information;