bedolaga-cabinet/src/components/ui/backgrounds/registry.ts

import { lazy, type ComponentType } from 'react';
import type { BackgroundType, BackgroundDefinition } from './types';

// Raw import functions for prefetching (doesn't create React components)
const backgroundImports: Record<Exclude<BackgroundType, 'none'>, () => Promise<unknown>> = {
  aurora: () => import('./aurora-background'),
  sparkles: () => import('./sparkles'),
  vortex: () => import('./vortex'),
  'shooting-stars': () => import('./shooting-stars'),
  'background-beams': () => import('./background-beams'),
  'background-beams-collision': () => import('./background-beams-collision'),
  'gradient-animation': () => import('./background-gradient-animation'),
  wavy: () => import('./wavy-background'),
  'background-lines': () => import('./background-lines'),
  boxes: () => import('./background-boxes'),
  meteors: () => import('./meteors'),
  grid: () => import('./grid-background'),
  dots: () => import('./grid-background'),
  spotlight: () => import('./spotlight-bg'),
  ripple: () => import('./background-ripple'),
  fireflies: () => import('./fireflies'),
  snowfall: () => import('./snowfall'),
  starfield: () => import('./starfield'),
  'matrix-rain': () => import('./matrix-rain'),
  'liquid-gradient': () => import('./liquid-gradient'),
  constellation: () => import('./constellation'),
};

/** Prefetch the JS chunk for a background type (call early to avoid lazy-load delay) */
export function prefetchBackground(type: BackgroundType): void {
  if (type !== 'none' && backgroundImports[type]) {
    backgroundImports[type]();
  }
}

// Lazy-loaded components — only the selected type is fetched
export const backgroundComponents: Record<
  Exclude<BackgroundType, 'none'>,
  ComponentType<{ settings: Record<string, unknown> }>
> = {
  aurora: lazy(() => import('./aurora-background')),
  sparkles: lazy(() => import('./sparkles')),
  vortex: lazy(() => import('./vortex')),
  'shooting-stars': lazy(() => import('./shooting-stars')),
  'background-beams': lazy(() => import('./background-beams')),
  'background-beams-collision': lazy(() => import('./background-beams-collision')),
  'gradient-animation': lazy(() => import('./background-gradient-animation')),
  wavy: lazy(() => import('./wavy-background')),
  'background-lines': lazy(() => import('./background-lines')),
  boxes: lazy(() => import('./background-boxes')),
  meteors: lazy(() => import('./meteors')),
  grid: lazy(() => import('./grid-background')),
  dots: lazy(() => import('./grid-background')),
  spotlight: lazy(() => import('./spotlight-bg')),
  ripple: lazy(() => import('./background-ripple')),
  fireflies: lazy(() => import('./fireflies')),
  snowfall: lazy(() => import('./snowfall')),
  starfield: lazy(() => import('./starfield')),
  'matrix-rain': lazy(() => import('./matrix-rain')),
  'liquid-gradient': lazy(() => import('./liquid-gradient')),
  constellation: lazy(() => import('./constellation')),
};

