<template>
  <div class="org-tree-container">
    <el-row :gutter="20">
      <!-- Left Column: Tree -->
      <el-col :span="12">
        <el-card shadow="never" class="tree-card">
          <template #header>
            <div class="card-header">
              <span class="header-title"
                ><el-icon><Connection /></el-icon> 组织架构全景图</span
              >
              <el-button
                type="primary"
                @click="fetchTreeData"
                icon="Refresh"
                round
                size="small"
                >刷新</el-button
              >
            </div>
          </template>

          <div class="tree-content" v-loading="loading">
            <el-tree
              :data="treeData"
              :props="defaultProps"
              node-key="key"
              default-expand-all
              :expand-on-click-node="false"
              class="beautiful-tree"
              @node-click="handleNodeClick"
              highlight-current
            >
              <template #default="{ node, data }">
                <div class="custom-tree-node" :class="`node-${data.type}`">
                  <div class="node-main">
                    <div class="node-icon-wrapper">
                      <el-icon v-if="data.type === 'hospital'"
                        ><OfficeBuilding
                      /></el-icon>
                      <el-icon v-else-if="data.type === 'department'"
                        ><Filter
                      /></el-icon>
                      <el-icon v-else-if="data.type === 'group'"
                        ><Connection
                      /></el-icon>
                      <el-icon v-else-if="data.type === 'user'"
                        ><UserFilled
                      /></el-icon>
                    </div>
                    <div class="node-text">
                      <span class="node-label">{{ node.label }}</span>
                      <span
                        v-if="data.type === 'hospital'"
                        class="node-sub-label"
                      >
                        医院管理员：{{ data.adminDisplay || '未设置' }}
                      </span>
                      <span
                        v-else-if="data.type === 'department'"
                        class="node-sub-label"
                      >
                        主任：{{ data.directorDisplay || '未设置' }}
                      </span>
                      <span
                        v-else-if="data.type === 'group'"
                        class="node-sub-label"
                      >
                        组长：{{ data.leaderDisplay || '未设置' }}
                      </span>
                    </div>
                    <el-tag
                      v-if="data.type === 'user'"
                      size="small"
                      :type="getRoleTagType(data.role)"
                      effect="light"
                      class="role-tag"
                      round
                    >
                      {{ getRoleName(data.role) }}
                    </el-tag>
                  </div>

                  <div class="node-actions" v-if="data.type !== 'user'">
                    <el-button
                      v-if="
                        canAssignOwner &&
                        (data.type === 'department' || data.type === 'group')
                      "
                      type="warning"
                      link
                      size="small"
                      @click.stop="openSetOwnerDialog(data)"
                    >
                      {{ data.type === 'department' ? '设主任' : '设组长' }}
                    </el-button>
                    <el-button
                      v-if="canEditNode(data)"
                      type="info"
                      link
                      size="small"
                      @click.stop="openEditDialog(data)"
                      icon="EditPen"
                    >
                      编辑
                    </el-button>
                    <el-button
                      v-if="canDeleteNode(data)"
                      type="danger"
                      link
                      size="small"
                      @click.stop="handleDelete(data)"
                      icon="Delete"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
              </template>
            </el-tree>
            <el-empty
              v-if="!loading && treeData.length === 0"
              description="暂无组织架构数据"
            />
          </div>
        </el-card>
      </el-col>

      <!-- Right Column: Details & Actions -->
      <el-col :span="12">
        <el-card shadow="never" class="detail-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">
                <el-icon><Menu /></el-icon>
                {{ activePanelTitle }}
              </span>
              <div
                v-if="activeNode && activeNode.type !== 'user'"
                class="header-actions"
              >
                <el-button
                  v-if="canCreateDepartment(activeNode)"
                  type="primary"
                  size="small"
                  icon="Plus"
                  @click="openCreateDialog('department', activeNode.id)"
                >
                  新增科室
                </el-button>
                <el-button
                  v-if="canCreateGroup(activeNode)"
                  type="success"
                  size="small"
                  icon="Plus"
                  @click="openCreateDialog('group', activeNode.id)"
                >
                  新增小组
                </el-button>
                <el-button
                  v-if="canAddUser(activeNode)"
                  type="warning"
                  size="small"
                  icon="User"
                  @click="goToAddUser(activeNode)"
                >
                  新增人员
                </el-button>
                <el-button
                  v-if="
                    canAssignOwner &&
                    (activeNode.type === 'department' ||
                      activeNode.type === 'group')
                  "
                  type="primary"
                  size="small"
                  @click="openSetOwnerDialog(activeNode)"
                >
                  {{
                    activeNode.type === 'department' ? '设置主任' : '设置组长'
                  }}
                </el-button>
              </div>
            </div>
          </template>

          <div
            v-if="activeNode && activeNode.type !== 'user'"
            class="node-detail-panel"
          >
            <el-alert
              v-if="activeNodeMeta"
              :title="activeNodeMeta"
              type="info"
              :closable="false"
              class="mb-12"
            />
            <el-table
              :data="activeNodeChildren"
              border
              stripe
              style="width: 100%"
              max-height="600"
            >
              <el-table-column prop="name" label="名称" />
              <el-table-column label="类型" width="100" align="center">
                <template #default="{ row }">
                  <el-tag size="small" :type="getNodeTypeTag(row.type)">{{
                    getTypeName(row.type)
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="负责人" width="180" align="center">
                <template #default="{ row }">
                  <span v-if="row.type === 'hospital'"
                    >医院管理员：{{ row.adminDisplay || '未设置' }}</span
                  >
                  <span v-else-if="row.type === 'department'"
                    >主任：{{ row.directorDisplay || '未设置' }}</span
                  >
                  <span v-else-if="row.type === 'group'"
                    >组长：{{ row.leaderDisplay || '未设置' }}</span
                  >
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column label="角色" width="120" align="center">
                <template #default="{ row }">
                  <span v-if="row.type === 'user'">{{
                    getRoleName(row.role)
                  }}</span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="220"
                align="center"
                fixed="right"
              >
                <template #default="{ row }">
                  <el-button
                    v-if="
                      canAssignOwner &&
                      (row.type === 'department' || row.type === 'group')
                    "
                    type="warning"
                    link
                    size="small"
                    @click="openSetOwnerDialog(row)"
                  >
                    {{ row.type === 'department' ? '设主任' : '设组长' }}
                  </el-button>
                  <el-button
                    v-if="canEditNode(row)"
                    type="primary"
                    link
                    size="small"
                    @click="openEditDialog(row)"
                    >编辑</el-button
                  >
                  <el-button
                    v-if="canDeleteNode(row)"
                    type="danger"
                    link
                    size="small"
                    @click="handleDelete(row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div v-else-if="selectedUserDetail" class="user-detail-panel">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="姓名">{{
                selectedUserDetail.name || '-'
              }}</el-descriptions-item>
              <el-descriptions-item label="角色">{{
                getRoleName(selectedUserDetail.role)
              }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{
                selectedUserDetail.phone || '-'
              }}</el-descriptions-item>
              <el-descriptions-item label="医院">{{
                selectedUserDetail.hospitalName || '-'
              }}</el-descriptions-item>
              <el-descriptions-item label="科室">{{
                selectedUserDetail.departmentName || '-'
              }}</el-descriptions-item>
              <el-descriptions-item label="小组">{{
                selectedUserDetail.groupName || '-'
              }}</el-descriptions-item>
            </el-descriptions>
            <el-alert
              title="如需修改人员角色或组织归属，请前往“用户管理”页面操作。"
              type="info"
              :closable="false"
              class="mt-12"
            />
          </div>
          <el-empty v-else description="点击左侧架构树查看下级列表" />
        </el-card>
      </el-col>
    </el-row>

    <!-- Dialog for Create / Edit -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="450px"
      @close="resetForm"
      destroy-on-close
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        @submit.prevent
      >
        <el-form-item :label="formLabel" prop="name">
          <el-input
            v-model="form.name"
            :placeholder="`请输入${formLabel}`"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
            :loading="submitLoading"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>

    <el-dialog
      :title="ownerDialogTitle"
      v-model="ownerDialogVisible"
      width="500px"
      destroy-on-close
    >
      <el-form label-width="100px">
        <el-form-item :label="ownerDialogLabel">
          <el-select
            v-model="selectedOwnerUserId"
            filterable
            placeholder="请选择人员"
            style="width: 100%"
          >
            <el-option
              v-for="user in ownerCandidates"
              :key="user.id"
              :label="`${user.name}（${getRoleName(user.role)}）`"
              :value="user.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-alert
        type="info"
        :closable="false"
        title="仅主任/组长角色可分配；设置后不会自动取消其他同级负责人，请按需在用户管理页调整。"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="ownerDialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="ownerSubmitLoading"
            @click="handleSetOwner"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  getHospitals,
  getDepartments,
  getGroups,
  createDepartment,
  updateDepartment,
  deleteDepartment,
  createGroup,
  updateGroup,
  deleteGroup,
  updateHospital,
  deleteHospital,
} from '../../api/organization';
import { getUsers, updateUser } from '../../api/users';
import { useUserStore } from '../../store/user';
import {
  OfficeBuilding,
  Filter,
  Connection,
  UserFilled,
  Refresh,
  Plus,
  EditPen,
  Delete,
  Menu,
  User,
} from '@element-plus/icons-vue';

