import React from 'react';
import { Box, Stack } from '@mantine/core';
import { getSubcategoryLabel, ToolRegistryEntry } from '@app/data/toolsTaxonomy';
import { ToolId } from '@app/types/toolId';
import ToolButton from '@app/components/tools/toolPicker/ToolButton';
import { useTranslation } from 'react-i18next';
import { useToolSections } from '@app/hooks/useToolSections';
import SubcategoryHeader from '@app/components/tools/shared/SubcategoryHeader';
import NoToolsFound from '@app/components/tools/shared/NoToolsFound';
import "@app/components/tools/toolPicker/ToolPicker.css";

interface SearchResultsProps {
  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
  onSelect: (id: string) => void;
  searchQuery?: string;
}

const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect, searchQuery }) => {
  const { t } = useTranslation();
  const { searchGroups } = useToolSections(filteredTools, searchQuery);

  // Create a map of matched text for quick lookup
  const matchedTextMap = new Map<string, string>();
  if (filteredTools && Array.isArray(filteredTools)) {
    filteredTools.forEach(({ item: [id], matchedText }) => {
      if (matchedText) matchedTextMap.set(id, matchedText);
    });
  }

  if (searchGroups.length === 0) {
    return <NoToolsFound />;
  }

  return (
    <Stack p="sm" gap="xs"
        className="tool-picker-scrollable">
      {searchGroups.map(group => (
        <Box key={group.subcategoryId}  w="100%">
          <SubcategoryHeader label={getSubcategoryLabel(t, group.subcategoryId)} />
          <Stack  gap="xs">
            {group.tools.map(({ id, tool }) => {
              const matchedText = matchedTextMap.get(id);
              // Check if the match was from synonyms and show the actual synonym that matched
              const isSynonymMatch = matchedText && tool.synonyms?.some(synonym =>
                matchedText.toLowerCase().includes(synonym.toLowerCase())
              );
              const matchedSynonym = isSynonymMatch ? tool.synonyms?.find(synonym =>
                matchedText.toLowerCase().includes(synonym.toLowerCase())
              ) : undefined;

              return (
                <ToolButton
                  key={id}
                  id={id}
                  tool={tool}
                  isSelected={false}
                  onSelect={onSelect}
                  matchedSynonym={matchedSynonym}
                />
              );
            })}
          </Stack>
        </Box>
      ))}
      {/* Global spacer to allow scrolling past last row in search mode */}
      <div aria-hidden style={{ height: 200 }} />
    </Stack>
  );
};

export default SearchResults;