import { TAILWIND_HEX } from "@/features/board/lib/colors/tailwind"
import {
  AirplaneIcon,
  AirplaneTakeoffIcon,
  AlarmIcon,
  AnchorIcon,
  ArchiveIcon,
  AtIcon,
  AtomIcon,
  BabyCarriageIcon,
  BabyIcon,
  BackpackIcon,
  BandaidsIcon,
  BankIcon,
  BarbellIcon,
  BaseballCapIcon,
  BasketIcon,
  BasketballIcon,
  BathtubIcon,
  BatteryFullIcon,
  BeerBottleIcon,
  BellIcon,
  BellRingingIcon,
  BellSimpleIcon,
  BicycleIcon,
  BirdIcon,
  BoatIcon,
  BookBookmarkIcon,
  BookIcon,
  BookOpenIcon,
  BookmarkIcon,
  BookmarksIcon,
  BrainIcon,
  BreadIcon,
  BriefcaseIcon,
  BugIcon,
  BusIcon,
  ButterflyIcon,
  CactusIcon,
  CakeIcon,
  CalendarBlankIcon,
  CalendarCheckIcon,
  CalendarIcon,
  CalendarPlusIcon,
  CameraIcon,
  CarIcon,
  CardsIcon,
  CarrotIcon,
  CatIcon,
  ChairIcon,
  ChalkboardSimpleIcon,
  ChampagneIcon,
  ChartBarIcon,
  ChartLineUpIcon,
  ChartPieIcon,
  ChatCenteredTextIcon,
  ChatCircleIcon,
  ChatTeardropIcon,
  CherriesIcon,
  CircleIcon,
  ClipboardIcon,
  ClipboardTextIcon,
  ClockCountdownIcon,
  ClockIcon,
  CloudFogIcon,
  CloudLightningIcon,
  CloudRainIcon,
  CloudSnowIcon,
  CloudSunIcon,
  CoatHangerIcon,
  CodeIcon,
  CoffeeIcon,
  CoinsIcon,
  CompassIcon,
  ConfettiIcon,
  CookieIcon,
  CouchIcon,
  CowIcon,
  CpuIcon,
  CreditCardIcon,
  CrosshairIcon,
  CrownIcon,
  CurrencyDollarIcon,
  CurrencyEurIcon,
  DatabaseIcon,
  DesktopIcon,
  DiamondIcon,
  DnaIcon,
  DogIcon,
  DropHalfIcon,
  DropIcon,
  EggIcon,
  EnvelopeIcon,
  EnvelopeSimpleIcon,
  EyeIcon,
  FadersIcon,
  FileDocIcon,
  FilePdfIcon,
  FileTextIcon,
  FilesIcon,
  FilmReelIcon,
  FilmSlateIcon,
  FirstAidIcon,
  FishIcon,
  FlameIcon,
  FlaskIcon,
  FlowerIcon,
  FolderIcon,
  FolderOpenIcon,
  FootballIcon,
  ForkKnifeIcon,
  GameControllerIcon,
  GasPumpIcon,
  GearIcon,
  GenderFemaleIcon,
  GenderIntersexIcon,
  GenderMaleIcon,
  GiftIcon,
  GlobeIcon,
  HamburgerIcon,
  HammerIcon,
  HandCoinsIcon,
  HandFistIcon,
  HandHeartIcon,
  HandWavingIcon,
  HandshakeIcon,
  HashIcon,
  HeadphonesIcon,
  HeartIcon,
  HeartbeatIcon,
  HexagonIcon,
  HighlighterIcon,
  HorseIcon,
  HourglassIcon,
  IceCreamIcon,
  ImageIcon,
  ImageSquareIcon,
  KanbanIcon,
  KeyIcon,
  KeyboardIcon,
  KnifeIcon,
  LampIcon,
  LaptopIcon,
  LeafIcon,
  LegoIcon,
  LightbulbIcon,
  LightningIcon,
  LockIcon,
  LockOpenIcon,
  MagicWandIcon,
  MagnetIcon,
  MagnifyingGlassIcon,
  MapPinIcon,
  MapTrifoldIcon,
  MartiniIcon,
  MaskHappyIcon,
  MaskSadIcon,
  MedalIcon,
  MegaphoneIcon,
  MicrophoneIcon,
  MicroscopeIcon,
  MonitorIcon,
  MoonIcon,
  MotorcycleIcon,
  MountainsIcon,
  MouseSimpleIcon,
  MusicNoteIcon,
  MusicNotesIcon,
  NoteIcon,
  NotePencilIcon,
  NotepadIcon,
  OctagonIcon,
  PackageIcon,
  PaperclipHorizontalIcon,
  ParachuteIcon,
  PathIcon,
  PawPrintIcon,
  PenIcon,
  PencilIcon,
  PersonSimpleBikeIcon,
  PersonSimpleIcon,
  PersonSimpleRunIcon,
  PhoneCallIcon,
  PiggyBankIcon,
  PillIcon,
  PizzaIcon,
  PlantIcon,
  PlugIcon,
  PolygonIcon,
  PowerIcon,
  PushPinIcon,
  PuzzlePieceIcon,
  RabbitIcon,
  RainbowCloudIcon,
  RainbowIcon,
  ReceiptIcon,
  RecycleIcon,
  RobotIcon,
  SailboatIcon,
  ScissorsIcon,
  ShieldIcon,
  ShirtFoldedIcon,
  ShoppingBagIcon,
  ShrimpIcon,
  SignpostIcon,
  SmileyAngryIcon,
  SmileyIcon,
  SmileyMehIcon,
  SmileyNervousIcon,
  SmileySadIcon,
  SmileyWinkIcon,
  SmileyXEyesIcon,
  SneakerIcon,
  SnowflakeIcon,
  SoccerBallIcon,
  SparkleIcon,
  SpeakerHighIcon,
  SquareIcon,
  StackIcon,
  StampIcon,
  StarIcon,
  StudentIcon,
  SunHorizonIcon,
  SunIcon,
  SwordIcon,
  SyringeIcon,
  TagIcon,
  TargetIcon,
  TaxiIcon,
  TelevisionIcon,
  TennisBallIcon,
  TestTubeIcon,
  ThermometerColdIcon,
  ThermometerHotIcon,
  ThermometerIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
  TimerIcon,
  ToolboxIcon,
  ToothIcon,
  TrainIcon,
  TrashIcon,
  TreasureChestIcon,
  TreeEvergreenIcon,
  TreeIcon,
  TreePalmIcon,
  TriangleIcon,
  TrophyIcon,
  TruckIcon,
  UmbrellaIcon,
  UserCircleIcon,
  UserIcon,
  UsersIcon,
  VideoCameraIcon,
  VinylRecordIcon,
  VolleyballIcon,
  WalletIcon,
  WatchIcon,
  WaveSawtoothIcon,
  WaveTriangleIcon,
  WindIcon,
  WineIcon,
  WrenchIcon,
} from "@phosphor-icons/react"
import type { Icon } from "@phosphor-icons/react"