const router = useRouter();
const userStore = useUserStore();

const loading = ref(false);
const treeData = ref([]);
const activeNode = ref(null);
const allUsers = ref([]);
const hospitalNameMap = ref({});
const departmentNameMap = ref({});
const groupNameMap = ref({});
const ownerCandidates = ref([]);
const ownerDialogVisible = ref(false);
const ownerSubmitLoading = ref(false);
const ownerTargetNode = ref(null);
const selectedOwnerUserId = ref(null);

const defaultProps = {
  children: 'children',
  label: 'name',
};

const roleMap = {
  SYSTEM_ADMIN: '系统管理员',
  HOSPITAL_ADMIN: '医院管理员',
  DIRECTOR: '科室主任',
  LEADER: '小组组长',
  DOCTOR: '医生',
  ENGINEER: '工程师',
};

const getRoleName = (role) => roleMap[role] || role;

const getRoleTagType = (role) => {
  if (role === 'HOSPITAL_ADMIN') return 'danger';
  if (role === 'DIRECTOR') return 'warning';
  if (role === 'LEADER') return 'success';
  if (role === 'DOCTOR') return 'primary';
  return 'info';
};

const getTypeName = (type) => {
  const map = {
    hospital: '医院',
    department: '科室',
    group: '小组',
    user: '人员',
  };
  return map[type] || type;
};

