// Component Registry with Smart Priority System
// Priority: Magic UI (40%) > Aceternity (30%) > Charts (20%) > UI (10%)
// Preference Order: Magic UI, Aceternity UI, Charts, ShadCN/UI (fallback only)

export interface ComponentMetadata {
  name: string;
  category: 'aceternity' | 'magicui' | 'shadcn' | 'charts' | 'ui';
  priority: number;
  tags: string[];
  useCases: string[];
  animationLevel: 'low' | 'medium' | 'high';
  hasGradient: boolean;
  description: string;
  complexity: 'simple' | 'medium' | 'complex';
  isComposite: boolean;
}

export const componentRegistry: Record<string, ComponentMetadata> = {
  // ===== ACETERNITY COMPONENTS (Priority 2 - 30% usage) =====
  'MacbookScroll': {
    name: 'MacbookScroll',
    category: 'aceternity',
    priority: 1,
    tags: ['macbook', 'scroll', '3d', 'animation', 'hero'],
    useCases: ['hero-sections', 'product-showcases', 'landing-pages', 'interactive-demos'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Interactive 3D MacBook with scroll animations and realistic keyboard',
    complexity: 'complex',
    isComposite: true
  },
  'AnimatedButton': {
    name: 'AnimatedButton',
    category: 'aceternity',
    priority: 1,
    tags: ['button', 'animation', 'interactive'],
    useCases: ['hero-sections', 'cta-buttons', 'interactive-elements'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Animated button with gradient effects',
    complexity: 'medium',
    isComposite: true
  },
  'BackgroundBeams': {
    name: 'BackgroundBeams',
    category: 'aceternity',
    priority: 1,
    tags: ['background', 'beams', 'gradient', 'animated'],
    useCases: ['hero-sections', 'landing-pages', 'background-effects'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Animated background with moving gradient beams',
    complexity: 'complex',
    isComposite: true
  },
  'CardSpotlight': {
    name: 'CardSpotlight',
    category: 'aceternity',
    priority: 1,
    tags: ['card', 'spotlight', 'hover-effect'],
    useCases: ['product-cards', 'feature-showcases', 'interactive-cards'],
    animationLevel: 'medium',
    hasGradient: true,
    description: 'Card with spotlight hover effect',
    complexity: 'medium',
    isComposite: true
  },
  'Carousel': {
    name: 'Carousel',
    category: 'aceternity',
    priority: 1,
    tags: ['carousel', 'slider', 'navigation', 'content'],
    useCases: ['image-galleries', 'content-showcases', 'product-displays'],
    animationLevel: 'medium',
    hasGradient: false,
    description: 'Smooth carousel with navigation controls',
    complexity: 'complex',
    isComposite: true
  },
  'GlowingEffect': {
    name: 'GlowingEffect',
    category: 'aceternity',
    priority: 1,
    tags: ['glow', 'effect', 'gradient', 'animated'],
    useCases: ['buttons', 'cards', 'highlighted-elements'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Glowing effect with gradient animation',
    complexity: 'medium',
    isComposite: true
  },
  'InfiniteMovingCards': {
    name: 'InfiniteMovingCards',
    category: 'aceternity',
    priority: 1,
    tags: ['cards', 'infinite', 'scroll', 'animated'],
    useCases: ['testimonials', 'features', 'content-showcases'],
    animationLevel: 'high',
    hasGradient: false,
    description: 'Infinite scrolling cards with smooth animation',
    complexity: 'complex',
    isComposite: true
  },
  'Navbar': {
    name: 'Navbar',
    category: 'aceternity',
    priority: 1,
    tags: ['navbar', 'navigation', 'header', 'responsive'],
    useCases: ['main-navigation', 'header-sections', 'site-navigation'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Responsive navigation bar with mobile menu',
    complexity: 'medium',
    isComposite: true
  },
  'Sidebar': {
    name: 'Sidebar',
    category: 'aceternity',
    priority: 1,
    tags: ['sidebar', 'navigation', 'menu', 'responsive'],
    useCases: ['admin-panels', 'dashboards', 'side-navigation'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Responsive sidebar with navigation menu',
    complexity: 'medium',
    isComposite: true
  },
  'FloatingNav': {
    name: 'FloatingNav',
    category: 'aceternity',
    priority: 1,
    tags: ['navigation', 'floating', 'animated', 'responsive'],
    useCases: ['site-navigation', 'floating-menu', 'scroll-aware-nav'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Floating navigation with scroll awareness and smooth animations',
    complexity: 'medium',
    isComposite: true
  },
  'HoverMenu': {
    name: 'HoverMenu',
    category: 'aceternity',
    priority: 1,
    tags: ['navigation', 'dropdown', 'animated', 'interactive'],
    useCases: ['site-navigation', 'dropdown-menu', 'product-showcase'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Interactive hover menu with dropdown animations and product showcase',
    complexity: 'medium',
    isComposite: true
  },
  'Timeline': {
    name: 'Timeline',
    category: 'aceternity',
    priority: 1,
    tags: ['timeline', 'vertical', 'content', 'scroll-aware', 'animated'],
    useCases: ['changelog', 'history', 'roadmap', 'achievements', 'process-flows'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Enhanced timeline with scroll progress, sticky positioning, and smooth animations',
    complexity: 'medium',
    isComposite: true
  },
  'TracingBeam': {
    name: 'TracingBeam',
    category: 'aceternity',
    priority: 1,
    tags: ['tracing', 'beam', 'scroll', 'animated'],
    useCases: ['scroll-effects', 'content-highlighting', 'interactive-content'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Tracing beam effect on scroll',
    complexity: 'complex',
    isComposite: true
  },
  'BackgroundBeamsWithCollision': {
    name: 'BackgroundBeamsWithCollision',
    category: 'aceternity',
    priority: 0.85,
    tags: ['beams', 'collision', 'animation', 'background'],
    useCases: ['hero', 'background', 'interactive'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Animated background beams with collision detection and explosion effects',
    complexity: 'complex',
    isComposite: true
  },

  'BackgroundLines': {
    name: 'BackgroundLines',
    category: 'aceternity',
    priority: 1,
    tags: ['background', 'animation', 'svg', 'lines', 'drawing'],
    useCases: ['hero-sections', 'landing-pages', 'background-effects', 'visual-enhancement'],
    animationLevel: 'high',
    hasGradient: false,
    description: 'Animated SVG background with drawing line effects',
    complexity: 'complex',
    isComposite: true
  },
  'ColourfulText': {
    name: 'ColourfulText',
    category: 'aceternity',
    priority: 1,
    tags: ['text', 'animation', 'colorful', 'typing', 'interactive'],
    useCases: ['hero-sections', 'headlines', 'landing-pages', 'text-animation'],
    animationLevel: 'high',
    hasGradient: false,
    description: 'Animated text with colorful character-by-character effects and color cycling',
    complexity: 'medium',
    isComposite: true
  },
  'BentoGrid': {
    name: 'BentoGrid',
    category: 'magicui',
    priority: 1,
    tags: ['grid', 'layout', 'responsive', 'modern'],
    useCases: ['dashboards', 'feature-showcases', 'portfolio-layouts', 'content-grids'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Modern responsive grid layout system for organizing content in an elegant bento box style',
    complexity: 'medium',
    isComposite: true
  },
  'BentoCard': {
    name: 'BentoCard',
    category: 'magicui',
    priority: 1,
    tags: ['card', 'grid-item', 'modern', 'glassmorphism'],
    useCases: ['feature-cards', 'content-cards', 'dashboard-items', 'portfolio-items'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Modern card component with glassmorphism effects, designed for bento grid layouts',
    complexity: 'medium',
    isComposite: true
  },
  'BentoDemo': {
    name: 'BentoDemo',
    category: 'magicui',
    priority: 1,
    tags: ['demo', 'showcase', 'grid', 'features'],
    useCases: ['feature-showcases', 'landing-pages', 'demos', 'examples'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Complete demo showcasing the Bento grid system with sample feature cards',
    complexity: 'complex',
    isComposite: true
  },
  'AnimatedCircularProgressBar': {
    name: 'AnimatedCircularProgressBar',
    category: 'magicui',
    priority: 1,
    tags: ['progress', 'gauge', 'circular', 'animation', 'dashboard'],
    useCases: ['dashboards', 'progress-tracking', 'metrics-display', 'status-indicators'],
    animationLevel: 'medium',
    hasGradient: false,
    description: 'Animated circular progress bar with customizable colors and smooth transitions',
    complexity: 'medium',
    isComposite: true
  },
  'ScriptCopyBtn': {
    name: 'ScriptCopyBtn',
    category: 'magicui',
    priority: 1,
    tags: ['copy', 'button', 'code', 'package-manager', 'utility'],
    useCases: ['documentation', 'code-snippets', 'installation-guides', 'developer-tools'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Interactive copy button with package manager switching and syntax highlighting',
    complexity: 'medium',
    isComposite: true
  },
  'ArcTimeline': {
    name: 'ArcTimeline',
    category: 'magicui',
    priority: 1,
    tags: ['timeline', 'arc', 'circular', 'interactive', 'steps'],
    useCases: ['roadmaps', 'process-flows', 'timeline-visualization', 'step-by-step-guides'],
    animationLevel: 'medium',
    hasGradient: false,
    description: 'Interactive circular arc timeline with configurable steps, angles, and smooth animations',
    complexity: 'complex',
    isComposite: true
  },
  'PixelImage': {
    name: 'PixelImage',
    category: 'magicui',
    priority: 1,
    tags: ['image', 'pixel', 'animation', 'grid', 'reveal'],
    useCases: ['image-galleries', 'loading-effects', 'creative-displays', 'portfolio-showcases'],
    animationLevel: 'high',
    hasGradient: false,
    description: 'Animated pixelated image reveal with configurable grid patterns and grayscale-to-color transitions',
    complexity: 'medium',
    isComposite: true
  },
  'ShinyButton': {
    name: 'ShinyButton',
    category: 'magicui',
    priority: 1,
    tags: ['button', 'shiny', 'animation', 'shine', 'interactive'],
    useCases: ['call-to-actions', 'navigation', 'forms', 'interactive-elements'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Interactive button with continuous shine animation, scale effects, and glassmorphism styling',
    complexity: 'medium',
    isComposite: true
  },

  // ===== SHADCN COMPONENTS (Priority 1 - 20% usage) =====
  'ChartBarDefault': {
    name: 'ChartBarDefault',
    category: 'shadcn',
    priority: 1,
    tags: ['chart', 'bar', 'data-visualization', 'analytics', 'dashboard'],
    useCases: ['dashboards', 'analytics', 'reports', 'data-presentation'],
    animationLevel: 'medium',
    hasGradient: false,
    description: 'Complete bar chart component with card layout, tooltips, and responsive design',
    complexity: 'complex',
    isComposite: true
  },

  // ===== MAGICUI COMPONENTS (Priority 2 - 15% usage) =====
  'MagicButton': {
    name: 'MagicButton',
    category: 'magicui',
    priority: 2,
    tags: ['button', 'magic', 'interactive'],
    useCases: ['cta-buttons', 'interactive-elements', 'special-actions'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Magic button with special effects',
    complexity: 'medium',
    isComposite: true
  },
  'UnifiedButton': {
    name: 'UnifiedButton',
    category: 'magicui',
    priority: 2,
    tags: ['button', 'unified', 'design-system'],
    useCases: ['design-systems', 'component-libraries', 'consistent-ui'],
    animationLevel: 'medium',
    hasGradient: false,
    description: 'Unified button design system component',
    complexity: 'simple',
    isComposite: true
  },
  'AnimatedBeam': {
    name: 'AnimatedBeam',
    category: 'magicui',
    priority: 2,
    tags: ['beam', 'animation', 'gradient'],
    useCases: ['hero-sections', 'feature-highlights', 'interactive-elements'],
    animationLevel: 'high',
    hasGradient: true,
    description: 'Animated beam with gradient effects',
    complexity: 'complex',
    isComposite: true
  },
  'MagicCard': {
    name: 'MagicCard',
    category: 'magicui',
    priority: 2,
    tags: ['card', 'magic', 'gradient'],
    useCases: ['feature-cards', 'product-cards', 'content-cards'],
    animationLevel: 'medium',
    hasGradient: true,
    description: 'Magic card with gradient effects',
    complexity: 'medium',
    isComposite: true
  },
  'TextAnimate': {
    name: 'TextAnimate',
    category: 'magicui',
    priority: 2,
    tags: ['text', 'animation', 'typing'],
    useCases: ['hero-text', 'announcements', 'interactive-text'],
    animationLevel: 'high',
    hasGradient: false,
    description: 'Animated text with typing effect',
    complexity: 'medium',
    isComposite: true
  },

  // ===== CHARTS COMPONENTS (Priority 3 - 3% usage) =====
  'ChartAreaGradient': {
    name: 'ChartAreaGradient',
    category: 'charts',
    priority: 2,
    tags: ['chart', 'area', 'gradient', 'data'],
    useCases: ['dashboards', 'analytics', 'data-visualization'],
    animationLevel: 'low',
    hasGradient: true,
    description: 'Area chart with gradient fill',
    complexity: 'medium',
    isComposite: true
  },
  'ChartBarBasic': {
    name: 'ChartBarBasic',
    category: 'charts',
    priority: 2,
    tags: ['chart', 'bar', 'data', 'basic'],
    useCases: ['dashboards', 'analytics', 'data-visualization'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Basic bar chart component',
    complexity: 'simple',
    isComposite: true
  },
  'ChartPieBasic': {
    name: 'ChartPieBasic',
    category: 'charts',
    priority: 2,
    tags: ['chart', 'pie', 'data', 'basic'],
    useCases: ['dashboards', 'analytics', 'data-visualization'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Basic pie chart component',
    complexity: 'simple',
    isComposite: true
  },
  'ChartLineMultiple': {
    name: 'ChartLineMultiple',
    category: 'charts',
    priority: 2,
    tags: ['chart', 'line', 'multiple', 'data'],
    useCases: ['dashboards', 'analytics', 'data-visualization'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Multiple line chart component',
    complexity: 'medium',
    isComposite: true
  },

  // ===== UI/SHADCN COMPONENTS (Priority 4 - 2% usage) =====
  'Button': {
    name: 'Button',
    category: 'ui',
    priority: 3,
    tags: ['button', 'ui', 'interactive'],
    useCases: ['forms', 'actions', 'navigation'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Basic button component',
    complexity: 'simple',
    isComposite: true
  },
  'Card': {
    name: 'Card',
    category: 'ui',
    priority: 4,
    tags: ['card', 'container', 'layout'],
    useCases: ['content-containers', 'layouts', 'information-display'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Basic card container',
    complexity: 'simple',
    isComposite: true
  },
  'Input': {
    name: 'Input',
    category: 'ui',
    priority: 3,
    tags: ['input', 'form', 'ui'],
    useCases: ['forms', 'data-entry', 'user-input'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Basic input component',
    complexity: 'simple',
    isComposite: true
  },
  'Dialog': {
    name: 'Dialog',
    category: 'ui',
    priority: 3,
    tags: ['dialog', 'modal', 'overlay'],
    useCases: ['confirmations', 'forms', 'content-overlays'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Modal dialog component',
    complexity: 'medium',
    isComposite: true
  },
  'Table': {
    name: 'Table',
    category: 'ui',
    priority: 4,
    tags: ['table', 'data', 'grid'],
    useCases: ['data-display', 'lists', 'information-tables'],
    animationLevel: 'low',
    hasGradient: false,
    description: 'Data table component',
    complexity: 'medium',
    isComposite: true
  }
};

export const componentCategories = {
  aceternity: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'aceternity'),
  magicui: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'magicui'),
  shadcn: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'shadcn'),
  charts: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'charts'),
  ui: Object.keys(componentRegistry).filter(key => componentRegistry[key].category === 'ui')
};

export const priorityWeights = {
  magicui: 1.0,     // 40% usage preference
  aceternity: 0.75, // 30% usage preference
  shadcn: 0.5,      // 20% usage preference
  charts: 0.25,     // 10% usage preference (fallback)
  ui: 0.25          // 10% usage preference (fallback)
};