<script lang="ts" setup>
import { ref, computed } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import {
  Alert,
  Checkbox,
  message,
  TypographyText,
  TypographyTitle,
} from 'ant-design-vue';

import { getOaChatListByPlatform } from '#/views/system/oa-chat/api';
import { updateOaRobotChatBind } from '#/views/system/oa-robot/api';

/**
 * OA 机器人「单独绑定群聊」独立弹窗
 *
 * 与编辑弹窗的区别：本弹窗只同步群聊绑定关系，不动其他字段
 * 入口场景：
 * - 列表「chat_names」列的「未绑定」link 按钮（专为未绑定机器人提供）
 * - 也可被列表操作列「绑定群聊」按钮复用（如有需要）
 */
interface ChatOption {
  id: number;
  name: string;
}

interface RobotRow {
  id: number;
  platform_code: string;
  name: string;
  chat_ids?: number[];
}

/** 当前操作的机器人（由列表行传入） */
const currentRobot = ref<RobotRow | null>(null);
/** 按平台分组的群聊列表（结构：{ platform_code: [{ id, name }, ...] }） */
const chatsByPlatform = ref<Record<string, ChatOption[]>>({});
/** 当前已勾选的群聊 ID 列表（回显 + 提交用） */
const selectedChatIds = ref<number[]>([]);
/** 当前机器人所属平台（弹窗内只读展示，不允许跨平台改） */
const currentPlatformCode = ref('');

/** 当前平台下可绑定的群聊列表 */
const chatsOfCurrentPlatform = computed<ChatOption[]>(() => {
  return chatsByPlatform.value[currentPlatformCode.value] ?? [];
});

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    if (!currentRobot.value?.id) {
      message.warning('机器人信息缺失');
      return;
    }
    modalApi.setState({ loading: true, confirmLoading: true });
    try {
      await updateOaRobotChatBind({
        id: currentRobot.value.id,
        chat_ids: selectedChatIds.value,
      });
      message.success('绑定成功');
      const grid = modalApi.getData<{ gridApi?: any }>()?.gridApi;
      grid?.query?.();
      modalApi.close();
    } finally {
      modalApi.setState({ loading: false, confirmLoading: false });
    }
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData<{ row: RobotRow; gridApi?: any }>();
      currentRobot.value = data?.row ?? null;
      // 回显已绑定的群聊
      const row = currentRobot.value;
      currentPlatformCode.value = String(row?.platform_code ?? '');
      selectedChatIds.value = Array.isArray(row?.chat_ids)
        ? row!.chat_ids!.map((id) => Number(id))
        : [];
      // 动态设置标题，让用户看到正在为哪个机器人绑定
      if (row) {
        modalApi.setState({
          title: `绑定群聊 - ${row.name}`,
          confirmLoading: false,
        });
      }
      // 拉取群聊列表
      loadChatsByPlatform();
    }
  },
});

/**
 * 拉取所有平台下的群聊列表（一次拉全量，前端按 platform_code 过滤）
 */
async function loadChatsByPlatform() {
  try {
    const data = await getOaChatListByPlatform();
    chatsByPlatform.value = data ?? {};
  } catch (e) {
    console.error('加载群聊列表失败', e);
    chatsByPlatform.value = {};
  }
}
</script>

<template>
  <Modal title="绑定群聊" class="w-[40%]">
    <!-- 提示：当前机器人所属平台 + 平台锁定说明（不允许跨平台改） -->
    <Alert
      type="info"
      show-icon
      message="平台已锁定，仅展示当前机器人所属平台下的群聊"
      :description="`机器人所属平台：${currentPlatformCode || '-'}（如需更换平台，请走「编辑」入口）`"
      style="margin-bottom: 12px"
    />

    <!--
      绑定群聊：去掉自定义背景块改为简单分区（与 modal.vue 保持一致）
      全部走 antd 原生样式，暗色一致性由 antd 保证
      必须用具名导入 TypographyTitle/TypographyText，不要用 Typography.Title 命名空间写法
    -->
    <div class="chat-bind-section">
      <TypographyTitle :level="5" class="chat-bind-title">
        绑定群聊
      </TypographyTitle>
      <TypographyText type="secondary" class="chat-bind-hint">
        仅展示「{{ currentPlatformCode || '请先选平台' }}」平台下的群聊
      </TypographyText>
      <TypographyText
        v-if="chatsOfCurrentPlatform.length === 0"
        type="secondary"
        class="chat-empty"
      >
        当前平台下暂无群聊，可先到「OA群聊管理」中新增
      </TypographyText>
      <Checkbox.Group
        v-else
        v-model:value="selectedChatIds"
        class="chat-checkbox-group"
      >
        <Checkbox
          v-for="chat in chatsOfCurrentPlatform"
          :key="chat.id"
          :value="chat.id"
        >
          {{ chat.name }}
        </Checkbox>
      </Checkbox.Group>
    </div>
  </Modal>
</template>

<style scoped lang="scss">
/*
 * 暗色适配：去掉自定义背景块后，仅保留布局间距相关样式
 * 颜色全部由 antd 原生组件自动适配
 */
.chat-bind-section {
  margin-top: 4px;
}

.chat-bind-title {
  margin-bottom: 4px !important;
  font-size: 14px !important;
}

.chat-bind-hint {
  font-size: 12px;
}

.chat-empty {
  display: block;
  font-size: 12px;
  padding: 8px 0;
}

.chat-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
</style>
