<template>
  <div class="api-permissions">
    <div class="api-permissions-toolbar">
      <div class="toolbar-left">
        <div class="toolbar-heading">
          <span class="toolbar-title">有效权限矩阵</span>
          <el-tag size="small" effect="plain" type="info">只读</el-tag>
        </div>
        <span class="toolbar-result">显示 {{ filteredPermissionCount }} / {{ totalPermissionCount }} 项权限</span>
      </div>
      <div class="toolbar-filters">
        <el-input
          v-model="searchText"
          placeholder="搜索权限..."
          clearable
          style="width: 220px"
          :prefix-icon="Search"
        />
        <el-select v-model="filterModule" placeholder="筛选模块" clearable style="width: 150px">
          <el-option label="全部模块" value="" />
          <el-option
            v-for="module in uniqueModules"
            :key="module"
            :label="moduleLabel(module)"
            :value="module"
          />
        </el-select>
        <el-select v-model="filterAction" placeholder="筛选操作" clearable style="width: 120px">
          <el-option label="全部操作" value="" />
          <el-option label="创建" value="create" />
          <el-option label="读取" value="read" />
          <el-option label="更新" value="update" />
          <el-option label="删除" value="delete" />
          <el-option label="导出" value="export" />
        </el-select>
        <el-select v-model="filterAuthorization" placeholder="授权状态" style="width: 140px">
          <el-option label="全部授权状态" value="" />
          <el-option label="存在角色差异" value="different" />
          <el-option label="至少一项授权" value="granted" />
          <el-option label="全部未授权" value="ungranted" />
        </el-select>
        <el-button :disabled="!hasActiveFilters" @click="resetFilters">重置</el-button>
      </div>
    </div>

    <div class="api-permissions-table-wrapper">
      <el-table
        :data="filteredOperations"
        border
        stripe
        max-height="calc(100dvh - 330px)"
        empty-text="未找到匹配的权限"
        :span-method="spanMethod"
        class="perm-matrix-table"
      >
        <el-table-column prop="permission_category" label="权限类型" width="120" fixed="left">
          <template #default="{ row }">
            <div class="hierarchy-cell hierarchy-cell--category" :data-category="getPermissionCategory(row)">
              <span class="hierarchy-bar" />
              <span class="category-label">{{ getPermissionCategoryLabel(row) }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="module" label="模块" width="160" fixed="left">
          <template #default="{ row }">
            <div class="hierarchy-cell hierarchy-cell--module">
              <span class="module-dot" />
              <span class="module-label">{{ moduleLabel(row.module) }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="section" label="模块细分" width="160">
          <template #default="{ row }">
            <div class="hierarchy-cell hierarchy-cell--section">
              <span class="section-chip">{{ getOperationSection(row) }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="operation_key" label="权限操作" min-width="240">
          <template #default="{ row }">
            <div class="operation-cell">
              <el-tag :type="getActionType(row)" size="small" class="action-tag">
                {{ getActionLabel(row) }}
              </el-tag>
              <span class="operation-name">{{ row.description || row.operation_key }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          v-for="role in roles"
          :key="role"
          :label="roleLabel(role)"
          :width="90"
          align="center"
        >
          <template #default="{ row }">
            <span
              class="permission-state"
              :class="{
                'permission-state--allowed': isOperationAllowed(row.operation_key, role),
                'permission-state--disabled': !isOperationAllowed(row.operation_key, role),
              }"
              :title="isOperationAllowed(row.operation_key, role) ? '已授权' : '未授权'"
            >
              <template v-if="isOperationAllowed(row.operation_key, role)">✓</template>
              <template v-else>—</template>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import type { ApiEndpointPermissionsResponse } from "@/types/api";
import { fetchApiOperations } from "@/api/projectPermissions";
import { isApiPermissionAllowed } from "@/utils/apiPermissionValue";
import { useRoleTemplateMeta } from "@/composables/useRoleTemplateMeta";
import {
  compareProjectPermissionModules,
  projectPermissionCategory,
  projectPermissionCategoryLabel,
  projectPermissionModuleLabel,
} from "@/utils/projectPermissionModules";

interface Operation {
  operation_key: string;
  module: string;
  action: string;
  description: string;
  default_roles: string[];
}

interface DisplayOperation extends Operation {
  source_module: string;
  source_index: number;
  display_section?: string;
}

interface Props {
  project: any;
  matrix: ApiEndpointPermissionsResponse | null;
}

const props = defineProps<Props>();

const { roleLabel, compareRolesByTemplateOrder, loadRoleTemplates } = useRoleTemplateMeta();

const searchText = ref("");
const filterModule = ref("");
const filterAction = ref("");
const filterAuthorization = ref("");
const operations = ref<Operation[]>([]);

const hasActiveFilters = computed(() => Boolean(
  searchText.value || filterModule.value || filterAction.value || filterAuthorization.value
));

const resetFilters = () => {
  searchText.value = "";
  filterModule.value = "";
  filterAction.value = "";
  filterAuthorization.value = "";
};

const moduleLabel = projectPermissionModuleLabel;
const getPermissionCategory = (row: Operation): "common" | "business" => projectPermissionCategory(row.module);
const getPermissionCategoryLabel = (row: Operation): string => projectPermissionCategoryLabel(row.module);

const RISK_ISSUE_REUSED_SECTIONS: Record<string, string> = {
  subject_aes: "AE/SAE",
  subject_pds: "PD",
};

const getOperationPrefix = (row: Operation): string => row.operation_key.split(":")[0] || row.module;

const displayOperations = computed<DisplayOperation[]>(() => {
  const rows: DisplayOperation[] = operations.value.map((operation, index) => ({
    ...operation,
    source_module: operation.module,
    source_index: index,
  }));

  operations.value.forEach((operation, index) => {
    const prefix = getOperationPrefix(operation);
    const displaySection = RISK_ISSUE_REUSED_SECTIONS[prefix];
    if (!displaySection) return;
    if (rows.some((row) => row.module === "risk_issues" && row.operation_key === operation.operation_key)) return;
    rows.push({
      ...operation,
      module: "risk_issues",
      source_module: operation.module,
      source_index: index,
      display_section: displaySection,
    });
  });

  return rows;
});

// 从矩阵中提取角色列表
const roles = computed(() => {
  if (!props.matrix) return [];
  return Object.keys(props.matrix).sort(compareRolesByTemplateOrder);
});

// 加载权限操作列表
const loadOperations = async () => {
  try {
    const { data } = await fetchApiOperations();
    operations.value = data.operations;
  } catch (error) {
    ElMessage.error("加载权限操作失败");
    console.error(error);
  }
};

// 获取唯一的模块列表
const uniqueModules = computed(() => {
  return [...new Set(displayOperations.value.map((o) => o.module))].sort(compareProjectPermissionModules);
});

// 过滤并按模块分组排序
const filteredOperations = computed(() => {
  const filtered = displayOperations.value.filter((operation) => {
    const sectionLabel = getOperationSection(operation);
    const matchSearch =
      !searchText.value ||
      operation.operation_key.toLowerCase().includes(searchText.value.toLowerCase()) ||
      operation.description.toLowerCase().includes(searchText.value.toLowerCase()) ||
      moduleLabel(operation.module).includes(searchText.value) ||
      sectionLabel.includes(searchText.value);

    const matchModule = !filterModule.value || operation.module === filterModule.value;
    const matchAction = !filterAction.value || getOperationVerb(operation) === filterAction.value;
    const roleStates = roles.value.map((role) => isOperationAllowed(operation.operation_key, role));
    const matchAuthorization =
      !filterAuthorization.value ||
      (filterAuthorization.value === "different" && roleStates.some(Boolean) && roleStates.some((allowed) => !allowed)) ||
      (filterAuthorization.value === "granted" && roleStates.some(Boolean)) ||
      (filterAuthorization.value === "ungranted" && roleStates.every((allowed) => !allowed));

    return matchSearch && matchModule && matchAction && matchAuthorization;
  });

  // 按权限类型、模块分组排序
  filtered.sort((a, b) => {
    const categoryDiff = Number(getPermissionCategory(a) === "business") - Number(getPermissionCategory(b) === "business");
    if (categoryDiff !== 0) return categoryDiff;
    if (a.module !== b.module) {
      return compareProjectPermissionModules(a.module, b.module);
    }
    const sectionDiff = compareOperationSections(a, b);
    if (sectionDiff !== 0) return sectionDiff;
    return a.source_index - b.source_index;
  });

  return filtered;
});

const countUniquePermissions = (rows: DisplayOperation[]): number =>
  new Set(rows.map((operation) => operation.operation_key)).size;

const totalPermissionCount = computed(() => countUniquePermissions(displayOperations.value));
const filteredPermissionCount = computed(() => countUniquePermissions(filteredOperations.value));

// 权限类型、模块与模块细分列合并行
const spanMethod = ({ row, rowIndex, columnIndex }: { row: DisplayOperation; rowIndex: number; column: any; columnIndex: number }) => {
  if (columnIndex === 0) {
    const list = filteredOperations.value;
    const category = getPermissionCategory(row);
    if (rowIndex === 0 || getPermissionCategory(list[rowIndex - 1]) !== category) {
      let count = 1;
      for (let i = rowIndex + 1; i < list.length && getPermissionCategory(list[i]) === category; i++) {
        count++;
      }
      return { rowspan: count, colspan: 1 };
    }
    return { rowspan: 0, colspan: 0 };
  }
  if (columnIndex === 1) {
    const list = filteredOperations.value;
    if (rowIndex === 0 || list[rowIndex - 1].module !== row.module) {
      let count = 1;
      for (let i = rowIndex + 1; i < list.length && list[i].module === row.module; i++) {
        count++;
      }
      return { rowspan: count, colspan: 1 };
    }
    return { rowspan: 0, colspan: 0 };
  }
  if (columnIndex === 2) {
    const list = filteredOperations.value;
    const section = getOperationSection(row);
    if (
      rowIndex === 0 ||
      list[rowIndex - 1].module !== row.module ||
      getOperationSection(list[rowIndex - 1]) !== section
    ) {
      let count = 1;
      for (
        let i = rowIndex + 1;
        i < list.length &&
        list[i].module === row.module &&
        getOperationSection(list[i]) === section;
        i++
      ) {
        count++;
      }
      return { rowspan: count, colspan: 1 };
    }
    return { rowspan: 0, colspan: 0 };
  }
  return { rowspan: 1, colspan: 1 };
};

// 检查操作是否允许
const isOperationAllowed = (operation_key: string, role: string): boolean => {
  if (!props.matrix || !props.matrix[role]) return false;
  return isApiPermissionAllowed(props.matrix[role][operation_key]);
};

// 从 operation_key 提取操作类型
const getOperationVerb = (row: Operation): string => {
  const key = row.operation_key;
  const suffix = key.split(":").pop() || "";
  if (suffix === "create") return "create";
  if (suffix === "read" || suffix === "list") return "read";
  if (suffix === "update") return "update";
  if (suffix === "delete") return "delete";
  if (suffix === "export") return "export";
  return row.action;
};

const ACTION_LABELS: Record<string, string> = {
  create: "创建",
  read: "读取",
  update: "更新",
  delete: "删除",
  export: "导出",
  write: "写入",
};

const ACTION_TAG_TYPES: Record<string, string> = {
  create: "success",
  read: "info",
  update: "warning",
  delete: "danger",
  export: "",
  write: "success",
};

const getActionLabel = (row: Operation): string => {
  const verb = getOperationVerb(row);
  return ACTION_LABELS[verb] || verb;
};

const getActionType = (row: Operation): string => {
  const verb = getOperationVerb(row);
  return ACTION_TAG_TYPES[verb] || "info";
};

const SECTION_LABELS: Record<string, string> = {
  subjects: "参与者基础信息",
  visits: "访视",
  subject_aes: "AE",
  subject_pds: "PD",
  subject_histories: "病史",
  monitoring_issues: "监查访视问题",
  project_milestones: "项目里程碑",
  drug_shipments: "药品流向管理",
  drug_shipments_attachments: "药品流向管理",
  material_equipments: "设备管理",
  material_equipments_attachments: "设备管理",
  startup_initiation: "立项",
  startup_initiation_attachments: "立项",
  startup_ethics: "伦理",
  startup_ethics_attachments: "伦理",
  precautions: "注意事项",
  precautions_attachments: "注意事项",
  faq: "医学咨询/FAQ",
  faq_category: "医学咨询/FAQ",
  faq_reply: "医学咨询/FAQ",
  faq_attachments: "医学咨询/FAQ",
  collaboration: "在线协作",
};

const SECTION_ORDER_BY_MODULE: Record<string, string[]> = {
  subjects: ["参与者基础信息", "访视", "AE", "PD", "病史"],
  risk_issues: ["AE/SAE", "PD", "监查访视问题"],
  shared_library: ["医学咨询/FAQ", "注意事项", "在线协作"],
};

const getOperationSection = (row: Operation): string => {
  const displaySection = (row as Partial<DisplayOperation>).display_section;
  if (displaySection) return displaySection;
  const prefix = getOperationPrefix(row);
  return SECTION_LABELS[prefix] || moduleLabel(row.module);
};

const compareOperationSections = (a: Operation, b: Operation): number => {
  const aSection = getOperationSection(a);
  const bSection = getOperationSection(b);
  const orderedSections = a.module === b.module ? SECTION_ORDER_BY_MODULE[a.module] : undefined;
  if (orderedSections) {
    const aIndex = orderedSections.indexOf(aSection);
    const bIndex = orderedSections.indexOf(bSection);
    if (aIndex !== -1 || bIndex !== -1) {
      if (aIndex === -1) return 1;
      if (bIndex === -1) return -1;
      return aIndex - bIndex;
    }
  }
  return aSection.localeCompare(bSection, "zh-CN");
};

onMounted(() => {
  loadOperations();
  loadRoleTemplates();
});

defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermissionCategoryLabel });
</script>

<style scoped>
.api-permissions {
  padding: 8px 0;
}

.api-permissions-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.toolbar-heading {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a2332;
}

.toolbar-result {
  color: #7a8a9a;
  font-size: 10.5px;
}

.toolbar-filters {
  display: flex;
  align-items: center;
  gap: 6px;
}

.api-permissions-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.perm-matrix-table {
  width: 100%;
}

.hierarchy-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
}