export type PickerIconEntry = {
  name: string
  component: Icon
}


export type PickerCategory = {
  id: string
  label: string
  icons: ReadonlyArray<PickerIconEntry>
}


/**
 * Curated Notion-style picker set. Lives in its own module so the bundle is
 * only paid when the picker (or future name->component lookups) is loaded
 * via dynamic import.
 */
export const PICKER_CATEGORIES: ReadonlyArray<PickerCategory> = [
  {
    id: "objects",
    label: "Objects",
    icons: [
      { name: "Lightbulb", component: LightbulbIcon },
      { name: "Key", component: KeyIcon },
      { name: "Gift", component: GiftIcon },
      { name: "Crown", component: CrownIcon },
      { name: "MagnifyingGlass", component: MagnifyingGlassIcon },
      { name: "Umbrella", component: UmbrellaIcon },
      { name: "Backpack", component: BackpackIcon },
      { name: "BatteryFull", component: BatteryFullIcon },
      { name: "Book", component: BookIcon },
      { name: "BookOpen", component: BookOpenIcon },
      { name: "BookBookmark", component: BookBookmarkIcon },
      { name: "Bookmark", component: BookmarkIcon },
      { name: "Basket", component: BasketIcon },
      { name: "Package", component: PackageIcon },
      { name: "Couch", component: CouchIcon },
      { name: "Knife", component: KnifeIcon },
      { name: "Lamp", component: LampIcon },
      { name: "MagicWand", component: MagicWandIcon },
      { name: "MaskHappy", component: MaskHappyIcon },
      { name: "Parachute", component: ParachuteIcon },
      { name: "Pen", component: PenIcon },
      { name: "Pencil", component: PencilIcon },
      { name: "Recycle", component: RecycleIcon },
      { name: "Scissors", component: ScissorsIcon },
      { name: "ShirtFolded", component: ShirtFoldedIcon },
      { name: "ShoppingBag", component: ShoppingBagIcon },
      { name: "Sneaker", component: SneakerIcon },
      { name: "Sword", component: SwordIcon },
      { name: "Toolbox", component: ToolboxIcon },
      { name: "Trash", component: TrashIcon },
      { name: "TreasureChest", component: TreasureChestIcon },
      { name: "Chair", component: ChairIcon },
      { name: "CoatHanger", component: CoatHangerIcon },
      { name: "Lego", component: LegoIcon },
      { name: "Martini", component: MartiniIcon },
      { name: "BabyCarriage", component: BabyCarriageIcon },
      { name: "Anchor", component: AnchorIcon },
      { name: "Bell", component: BellIcon },
      { name: "BellSimple", component: BellSimpleIcon },
      { name: "Bathtub", component: BathtubIcon },
    ],
  },
  {
    id: "office",
    label: "Office",
    icons: [
      { name: "Briefcase", component: BriefcaseIcon },
      { name: "Folder", component: FolderIcon },
      { name: "FolderOpen", component: FolderOpenIcon },
      { name: "FileText", component: FileTextIcon },
      { name: "FileDoc", component: FileDocIcon },
      { name: "FilePdf", component: FilePdfIcon },
      { name: "Files", component: FilesIcon },
      { name: "Clipboard", component: ClipboardIcon },
      { name: "ClipboardText", component: ClipboardTextIcon },
      { name: "PaperclipHorizontal", component: PaperclipHorizontalIcon },
      { name: "Stamp", component: StampIcon },
      { name: "Highlighter", component: HighlighterIcon },
      { name: "Notepad", component: NotepadIcon },
      { name: "Note", component: NoteIcon },
      { name: "NotePencil", component: NotePencilIcon },
      { name: "Calendar", component: CalendarIcon },
      { name: "CalendarBlank", component: CalendarBlankIcon },
      { name: "Archive", component: ArchiveIcon },
      { name: "PushPin", component: PushPinIcon },
      { name: "Tag", component: TagIcon },
      { name: "Stack", component: StackIcon },
      { name: "Kanban", component: KanbanIcon },
      { name: "ChalkboardSimple", component: ChalkboardSimpleIcon },
      { name: "Receipt", component: ReceiptIcon },
      { name: "Bookmarks", component: BookmarksIcon },
    ],
  },
  {
    id: "tech",
    label: "Tech",
    icons: [
      { name: "Wrench", component: WrenchIcon },
      { name: "Gear", component: GearIcon },
      { name: "Hammer", component: HammerIcon },
      { name: "Plug", component: PlugIcon },
      { name: "Code", component: CodeIcon },
      { name: "Cpu", component: CpuIcon },
      { name: "Database", component: DatabaseIcon },
      { name: "Monitor", component: MonitorIcon },
      { name: "Desktop", component: DesktopIcon },
      { name: "Laptop", component: LaptopIcon },
      { name: "MouseSimple", component: MouseSimpleIcon },
      { name: "Keyboard", component: KeyboardIcon },
      { name: "Power", component: PowerIcon },
      { name: "Lightning", component: LightningIcon },
      { name: "Lock", component: LockIcon },
      { name: "LockOpen", component: LockOpenIcon },
      { name: "Shield", component: ShieldIcon },
      { name: "Magnet", component: MagnetIcon },
      { name: "Robot", component: RobotIcon },
      { name: "Faders", component: FadersIcon },
    ],
  },
  {
    id: "people",
    label: "People",
    icons: [
      { name: "User", component: UserIcon },
      { name: "Users", component: UsersIcon },
      { name: "UserCircle", component: UserCircleIcon },
      { name: "Student", component: StudentIcon },
      { name: "Baby", component: BabyIcon },
      { name: "HandHeart", component: HandHeartIcon },
      { name: "HandWaving", component: HandWavingIcon },
      { name: "Handshake", component: HandshakeIcon },
      { name: "GenderIntersex", component: GenderIntersexIcon },
      { name: "GenderMale", component: GenderMaleIcon },
      { name: "GenderFemale", component: GenderFemaleIcon },
      { name: "HandFist", component: HandFistIcon },
      { name: "ThumbsUp", component: ThumbsUpIcon },
      { name: "ThumbsDown", component: ThumbsDownIcon },
      { name: "MaskSad", component: MaskSadIcon },
      { name: "PersonSimple", component: PersonSimpleIcon },
      { name: "PersonSimpleRun", component: PersonSimpleRunIcon },
      { name: "PersonSimpleBike", component: PersonSimpleBikeIcon },
    ],
  },
  {
    id: "nature",
    label: "Nature",
    icons: [
      { name: "Tree", component: TreeIcon },
      { name: "Plant", component: PlantIcon },
      { name: "Leaf", component: LeafIcon },
      { name: "Flower", component: FlowerIcon },
      { name: "Mountains", component: MountainsIcon },
      { name: "Cactus", component: CactusIcon },
      { name: "TreeEvergreen", component: TreeEvergreenIcon },
      { name: "TreePalm", component: TreePalmIcon },
      { name: "Wind", component: WindIcon },
      { name: "Drop", component: DropIcon },
      { name: "DropHalf", component: DropHalfIcon },
      { name: "Flame", component: FlameIcon },
      { name: "Snowflake", component: SnowflakeIcon },
      { name: "Sun", component: SunIcon },
      { name: "Moon", component: MoonIcon },
      { name: "Star", component: StarIcon },
      { name: "Globe", component: GlobeIcon },
      { name: "Sparkle", component: SparkleIcon },
    ],
  },
  {
    id: "animals",
    label: "Animals",
    icons: [
      { name: "Dog", component: DogIcon },
      { name: "Cat", component: CatIcon },
      { name: "Bird", component: BirdIcon },
      { name: "Fish", component: FishIcon },
      { name: "Butterfly", component: ButterflyIcon },
      { name: "PawPrint", component: PawPrintIcon },
      { name: "Cow", component: CowIcon },
      { name: "Horse", component: HorseIcon },
      { name: "Rabbit", component: RabbitIcon },
      { name: "Bug", component: BugIcon },
      { name: "Shrimp", component: ShrimpIcon },
    ],
  },
  {
    id: "weather",
    label: "Weather",
    icons: [
      { name: "CloudRain", component: CloudRainIcon },
      { name: "CloudSnow", component: CloudSnowIcon },
      { name: "CloudSun", component: CloudSunIcon },
      { name: "CloudFog", component: CloudFogIcon },
      { name: "CloudLightning", component: CloudLightningIcon },
      { name: "Rainbow", component: RainbowIcon },
      { name: "RainbowCloud", component: RainbowCloudIcon },
      { name: "Thermometer", component: ThermometerIcon },
      { name: "ThermometerHot", component: ThermometerHotIcon },
      { name: "ThermometerCold", component: ThermometerColdIcon },
    ],
  },
  {
    id: "travel",
    label: "Travel",
    icons: [
      { name: "MapPin", component: MapPinIcon },
      { name: "MapTrifold", component: MapTrifoldIcon },
      { name: "Compass", component: CompassIcon },
      { name: "Airplane", component: AirplaneIcon },
      { name: "AirplaneTakeoff", component: AirplaneTakeoffIcon },
      { name: "Car", component: CarIcon },
      { name: "Train", component: TrainIcon },
      { name: "Bicycle", component: BicycleIcon },
      { name: "Motorcycle", component: MotorcycleIcon },
      { name: "Boat", component: BoatIcon },
      { name: "Sailboat", component: SailboatIcon },
      { name: "Bus", component: BusIcon },
      { name: "Taxi", component: TaxiIcon },
      { name: "Truck", component: TruckIcon },
      { name: "GasPump", component: GasPumpIcon },
      { name: "Path", component: PathIcon },
      { name: "Signpost", component: SignpostIcon },
      { name: "SunHorizon", component: SunHorizonIcon },
    ],
  },
  {
    id: "food",
    label: "Food & Drink",
    icons: [
      { name: "Coffee", component: CoffeeIcon },
      { name: "ForkKnife", component: ForkKnifeIcon },
      { name: "Pizza", component: PizzaIcon },
      { name: "Hamburger", component: HamburgerIcon },
      { name: "Wine", component: WineIcon },
      { name: "Cake", component: CakeIcon },
      { name: "Bread", component: BreadIcon },
      { name: "IceCream", component: IceCreamIcon },
      { name: "Cookie", component: CookieIcon },
      { name: "BeerBottle", component: BeerBottleIcon },
      { name: "Egg", component: EggIcon },
      { name: "Carrot", component: CarrotIcon },
      { name: "Cherries", component: CherriesIcon },
      { name: "Champagne", component: ChampagneIcon },
    ],
  },
  {
    id: "sports",
    label: "Sports & Games",
    icons: [
      { name: "SoccerBall", component: SoccerBallIcon },
      { name: "BaseballCap", component: BaseballCapIcon },
      { name: "Basketball", component: BasketballIcon },
      { name: "Football", component: FootballIcon },
      { name: "TennisBall", component: TennisBallIcon },
      { name: "Volleyball", component: VolleyballIcon },
      { name: "Barbell", component: BarbellIcon },
      { name: "GameController", component: GameControllerIcon },
      { name: "Trophy", component: TrophyIcon },
      { name: "PuzzlePiece", component: PuzzlePieceIcon },
      { name: "Confetti", component: ConfettiIcon },
      { name: "Target", component: TargetIcon },
      { name: "Medal", component: MedalIcon },
      { name: "Cards", component: CardsIcon },
    ],
  },
  {
    id: "communication",
    label: "Communication",
    icons: [
      { name: "ChatCircle", component: ChatCircleIcon },
      { name: "ChatCenteredText", component: ChatCenteredTextIcon },
      { name: "ChatTeardrop", component: ChatTeardropIcon },
      { name: "Envelope", component: EnvelopeIcon },
      { name: "EnvelopeSimple", component: EnvelopeSimpleIcon },
      { name: "PhoneCall", component: PhoneCallIcon },
      { name: "Megaphone", component: MegaphoneIcon },
      { name: "BellRinging", component: BellRingingIcon },
      { name: "At", component: AtIcon },
      { name: "Hash", component: HashIcon },
    ],
  },
  {
    id: "media",
    label: "Media",
    icons: [
      { name: "Microphone", component: MicrophoneIcon },
      { name: "Headphones", component: HeadphonesIcon },
      { name: "Camera", component: CameraIcon },
      { name: "MusicNote", component: MusicNoteIcon },
      { name: "MusicNotes", component: MusicNotesIcon },
      { name: "FilmReel", component: FilmReelIcon },
      { name: "FilmSlate", component: FilmSlateIcon },
      { name: "Image", component: ImageIcon },
      { name: "ImageSquare", component: ImageSquareIcon },
      { name: "VinylRecord", component: VinylRecordIcon },
      { name: "SpeakerHigh", component: SpeakerHighIcon },
      { name: "Television", component: TelevisionIcon },
      { name: "VideoCamera", component: VideoCameraIcon },
    ],
  },
  {
    id: "finance",
    label: "Finance",
    icons: [
      { name: "CurrencyDollar", component: CurrencyDollarIcon },
      { name: "CurrencyEur", component: CurrencyEurIcon },
      { name: "CreditCard", component: CreditCardIcon },
      { name: "PiggyBank", component: PiggyBankIcon },
      { name: "ChartLineUp", component: ChartLineUpIcon },
      { name: "ChartBar", component: ChartBarIcon },
      { name: "ChartPie", component: ChartPieIcon },
      { name: "Wallet", component: WalletIcon },
      { name: "HandCoins", component: HandCoinsIcon },
      { name: "Bank", component: BankIcon },
      { name: "Coins", component: CoinsIcon },
    ],
  },
  {
    id: "science",
    label: "Science & Health",
    icons: [
      { name: "Atom", component: AtomIcon },
      { name: "Brain", component: BrainIcon },
      { name: "FirstAid", component: FirstAidIcon },
      { name: "Pill", component: PillIcon },
      { name: "Microscope", component: MicroscopeIcon },
      { name: "TestTube", component: TestTubeIcon },
      { name: "Heartbeat", component: HeartbeatIcon },
      { name: "Syringe", component: SyringeIcon },
      { name: "Dna", component: DnaIcon },
      { name: "Flask", component: FlaskIcon },
      { name: "Tooth", component: ToothIcon },
      { name: "Eye", component: EyeIcon },
      { name: "Bandaids", component: BandaidsIcon },
    ],
  },
  {
    id: "time",
    label: "Time",
    icons: [
      { name: "Clock", component: ClockIcon },
      { name: "ClockCountdown", component: ClockCountdownIcon },
      { name: "CalendarCheck", component: CalendarCheckIcon },
      { name: "CalendarPlus", component: CalendarPlusIcon },
      { name: "Hourglass", component: HourglassIcon },
      { name: "Alarm", component: AlarmIcon },
      { name: "Timer", component: TimerIcon },
      { name: "Watch", component: WatchIcon },
    ],
  },
  {
    id: "symbols",
    label: "Symbols & Shapes",
    icons: [
      { name: "Heart", component: HeartIcon },
      { name: "Diamond", component: DiamondIcon },
      { name: "Hexagon", component: HexagonIcon },
      { name: "Triangle", component: TriangleIcon },
      { name: "Square", component: SquareIcon },
      { name: "Circle", component: CircleIcon },
      { name: "Polygon", component: PolygonIcon },
      { name: "Octagon", component: OctagonIcon },
      { name: "WaveSawtooth", component: WaveSawtoothIcon },
      { name: "WaveTriangle", component: WaveTriangleIcon },
      { name: "Smiley", component: SmileyIcon },
      { name: "SmileyMeh", component: SmileyMehIcon },
      { name: "SmileySad", component: SmileySadIcon },
      { name: "SmileyXEyes", component: SmileyXEyesIcon },
      { name: "SmileyWink", component: SmileyWinkIcon },
      { name: "SmileyAngry", component: SmileyAngryIcon },
      { name: "SmileyNervous", component: SmileyNervousIcon },
      { name: "Crosshair", component: CrosshairIcon },
    ],
  },
] as const


