fintrack/components/ui/icon-picker.tsx

"use client";

import { useState, useMemo } from "react";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandList,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { CategoryIcon } from "@/components/ui/category-icon";
import { ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";

// Group icons by category for better organization
const iconGroups: Record<string, string[]> = {
  Alimentation: [
    "shopping-cart",
    "utensils",
    "croissant",
    "coffee",
    "wine",
    "beer",
    "pizza",
    "apple",
    "cherry",
    "salad",
    "sandwich",
    "ice-cream",
    "cake",
    "cup-soda",
    "milk",
    "egg",
    "fish",
    "beef",
  ],
  Transport: [
    "fuel",
    "train",
    "car",
    "parking",
    "bike",
    "plane",
    "bus",
    "ship",
    "sailboat",
    "truck",
    "car-front",
    "circle-parking",
    "train-front",
  ],
  Logement: [
    "home",
    "zap",
    "droplet",
    "hammer",
    "sofa",
    "refrigerator",
    "washing-machine",
    "lamp",
    "lamp-desk",
    "armchair",
    "bath",
    "shower-head",
    "door-open",
    "fence",
    "trees",
    "flower",
    "leaf",
    "sun",
    "snowflake",
    "wind",
    "thermometer",
  ],
  Santé: [
    "pill",
    "stethoscope",
    "hospital",
    "glasses",
    "dumbbell",
    "sparkles",
    "heart",
    "heart-pulse",
    "activity",
    "syringe",
    "bandage",
    "brain",
    "eye",
    "ear",
    "hand",
    "footprints",
    "person-standing",
  ],
  Loisirs: [
    "tv",
    "music",
    "film",
    "gamepad",
    "book",
    "ticket",
    "clapperboard",
    "headphones",
    "speaker",
    "radio",
    "camera",
    "image",
    "palette",
    "brush",
    "pen-tool",
    "scissors",
    "drama",
    "party-popper",
  ],
  Sport: ["trophy", "medal", "target", "volleyball"],
  Shopping: [
    "shirt",
    "smartphone",
    "package",
    "shopping-bag",
    "store",
    "gem",
    "watch",
    "sunglasses",
    "crown",
    "laptop",
    "monitor",
    "keyboard",
    "mouse",
    "printer",
    "tablet-smartphone",
    "headset",
  ],
  Services: [
    "wifi",
    "repeat",
    "landmark",
    "shield",
    "receipt",
    "file-text",
    "mail",
    "phone",
    "message-square",
    "send",
    "globe",
    "cloud",
    "server",
    "lock",
    "unlock",
    "settings",
    "wrench",
  ],
  Finance: [
    "piggy-bank",
    "banknote",
    "wallet",
    "hand-coins",
    "undo",
    "coins",
    "credit-card",
    "building",
    "building2",
    "trending-up",
    "trending-down",
    "bar-chart",
    "pie-chart",
    "line-chart",
    "calculator",
    "percent",
    "dollar-sign",
    "euro",
  ],
  Voyage: [
    "bed",
    "luggage",
    "map",
    "map-pin",
    "compass",
    "mountain",
    "tent",
    "palmtree",
    "umbrella",
    "globe2",
    "flag",
  ],
  Famille: [
    "graduation-cap",
    "baby",
    "paw-print",
    "users",
    "user",
    "user-plus",
    "dog",
    "cat",
    "bird",
    "rabbit",
  ],
  Autre: [
    "heart-handshake",
    "gift",
    "cigarette",
    "arrow-right-left",
    "help-circle",
    "tag",
    "folder",
    "key",
    "star",
    "bookmark",
    "clock",
    "calendar",
    "bell",
    "alert-triangle",
    "info",
    "check-circle",
    "x-circle",
    "plus",
    "minus",
    "search",
    "trash",
    "edit",
    "download",
    "upload",
    "share",
    "link",
    "paperclip",
    "archive",
    "box",
    "boxes",
    "container",
    "briefcase",
    "education",
    "award",
    "lightbulb",
    "flame",
    "rocket",
    "atom",
  ],
};

interface IconPickerProps {
  value: string;
  onChange: (icon: string) => void;
  color?: string;
}

export function IconPicker({ value, onChange, color }: IconPickerProps) {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");

  // Filter icons based on search
  const filteredGroups = useMemo(() => {
    if (!search.trim()) return iconGroups;

    const query = search.toLowerCase();
    const result: Record<string, string[]> = {};

    Object.entries(iconGroups).forEach(([group, icons]) => {
      const filtered = icons.filter(
        (icon) =>
          icon.toLowerCase().includes(query) ||
          group.toLowerCase().includes(query),
      );
      if (filtered.length > 0) {
        result[group] = filtered;
      }
    });

    return result;
  }, [search]);

  const handleSelect = (icon: string) => {
    onChange(icon);
    setOpen(false);
    setSearch("");
  };

  return (
    <Popover open={open} onOpenChange={setOpen} modal={true}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-full justify-between"
        >
          <div className="flex items-center gap-2">
            <CategoryIcon icon={value} color={color} size={20} />
            <span className="text-muted-foreground text-sm">{value}</span>
          </div>
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="w-[350px] p-0"
        align="start"
        onOpenAutoFocus={(e) => e.preventDefault()}
      >
        <Command>
          <CommandInput
            placeholder="Rechercher une icône..."
            value={search}
            onValueChange={setSearch}
          />
          <CommandList className="max-h-[300px]">
            <CommandEmpty>Aucune icône trouvée.</CommandEmpty>
            {Object.entries(filteredGroups).map(([group, icons]) => (
              <CommandGroup key={group} heading={group}>
                <div className="grid grid-cols-6 gap-1 p-1">
                  {icons.map((icon) => (
                    <button
                      key={icon}
                      onClick={() => handleSelect(icon)}
                      className={cn(
                        "flex items-center justify-center p-2 rounded-md hover:bg-accent transition-colors",
                        value === icon && "bg-accent ring-2 ring-primary",
                      )}
                      title={icon}
                    >
                      <CategoryIcon icon={icon} color={color} size={20} />
                    </button>
                  ))}
                </div>
              </CommandGroup>
            ))}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}