/**
 * componentRegistry.js — LiteDesign 组件注册表
 *
 * 每个组件定义：
 *   type        : 唯一标识（如 'swiper'）
 *   label       : 中文显示名称
 *   icon        : emoji 图标
 *   category    : 分类（basic | marketing | tool）
 *   categoryLabel: 分类中文名
 *   description : 简短描述
 *   defaultProps: 默认 props（新建组件时克隆）
 *   fields      : 属性表单配置数组 → 驱动动态表单
 *
 * ★ 新增组件只需在此文件注册 + 编写对应的预览组件即可
 */

export const COMPONENT_REGISTRY = {}

/* ==================== 基础组件 ==================== */

COMPONENT_REGISTRY.swiper = {
  type: 'swiper',
  label: '轮播图',
  icon: '🖼️',
  category: 'basic',
  categoryLabel: '基础组件',
  description: '多图轮播展示',
  defaultProps: {
    images: [],
    autoplay: true,
    interval: 3000,
    height: 160,
    link: ''
  },
  fields: [
    { key: 'images', label: '轮播图片', type: 'image-list', help: '建议尺寸 750x320px' },
    { key: 'height', label: '高度(px)', type: 'number', min: 80, max: 500, step: 10 },
    { key: 'autoplay', label: '自动播放', type: 'switch' },
    { key: 'interval', label: '切换间隔(ms)', type: 'number', min: 1000, max: 10000, step: 500, showIf: { key: 'autoplay', eq: true } },
    { key: 'link', label: '全局跳转链接', type: 'text', placeholder: '可选，所有图片共用跳转' }
  ]
}

COMPONENT_REGISTRY.navGroup = {
  type: 'navGroup',
  label: '导航组',
  icon: '🧭',
  category: 'basic',
  categoryLabel: '基础组件',
  description: '图标+文字入口网格',
  defaultProps: {
    columns: 4,
    items: [
      { icon: '🛒', text: '全部商品', link: '' },
      { icon: '🔥', text: '热卖爆款', link: '' },
      { icon: '📦', text: '新品上架', link: '' },
      { icon: '👤', text: '个人中心', link: '' }
    ]
  },
  fields: [
    { key: 'columns', label: '列数', type: 'select', options: [3, 4, 5] },
    { key: 'items', label: '导航项', type: 'nav-list' }
  ]
}

COMPONENT_REGISTRY.titleBar = {
  type: 'titleBar',
  label: '标题栏',
  icon: '📝',
  category: 'basic',
  categoryLabel: '基础组件',
  description: '区域标题+更多链接',
  defaultProps: {
    title: '推荐商品',
    subtitle: '',
    moreText: '更多',
    moreLink: ''
  },
  fields: [
    { key: 'title', label: '标题', type: 'text', maxlength: 20 },
    { key: 'subtitle', label: '副标题', type: 'text', maxlength: 30 },
    { key: 'moreText', label: '更多按钮文字', type: 'text', maxlength: 10 },
    { key: 'moreLink', label: '更多链接', type: 'text', placeholder: '留空不显示更多' }
  ]
}

COMPONENT_REGISTRY.imageAd = {
  type: 'imageAd',
  label: '图片广告',
  icon: '🏞️',
  category: 'basic',
  categoryLabel: '基础组件',
  description: '单图广告位',
  defaultProps: {
    image: '',
    link: '',
    height: 120,
    borderRadius: 0
  },
  fields: [
    { key: 'image', label: '图片', type: 'image', help: '建议 750x240px' },
    { key: 'link', label: '跳转链接', type: 'text' },
    { key: 'height', label: '高度(px)', type: 'number', min: 40, max: 500, step: 10 },
    { key: 'borderRadius', label: '圆角(px)', type: 'number', min: 0, max: 40 }
  ]
}

COMPONENT_REGISTRY.noticeBar = {
  type: 'noticeBar',
  label: '公告条',
  icon: '📢',
  category: 'basic',
  categoryLabel: '基础组件',
  description: '滚动通知条',
  defaultProps: {
    text: '欢迎光临！全场满199包邮 🎉',
    icon: '📢',
    bgColor: '#FFF3CD',
    textColor: '#856404',
    speed: 'normal'     // slow | normal | fast
  },
  fields: [
    { key: 'text', label: '公告内容', type: 'textarea', rows: 2, maxlength: 100 },
    { key: 'icon', label: '图标', type: 'text', maxlength: 5 },
    { key: 'bgColor', label: '背景色', type: 'color' },
    { key: 'textColor', label: '文字颜色', type: 'color' },
    { key: 'speed', label: '滚动速度', type: 'select', options: [
      { label: '慢速', value: 'slow' },
      { label: '正常', value: 'normal' },
      { label: '快速', value: 'fast' }
    ]}
  ]
}