/**
 * Flat name -> component map for render-path lookups (e.g. rendering an
 * icon that was previously persisted by name).
 */
export const PICKER_ICON_MAP: ReadonlyMap<string, Icon> = new Map(
  PICKER_CATEGORIES.flatMap((category) =>
    category.icons.map(({ name, component }) => [name, component] as const),
  ),
)


/**
 * Splits a PascalCase icon name into lowercase words for search matching.
 * e.g. "MapPin" -> ["map", "pin"]
 */
export const tokenizeIconName = (name: string): string[] =>
  name
    .replace(/([a-z])([A-Z])/g, "$1 $2")
    .toLowerCase()
    .split(/\s+/)
    .filter(Boolean)


export type ColorPreset = {
  id: string
  label: string
  /**
   * Persisted as-is. Either a hex `#xxxxxx` (paper-adapted Tailwind palette)
   * or a CSS variable reference like `var(--color-foreground)`. `null` means
   * "no tint" — the renderer falls back to `currentColor`.
   */
  value: string | null
}


/**
 * Curated Notion-style color palette for the icon picker. Hex values come
 * from the project's paper-adapted Tailwind palette (TAILWIND_HEX) so they
 * sit naturally next to node colors elsewhere in the app. The "default"
 * preset uses a CSS variable so it follows the active theme automatically.
 */
