import type { ComponentType, ReactNode, SVGProps } from 'react';
import { BoltIcon, GridIcon, MicIcon, MusicIcon, PlayIcon, SparklesIcon, TrophyIcon } from '@/components/ui/icons';
import type { IconProps } from '@/components/ui/icons';

/**
 * Category icons for board tiles and chips. Same 24×24 stroke style as components/ui/icons;
 * decorative (the category name is always printed next to them).
 */
function Svg({ children, ...rest }: Omit<SVGProps<SVGSVGElement>, 'children'> & { children: ReactNode; title?: string }) {
  const { title: _title, ...svg } = rest;
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      width="1em"
      height="1em"
      focusable="false"
      aria-hidden="true"
      {...svg}
    >
      {children}
    </svg>
  );
}

const GlobeIcon = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <path d="M3.5 12h17M12 3.5c2.6 2.4 3.9 5.2 3.9 8.5s-1.3 6.1-3.9 8.5c-2.6-2.4-3.9-5.2-3.9-8.5S9.4 5.9 12 3.5Z" />
  </Svg>
);

const FlaskIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M9.5 3.5h5M10.5 3.5v5.2L5.2 18a1.7 1.7 0 0 0 1.5 2.5h10.6a1.7 1.7 0 0 0 1.5-2.5l-5.3-9.3V3.5" />
    <path d="M7.6 14h8.8" />
  </Svg>
);

const ColumnsIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M3.5 9 12 4l8.5 5M5 20.5h14M6.5 10v8M10 10v8M14 10v8M17.5 10v8" />
  </Svg>
);

const BallIcon = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <path d="m12 7.5 3.4 2.5-1.3 4h-4.2l-1.3-4L12 7.5ZM12 3.5v4M15.4 10l4.6-1.4M14.1 14l2.6 4.1M9.9 14l-2.6 4.1M8.6 10 4 8.6" />
  </Svg>
);

const GlassIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M6.5 3.5h11l-1.4 15.2a2 2 0 0 1-2 1.8H9.9a2 2 0 0 1-2-1.8L6.5 3.5ZM7 8.5h10" />
  </Svg>
);

const BulbIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M9 17.5h6M9.8 20.5h4.4M8.2 14.2A6 6 0 1 1 15.8 14.2c-.8.7-1.3 1.6-1.3 2.6v.7h-5v-.7c0-1-.5-1.9-1.3-2.6Z" />
  </Svg>
);

const DiscIcon = (p: IconProps) => (
  <Svg {...p}>
    <circle cx="12" cy="12" r="8.5" />
    <circle cx="12" cy="12" r="2.2" />
    <path d="M12 6.2A5.8 5.8 0 0 0 6.2 12" />
  </Svg>
);

const HeadphonesIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M4 15v-3a8 8 0 0 1 16 0v3" />
    <rect x="3.5" y="14" width="4" height="6.5" rx="1.5" />
    <rect x="16.5" y="14" width="4" height="6.5" rx="1.5" />
  </Svg>
);

const GuitarIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="m14 10 5.5-5.5M18 3.5l2.5 2.5" />
    <path d="M10.6 9.4c1.6-1.3 3.6-1.3 4.4-.4.9.9.8 2.9-.5 4.4-.6.7-1.5.8-2 1.6-.6 1-.2 2.2-1.6 3.6-1.9 1.9-5 1.9-6.7.2-1.7-1.7-1.7-4.8.2-6.7 1.4-1.4 2.6-1 3.6-1.6.8-.5.9-1.4 1.6-1.9Z" />
    <path d="m8.5 13.5 2 2" />
  </Svg>
);

const CassetteIcon = (p: IconProps) => (
  <Svg {...p}>
    <rect x="3" y="5.5" width="18" height="13" rx="2" />
    <circle cx="8.5" cy="11" r="1.6" />
    <circle cx="15.5" cy="11" r="1.6" />
    <path d="M7 18.5 8.5 15h7l1.5 3.5" />
  </Svg>
);

const HatIcon = (p: IconProps) => (
  <Svg {...p}>
    <path d="M7.5 14.5 8.4 7c.2-1.5 1.8-2.3 3.1-1.6l.5.3.5-.3c1.3-.7 2.9.1 3.1 1.6l.9 7.5" />
    <path d="M2.5 13.5c2 2 5.6 3 9.5 3s7.5-1 9.5-3" />
  </Svg>
);

const PianoIcon = (p: IconProps) => (
  <Svg {...p}>
    <rect x="3.5" y="4.5" width="17" height="15" rx="2" />
    <path d="M8 4.5v15M12 4.5v15M16 4.5v15M6.5 4.5v7h3v-7M14.5 4.5v7h3v-7" />
  </Svg>
);

/** Known pack category keys (originals-v1, music-mayhem-v1); unknown custom keys fall back by keyword. */
const BY_KEY: Record<string, ComponentType<IconProps>> = {
  'pop-culture': SparklesIcon,
  history: ColumnsIcon,
  sports: BallIcon,
  science: FlaskIcon,
  geography: GlobeIcon,
  music: MusicIcon,
  'food-drink': GlassIcon,
  'movies-tv': PlayIcon,
  general: BulbIcon,
  eighties: CassetteIcon,
  'nineties-2000s': DiscIcon,
  'hip-hop-rnb': MicIcon,
  rock: GuitarIcon,
  country: HatIcon,
  'pop-icons': TrophyIcon,
  soundtracks: PlayIcon,
  instruments: PianoIcon,
  'behind-the-music': HeadphonesIcon,
  wildcard: BoltIcon,
};

const BY_KEYWORD: [RegExp, ComponentType<IconProps>][] = [
  [/music|song|band|album/i, MusicIcon],
  [/sport|game/i, BallIcon],
  [/science|tech|nature/i, FlaskIcon],
  [/geo|world|travel|map/i, GlobeIcon],
  [/hist/i, ColumnsIcon],
  [/food|drink|beer|wine|cocktail/i, GlassIcon],
  [/movie|film|tv|screen/i, PlayIcon],
  [/pop|celeb/i, SparklesIcon],
];

export function categoryIcon(category: string): ComponentType<IconProps> {
  const direct = BY_KEY[category];
  if (direct) return direct;
  return BY_KEYWORD.find(([re]) => re.test(category))?.[1] ?? GridIcon;
}

export function CategoryIcon({ category, ...props }: IconProps & { category: string }) {
  const Icon = categoryIcon(category);
  return <Icon {...props} />;
}