/* 权限类型：左侧渐变色条 + 加粗大字 */
.hierarchy-cell--category {
  position: relative;
  padding-left: 6px;
}

.hierarchy-bar {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 100%);
}

.hierarchy-cell--category[data-category="common"] .hierarchy-bar {
  background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%);
}

.hierarchy-cell--category[data-category="business"] .hierarchy-bar {
  background: linear-gradient(180deg, #8b5cf6 0%, #a78bfa 100%);
}

.category-label {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.3px;
}

/* 模块：实心圆点 + 中等加粗字 */
.module-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.module-label {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

/* 模块细分：胶囊样式 */
.section-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 10.5px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}

.operation-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.action-tag {
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
}

.operation-name {
  font-size: 12px;
  color: #475569;
}

.permission-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}

.permission-state--allowed {
  color: #0f766e;
  background: #ecfdf5;
  border: 1px solid #99f6e4;
  border-radius: 999px;
}

.permission-state--disabled {
  color: #c3ccd5;
  font-weight: 500;
}

:deep(.api-permissions .el-input__wrapper),
:deep(.api-permissions .el-select__wrapper) {
  min-height: 28px;
}

:deep(.api-permissions .el-button) {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11.5px;
}

:deep(.perm-matrix-table .el-table__header-wrapper th.el-table__cell) {
  padding: 6px 0;
  font-size: 11px;
}

:deep(.perm-matrix-table .el-table__body-wrapper td.el-table__cell) {
  padding: 4px 0;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .api-permissions-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-filters {
    flex-wrap: wrap;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .toolbar-filters > * {
    width: 100% !important;
  }
}
</style>