const getNodeTypeTag = (type) => {
  const map = {
    hospital: 'primary',
    department: 'success',
    group: 'warning',
    user: 'info',
  };
  return map[type] || 'info';
};

const canAssignOwner = computed(() =>
  ['SYSTEM_ADMIN', 'HOSPITAL_ADMIN'].includes(userStore.role),
);
const isSystemAdmin = computed(() => userStore.role === 'SYSTEM_ADMIN');
const isOrgAdmin = computed(() =>
  ['SYSTEM_ADMIN', 'HOSPITAL_ADMIN'].includes(userStore.role),
);
const isDirector = computed(() => userStore.role === 'DIRECTOR');
const isLeader = computed(() => userStore.role === 'LEADER');

const canCreateDepartment = (node) =>
  Boolean(node && node.type === 'hospital' && isOrgAdmin.value);

const canCreateGroup = (node) =>
  Boolean(
    node &&
    node.type === 'department' &&
    (isOrgAdmin.value || isDirector.value),
  );

const canAddUser = (node) =>
  Boolean(
    node &&
    (node.type === 'department' || node.type === 'group') &&
    isOrgAdmin.value,
  );

const canEditNode = (node) => {
  if (!node || node.type === 'user') {
    return false;
  }
  if (node.type === 'hospital') {
    return isOrgAdmin.value;
  }
  if (node.type === 'department') {
    return isOrgAdmin.value || isDirector.value || isLeader.value;
  }
  if (node.type === 'group') {
    return isOrgAdmin.value || isDirector.value || isLeader.value;
  }
  return false;
};