COMPONENT_REGISTRY.spacer = {
  type: 'spacer',
  label: '空白占位',
  icon: '⬜',
  category: 'basic',
  categoryLabel: '基础组件',
  description: '控制模块间距',
  defaultProps: { height: 10, bgColor: 'transparent' },
  fields: [
    { key: 'height', label: '高度(px)', type: 'number', min: 1, max: 200 },
    { key: 'bgColor', label: '背景色', type: 'color' }
  ]
}

COMPONENT_REGISTRY.divider = {
  type: 'divider',
  label: '分割线',
  icon: '➖',
  category: 'basic',
  categoryLabel: '基础组件',
  description: '模块间分割',
  defaultProps: {
    color: '#eee',
    style: 'solid',   // solid | dashed | dotted
    margin: 12
  },
  fields: [
    { key: 'color', label: '颜色', type: 'color' },
    { key: 'style', label: '样式', type: 'select', options: [
      { label: '实线', value: 'solid' },
      { label: '虚线', value: 'dashed' },
      { label: '点线', value: 'dotted' }
    ]},
    { key: 'margin', label: '上下间距(px)', type: 'number', min: 0, max: 60 }
  ]
}

/* ==================== 营销组件 ==================== */

COMPONENT_REGISTRY.productList = {
  type: 'productList',
  label: '商品列表',
  icon: '📦',
  category: 'marketing',
  categoryLabel: '营销组件',
  description: '展示商品网格',
  defaultProps: {
    title: '精选推荐',
    source: 'auto',           // auto | category | manual | all
    categoryId: '',
    productIds: [],
    columns: 2,
    count: 6,
    showTitle: true,
    showPrice: true,
    showSales: true,
    showStock: false
  },
  fields: [
    { key: 'title', label: '模块标题', type: 'text', maxlength: 20 },
    { key: 'source', label: '商品来源', type: 'radio', options: [
      { label: '自动推荐', value: 'auto' },
      { label: '全部商品', value: 'all' },
      { label: '按分类', value: 'category' },
      { label: '手动选择', value: 'manual' }
    ]},
    { key: 'categoryId', label: '分类ID', type: 'number', showIf: { key: 'source', eq: 'category' } },
    { key: 'columns', label: '列数', type: 'select', options: [1, 2, 3] },
    { key: 'count', label: '显示数量', type: 'number', min: 2, max: 50 },
    { key: 'showPrice', label: '显示价格', type: 'switch' },
    { key: 'showSales', label: '显示销量', type: 'switch' },
    { key: 'showStock', label: '显示库存', type: 'switch' }
  ]
}

COMPONENT_REGISTRY.seckillEntry = {
  type: 'seckillEntry',
  label: '秒杀入口',
  icon: '⚡',
  category: 'marketing',
  categoryLabel: '营销组件',
  description: '限时秒杀倒计时',
  defaultProps: {
    title: '限时秒杀',
    bgColor: '#FFF0F0',
    textColor: '#E74C3C',
    seckillId: '',
    countdown: '02:35:48',
    showTitle: true
  },
  fields: [
    { key: 'title', label: '标题', type: 'text', maxlength: 10 },
    { key: 'seckillId', label: '秒杀活动ID', type: 'text', placeholder: '留空使用进行中的活动' },
    { key: 'bgColor', label: '背景色', type: 'color' },
    { key: 'textColor', label: '文字颜色', type: 'color' }
  ]
}

COMPONENT_REGISTRY.couponEntry = {
  type: 'couponEntry',
  label: '优惠券入口',
  icon: '🎫',
  category: 'marketing',
  categoryLabel: '营销组件',
  description: '领券中心入口',
  defaultProps: {
    title: '领券中心',
    bgColor: '#FFFBF0',
    textColor: '#D4A045',
    couponIds: []
  },
  fields: [
    { key: 'title', label: '标题', type: 'text', maxlength: 10 },
    { key: 'bgColor', label: '背景色', type: 'color' },
    { key: 'textColor', label: '文字颜色', type: 'color' }
  ]
}

COMPONENT_REGISTRY.grouponEntry = {
  type: 'grouponEntry',
  label: '拼团入口',
  icon: '🫂',
  category: 'marketing',
  categoryLabel: '营销组件',
  description: '拼团活动入口',
  defaultProps: {
    title: '拼团优选',
    bgColor: '#F0FFF0',
    textColor: '#27AE60',
    grouponId: ''
  },
  fields: [
    { key: 'title', label: '标题', type: 'text', maxlength: 10 },
    { key: 'bgColor', label: '背景色', type: 'color' },
    { key: 'textColor', label: '文字颜色', type: 'color' },
    { key: 'grouponId', label: '拼团活动ID', type: 'text' }
  ]
}

