/**
 * 设计模块页面路由配置与数据
 * 将 design.uts 的函数输出转换为页面路由/配置格式
 */

import type { DesignItem, DesignComponent, DesignTemplate } from './design.uts'

/**
 * 装修页面列表路由配置
 */
export const designListPageConfig = {
  id: 'design-list',
  path: '/pages/mall/admin/design/list',
  name: '装修列表',
  title: '装修管理',
  data: [
    {
      id: 1,
      name: '首页装修',
      type: 'homepage' as const,
      status: 1,
      path: '/pages/mall/admin/design/index?tab=homepage',
      content: [],
      updated_at: '2026-01-30 14:30:00'
    },
    {
      id: 2,
      name: '年货节活动页',
      type: 'custom' as const,
      status: 1,
      path: '/pages/mall/admin/design/index?tab=custom',
      content: [],
      updated_at: '2026-01-28 10:15:00'
    }
  ] as DesignItem[]
}

/**
 * 首页装修页面路由配置
 */
export const designHomepagePageConfig = {
  id: 'design-homepage',
  path: '/pages/mall/admin/design/index?tab=homepage',
  name: '首页装修',
  title: '首页装修 - 打造吸引人的商城首页',
  data: {
    id: 'homepage',
    name: '首页装修',
    type: 'homepage' as const,
    status: 1,
    content: [
      {
        id: 'carousel-1',
        type: 'carousel' as const,
        name: '轮播图',
        icon: 'C',
        description: '首页顶部轮播图展示',
        config: {
          autoplay: true,
          duration: 5000,
          height: 300
        }
      },
      {
        id: 'product-1',
        type: 'product' as const,
        name: '商品展示',
        icon: 'P',
        description: '热销商品列表',
        config: {
          count: 8,
          columns: 2,
          layout: 'grid'
        }
      }
    ],
    version: '1.0.0',
    updated_at: '2026-01-30 14:30:00'
  } as DesignItem
}

/**
 * 分类页装修页面路由配置
 */
export const designCategoryPageConfig = {
  id: 'design-category',
  path: '/pages/mall/admin/design/index?tab=category',
  name: '分类页装修',
  title: '分类页装修 - 为不同分类创建独特展示',
  data: [
    {
      id: 1,
      name: '默认分类装修',
      type: 'category' as const,
      status: 1,
      categoryId: 0,
      categoryName: '全部分类',
      path: '/pages/mall/admin/design/index?tab=category&id=1',
      content: [],
      updated_at: '2026-01-30 14:30:00'
    },
    {
      id: 2,
      name: '热销商品分类',
      type: 'category' as const,
      status: 0,
      categoryId: 1,
      categoryName: '推荐分类',
      path: '/pages/mall/admin/design/index?tab=category&id=2',
      content: [],
      updated_at: '2026-01-29 10:15:00'
    }
  ] as DesignItem[]
}

/**
 * 商品页装修页面路由配置
 */
export const designProductPageConfig = {
  id: 'design-product',
  path: '/pages/mall/admin/design/index?tab=product',
  name: '商品页装修',
  title: '商品页装修 - 自定义商品详情页展示',
  data: {
    id: 'product',
    name: '商品页装修',
    type: 'product' as const,
    status: 1,
    content: [
      {
        id: 'image-1',
        type: 'image' as const,
        name: '商品图',
        icon: 'I',
        description: '商品主图展示'
      },
      {
        id: 'product-info',
        type: 'text' as const,
        name: '商品信息',
        icon: 'T',
        description: '商品名称和价格'
      }
    ],
    version: '1.0.0',
    updated_at: '2026-01-30 14:30:00'
  } as DesignItem
}

/**
 * 自定义页面路由配置
 */
export const designCustomPageConfig = {
  id: 'design-custom',
  path: '/pages/mall/admin/design/index?tab=custom',
  name: '自定义页面',
  title: '自定义页面 - 创建特殊内容页面',
  data: [
    {
      id: 1,
      name: '新年促销页',
      type: 'custom' as const,
      status: 1,
      path: '/pages/mall/admin/design/index?tab=custom&id=1',
      content: [],
      updated_at: '2026-01-28 09:00:00'
    }
  ] as DesignItem[]
}

/**
 * 模板库页面路由配置
 */
export const designTemplatePageConfig = {
  id: 'design-templates',
  path: '/pages/mall/admin/design/index?tab=templates',
  name: '模板库',
  title: '模板库 - 选择预设装修模板',
  data: [
    {
      id: 1,
      name: '电商风格A',
      description: '简洁现代的电商布局',
      type: 'homepage',
      preview: '/static/images/template-a.png',
      content: []
    },
    {
      id: 2,
      name: '电商风格B',
      description: '豪华展示的电商布局',
      type: 'homepage',
      preview: '/static/images/template-b.png',
      content: []
    },
    {
      id: 3,
      name: '精品风格',
      description: '精品商品展示布局',
      type: 'homepage',
      preview: '/static/images/template-c.png',
      content: []
    },
    {
      id: 4,
      name: '商城风格',
      description: '完整商城功能布局',
      type: 'homepage',
      preview: '/static/images/template-d.png',
      content: []
    }
  ] as DesignTemplate[]
}