const canDeleteNode = (node) => {
  if (!node || node.type === 'user') {
    return false;
  }
  if (node.type === 'hospital') {
    return isSystemAdmin.value;
  }
  if (node.type === 'department') {
    return isOrgAdmin.value;
  }
  if (node.type === 'group') {
    return isOrgAdmin.value || isDirector.value;
  }
  return false;
};

const activePanelTitle = computed(() => {
  if (!activeNode.value) {
    return '请在左侧选择节点';
  }
  if (activeNode.value.type === 'user') {
    return `人员详情 (${activeNode.value.name})`;
  }
  return `下级列表 (${activeNode.value.name})`;
});

const activeNodeChildren = computed(() => {
  if (
    !activeNode.value ||
    activeNode.value.type === 'user' ||
    !Array.isArray(activeNode.value.children)
  ) {
    return [];
  }

  const list = [...activeNode.value.children];
  if (userStore.role !== 'HOSPITAL_ADMIN') {
    return list;
  }

  // 医院管理员视角下，右侧列表优先显示人员，再显示组织节点。
  return list.sort((a, b) => {
    const aIsUser = a.type === 'user';
    const bIsUser = b.type === 'user';
    if (aIsUser !== bIsUser) {
      return aIsUser ? -1 : 1;
    }
    return `${a.name || ''}`.localeCompare(`${b.name || ''}`, 'zh-Hans-CN');
  });
});

const selectedUserDetail = computed(() => {
  if (!activeNode.value || activeNode.value.type !== 'user') {
    return null;
  }

  const current = allUsers.value.find(
    (user) => user.id === activeNode.value.id,
  );
  const userData = current || activeNode.value;
  const hospitalId = userData.hospitalId || null;
  const departmentId = userData.departmentId || null;
  const groupId = userData.groupId || null;

  return {
    ...userData,
    hospitalName: hospitalId ? hospitalNameMap.value[hospitalId] : '',
    departmentName: departmentId ? departmentNameMap.value[departmentId] : '',
    groupName: groupId ? groupNameMap.value[groupId] : '',
  };
});

const activeNodeMeta = computed(() => {
  if (!activeNode.value) {
    return '';
  }
  if (activeNode.value.type === 'hospital') {
    return `当前医院管理员：${activeNode.value.adminDisplay || '未设置'}`;
  }
  if (activeNode.value.type === 'department') {
    return `当前科室主任：${activeNode.value.directorDisplay || '未设置'}`;
  }
  if (activeNode.value.type === 'group') {
    return `当前小组组长：${activeNode.value.leaderDisplay || '未设置'}`;
  }
  return '';
});

const ownerDialogTitle = computed(() => {
  if (!ownerTargetNode.value) {
    return '设置负责人';
  }
  return ownerTargetNode.value.type === 'department'
    ? `设置科室主任（${ownerTargetNode.value.name}）`
    : `设置小组组长（${ownerTargetNode.value.name}）`;
});

const ownerDialogLabel = computed(() => {
  if (!ownerTargetNode.value) {
    return '负责人';
  }
  return ownerTargetNode.value.type === 'department' ? '科室主任' : '小组组长';
});

