import React, { useEffect, useState, useRef } from 'react'; // Tambah useRef
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 // Tambah import ini
} 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); // Ref untuk mendeteksi klik

  useOutsideClick({
    ref: searchWrapperRef,
    handler: () => {
        // Jika user klik di luar area search yang aktif, tutup search
        if (activeSearchSlot !== null) {
            setActiveSearchSlot(null);
            setSearchResults([]); // Opsional: bersihkan hasil juga
        }
    },
  });

  // ===========================================================================
  // 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,
          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 productSlot1 = {
         id: targetId,
         sku: targetId, 
         realCode: displayCode, 
         name: mainProduct.name, 
         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, 
              realCode: selectedVar.code,
              price: selectedVar.price,
              image: selectedVar.image
          };
          setProducts(newProducts);
      }
  };

  const handleAddProduct = (searchItem: any, slotIndex: number) => {
      const newProducts = [...products];
      
      const idToAdd = searchItem.id;
      const codeToAdd = searchItem.code; 
      const nameToAdd = searchItem.displayName || searchItem.name;
      const imageToAdd = searchItem.image;
      const priceToAdd = searchItem.lowestPrice?.price || 0; 

      if (newProducts.find(p => p && String(p.id) === String(idToAdd))) {
          toast({ title: "Produk sudah ada", status: "warning", position: "top" });
          return;
      }

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

      setProducts(newProducts);
      setActiveSearchSlot(null);
      setSearchQuery('');
      setSearchResults([]);
  };

  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">
                    
                    {/* WRAPPER SEARCH DENGAN REF */}
                    {/* Hanya berikan ref jika ini adalah slot yang sedang aktif dicari */}
                    <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>

                        {/* HASIL SEARCH */}
                        {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">
                                
                                {/* CEK ATTRIBUTE SET ID */}
                                {!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={2} borderBottom="1px solid #f0f0f0" 
                                                        _hover={{ bg: 'red.50', cursor: 'pointer' }}
                                                        onClick={() => handleAddProduct(res, index)}
                                                    >
                                                        <Flex align="center" gap={2}>
                                                            <Image src={res.image || '/images/no-image-compare.svg'} boxSize="30px" objectFit="contain" onError={(e) => { (e.target as HTMLImageElement).src = '/images/no-image-compare.svg'; }} />
                                                            <Box>
                                                                <Text fontSize="xs" fontWeight="bold" noOfLines={1}>{res.displayName || res.name}</Text>
                                                                <Text fontSize="xs" color="red.500">
                                                                    {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>

                    {/* SLOT KOSONG */}
                    <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>
            ))}

            {/* --- HEADER SPESIFIKASI --- */}
            <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>

            {/* --- MATRIX SPEK --- */}
            {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;