import type { Component } from 'vue';
import { markRaw, shallowRef } from 'vue';

export type WorkbenchModuleKey =
  | 'kpi'
  | 'myTodo'
  | 'myTask'
  | 'myRequirement'
  | 'myProject'
  | 'activity'
  | 'shortcut'
  | 'teamTodo'
  | 'projectHealth'
  | 'progressChart'
  | 'favorite';

export type WorkbenchModuleCategory = 'personal' | 'manager' | 'tool';
export type WorkbenchColumnId = 'left' | 'right';

export interface WorkbenchModuleMeta {
  key: WorkbenchModuleKey;
  component: Component;
  displayName: string;
  icon: string;
  category: WorkbenchModuleCategory;
  defaultVisible: boolean;
  defaultColumn: WorkbenchColumnId;
  defaultOrder: number;
}

const placeholder = markRaw({ render: () => null });

const registry: WorkbenchModuleMeta[] = [
  {
    key: 'kpi',
    component: placeholder,
    displayName: 'KPI 速览',
    icon: 'mdi:view-dashboard-outline',
    category: 'personal',
    defaultVisible: true,
    defaultColumn: 'left',
    defaultOrder: 1
  },
  {
    key: 'myTodo',
    component: placeholder,
    displayName: '我的待办',
    icon: 'mdi:clipboard-text-clock-outline',
    category: 'personal',
    defaultVisible: true,
    defaultColumn: 'left',
    defaultOrder: 2
  },
  {
    key: 'myTask',
    component: placeholder,
    displayName: '我的任务',
    icon: 'mdi:checkbox-marked-circle-outline',
    category: 'personal',
    defaultVisible: true,
    defaultColumn: 'left',
    defaultOrder: 3
  },
  {
    key: 'myRequirement',
    component: placeholder,
    displayName: '我的需求',
    icon: 'mdi:file-document-multiple-outline',
    category: 'personal',
    defaultVisible: true,
    defaultColumn: 'left',
    defaultOrder: 4
  },
  {
    key: 'myProject',
    component: placeholder,
    displayName: '我参与的项目',
    icon: 'mdi:briefcase-outline',
    category: 'personal',
    defaultVisible: true,
    defaultColumn: 'right',
    defaultOrder: 1
  },
  {
    key: 'activity',
    component: placeholder,
    displayName: '最近动态',
    icon: 'mdi:timeline-outline',
    category: 'personal',
    defaultVisible: true,
    defaultColumn: 'right',
    defaultOrder: 2
  },
  {
    key: 'shortcut',
    component: placeholder,
    displayName: '快捷入口',
    icon: 'mdi:rocket-launch-outline',
    category: 'tool',
    defaultVisible: true,
    defaultColumn: 'right',
    defaultOrder: 3
  },
  {
    key: 'teamTodo',
    component: placeholder,
    displayName: '团队待办汇总',
    icon: 'mdi:account-group-outline',
    category: 'manager',
    defaultVisible: false,
    defaultColumn: 'right',
    defaultOrder: 4
  },
  {
    key: 'projectHealth',
    component: placeholder,
    displayName: '项目健康度',
    icon: 'mdi:heart-pulse',
    category: 'manager',
    defaultVisible: false,
    defaultColumn: 'right',
    defaultOrder: 5
  },
  {
    key: 'progressChart',
    component: placeholder,
    displayName: '跨项目进度图',
    icon: 'mdi:chart-bar',
    category: 'manager',
    defaultVisible: false,
    defaultColumn: 'right',
    defaultOrder: 6
  },
  {
    key: 'favorite',
    component: placeholder,
    displayName: '我的收藏',
    icon: 'mdi:star-outline',
    category: 'tool',
    defaultVisible: false,
    defaultColumn: 'right',
    defaultOrder: 7
  }
];

const registryRef = shallowRef(registry);

export function useWorkbenchModules() {
  function getAllModules() {
    return registryRef.value;
  }
  function getModuleMeta(key: WorkbenchModuleKey) {
    return registryRef.value.find(m => m.key === key);
  }
  function registerModuleComponent(key: WorkbenchModuleKey, component: Component) {
    const target = registryRef.value.find(m => m.key === key);
    if (target) target.component = markRaw(component);
  }
  return { getAllModules, getModuleMeta, registerModuleComponent };
}