const fetchTreeData = async () => {
  loading.value = true;
  activeNode.value = null; // Reset active node on refresh
  try {
    const hospRes = await getHospitals({ pageSize: 100 });
    const hospitals = hospRes.list || [];

    const [deptRes, groupRes, userRes] = await Promise.all([
      getDepartments({ pageSize: 100 }),
      getGroups({ pageSize: 100 }),
      getUsers(),
    ]);

    const departments = deptRes.list || [];
    const groups = groupRes.list || [];
    const users = userRes.list || [];
    allUsers.value = users;
    hospitalNameMap.value = Object.fromEntries(
      hospitals.map((item) => [item.id, item.name]),
    );
    departmentNameMap.value = Object.fromEntries(
      departments.map((item) => [item.id, item.name]),
    );
    groupNameMap.value = Object.fromEntries(
      groups.map((item) => [item.id, item.name]),
    );

    const directorNameMap = {};
    const leaderNameMap = {};
    const hospitalAdminNameMap = {};
    users.forEach((user) => {
      if (user.role === 'HOSPITAL_ADMIN' && user.hospitalId) {
        if (!hospitalAdminNameMap[user.hospitalId]) {
          hospitalAdminNameMap[user.hospitalId] = [];
        }
        hospitalAdminNameMap[user.hospitalId].push(user.name);
      }
      if (user.role === 'DIRECTOR' && user.departmentId) {
        if (!directorNameMap[user.departmentId]) {
          directorNameMap[user.departmentId] = [];
        }
        directorNameMap[user.departmentId].push(user.name);
      }
      if (user.role === 'LEADER' && user.groupId) {
        if (!leaderNameMap[user.groupId]) {
          leaderNameMap[user.groupId] = [];
        }
        leaderNameMap[user.groupId].push(user.name);
      }
    });

    const tree = hospitals.map((h) => {
      const hDepts = departments.filter((d) => d.hospitalId === h.id);
      const adminDisplay =
        (hospitalAdminNameMap[h.id] || []).join('、') || '未设置';

      const deptNodes = hDepts.map((d) => {
        const dGroups = groups.filter((g) => g.departmentId === d.id);
        const directorDisplay =
          (directorNameMap[d.id] || []).join('、') || '未设置';

        const groupNodes = dGroups.map((g) => {
          const gUsers = users.filter((u) => u.groupId === g.id);
          const leaderDisplay =
            (leaderNameMap[g.id] || []).join('、') || '未设置';
          const userNodes = gUsers.map((u) => ({
            key: `u_${u.id}`,
            id: u.id,
            name: u.name,
            type: 'user',
            role: u.role,
            hospitalId: h.id,
            departmentId: d.id,
            groupId: g.id,
          }));

          return {
            key: `g_${g.id}`,
            id: g.id,
            name: g.name,
            type: 'group',
            departmentId: d.id,
            hospitalId: h.id,
            leaderDisplay,
            children: userNodes,
          };
        });

        const dUsers = users.filter(
          (u) => u.departmentId === d.id && !u.groupId,
        );
        const dUserNodes = dUsers.map((u) => ({
          key: `u_${u.id}`,
          id: u.id,
          name: u.name,
          type: 'user',
          role: u.role,
          hospitalId: h.id,
          departmentId: d.id,
        }));

        return {
          key: `d_${d.id}`,
          id: d.id,
          name: d.name,
          type: 'department',
          hospitalId: h.id,
          directorDisplay,
          children: [...groupNodes, ...dUserNodes],
        };
      });

      const hUsers = users.filter(
        (u) => u.hospitalId === h.id && !u.departmentId,
      );
      const hUserNodes = hUsers.map((u) => ({
        key: `u_${u.id}`,
        id: u.id,
        name: u.name,
        type: 'user',
        role: u.role,
        hospitalId: h.id,
      }));

      return {
        key: `h_${h.id}`,
        id: h.id,
        name: h.name,
        type: 'hospital',
        adminDisplay,
        children: [...deptNodes, ...hUserNodes],
      };
    });

    treeData.value = tree;
  } catch (error) {
    console.error('Failed to fetch tree data', error);
    ElMessage.error('获取组织架构树失败');
  } finally {
    loading.value = false;
  }
};