COMPONENT_REGISTRY.promotionList = {
  type: 'promotionList',
  label: '促销中心',
  icon: '🎉',
  category: 'marketing',
  categoryLabel: '营销组件',
  description: '聚合秒杀/拼团/砍价/预售/优惠券，实时拉取进行中活动',
  defaultProps: {
    title: '今日热促',
    bgColor: '#FFF7EE',
    textColor: '#E67E22',
    type: 'all',
    limit: 8
  },
  fields: [
    { key: 'title', label: '标题', type: 'text', maxlength: 10 },
    { key: 'type', label: '活动类型', type: 'select', options: [
      { label: '全部', value: 'all' },
      { label: '仅秒杀', value: 'seckill' },
      { label: '仅拼团', value: 'groupon' },
      { label: '仅砍价', value: 'bargain' },
      { label: '仅预售', value: 'presale' },
      { label: '仅优惠券', value: 'coupon' }
    ] },
    { key: 'limit', label: '显示条数', type: 'number', min: 2, max: 20, step: 1 },
    { key: 'bgColor', label: '背景色', type: 'color' },
    { key: 'textColor', label: '文字颜色', type: 'color' }
  ]
}

/* ==================== 工具组件 ==================== */

COMPONENT_REGISTRY.searchBox = {
  type: 'searchBox',
  label: '搜索框',
  icon: '🔍',
  category: 'tool',
  categoryLabel: '工具组件',
  description: '顶部商品搜索',
  defaultProps: {
    placeholder: '搜索商品',
    bgColor: '#f5f5f5',
    shape: 'round',       // round | square
    showCategory: false
  },
  fields: [
    { key: 'placeholder', label: '占位文字', type: 'text', maxlength: 30 },
    { key: 'bgColor', label: '背景色', type: 'color' },
    { key: 'shape', label: '形状', type: 'select', options: [
      { label: '圆角', value: 'round' },
      { label: '方角', value: 'square' }
    ]},
    { key: 'showCategory', label: '显示分类选择', type: 'switch' }
  ]
}

COMPONENT_REGISTRY.quickEntry = {
  type: 'quickEntry',
  label: '快捷入口',
  icon: '✨',
  category: 'tool',
  categoryLabel: '工具组件',
  description: '功能快捷入口(秒杀/签到/优惠券)',
  defaultProps: {
    items: [
      { icon: '⚡', text: '秒杀', link: '' },
      { icon: '✅', text: '签到', link: '' },
      { icon: '🎫', text: '优惠券', link: '' },
      { icon: '🫂', text: '拼团', link: '' }
    ],
    columns: 4,
    bgColor: '#fff'
  },
  fields: [
    { key: 'columns', label: '列数', type: 'select', options: [3, 4, 5] },
    { key: 'bgColor', label: '背景色', type: 'color' },
    { key: 'items', label: '入口项', type: 'nav-list' }
  ]
}

COMPONENT_REGISTRY.articleList = {
  type: 'articleList',
  label: '文章列表',
  icon: '📰',
  category: 'tool',
  categoryLabel: '工具组件',
  description: '资讯文章列表',
  defaultProps: {
    title: '资讯动态',
    source: 'auto',
    count: 5,
    showDate: true,
    showDesc: true
  },
  fields: [
    { key: 'title', label: '标题', type: 'text', maxlength: 20 },
    { key: 'count', label: '显示数量', type: 'number', min: 1, max: 20 },
    { key: 'showDate', label: '显示日期', type: 'switch' },
    { key: 'showDesc', label: '显示摘要', type: 'switch' }
  ]
}

COMPONENT_REGISTRY.videoModule = {
  type: 'videoModule',
  label: '视频模块',
  icon: '🎬',
  category: 'tool',
  categoryLabel: '工具组件',
  description: '嵌入商品/品牌视频',
  defaultProps: {
    videoUrl: '',
    poster: '',
    autoplay: false,
    loop: false,
    muted: true
  },
  fields: [
    { key: 'videoUrl', label: '视频链接', type: 'text', placeholder: '支持 mp4 / 第三方视频链接' },
    { key: 'poster', label: '封面图', type: 'image' },
    { key: 'autoplay', label: '自动播放', type: 'switch' },
    { key: 'loop', label: '循环播放', type: 'switch' },
    { key: 'muted', label: '静音', type: 'switch' }
  ]
}

/* ==================== v1.8 新增组件 ==================== */