/**
 * 组件库页面路由配置
 */
export const designComponentPageConfig = {
  id: 'design-components',
  path: '/pages/mall/admin/design/index?tab=components',
  name: '组件库',
  title: '组件库 - 丰富的页面组件',
  data: [
    {
      id: 'image',
      type: 'image' as const,
      name: '图片组件',
      icon: 'I',
      description: '展示图片和图片轮播',
      componentName: 'ImageComponent',
      config: {
        defaultWidth: '100%',
        defaultHeight: 'auto'
      }
    },
    {
      id: 'text',
      type: 'text' as const,
      name: '文本组件',
      icon: 'T',
      description: '展示文本内容和段落',
      componentName: 'TextComponent'
    },
    {
      id: 'product',
      type: 'product' as const,
      name: '商品组件',
      icon: 'P',
      description: '展示商品列表和推荐',
      componentName: 'ProductComponent',
      config: {
        defaultCount: 6,
        defaultColumns: 2
      }
    },
    {
      id: 'carousel',
      type: 'carousel' as const,
      name: '轮播组件',
      icon: 'C',
      description: '图片和内容轮播',
      componentName: 'CarouselComponent',
      config: {
        autoplay: true,
        duration: 5000
      }
    },
    {
      id: 'divider',
      type: 'divider' as const,
      name: '分割线',
      icon: 'D',
      description: '分割不同内容区域',
      componentName: 'DividerComponent'
    },
    {
      id: 'spacer',
      type: 'spacer' as const,
      name: '间距组件',
      icon: 'S',
      description: '调整元素间距',
      componentName: 'SpacerComponent',
      config: {
        defaultHeight: 16
      }
    },
    {
      id: 'button',
      type: 'button' as const,
      name: '按钮组件',
      icon: 'B',
      description: '创建点击按钮',
      componentName: 'ButtonComponent'
    },
    {
      id: 'form',
      type: 'form' as const,
      name: '表单组件',
      icon: 'F',
      description: '收集用户输入数据',
      componentName: 'FormComponent'
    }
  ] as DesignComponent[]
}

/**
 * 编辑页面路由配置
 */
export const designEditorPageConfig = {
  id: 'design-editor',
  path: '/pages/mall/admin/design/editor',
  name: '装修编辑器',
  title: '装修编辑器 - 可视化编辑装修页面',
  components: [
    {
      id: 'canvas',
      name: '编辑画布',
      description: '拖拽编辑区域'
    },
    {
      id: 'sidebar',
      name: '组件侧栏',
      description: '可用组件列表'
    },
    {
      id: 'properties',
      name: '属性面板',
      description: '组件属性编辑'
    },
    {
      id: 'preview',
      name: '预览窗口',
      description: '实时效果预览'
    }
  ]
}

/**
 * 预览页面路由配置
 */
export const designPreviewPageConfig = {
  id: 'design-preview',
  path: '/pages/mall/design/preview/:id',
  name: '装修预览',
  title: '装修效果预览',
  features: [
    '全屏预览',
    '响应式展示',
    '交互测试',
    '性能分析'
  ]
}

/**
 * 所有设计页面路由配置
 */
export const allDesignPageConfigs = [
  designListPageConfig,
  designHomepagePageConfig,
  designCategoryPageConfig,
  designProductPageConfig,
  designCustomPageConfig,
  designTemplatePageConfig,
  designComponentPageConfig,
  designEditorPageConfig,
  designPreviewPageConfig
]

/**
 * 根据 tab 获取对应的页面配置
 */
export function getDesignPageConfig(tab: string) {
  const configMap: Record<string, any> = {
    'homepage': designHomepagePageConfig,
    'category': designCategoryPageConfig,
    'product': designProductPageConfig,
    'custom': designCustomPageConfig,
    'templates': designTemplatePageConfig,
    'components': designComponentPageConfig,
    'editor': designEditorPageConfig,
    'preview': designPreviewPageConfig,
    'list': designListPageConfig
  }
  return configMap[tab] || designListPageConfig
}

/**
 * 装修页面导航菜单结构
 */
export const designMenuStructure = {
  id: 'design',
  title: '设计',
  icon: '/static/design.svg',
  path: '/pages/mall/admin/design/index',
  children: [
    {
      id: 'page-decoration',
      title: '页面装修',
      children: [
        {
          id: 'design-homepage',
          title: '首页装修',
          path: '/pages/mall/admin/design/index?tab=homepage'
        },
        {
          id: 'design-category',
          title: '分类页装修',
          path: '/pages/mall/admin/design/index?tab=category'
        },
        {
          id: 'design-product',
          title: '商品页装修',
          path: '/pages/mall/admin/design/index?tab=product'
        },
        {
          id: 'design-custom',
          title: '自定义页面',
          path: '/pages/mall/admin/design/index?tab=custom'
        }
      ]
    },
    {
      id: 'design-library',
      title: '设计库',
      children: [
        {
          id: 'design-templates',
          title: '模板库',
          path: '/pages/mall/admin/design/index?tab=templates'
        },
        {
          id: 'design-components',
          title: '组件库',
          path: '/pages/mall/admin/design/index?tab=components'
        }
      ]
    }
  ]
}