const handleNodeClick = (data) => {
  activeNode.value = data;
};

const openSetOwnerDialog = (node) => {
  if (!canAssignOwner.value) {
    return;
  }
  if (node.type !== 'department' && node.type !== 'group') {
    return;
  }

  ownerTargetNode.value = node;
  selectedOwnerUserId.value = null;

  if (node.type === 'department') {
    ownerCandidates.value = allUsers.value.filter(
      (user) =>
        user.hospitalId === node.hospitalId &&
        user.departmentId === node.id &&
        user.role === 'DIRECTOR',
    );
  } else {
    ownerCandidates.value = allUsers.value.filter(
      (user) =>
        user.hospitalId === node.hospitalId &&
        user.departmentId === node.departmentId &&
        user.groupId === node.id &&
        user.role === 'LEADER',
    );
  }

  if (ownerCandidates.value.length === 0) {
    ElMessage.warning('当前节点下没有可设置候选（仅支持主任/组长角色）');
    return;
  }

  const currentOwner = ownerCandidates.value.find((user) =>
    node.type === 'department'
      ? user.role === 'DIRECTOR'
      : user.role === 'LEADER',
  );
  selectedOwnerUserId.value = currentOwner?.id ?? ownerCandidates.value[0].id;
  ownerDialogVisible.value = true;
};

const handleSetOwner = async () => {
  if (!ownerTargetNode.value || !selectedOwnerUserId.value) {
    ElMessage.warning('请选择人员');
    return;
  }

  const targetUser = ownerCandidates.value.find(
    (user) => user.id === selectedOwnerUserId.value,
  );
  if (!targetUser) {
    ElMessage.warning('候选人员不存在');
    return;
  }

  const isDepartment = ownerTargetNode.value.type === 'department';
  const payload = isDepartment
    ? {
        role: 'DIRECTOR',
        // 后端约束：非 DOCTOR 不允许“调整”科室/小组归属。
        // 这里仅做角色变更，并清空小组归属，避免触发该约束。
        groupId: null,
      }
    : {
        role: 'LEADER',
      };

  ownerSubmitLoading.value = true;
  try {
    await updateUser(targetUser.id, payload);
    ElMessage.success(isDepartment ? '设置主任成功' : '设置组长成功');
    ownerDialogVisible.value = false;
    await fetchTreeData();
  } finally {
    ownerSubmitLoading.value = false;
  }
};

const goToAddUser = (nodeData) => {
  // We navigate to the Users list page. In a full implementation, you could
  // pass query params to pre-fill a creation form or open a dialog directly.
  router.push({
    path: '/users',
    query: {
      action: 'create',
      hospitalId: nodeData.hospitalId,
      departmentId:
        nodeData.type === 'department' ? nodeData.id : nodeData.departmentId,
    },
  });
};

// --- Dialog Logic ---
const dialogVisible = ref(false);
const submitLoading = ref(false);
const formRef = ref(null);
const dialogType = ref('');
const dialogMode = ref('');
const parentId = ref(null);
const currentId = ref(null);

const form = reactive({ name: '' });
const rules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
};

const dialogTitle = computed(() => {
  const typeName =
    dialogType.value === 'hospital'
      ? '医院'
      : dialogType.value === 'department'
        ? '科室'
        : '小组';
  return dialogMode.value === 'create' ? `新增${typeName}` : `编辑${typeName}`;
});
const formLabel = computed(() =>
  dialogType.value === 'hospital'
    ? '医院名称'
    : dialogType.value === 'department'
      ? '科室名称'
      : '小组名称',
);