/** 商品瀑布流（图片错落两列） */
COMPONENT_REGISTRY.waterfall = {
  type: 'waterfall',
  label: '商品瀑布流',
  icon: '🏞️',
  category: 'marketing',
  categoryLabel: '营销组件',
  description: '图片错落两列瀑布流展示商品',
  defaultProps: {
    title: '人气瀑布流',
    source: 'auto',           // auto | hot | new | all
    count: 6,
    showPrice: true,
    showSales: true
  },
  fields: [
    { key: 'title', label: '模块标题', type: 'text', maxlength: 20 },
    { key: 'source', label: '数据源', type: 'radio', options: [
      { label: '自动推荐', value: 'auto' },
      { label: '热卖', value: 'hot' },
      { label: '新品', value: 'new' },
      { label: '全部', value: 'all' }
    ]},
    { key: 'count', label: '显示数量', type: 'number', min: 2, max: 50 },
    { key: 'showPrice', label: '显示价格', type: 'switch' },
    { key: 'showSales', label: '显示销量', type: 'switch' }
  ]
}

/** 优惠券墙（多券展示+领取） */
COMPONENT_REGISTRY.couponWall = {
  type: 'couponWall',
  label: '优惠券墙',
  icon: '🎫',
  category: 'marketing',
  categoryLabel: '营销组件',
  description: '多张优惠券墙，可点击领取',
  defaultProps: {
    title: '领券中心',
    count: 4,
    showClaim: true
  },
  fields: [
    { key: 'title', label: '模块标题', type: 'text', maxlength: 20 },
    { key: 'count', label: '显示数量', type: 'number', min: 1, max: 10 },
    { key: 'showClaim', label: '可领取', type: 'switch' }
  ]
}

/** 公告滚动（多公告无缝滚动） */
COMPONENT_REGISTRY.noticeScroll = {
  type: 'noticeScroll',
  label: '公告滚动',
  icon: '📢',
  category: 'tool',
  categoryLabel: '工具组件',
  description: '多条公告向上无缝滚动',
  defaultProps: {
    items: ['全场满99元包邮，优惠大放送！', '新人注册立享5元无门槛券'],
    speed: 30,
    textColor: '#8a6d3b',
    bgColor: '#fff8ec'
  },
  fields: [
    { key: 'items', label: '公告列表', type: 'notice-list' },
    { key: 'speed', label: '滚动速度', type: 'number', min: 10, max: 100, step: 5 },
    { key: 'textColor', label: '文字颜色', type: 'color' },
    { key: 'bgColor', label: '背景色', type: 'color' }
  ]
}

/** 倒计时横幅 */
COMPONENT_REGISTRY.countdownBanner = {
  type: 'countdownBanner',
  label: '倒计时横幅',
  icon: '⏱️',
  category: 'marketing',
  categoryLabel: '营销组件',
  description: '带倒计时的营销横幅',
  defaultProps: {
    title: '限时特惠',
    subtitle: '错过再等一年',
    endTime: '',
    link: '',
    bgImage: '',
    bgColor: '#EE6B2F'
  },
  fields: [
    { key: 'title', label: '主标题', type: 'text', maxlength: 30 },
    { key: 'subtitle', label: '副标题', type: 'text', maxlength: 30 },
    { key: 'endTime', label: '结束时间', type: 'datetime', help: '留空则持续显示' },
    { key: 'bgImage', label: '背景图', type: 'image' },
    { key: 'bgColor', label: '背景色', type: 'color' },
    { key: 'link', label: '跳转链接', type: 'text', placeholder: '可选' }
  ]
}

/** 分类宫格（数据驱动真实分类） */
COMPONENT_REGISTRY.categoryGrid = {
  type: 'categoryGrid',
  label: '分类宫格',
  icon: '🗂️',
  category: 'basic',
  categoryLabel: '基础组件',
  description: '展示真实商品分类宫格',
  defaultProps: {
    columns: 4,
    limit: 10,
    showIcon: true
  },
  fields: [
    { key: 'columns', label: '列数', type: 'select', options: [4, 5] },
    { key: 'limit', label: '显示分类数', type: 'number', min: 4, max: 20 },
    { key: 'showIcon', label: '显示图标', type: 'switch' }
  ]
}

/* ==================== 分类常量 ==================== */

export const CATEGORIES = [
  { key: 'basic', label: '📦 基础组件', icon: '📦' },
  { key: 'marketing', label: '🎯 营销组件', icon: '🎯' },
  { key: 'tool', label: '🔧 工具组件', icon: '🔧' }
]

/**
 * 按分类获取组件列表
 */
export function getComponentsByCategory() {
  const grouped = {}
  for (const cat of CATEGORIES) {
    grouped[cat.key] = []
  }
  for (const entry of Object.values(COMPONENT_REGISTRY)) {
    if (grouped[entry.category]) {
      grouped[entry.category].push(entry)
    }
  }
  return grouped
}

/**
 * 获取某组件类型的 Schema 定义
 */
export function getComponentSchema(type) {
  return COMPONENT_REGISTRY[type] || null
}

/**
 * 获取组件标签（显示名）
 */
export function getComponentLabel(type) {
  return COMPONENT_REGISTRY[type]?.label || type
}
