'use client';

import React, { useRef, useState } from 'react';
import {
  Combobox as ChakraCombobox,
  Portal,
  useListCollection,
  Text,
  Box,
  ComboboxRootProps,
} from '@chakra-ui/react';

interface ComboboxItem {
  label: string;
  value: string;
  [key: string]: any;
}

interface ComboboxProps
  extends Omit<ComboboxRootProps, 'collection' | 'onChange'> {
  items: ComboboxItem[];
  onBlur?: () => void;
  placeholder?: string;
  name?: string;
  label?: string;
  emptyMessage?: string;
  footerMessage?: string;
  showFooter?: boolean;
  onChange?: (value: string[]) => void;
}

export const Combobox: React.FC<ComboboxProps> = ({
  items,
  value = [],
  onChange,
  onBlur,
  placeholder = 'Search...',
  name,
  label,
  emptyMessage = 'No items found',
  footerMessage,
  showFooter = false,
  ...props
}) => {
  const { collection, filter } = useListCollection({
    initialItems: items,
    filter: (itemText: string, filterText: string, item: ComboboxItem) => {
      const searchText = filterText.toLowerCase();
      return item.label?.toLowerCase()?.includes(searchText) || false;
    },
  });

  const handleValueChange = (details: any) => {
    onChange?.(details.value as any);
  };

  const selectedItem = items.find((item) => value[0] === item.value);
  const defaultInputValue = selectedItem?.label ?? '';

  const highlightedItemRef = useRef<ComboboxItem | null>(null);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <ChakraCombobox.Root
      collection={collection}
      value={value}
      defaultInputValue={defaultInputValue}
      selectionBehavior="replace"
      open={isOpen}
      onOpenChange={(details) => setIsOpen(details.open)}
      onHighlightChange={(details) => {
        // Store the highlighted item in the ref!
        highlightedItemRef.current = details.highlightedItem;
      }}
      onKeyDown={(e) => {
        if (e.key === 'Enter') {
          e.preventDefault();

          // Use the ref to get the actually highlighted item!
          const highlighted = highlightedItemRef.current;
          if (highlighted) {
            onChange?.([highlighted.value]);
            setIsOpen(false); // 🎯 Close the dropdown!
          } else if (collection.items.length > 0) {
            // Fallback to first item if no highlight tracked
            onChange?.([collection.items[0].value]);
            setIsOpen(false);
          }
        }
      }}
      onValueChange={handleValueChange}
      onInputValueChange={(e) => filter(e.inputValue)}
      {...props}
    >
      {label && <ChakraCombobox.Label>{label}</ChakraCombobox.Label>}

      <ChakraCombobox.Control>
        <ChakraCombobox.Input
          placeholder={placeholder}
          name={name}
          onBlur={onBlur}
          backgroundColor="white"
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              e.preventDefault(); // happens after Chakra selects
            }
          }}
        />
        <ChakraCombobox.IndicatorGroup>
          <ChakraCombobox.ClearTrigger cursor="pointer" />
          <ChakraCombobox.Trigger />
        </ChakraCombobox.IndicatorGroup>
      </ChakraCombobox.Control>

      <Portal>
        <ChakraCombobox.Positioner>
          <ChakraCombobox.Content>
            <ChakraCombobox.Empty>{emptyMessage}</ChakraCombobox.Empty>
            {collection.items.map((item) => (
              <ChakraCombobox.Item
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    console.log('enter');
                    e.stopPropagation();
                  }
                }}
                item={item}
                key={item.value}
              >
                {item.label}
                <ChakraCombobox.ItemIndicator />
              </ChakraCombobox.Item>
            ))}

            {showFooter && collection.items.length > 0 && footerMessage && (
              <Box px={3} py={2} borderTop="1px solid" borderColor="gray.100">
                <Text fontSize="xs" color="gray.500">
                  {footerMessage}
                </Text>
              </Box>
            )}
          </ChakraCombobox.Content>
        </ChakraCombobox.Positioner>
      </Portal>
    </ChakraCombobox.Root>
  );
};