import type { ComponentType, SVGProps } from "react";
import {
  // Generic / shared
  ArrowLeft,
  ArrowRight,
  Check,
  MessageCircle,
  MessageSquare,
  Phone,
  Mail,
  MapPin,
  ChevronLeft,
  ChevronRight,
  Maximize2,
  ImageOff,
  ZoomIn,
  // People / audience
  User,
  UserPlus,
  Users,
  UsersRound,
  Building2,
  GraduationCap,
  Heart,
  HeartHandshake,
  Flag,
  Megaphone,
  // Activities / nature / travel
  Sparkles,
  MoonStar,
  Compass,
  Map,
  MapPinned,
  Sun,
  Tent,
  Trees,
  Ship,
  Bus,
  Home,
  // Calendar / time
  Calendar,
  CalendarDays,
  CalendarClock,
  CalendarCheck,
  Clock,
  RefreshCw,
  // Settings / quality / misc
  Settings2,
  SlidersHorizontal,
  BadgeCheck,
  LifeBuoy,
  Rocket,
  Eye,
  Target,
  Briefcase,
  Bed,
  BedDouble,
  BookOpen,
  PlusCircle,
  HelpCircle,
  type LucideIcon,
} from "lucide-react";

/**
 * Map ACF "icon" string values (Lucide hyphen-case names, matching the source
 * HTML's `data-lucide` attributes) to imported lucide-react components.
 *
 * Unknown names render nothing (returns null). Add new entries here when a
 * section uses an icon not yet listed.
 */
export const ICON_MAP: Record<string, LucideIcon> = {
  // Generic
  "arrow-left": ArrowLeft,
  "arrow-right": ArrowRight,
  check: Check,
  "message-circle": MessageCircle,
  "message-square": MessageSquare,
  phone: Phone,
  mail: Mail,
  "map-pin": MapPin,
  "chevron-left": ChevronLeft,
  "chevron-right": ChevronRight,
  "maximize-2": Maximize2,
  "image-off": ImageOff,
  "zoom-in": ZoomIn,
  // People
  user: User,
  "user-plus": UserPlus,
  users: Users,
  "users-round": UsersRound,
  "building-2": Building2,
  "graduation-cap": GraduationCap,
  heart: Heart,
  "heart-handshake": HeartHandshake,
  flag: Flag,
  megaphone: Megaphone,
  // Activities
  sparkles: Sparkles,
  "moon-star": MoonStar,
  compass: Compass,
  map: Map,
  "map-pinned": MapPinned,
  sun: Sun,
  tent: Tent,
  trees: Trees,
  ship: Ship,
  bus: Bus,
  home: Home,
  // Time
  calendar: Calendar,
  "calendar-days": CalendarDays,
  "calendar-clock": CalendarClock,
  "calendar-check": CalendarCheck,
  clock: Clock,
  "refresh-cw": RefreshCw,
  // Settings / misc
  "settings-2": Settings2,
  "sliders-horizontal": SlidersHorizontal,
  "badge-check": BadgeCheck,
  "life-buoy": LifeBuoy,
  rocket: Rocket,
  eye: Eye,
  target: Target,
  briefcase: Briefcase,
  bed: Bed,
  "bed-double": BedDouble,
  "book-open": BookOpen,
  "plus-circle": PlusCircle,
  "help-circle": HelpCircle,
};

// Lazy-import any Lucide icons not pre-mapped above (covers cool ACF picks
// like `gamepad-2`, `trophy`, `clipboard-check`, `puzzle`, `lightbulb`, etc.)
// by dynamically resolving them from the lucide-react PascalCase namespace.
import * as LucideAll from "lucide-react";

function toPascal(name: string): string {
  return name
    .split(/[-_\s]/)
    .filter(Boolean)
    .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())
    .join("");
}

function resolveIcon(name: string): LucideIcon | null {
  if (!name) return null;
  const mapped = ICON_MAP[name];
  if (mapped) return mapped;
  const pascal = toPascal(name);
  const dynamic = (LucideAll as unknown as Record<string, LucideIcon | undefined>)[pascal];
  return dynamic ?? null;
}

interface SectionIconProps extends SVGProps<SVGSVGElement> {
  name: string;
  size?: number;
}

/**
 * Generic icon renderer. Used everywhere section content references a Lucide
 * icon by string name.
 */
export function SectionIcon({ name, size = 18, ...rest }: SectionIconProps) {
  const Icon = resolveIcon(name) as
    | ComponentType<SVGProps<SVGSVGElement> & { size?: number }>
    | null;
  if (!Icon) return null;
  return <Icon width={size} height={size} aria-hidden {...rest} />;
}