const openCreateDialog = (type, pId) => {
  dialogType.value = type;
  dialogMode.value = 'create';
  parentId.value = pId;
  currentId.value = null;
  dialogVisible.value = true;
};
const openEditDialog = (data) => {
  dialogType.value = data.type;
  dialogMode.value = 'edit';
  currentId.value = data.id;
  form.name = data.name;
  dialogVisible.value = true;
};
const resetForm = () => {
  if (formRef.value) formRef.value.resetFields();
  form.name = '';
};

const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true;
      try {
        if (dialogMode.value === 'create') {
          if (dialogType.value === 'department')
            await createDepartment({
              name: form.name,
              hospitalId: parentId.value,
            });
          else if (dialogType.value === 'group')
            await createGroup({
              name: form.name,
              departmentId: parentId.value,
            });
          ElMessage.success('创建成功');
        } else {
          if (dialogType.value === 'hospital')
            await updateHospital(currentId.value, { name: form.name });
          else if (dialogType.value === 'department')
            await updateDepartment(currentId.value, { name: form.name });
          else if (dialogType.value === 'group')
            await updateGroup(currentId.value, { name: form.name });
          ElMessage.success('更新成功');

          // Update activeNode locally if it's the one edited
          if (
            activeNode.value &&
            activeNode.value.id === currentId.value &&
            activeNode.value.type === dialogType.value
          ) {
            activeNode.value.name = form.name;
          }
        }
        dialogVisible.value = false;
        fetchTreeData();
      } catch (error) {
        console.error(error);
      } finally {
        submitLoading.value = false;
      }
    }
  });
};

const handleDelete = (data) => {
  const typeName =
    data.type === 'hospital'
      ? '医院'
      : data.type === 'department'
        ? '科室'
        : '小组';
  ElMessageBox.confirm(`确定要删除${typeName} "${data.name}" 吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        if (data.type === 'hospital') await deleteHospital(data.id);
        else if (data.type === 'department') await deleteDepartment(data.id);
        else if (data.type === 'group') await deleteGroup(data.id);
        ElMessage.success('删除成功');
        if (activeNode.value && activeNode.value.key === data.key) {
          activeNode.value = null; // Clear active node if deleted
        }
        fetchTreeData();
      } catch (error) {
        console.error(error);
      }
    })
    .catch(() => {});
};

onMounted(() => {
  fetchTreeData();
});
</script>

<style scoped>
.org-tree-container {
  padding: 20px;
}

.tree-card,
.detail-card {
  border-radius: 8px;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

:deep(.el-card__body) {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #303133;
}

.tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.node-detail-panel {
  padding: 10px;
}

.user-detail-panel {
  padding: 10px;
}

.action-title {
  margin-top: 20px;
  margin-bottom: 15px;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.mb-4 {
  margin-bottom: 16px;
}

/* Beautiful Tree Styling */
.beautiful-tree {
  background: transparent;
}

:deep(.el-tree-node__content) {
  height: auto;
  padding: 8px 0;
  margin-bottom: 4px;
  border-radius: 6px;
  transition: all 0.3s;
}

:deep(.el-tree-node__content:hover) {
  background-color: #f5f7fa;
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: #e6f1fc;
}

/* Node specific styles */
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.node-main {
  display: flex;
  align-items: center;
}

.node-text {
  display: flex;
  flex-direction: column;
}

.node-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  font-size: 16px;
}

.node-hospital .node-icon-wrapper {
  color: #409eff;
}
.node-department .node-icon-wrapper {
  color: #67c23a;
}
.node-group .node-icon-wrapper {
  color: #e6a23c;
}
.node-user .node-icon-wrapper {
  color: #909399;
  font-size: 14px;
}

.node-label {
  font-size: 14px;
  color: #303133;
}
.node-user .node-label {
  color: #606266;
}

.node-sub-label {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

.role-tag {
  margin-left: 10px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mt-12 {
  margin-top: 12px;
}

/* Hover Actions */
.node-actions {
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.2s ease;
}

:deep(.el-tree-node__content:hover) .node-actions {
  opacity: 1;
  transform: translateX(0);
}
</style>