export const ICON_COLOR_PRESETS: ReadonlyArray<ColorPreset> = [
  { id: "default", label: "Default", value: "var(--color-foreground)" },
  { id: "gray",    label: "Gray",    value: TAILWIND_HEX.gray[600] },
  { id: "brown",   label: "Brown",   value: TAILWIND_HEX.brown[600] },
  { id: "orange",  label: "Orange",  value: TAILWIND_HEX.orange[600] },
  { id: "yellow",  label: "Yellow",  value: TAILWIND_HEX.yellow[600] },
  { id: "green",   label: "Green",   value: TAILWIND_HEX.green[600] },
  { id: "blue",    label: "Blue",    value: TAILWIND_HEX.blue[600] },
  { id: "purple",  label: "Purple",  value: TAILWIND_HEX.purple[600] },
  { id: "pink",    label: "Pink",    value: TAILWIND_HEX.pink[600] },
  { id: "red",     label: "Red",     value: TAILWIND_HEX.red[600] },
]


/**
 * Returns the categories with their icon lists filtered by `query`. An
 * icon matches when the query is a substring of its name or a prefix of
 * any tokenized word (so "pin" matches "MapPin"). An empty/whitespace
 * query returns the input untouched.
 */
export const filterPickerCategories = (
  categories: ReadonlyArray<PickerCategory>,
  query: string,
): ReadonlyArray<PickerCategory> => {
  const trimmed = query.trim().toLowerCase()

  if (!trimmed) return categories

  return categories.map((category) => ({
    ...category,
    icons: category.icons.filter((icon) => {
      const lowered = icon.name.toLowerCase()

      if (lowered.includes(trimmed)) return true

      return tokenizeIconName(icon.name).some((token) => token.startsWith(trimmed))
    }),
  }))
}