// Registry of all background definitions with settings for the editor
// labelKey/descriptionKey are under "admin.backgrounds.*"
// setting label keys are under "admin.backgrounds.*"
export const backgroundRegistry: BackgroundDefinition[] = [
  {
    type: 'aurora',
    labelKey: 'admin.backgrounds.aurora',
    descriptionKey: 'admin.backgrounds.auroraDesc',
    category: 'css',
    settings: [
      { key: 'firstColor', label: 'admin.backgrounds.color1', type: 'color', default: '#3b82f6' },
      { key: 'secondColor', label: 'admin.backgrounds.color2', type: 'color', default: '#a5b4fc' },
      { key: 'thirdColor', label: 'admin.backgrounds.color3', type: 'color', default: '#93c5fd' },
      {
        key: 'showRadialGradient',
        label: 'admin.backgrounds.radialGradient',
        type: 'boolean',
        default: true,
      },
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'select',
        default: 'normal',
        options: [
          { label: 'admin.backgrounds.slow', value: 'slow' },
          { label: 'admin.backgrounds.normal', value: 'normal' },
          { label: 'admin.backgrounds.fast', value: 'fast' },
        ],
      },
    ],
  },
  {
    type: 'sparkles',
    labelKey: 'admin.backgrounds.sparkles',
    descriptionKey: 'admin.backgrounds.sparklesDesc',
    category: 'canvas',
    settings: [
      {
        key: 'particleDensity',
        label: 'admin.backgrounds.density',
        type: 'number',
        min: 10,
        max: 200,
        step: 10,
        default: 80,
      },
      {
        key: 'particleColor',
        label: 'admin.backgrounds.particleColor',
        type: 'color',
        default: '#ffffff',
      },
      {
        key: 'minSize',
        label: 'admin.backgrounds.minSize',
        type: 'number',
        min: 0.2,
        max: 3,
        step: 0.1,
        default: 0.4,
      },
      {
        key: 'maxSize',
        label: 'admin.backgrounds.maxSize',
        type: 'number',
        min: 1,
        max: 5,
        step: 0.1,
        default: 1.4,
      },
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'number',
        min: 0.1,
        max: 3,
        step: 0.1,
        default: 0.6,
      },
    ],
  },
  {
    type: 'vortex',
    labelKey: 'admin.backgrounds.vortex',
    descriptionKey: 'admin.backgrounds.vortexDesc',
    category: 'canvas',
    settings: [
      {
        key: 'particleCount',
        label: 'admin.backgrounds.particles',
        type: 'number',
        min: 50,
        max: 1000,
        step: 50,
        default: 300,
      },
      {
        key: 'rangeY',
        label: 'admin.backgrounds.rangeY',
        type: 'number',
        min: 50,
        max: 300,
        step: 10,
        default: 100,
      },
      {
        key: 'baseHue',
        label: 'admin.backgrounds.hue',
        type: 'number',
        min: 0,
        max: 360,
        step: 10,
        default: 220,
      },
      {
        key: 'rangeSpeed',
        label: 'admin.backgrounds.speed',
        type: 'number',
        min: 0.5,
        max: 5,
        step: 0.5,
        default: 1.5,
      },
      {
        key: 'backgroundColor',
        label: 'admin.backgrounds.bgColor',
        type: 'color',
        default: '#000000',
      },
    ],
  },
  {
    type: 'shooting-stars',
    labelKey: 'admin.backgrounds.shootingStars',
    descriptionKey: 'admin.backgrounds.shootingStarsDesc',
    category: 'canvas',
    settings: [
      { key: 'starColor', label: 'admin.backgrounds.starColor', type: 'color', default: '#9E00FF' },
      {
        key: 'trailColor',
        label: 'admin.backgrounds.trailColor',
        type: 'color',
        default: '#2EB9DF',
      },
      {
        key: 'bgStarColor',
        label: 'admin.backgrounds.bgStarColor',
        type: 'color',
        default: '#ffffff',
      },
      {
        key: 'starDensity',
        label: 'admin.backgrounds.density',
        type: 'number',
        min: 0.00005,
        max: 0.0005,
        step: 0.00005,
        default: 0.00015,
      },
      {
        key: 'minSpeed',
        label: 'admin.backgrounds.minSpeed',
        type: 'number',
        min: 5,
        max: 30,
        step: 1,
        default: 10,
      },
      {
        key: 'maxSpeed',
        label: 'admin.backgrounds.maxSpeed',
        type: 'number',
        min: 15,
        max: 60,
        step: 1,
        default: 30,
      },
    ],
  },
  {
    type: 'background-beams',
    labelKey: 'admin.backgrounds.beams',
    descriptionKey: 'admin.backgrounds.beamsDesc',
    category: 'svg',
    settings: [
      {
        key: 'gradientStart',
        label: 'admin.backgrounds.color1',
        type: 'color',
        default: '#18CCFC',
      },
      { key: 'gradientMid', label: 'admin.backgrounds.color2', type: 'color', default: '#6344F5' },
      { key: 'gradientEnd', label: 'admin.backgrounds.color3', type: 'color', default: '#AE48FF' },
      {
        key: 'staticColor',
        label: 'admin.backgrounds.fillColor',
        type: 'color',
        default: '#d4d4d4',
      },
    ],
  },
  {
    type: 'background-beams-collision',
    labelKey: 'admin.backgrounds.beamsCollision',
    descriptionKey: 'admin.backgrounds.beamsCollisionDesc',
    category: 'svg',
    settings: [
      { key: 'beamColor', label: 'admin.backgrounds.beamColor', type: 'color', default: '#6366f1' },
      {
        key: 'explosionColor',
        label: 'admin.backgrounds.explosionColor',
        type: 'color',
        default: '#a855f7',
      },
    ],
  },
  {
    type: 'gradient-animation',
    labelKey: 'admin.backgrounds.gradientAnimation',
    descriptionKey: 'admin.backgrounds.gradientAnimationDesc',
    category: 'css',
    settings: [
      { key: 'firstColor', label: 'admin.backgrounds.color1', type: 'color', default: '#1271FF' },
      { key: 'secondColor', label: 'admin.backgrounds.color2', type: 'color', default: '#DD4AFF' },
      { key: 'thirdColor', label: 'admin.backgrounds.color3', type: 'color', default: '#64DCFF' },
      { key: 'fourthColor', label: 'admin.backgrounds.color4', type: 'color', default: '#C83232' },
      { key: 'fifthColor', label: 'admin.backgrounds.color5', type: 'color', default: '#B4B432' },
      {
        key: 'pointerColor',
        label: 'admin.backgrounds.pointerColor',
        type: 'color',
        default: '#8C64FF',
      },
      {
        key: 'interactive',
        label: 'admin.backgrounds.interactive',
        type: 'boolean',
        default: true,
      },
      {
        key: 'size',
        label: 'admin.backgrounds.size',
        type: 'select',
        default: '80%',
        options: [
          { label: '60%', value: '60%' },
          { label: '80%', value: '80%' },
          { label: '100%', value: '100%' },
        ],
      },
    ],
  },
  {
    type: 'wavy',
    labelKey: 'admin.backgrounds.wavy',
    descriptionKey: 'admin.backgrounds.wavyDesc',
    category: 'canvas',
    settings: [
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'select',
        default: 'fast',
        options: [
          { label: 'admin.backgrounds.slow', value: 'slow' },
          { label: 'admin.backgrounds.fast', value: 'fast' },
        ],
      },
      {
        key: 'waveWidth',
        label: 'admin.backgrounds.waveWidth',
        type: 'number',
        min: 10,
        max: 100,
        step: 5,
        default: 50,
      },
      {
        key: 'blur',
        label: 'admin.backgrounds.blurAmount',
        type: 'number',
        min: 0,
        max: 30,
        step: 1,
        default: 10,
      },
      {
        key: 'waveOpacity',
        label: 'admin.backgrounds.waveOpacity',
        type: 'number',
        min: 0.1,
        max: 1,
        step: 0.05,
        default: 0.5,
      },
      {
        key: 'backgroundFill',
        label: 'admin.backgrounds.bgColor',
        type: 'color',
        default: '#000000',
      },
      { key: 'waveColor1', label: 'admin.backgrounds.color1', type: 'color', default: '#38bdf8' },
      { key: 'waveColor2', label: 'admin.backgrounds.color2', type: 'color', default: '#818cf8' },
      { key: 'waveColor3', label: 'admin.backgrounds.color3', type: 'color', default: '#c084fc' },
      { key: 'waveColor4', label: 'admin.backgrounds.color4', type: 'color', default: '#e879f9' },
      { key: 'waveColor5', label: 'admin.backgrounds.color5', type: 'color', default: '#22d3ee' },
    ],
  },
  {
    type: 'background-lines',
    labelKey: 'admin.backgrounds.lines',
    descriptionKey: 'admin.backgrounds.linesDesc',
    category: 'canvas',
    settings: [
      {
        key: 'lineCount',
        label: 'admin.backgrounds.count',
        type: 'number',
        min: 10,
        max: 80,
        step: 5,
        default: 40,
      },
      {
        key: 'lineColor',
        label: 'admin.backgrounds.particleColor',
        type: 'color',
        default: '#818cf8',
      },
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'number',
        min: 0.001,
        max: 0.01,
        step: 0.001,
        default: 0.002,
      },
      {
        key: 'strokeWidth',
        label: 'admin.backgrounds.waveWidth',
        type: 'number',
        min: 0.5,
        max: 3,
        step: 0.5,
        default: 1,
      },
    ],
  },
  {
    type: 'boxes',
    labelKey: 'admin.backgrounds.boxes',
    descriptionKey: 'admin.backgrounds.boxesDesc',
    category: 'css',
    settings: [
      {
        key: 'rows',
        label: 'admin.backgrounds.rows',
        type: 'number',
        min: 10,
        max: 40,
        step: 5,
        default: 20,
      },
      {
        key: 'cols',
        label: 'admin.backgrounds.cols',
        type: 'number',
        min: 5,
        max: 25,
        step: 1,
        default: 12,
      },
      { key: 'boxColor', label: 'admin.backgrounds.fillColor', type: 'color', default: '#818cf8' },
      {
        key: 'multicolor',
        label: 'admin.backgrounds.multicolor',
        type: 'boolean',
        default: true,
      },
      {
        key: 'lineColor',
        label: 'admin.backgrounds.lineColor',
        type: 'color',
        default: '#334155',
      },
    ],
  },
  {
    type: 'meteors',
    labelKey: 'admin.backgrounds.meteors',
    descriptionKey: 'admin.backgrounds.meteorsDesc',
    category: 'css',
    settings: [
      {
        key: 'count',
        label: 'admin.backgrounds.count',
        type: 'number',
        min: 5,
        max: 50,
        step: 5,
        default: 20,
      },
      {
        key: 'meteorColor',
        label: 'admin.backgrounds.particleColor',
        type: 'color',
        default: '#ffffff',
      },
    ],
  },
  {
    type: 'grid',
    labelKey: 'admin.backgrounds.grid',
    descriptionKey: 'admin.backgrounds.gridDesc',
    category: 'css',
    settings: [
      {
        key: 'gridColor',
        label: 'admin.backgrounds.fillColor',
        type: 'color',
        default: 'rgba(255,255,255,0.05)',
      },
      {
        key: 'gridSize',
        label: 'admin.backgrounds.gridSize',
        type: 'number',
        min: 10,
        max: 80,
        step: 5,
        default: 40,
      },
    ],
  },
  {
    type: 'dots',
    labelKey: 'admin.backgrounds.dots',
    descriptionKey: 'admin.backgrounds.dotsDesc',
    category: 'css',
    settings: [
      {
        key: 'variant',
        label: 'admin.backgrounds.size',
        type: 'select',
        default: 'dots',
        options: [{ label: 'admin.backgrounds.dots', value: 'dots' }],
      },
      {
        key: 'gridColor',
        label: 'admin.backgrounds.fillColor',
        type: 'color',
        default: 'rgba(255,255,255,0.1)',
      },
      {
        key: 'gridSize',
        label: 'admin.backgrounds.gridSize',
        type: 'number',
        min: 10,
        max: 60,
        step: 5,
        default: 20,
      },
      {
        key: 'dotSize',
        label: 'admin.backgrounds.size',
        type: 'number',
        min: 0.5,
        max: 4,
        step: 0.5,
        default: 1.5,
      },
    ],
  },
  {
    type: 'spotlight',
    labelKey: 'admin.backgrounds.spotlight',
    descriptionKey: 'admin.backgrounds.spotlightDesc',
    category: 'css',
    settings: [
      {
        key: 'spotlightColor',
        label: 'admin.backgrounds.particleColor',
        type: 'color',
        default: '#818cf8',
      },
      {
        key: 'spotlightSize',
        label: 'admin.backgrounds.size',
        type: 'number',
        min: 200,
        max: 800,
        step: 50,
        default: 400,
      },
    ],
  },
  {
    type: 'ripple',
    labelKey: 'admin.backgrounds.ripple',
    descriptionKey: 'admin.backgrounds.rippleDesc',
    category: 'canvas',
    settings: [
      {
        key: 'rippleColor',
        label: 'admin.backgrounds.particleColor',
        type: 'color',
        default: '#818cf8',
      },
      {
        key: 'rippleCount',
        label: 'admin.backgrounds.count',
        type: 'number',
        min: 3,
        max: 10,
        step: 1,
        default: 5,
      },
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'number',
        min: 0.1,
        max: 2,
        step: 0.1,
        default: 0.5,
      },
    ],
  },
  {
    type: 'fireflies',
    labelKey: 'admin.backgrounds.fireflies',
    descriptionKey: 'admin.backgrounds.firefliesDesc',
    category: 'canvas',
    settings: [
      { key: 'color', label: 'admin.backgrounds.particleColor', type: 'color', default: '#ffd166' },
      {
        key: 'count',
        label: 'admin.backgrounds.count',
        type: 'number',
        min: 5,
        max: 200,
        step: 5,
        default: 40,
      },
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'number',
        min: 0.1,
        max: 3,
        step: 0.1,
        default: 1,
      },
      {
        key: 'size',
        label: 'admin.backgrounds.size',
        type: 'number',
        min: 0.5,
        max: 6,
        step: 0.5,
        default: 2,
      },
    ],
  },
  {
    type: 'snowfall',
    labelKey: 'admin.backgrounds.snowfall',
    descriptionKey: 'admin.backgrounds.snowfallDesc',
    category: 'canvas',
    settings: [
      { key: 'color', label: 'admin.backgrounds.particleColor', type: 'color', default: '#ffffff' },
      {
        key: 'density',
        label: 'admin.backgrounds.density',
        type: 'number',
        min: 20,
        max: 400,
        step: 10,
        default: 150,
      },
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'number',
        min: 0.1,
        max: 3,
        step: 0.1,
        default: 1,
      },
      {
        key: 'wind',
        label: 'admin.backgrounds.wind',
        type: 'number',
        min: -3,
        max: 3,
        step: 0.5,
        default: 0.5,
      },
    ],
  },
  {
    type: 'starfield',
    labelKey: 'admin.backgrounds.starfield',
    descriptionKey: 'admin.backgrounds.starfieldDesc',
    category: 'canvas',
    settings: [
      { key: 'color', label: 'admin.backgrounds.starColor', type: 'color', default: '#ffffff' },
      {
        key: 'starCount',
        label: 'admin.backgrounds.particles',
        type: 'number',
        min: 50,
        max: 800,
        step: 25,
        default: 200,
      },
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'number',
        min: 0.1,
        max: 5,
        step: 0.1,
        default: 1,
      },
    ],
  },
  {
    type: 'matrix-rain',
    labelKey: 'admin.backgrounds.matrixRain',
    descriptionKey: 'admin.backgrounds.matrixRainDesc',
    category: 'canvas',
    settings: [
      { key: 'color', label: 'admin.backgrounds.particleColor', type: 'color', default: '#00ff41' },
      {
        key: 'density',
        label: 'admin.backgrounds.density',
        type: 'number',
        min: 10,
        max: 100,
        step: 5,
        default: 70,
      },
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'number',
        min: 0.2,
        max: 3,
        step: 0.1,
        default: 1,
      },
      {
        key: 'charset',
        label: 'admin.backgrounds.charset',
        type: 'select',
        default: 'katakana',
        options: [
          { label: 'Katakana', value: 'katakana' },
          { label: 'Latin', value: 'latin' },
          { label: 'Binary', value: 'binary' },
        ],
      },
    ],
  },
  {
    type: 'liquid-gradient',
    labelKey: 'admin.backgrounds.liquidGradient',
    descriptionKey: 'admin.backgrounds.liquidGradientDesc',
    category: 'css',
    settings: [
      { key: 'color1', label: 'admin.backgrounds.color1', type: 'color', default: '#6366f1' },
      { key: 'color2', label: 'admin.backgrounds.color2', type: 'color', default: '#ec4899' },
      { key: 'color3', label: 'admin.backgrounds.color3', type: 'color', default: '#22d3ee' },
      { key: 'color4', label: 'admin.backgrounds.color4', type: 'color', default: '#a855f7' },
      {
        key: 'speed',
        label: 'admin.backgrounds.speed',
        type: 'select',
        default: 'normal',
        options: [
          { label: 'admin.backgrounds.slow', value: 'slow' },
          { label: 'admin.backgrounds.normal', value: 'normal' },
          { label: 'admin.backgrounds.fast', value: 'fast' },
        ],
      },
      {
        key: 'blurAmount',
        label: 'admin.backgrounds.blurAmount',
        type: 'number',
        min: 10,
        max: 120,
        step: 5,
        default: 60,
      },
    ],
  },
  {
    type: 'constellation',
    labelKey: 'admin.backgrounds.constellation',
    descriptionKey: 'admin.backgrounds.constellationDesc',
    category: 'canvas',
    settings: [
      {
        key: 'particleColor',
        label: 'admin.backgrounds.particleColor',
        type: 'color',
        default: '#818cf8',
      },
      { key: 'lineColor', label: 'admin.backgrounds.lineColor', type: 'color', default: '#818cf8' },
      {
        key: 'count',
        label: 'admin.backgrounds.count',
        type: 'number',
        min: 10,
        max: 200,
        step: 5,
        default: 60,
      },
      {
        key: 'linkDistance',
        label: 'admin.backgrounds.linkDistance',
        type: 'number',
        min: 40,
        max: 300,
        step: 10,
        default: 120,
      },
    ],
  },
];