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

import React, { useEffect, useState, useRef } from 'react';
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  Button,
  Text,
  Box,
  Badge,
  Grid,
  GridItem,
  Image,
  Input,
  InputGroup,
  InputLeftElement,
  VStack,
  HStack,
  IconButton,
  Flex,
  Icon,
  Spinner,
  List,
  ListItem,
  useToast,
  Select,
  useOutsideClick
} from '@chakra-ui/react';

import { Search, Trash2 } from 'lucide-react';

// --- HELPER FORMATTING ---
const formatPrice = (price: number) => {
  return new Intl.NumberFormat('id-ID', {
    style: 'currency',
    currency: 'IDR',
    minimumFractionDigits: 0,
  }).format(price);
};

const renderSpecValue = (val: any) => {
  if (!val || val === '-') return '-';
  return String(val).replace(/<[^>]*>?/gm, '');
};

type Props = {
  isOpen: boolean;
  onClose: () => void;
  mainProduct: any;
  selectedVariant: any;
};

const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant }: Props) => {
  const toast = useToast();

  // --- STATE ---
  const [products, setProducts] = useState<(any | null)[]>([null, null, null, null]);
  const [specsMatrix, setSpecsMatrix] = useState<any[]>([]);
  const [isLoadingMatrix, setIsLoadingMatrix] = useState(false);

  // Search State
  const [activeSearchSlot, setActiveSearchSlot] = useState<number | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState<any[]>([]);
  const [isSearching, setIsSearching] = useState(false);

  // --- REF & OUTSIDE CLICK ---
  const searchWrapperRef = useRef<HTMLDivElement>(null);

  useOutsideClick({
    ref: searchWrapperRef,
    handler: () => {
      if (activeSearchSlot !== null) {
        setActiveSearchSlot(null);
        setSearchResults([]);
      }
    },
  });

  // ===========================================================================
  // 1. LOGIC UTAMA: ISI SLOT 1
  // ===========================================================================
  useEffect(() => {
    if (isOpen && mainProduct) {
      let activeItem = selectedVariant;

      if (!activeItem && mainProduct.variants && mainProduct.variants.length > 0) {
        activeItem = mainProduct.variants[0];
      }
      if (!activeItem) {
        activeItem = mainProduct;
      }

      const targetId = activeItem.id;
      const displayCode = activeItem.default_code || activeItem.code || activeItem.sku || mainProduct.default_code || mainProduct.code;

      const variantOptions = mainProduct.variants?.map((v: any) => ({
        id: v.id,
        code: v.default_code || v.code || v.sku,
        name: v.name || v.displayName || v.display_name,
        price: v.price?.price || v.price || 0,
        image: v.image
      })) || [];

      if (variantOptions.length === 0) {
        variantOptions.push({
          id: targetId,
          code: displayCode,
          name: mainProduct.name,
          price: activeItem.price?.price || activeItem.price || 0,
          image: activeItem.image || mainProduct.image
        });
      }

      const displayName = activeItem.name || activeItem.displayName || mainProduct.name;

      const productSlot1 = {
        id: targetId,
        sku: targetId,
        realCode: displayCode,
        name: displayName,
        price: activeItem.price?.price || activeItem.price || mainProduct.lowest_price?.price || 0,
        image: activeItem.image || mainProduct.image,
        variants: variantOptions
      };

      setProducts((prev) => {
        const newSlots = [...prev];
        if (!newSlots[0] || String(newSlots[0].id) !== String(targetId)) {
          newSlots[0] = productSlot1;
        }
        return newSlots;
      });
    }
  }, [isOpen, mainProduct, selectedVariant]);

  // ===========================================================================
  // 2. FETCH SPECS
  // ===========================================================================
  useEffect(() => {
    const validProducts = products.filter(p => p !== null);
    if (!isOpen || validProducts.length === 0) return;

    const fetchSpecs = async () => {
      setIsLoadingMatrix(true);
      try {
        const allSkus = validProducts.map(p => p.sku).join(',');
        const mainSku = validProducts[0]?.sku;

        const res = await fetch(`/api/magento-product?skus=${allSkus}&main_sku=${mainSku}`);
        if (!res.ok) return;

        const data = await res.json();
        if (data.specsMatrix) {
          setSpecsMatrix(data.specsMatrix);
        }
      } catch (err) {
        console.error(err);
      } finally {
        setIsLoadingMatrix(false);
      }
    };

    fetchSpecs();
  }, [products, isOpen]);

  // ===========================================================================
  // 3. SEARCH LOGIC
  // ===========================================================================
  useEffect(() => {
    const delayDebounceFn = setTimeout(async () => {
      if (searchQuery.length > 0 && searchQuery.length < 3) {
        setSearchResults([]);
        return;
      }

      if (activeSearchSlot === null) return;

      const attrSetId = selectedVariant?.attribute_set_id || mainProduct?.attribute_set_id;

      if (!attrSetId) {
        console.warn("Search dibatalkan: Produk utama tidak memiliki attribute_set_id");
        setSearchResults([]);
        setIsSearching(false);
        return;
      }

      setIsSearching(true);
      try {
        const queryParam = searchQuery === '' ? '*' : searchQuery;

        const params = new URLSearchParams({
          source: 'compare',
          q: queryParam,
          limit: '20',
          fq: `attribute_set_id_i:${attrSetId}`
        });

        const res = await fetch(`/api/shop/search?${params.toString()}`);

        if (res.ok) {
          const data = await res.json();
          setSearchResults(data.response?.products || []);
        } else {
          setSearchResults([]);
        }
      } catch (e) {
        setSearchResults([]);
      } finally {
        setIsSearching(false);
      }
    }, 500);

    return () => clearTimeout(delayDebounceFn);
  }, [searchQuery, mainProduct, selectedVariant, activeSearchSlot]);

  // ===========================================================================
  // 4. HANDLERS
  // ===========================================================================
  const handleVariantChange = (slotIndex: number, newId: string) => {
    const currentProduct = products[slotIndex];
    if (!currentProduct || !currentProduct.variants) return;

    const selectedVar = currentProduct.variants.find((v: any) => String(v.id) === String(newId));

    if (selectedVar) {
      const newProducts = [...products];
      newProducts[slotIndex] = {
        ...currentProduct,
        id: selectedVar.id,
        sku: selectedVar.id,
        name: selectedVar.name,
        realCode: selectedVar.code,
        price: selectedVar.price,
        image: selectedVar.image
      };
      setProducts(newProducts);
    }
  };

  const handleAddProduct = async (searchItem: any, slotIndex: number) => {
    if (products.find(p => p && String(p.id) === String(searchItem.id))) {
      toast({ title: "Produk sudah ada", status: "warning", position: "top" });
      return;
    }

    const idToAdd = searchItem.id;
    const codeToAdd = searchItem.defaultCode || searchItem.default_code || searchItem.code;
    const nameToAdd = searchItem.displayName || searchItem.name;
    const imageToAdd = searchItem.image || searchItem.imageS || searchItem.image_s;
    const priceToAdd = searchItem.lowestPrice?.price || searchItem.priceTier1V2F || searchItem.price || 0;

    let parentId = searchItem.templateId ||
      searchItem.templateIdI ||
      searchItem.template_id_i ||
      searchItem.template_id;

    if (!parentId) {
      try {
        const checkParams = new URLSearchParams({
          source: 'upsell',
          q: '*:*',
          fq: `id:${idToAdd}`
        });

        const checkRes = await fetch(`/api/shop/search?${checkParams.toString()}`);
        if (checkRes.ok) {
          const checkData = await checkRes.json();
          const freshItem = checkData.response?.products?.[0];

          if (freshItem) {
            const serverReturnedId = freshItem.id;
            if (String(serverReturnedId) !== String(idToAdd)) {
              parentId = serverReturnedId;
            } else {
              parentId = freshItem.templateId || freshItem.templateIdI || idToAdd;
            }
          }
        }
      } catch (e) {
        console.error("Gagal validasi parent:", e);
        parentId = idToAdd;
      }
    }

    const newProductEntry = {
      id: idToAdd,
      sku: idToAdd,
      realCode: codeToAdd,
      name: nameToAdd,
      price: priceToAdd,
      image: imageToAdd,
      variants: [{
        id: idToAdd,
        code: codeToAdd,
        name: nameToAdd,
        price: priceToAdd,
        image: imageToAdd
      }]
    };

    setProducts((prev) => {
      const newSlots = [...prev];
      newSlots[slotIndex] = newProductEntry;
      return newSlots;
    });

    setActiveSearchSlot(null);
    setSearchQuery('');
    setSearchResults([]);

    if (parentId) {
      try {
        const params = new URLSearchParams({
          source: 'upsell',
          limit: '100',
          fq: `template_id_i:${parentId}`
        });

        const res = await fetch(`/api/shop/search?${params.toString()}`);

        if (res.ok) {
          const data = await res.json();
          const siblings = data.response?.products || [];

          if (siblings.length > 0) {
            const allVariants = siblings.map((s: any) => ({
              id: s.variantId || s.productIdI || s.id,
              code: s.defaultCode || s.default_code || s.code,
              name: s.displayName || s.name || s.nameS,
              price: s.lowestPrice?.price || s.priceTier1V2F || 0,
              image: s.image || s.imageS
            }));

            allVariants.sort((a: any, b: any) =>
              String(a.code).localeCompare(String(b.code))
            );

            setProducts((prev) => {
              const updated = [...prev];
              if (updated[slotIndex] && String(updated[slotIndex].id) === String(idToAdd)) {
                updated[slotIndex] = {
                  ...updated[slotIndex],
                  variants: allVariants
                };
              }
              return updated;
            });
          }
        }
      } catch (error) {
        console.error("Gagal fetch variant lain:", error);
      }
    }
  };

  const handleRemoveProduct = (index: number) => {
    const newProducts = [...products];
    newProducts[index] = null;
    setProducts(newProducts);
    if (newProducts.every(p => p === null)) setSpecsMatrix([]);
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="6xl" scrollBehavior="inside">
      <ModalOverlay />
      <ModalContent height="90vh">
        <ModalHeader borderBottom="1px solid #eee" pb={2}>
          <HStack spacing={3}>
            <Text fontSize="xl" fontWeight="bold">Bandingkan Produk</Text>
            <Badge colorScheme="red" variant="solid" borderRadius="full" px={2}>
              {products.filter(p => p !== null).length} Item
            </Badge>
          </HStack>
          <Text fontSize="sm" color="gray.500" fontWeight="normal" mt={1}>
            Detail Spesifikasi Produk yang kamu pilih
          </Text>
        </ModalHeader>
        <ModalCloseButton />

        <ModalBody p={6} bg="white">
          <Grid templateColumns="200px repeat(4, 1fr)" gap={4}>
            <GridItem />
            {products.map((product, index) => (
              <GridItem key={index} position="relative" minW="0">
                {product ? (
                  <VStack align="stretch" spacing={3} h="100%">
                    {index !== 0 && (
                      <IconButton
                        aria-label="Hapus" icon={<Trash2 size={16} />}
                        size="xs" position="absolute" top={-2} right={-2}
                        colorScheme="red" onClick={() => handleRemoveProduct(index)} zIndex={2}
                      />
                    )}
                    <Box h="160px" display="flex" alignItems="center" justifyContent="center" bg="gray.50" borderRadius="md" p={2}>
                      <Image
                        src={product.image || '/images/no-image-compare.svg'}
                        alt={product.name} maxH="100%" objectFit="contain"
                        onError={(e) => { (e.target as HTMLImageElement).src = '/images/no-image-compare.svg'; }}
                      />
                    </Box>
                    <Box>
                      <Text color="red.600" fontWeight="bold" fontSize="md">
                        {product.price > 0 ? formatPrice(product.price) : 'Hubungi Admin'}
                      </Text>
                      <Text fontSize="xs" fontWeight="bold" noOfLines={3} h="45px" title={product.name} mb={2}>
                        {product.name}
                      </Text>
                    </Box>

                    <Select
                      size="sm" borderRadius="md" fontSize="xs"
                      value={product.id}
                      onChange={(e) => handleVariantChange(index, e.target.value)}
                      isDisabled={false} bg="white"
                    >
                      {product.variants && product.variants.map((v: any) => (
                        <option key={v.id} value={v.id}>{v.code}</option>
                      ))}
                    </Select>

                    <HStack spacing={2}>
                      <IconButton
                        aria-label="Cart"
                        icon={<Image src="/images/keranjang-compare.svg" w="15px" h="15px" objectFit="contain" />}
                        variant="outline"
                        colorScheme="red"
                        size="sm"
                      />
                      <Button as="a" href={`/product/${product.id}`} target="_blank" colorScheme="red" size="sm" flex={1} fontSize="xs">
                        Beli Sekarang
                      </Button>
                    </HStack>
                  </VStack>
                ) : (
                  <VStack align="stretch" spacing={3} h="100%" position="relative">
                    <Box position="relative" w="100%" ref={activeSearchSlot === index ? searchWrapperRef : null}>
                      <InputGroup size="sm">
                        <InputLeftElement pointerEvents="none"><Icon as={Search} color="gray.300" /></InputLeftElement>
                        <Input
                          placeholder="Cari Produk..." borderRadius="md"
                          value={activeSearchSlot === index ? searchQuery : ''}
                          onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }}
                          onChange={(e) => setSearchQuery(e.target.value)}
                        />
                      </InputGroup>

                      {activeSearchSlot === index && (
                        <Box position="absolute" top="35px" left={0} right={0} bg="white" boxShadow="lg" zIndex={10} borderRadius="md" border="1px solid" borderColor="gray.200" maxH="250px" overflowY="auto">
                          {!selectedVariant?.attribute_set_id && !mainProduct?.attribute_set_id ? (
                            <Box p={4} fontSize="xs" color="orange.600" textAlign="center" bg="orange.50">
                              <Text fontWeight="bold" mb={1}>Perbandingan Tidak Tersedia</Text>
                              <Text>Produk utama tidak memiliki data kategori yang valid untuk dibandingkan.</Text>
                            </Box>
                          ) : (
                            <>
                              {isSearching ? (
                                <Box p={4} textAlign="center"><Spinner size="sm" color="red.500" /></Box>
                              ) : searchResults.length > 0 ? (
                                <List spacing={0}>
                                  {searchResults.map((res) => (
                                    <ListItem
                                      key={res.id}
                                      p={3}
                                      borderBottom="1px solid #f0f0f0"
                                      _hover={{ bg: 'red.50', cursor: 'pointer' }}
                                      onClick={() => handleAddProduct(res, index)}
                                    >
                                      <Flex align="flex-start" gap={3}>
                                        <Image
                                          src={res.image || '/images/no-image-compare.svg'}
                                          boxSize="40px"
                                          objectFit="contain"
                                          onError={(e) => { (e.target as HTMLImageElement).src = '/images/no-image-compare.svg'; }}
                                          flexShrink={0}
                                          mt={1}
                                        />
                                        <Box flex={1} w="0">
                                          <Text
                                            fontSize="xs"
                                            fontWeight="bold"
                                            noOfLines={2}
                                            lineHeight="shorter"
                                            whiteSpace="normal"
                                            mb={1}
                                            title={res.displayName || res.name}
                                          >
                                            {res.displayName || res.name}
                                          </Text>
                                          <Text fontSize="xs" color="red.500" fontWeight="bold">
                                            {formatPrice(res.lowestPrice?.price || 0)}
                                          </Text>
                                        </Box>
                                      </Flex>
                                    </ListItem>
                                  ))}
                                </List>
                              ) : (
                                <Box p={3} fontSize="xs" color="gray.500" textAlign="center">
                                  {searchQuery === '' ? 'Menampilkan rekomendasi...' : 'Produk tidak ditemukan.'}
                                </Box>
                              )}
                            </>
                          )}
                        </Box>
                      )}
                    </Box>

                    <Flex
                      direction="column"
                      align="center"
                      justify="center"
                      flex={1}
                      bg="gray.50"
                      borderRadius="md"
                    >
                      <Image
                        src="/images/no-image-compare.svg"
                        alt="Empty Slot"
                        boxSize="125px"
                        mb={2}
                        opacity={0.6}
                      />
                      <Text fontSize="xs" color="gray.500" textAlign="center">
                        Produk Belum Ditambahkan
                      </Text>
                    </Flex>
                  </VStack>
                )}
              </GridItem>
            ))}

            <GridItem colSpan={5} py={6} display="flex" alignItems="center" justifyContent="space-between">
              <Box borderBottom="2px solid" borderColor="gray.100" pb={2} width="100%">
                <HStack>
                  <Text fontSize="lg" fontWeight="bold">Spesifikasi Teknis</Text>
                  {isLoadingMatrix && specsMatrix.length > 0 && (
                    <HStack spacing={2}>
                      <Spinner size="xs" color="red.500" />
                      <Text fontSize="xs" color="gray.500">Updating...</Text>
                    </HStack>
                  )}
                </HStack>
              </Box>
            </GridItem>

            {isLoadingMatrix && specsMatrix.length === 0 ? (
              <GridItem colSpan={5} textAlign="center" py={10}>
                <Spinner color="red.500" thickness="4px" size="xl" />
                <Text mt={2} color="gray.500">Memuat data...</Text>
              </GridItem>
            ) : specsMatrix.length > 0 ? (
              specsMatrix.map((row, rowIndex) => (
                <React.Fragment key={row.code || rowIndex}>
                  <GridItem
                    py={3} px={2}
                    borderBottom="1px solid" borderColor="gray.100"
                    bg={rowIndex % 2 !== 0 ? "white" : "gray.50"}
                    display="flex" alignItems="center"
                    opacity={isLoadingMatrix ? 0.6 : 1}
                    transition="opacity 0.2s"
                  >
                    <Text fontWeight="bold" fontSize="sm" color="gray.700">{row.label}</Text>
                  </GridItem>

                  {products.map((product, colIndex) => {
                    const val = product ? (row.values[String(product.sku)] || '-') : '';
                    return (
                      <GridItem
                        key={`${row.code}-${colIndex}`}
                        py={3} px={2}
                        borderBottom="1px solid" borderColor="gray.100"
                        bg={rowIndex % 2 !== 0 ? "white" : "gray.50"}
                        display="flex" alignItems="center" justifyContent="center" textAlign="center"
                        opacity={isLoadingMatrix ? 0.6 : 1}
                        transition="opacity 0.2s"
                      >
                        {isLoadingMatrix && product && !row.values[String(product.sku)] ? (
                          <Spinner size="xs" color="gray.400" />
                        ) : (
                          <Text fontSize="sm" color="gray.600">{renderSpecValue(val)}</Text>
                        )}
                      </GridItem>
                    );
                  })}
                </React.Fragment>
              ))
            ) : (
              <GridItem colSpan={5} py={10} textAlign="center" color="gray.500" bg="gray.50">
                <Text>Data spesifikasi belum tersedia untuk produk ini.</Text>
              </GridItem>
            )}
          </Grid>
        </ModalBody>
      </ModalContent>
    </Modal>
  );
};

export default ProductComparisonModal;