// @design-system: icons/Icon
// Registered at /design-system#icon-component - Phase 3 (Agent 3E) will render the gallery.

import {
  ChevronLeft,
  ChevronRight,
  ChevronDown,
  ChevronUp,
  ArrowLeft,
  ArrowRight,
  Search,
  ShoppingBag,
  ShoppingCart,
  Heart,
  Bell,
  Bookmark,
  User,
  Users,
  Settings,
  Globe,
  Menu,
  X,
  Check,
  AlertCircle,
  Info,
  Star,
  Camera,
  Share2,
  Flag,
  MapPin,
  Clock,
  Calendar,
  Phone,
  Mail,
  CreditCard,
  QrCode,
  Filter,
  Plus,
  Minus,
  MoreVertical,
  Eye,
  EyeOff,
  Lock,
  Unlock,
  Type,
  Contrast,
  Accessibility,
  Pencil,
  LogIn,
  LogOut,
  UserPlus,
  Trash2,
  Upload,
  Store,
  LayoutGrid,
  Map,
  Pause,
  Play,
  Percent,
  FileText,
  Zap,
  LayoutDashboard,
  BarChart3,
  Sparkles,
  TrendingUp,
  TrendingDown,
  GripVertical,
  AlertTriangle,
  ScanLine,
  RefreshCw,
  CheckCircle,
  Circle,
  MessageCircle,
  Send,
  Copy,
  Link,
  Package,
  RotateCcw,
  Tag,
  Headphones,
} from 'lucide-react';
import { cn } from '@/lib/cn';

/** Whitelisted icon names - only icons we actually use in Multideal. */
export const ICON_MAP = {
  ChevronLeft,
  ChevronRight,
  ChevronDown,
  ChevronUp,
  ArrowLeft,
  ArrowRight,
  Search,
  ShoppingBag,
  ShoppingCart,
  Heart,
  Bell,
  Bookmark,
  User,
  Users,
  Settings,
  Globe,
  Menu,
  X,
  Check,
  AlertCircle,
  Info,
  Star,
  Camera,
  Share2,
  Flag,
  MapPin,
  Clock,
  Calendar,
  Phone,
  Mail,
  CreditCard,
  QrCode,
  Filter,
  Plus,
  Minus,
  MoreVertical,
  Eye,
  EyeOff,
  Lock,
  Unlock,
  Type,
  Contrast,
  Accessibility,
  Pencil,
  LogIn,
  LogOut,
  UserPlus,
  Trash2,
  Upload,
  Store,
  LayoutGrid,
  Map,
  Pause,
  Play,
  Percent,
  FileText,
  Zap,
  LayoutDashboard,
  BarChart3,
  Sparkles,
  TrendingUp,
  TrendingDown,
  GripVertical,
  AlertTriangle,
  ScanLine,
  RefreshCw,
  CheckCircle,
  Circle,
  MessageCircle,
  Send,
  Copy,
  Link,
  Package,
  RotateCcw,
  Tag,
  Headphones,
} as const;

/** All whitelisted icon names */
export type IconName = keyof typeof ICON_MAP;

/** Icon size → maps to font-size token classes */
const sizeClasses: Record<IconSize, string> = {
  xs: 'w-3 h-3',
  sm: 'w-4 h-4',
  md: 'w-5 h-5',
  lg: 'w-6 h-6',
  xl: 'w-8 h-8',
};

export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

export type IconColor = 'inherit' | 'primary' | 'vendor' | 'muted' | 'danger' | 'success';

const colorClasses: Record<IconColor, string> = {
  inherit: '',
  primary: 'text-brand-primary-600',
  vendor: 'text-mode-vendor-600',
  muted: 'text-neutral-500',
  danger: 'text-danger-600',
  success: 'text-success-600',
};

/** Props for the Icon component */
export interface IconProps {
  /** Whitelisted Lucide icon name. */
  name: IconName;
  /** Icon size. @default 'md' */
  size?: IconSize;
  /** Icon color token. @default 'inherit' */
  color?: IconColor;
  /**
   * When true, flips the icon horizontally in RTL contexts.
   * Use for directional icons (chevrons, arrows).
   * @default false
   */
  mirror?: boolean;
  /**
   * `aria-hidden` on the underlying SVG.
   * Default true - icon is decorative.
   * Set to false only when the icon is standalone interactive.
   */
  'aria-hidden'?: boolean;
  /** Accessible label - required when aria-hidden is false. */
  'aria-label'?: string;
  /** Additional class names. */
  className?: string;
}

/**
 * Multideal Icon - type-safe wrapper around lucide-react icons.
 *
 * Only exposes a whitelist of icons actually used in Multideal.
 * Supports size tokens, color tokens, and RTL mirror.
 *
 * @example
 * ```tsx
 * // Decorative icon (default)
 * <Icon name="Search" size="md" color="muted" />
 *
 * // Directional icon that flips in RTL
 * <Icon name="ChevronLeft" mirror />
 *
 * // Standalone interactive icon (needs aria-label)
 * <Icon name="Bell" aria-hidden={false} aria-label={t('notifications')} />
 * ```
 */
export function Icon({
  name,
  size = 'md',
  color = 'inherit',
  mirror = false,
  'aria-hidden': ariaHidden = true,
  'aria-label': ariaLabel,
  className,
}: IconProps) {
  const LucideIcon = ICON_MAP[name];

  return (
    <LucideIcon
      aria-hidden={ariaHidden}
      aria-label={ariaLabel}
      className={cn(
        sizeClasses[size],
        colorClasses[color],
        mirror && 'rtl:[transform:scaleX(-1)]',
        className,
      )}
      strokeWidth={1.75}
    />
  );
}