import { useEffect, useMemo, useState } from "react";
import { Button } from "@mantine/core";
import { Spotlight, spotlight } from "@mantine/spotlight";
import type {
  SpotlightActionData,
  SpotlightActionGroupData,
  SpotlightFilterFunction,
} from "@mantine/spotlight";
import Fuse from "fuse.js";

interface Product {
  id: number;
  title: string;
  description: string;
  price: number;
  category: string;
  brand: string;
}

function generate5kMockProducts(): Product[] {
  const categories = [
    "Electronics",
    "Fashion",
    "Home & Living",
    "Beauty & Care",
    "Sports & Outdoors",
    "Automotive",
  ];
  const brands = ["Sony", "Samsung", "Apple", "Nike", "Adidas", "IKEA"];

  return Array.from({ length: 5000 }, (_, index) => {
    const id = index + 1;
    const category = categories[index % categories.length];
    const brand = brands[index % brands.length];

    return {
      id,
      title: `${brand} High-End Item #${id}`,
      description: `Premium ${category.toLowerCase()} product manufactured by ${brand}. High availability in stock.`,
      price: Math.floor(Math.random() * 900) + 10,
      category,
      brand,
    };
  });
}

function groupActionsByCategory(
  actions: SpotlightActionData[],
): SpotlightActionGroupData[] {
  const groupsMap = actions.reduce<Record<string, SpotlightActionData[]>>(
    (acc, action) => {
      const groupName = (action as any)._category || "OTHER";
      if (!acc[groupName]) {
        acc[groupName] = [];
      }
      acc[groupName].push(action);
      return acc;
    },
    {},
  );

  return Object.entries(groupsMap).map(([group, groupActions]) => ({
    group: group.toUpperCase(),
    actions: groupActions,
  }));
}

export function SpotlightTestDemo() {
  const [query, setQuery] = useState("");
  const [flatActions, setFlatActions] = useState<SpotlightActionData[]>([]);

  useEffect(() => {
    setTimeout(() => {
      const products = generate5kMockProducts();

      const actions: SpotlightActionData[] = products.map((product) => ({
        id: `prod-${product.id}`,
        label: product.title,
        description: `${product.brand} | $${product.price} - ${product.description}`,
        _category: product.category,
      }));

      setFlatActions(actions);
    }, 50);
  }, []);

  const fuseIndex = useMemo(() => {
    if (flatActions.length === 0) return null;

    return new Fuse(flatActions, {
      keys: ["label", "description", "_category"],
      threshold: 0.5,
      distance: 100,
      minMatchCharLength: 1,
      ignoreLocation: true,
      useExtendedSearch: false,
    });
  }, [flatActions]);

  const customFuzzyFilter: SpotlightFilterFunction = (searchQuery) => {
    const trimmed = searchQuery.trim();

    if (!trimmed) {
      return groupActionsByCategory(flatActions.slice(0, 20));
    }

    if (!fuseIndex) return [];

    const results = fuseIndex.search(trimmed);
    const matchedItems = results.slice(0, 50).map((r) => r.item);

    return groupActionsByCategory(matchedItems);
  };

  return (
    <>
      <Button onClick={spotlight.open}>Spotlight (Ctrl + K)</Button>
      <Spotlight
        shortcut="ctrl + k"
        actions={flatActions}
        filter={customFuzzyFilter}
        query={query}
        onQueryChange={setQuery}
        nothingFound="Nothing found..."
        highlightQuery
        searchProps={{
          placeholder: "Search...",
        }}
      />
    </>
  );
}