<script setup lang="ts">
import type { BubbleListProps } from 'ant-design-x-vue';

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

import type { Props, ResultItem } from '../typing';

import { h, ref, watch } from 'vue';

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

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@vben-core/shadcn-ui';

import { UserOutlined } from '@ant-design/icons-vue';
import {
  Button,
  Flex,
  message,
  notification,
  RangePicker,
  Space,
} from 'ant-design-vue';
import { Attachments, Bubble, Welcome } from 'ant-design-x-vue';
import dayjs, { Dayjs } from 'dayjs';

import SpiderPreview from './spider-preview.vue';

defineOptions({
  name: 'SelfWorkView',
});
const props = withDefaults(defineProps<Props>(), {
  itemMessage: () => null,
  item: () => ({
    id: '',
    name: '',
    url: '',
    description: '',
  }),
  runSpider: () => async () => ({
    msg: '',
    code: '',
  }),
  getSpiderStatus: () => async () => ({
    msg: '',
    code: '',
  }),
  stopSpider: () => async () => ({
    msg: '',
    code: '',
  }),
  runSpiderGz: () => async () => ({
    outputs: {
      result: '',
      files: [],
    },
  }),
});
const resultItems = ref<ResultItem[]>([]);
const [PreviewDrawer, previewDrawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: SpiderPreview,
  // placement: 'left',
});
const selectedDateRange = ref<[Dayjs, Dayjs]>([
  dayjs().subtract(3, 'days'),
  dayjs(),
]);

function openPreviewDrawer(
  placement: DrawerPlacement = 'right',
  filename?: string,
) {
  const fileData = filename.value;
  previewDrawerApi.setState({ placement }).setData(fileData).open();
}

// 判断是否是以 .docx 结尾的 URL
function isDocxURL(str: string): boolean {
  return str.endsWith('.docx');
}

// 使用正则提取 /static/ 后面的文件名部分
function extractDocxFilename(url: string): null | string {
  const match = url.match(/\/static\/([^/]+\.docx)$/i); // 匹配 /static/ 后任意非斜杠字符加 .docx
  return match ? match[1] : null;
}
const startChecking = () => {
  statusPollingInterval = window.setInterval(startPolling, 1000);
};
let statusPollingInterval: null | number;
let pollingCount = 0;
const maxPollingAttempts = 300; // 最多轮询300秒

const startPolling = async () => {
  try {
    const response = await props.getSpiderStatus();

    if (!response.data.is_running) {
      clearInterval(statusPollingInterval!);
      statusPollingInterval = null;

      if (response.data.download_url) {
        const download_url = response.data.download_url;
        fetchResult.value = download_url;
        notification.success({ message: '获取成功', duration: 3 });

        let filename = '';
        if (isDocxURL(download_url)) {
          filename = extractDocxFilename(download_url);
        }

        fetchResult.value = `/spider/${filename}`;
        resultItems.value.push({
          key: resultItems.value.length + 1,
          role: 'ai',
          content: '文档已生成',
          footer: h(Flex, null, [
            h(
              Button,
              {
                size: 'normal',
                type: 'primary',
                onClick: () => {
                  openPreviewDrawer('right', fetchResult);
                },
              },
              '文档预览',
            ),
            h(
              Button,
              {
                size: 'normal',
                type: 'primary',
                style: { marginLeft: '10px' },
                onClick: () => {
                  const link = document.createElement('a');
                  link.href = fetchResult.value;
                  link.download = fetchResult.value;
                  document.body.append(link);
                  link.click();
                  link.remove();
                },
              },
              '文档下载',
            ),
          ]),
        });

        isFetching.value = false;
        fetchStatus.value = 'completed';
      } else {
        isFetching.value = false;
        fetchResult.value = '';
        message.error('抓取无结果');
      }
    } else if (++pollingCount >= maxPollingAttempts) {
      clearInterval(statusPollingInterval!);
      statusPollingInterval = null;
      props.stopSpider();
      message.warn('轮询超时，请稍后再试');
    }
  } catch (error) {
    clearInterval(statusPollingInterval!);
    statusPollingInterval = null;
    message.error(`状态查询失败：${error}`);
  }
};

const startFetching = async () => {
  // 更新状态为“抓取中”
  isFetching.value = true;
  fetchStatus.value = 'fetching';

  let publish_start_time = ''; // 默认值
  let publish_end_time = ''; // 默认值

  if (selectedDateRange.value && selectedDateRange.value.length === 2) {
    publish_start_time =
      dayjs(selectedDateRange.value[0]).format('YYYYMMDDhhmmss') || '';
    publish_end_time =
      dayjs(selectedDateRange.value[1]).format('YYYYMMDDhhmmss') || '';
  }
  try {
    notification.info({
      message: '正在获取中...',
      duration: 5,
    });

    const res = await props.runSpider({
      publish_start_time,
      publish_end_time,
      llm_api_key: props.item.id,
    });

    if (res.code === 0) {
      notification.info({
        message: res.msg,
        duration: 5,
      });
      startChecking();
    } else {
      isFetching.value = false;
      fetchResult.value = '';
      message.error('抓取无结果');
    }
  } catch {
    isFetching.value = false;
    fetchResult.value = '';
  }
};

// 列表角色
const roles: BubbleListProps['roles'] = {
  user: {
    placement: 'end',
    typing: false,
    styles: {
      content: {
        background: '#ffffff',
      },
    },
    avatar: { icon: h(UserOutlined), style: { background: '#87d068' } },
  },
  ai: {
    placement: 'start',
    typing: false,
    style: {
      maxWidth: 600,
      marginInlineEnd: 44,
    },
    styles: {
      content: {
        background: '#ffffff',
      },
      footer: {
        width: '100%',
      },
    },
    avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
  },
  file: {
    placement: 'start',
    avatar: { icon: h(UserOutlined), style: { visibility: 'hidden' } },
    variant: 'borderless',
    messageRender: (items: any) =>
      h(
        Flex,
        { vertical: true, gap: 'middle' },
        items.map((item: any) =>
          h(Attachments.FileCard, { key: item.uid, item }),
        ),
      ),
  },
};

const isFetching = ref(false);
const fetchResult = ref('');
const fetchStatus = ref('');

// 监听 title 变化并更新 resultItems
watch(
  () => props.item,
  () => {
    resultItems.value = [];
  },
);

// 监听 itemMessage 变化并更新 resultItems
watch(
  () => props.itemMessage,
  (newVal) => {
    resultItems.value = [];
    if (newVal && newVal.length > 0) {
      newVal.forEach((msg) => {
        // resultItems.value.push({
        //   key: resultItems.value.length + 1,
        //   role: msg.role, // 'user' or 'ai'
        //   content: msg.content,
        //   footer: msg.footer,
        // });
        if (msg.role === 'user') {
          resultItems.value.push({
            key: resultItems.value.length + 1,
            role: msg.role, // 'user' or 'ai'
            content: msg.content,
            footer: msg.footer,
          });
        } else {
          resultItems.value.push({
            key: resultItems.value.length + 1,
            role: msg.role, // 'user' or 'ai'
            content: '文档已生成',
            footer: h(Flex, null, [
              // h(
              //   Button,
              //   {
              //     size: 'normal',
              //     type: 'primary',
              //     onClick: () => {
              //       openPreviewDrawer('right', filename);
              //     },
              //   },
              //   '文档预览',
              // ),
              h(
                Button,
                {
                  size: 'normal',
                  type: 'primary',
                  style: {
                    marginLeft: '10px',
                  },
                  onClick: () => {
                    // 创建隐藏的 <a> 标签用于触发下载
                    const link = document.createElement('a');
                    link.href = msg.content; // 设置下载链接
                    link.download = '广州公共资源交易中心数据获取'; // 设置下载文件名
                    document.body.append(link); // 将 <a> 标签添加到页面中
                    link.click(); // 触发点击事件开始下载
                    link.remove(); // 下载完成后移除 <a> 标签
                  },
                },
                '文档下载',
              ),
            ]),
          });
        }
      });
    }
  },
  { deep: true },
);
</script>

<template>
  <!--  style="flex-direction: column"-->
  <div
    class="flex h-full"
    style="flex-direction: column; width: 70%; padding-top: 20px"
  >
    <PreviewDrawer />
    <!--    <PreviewDrawer />-->
    <Space
      v-if="resultItems.length === 0"
      direction="vertical"
      size:16
      style="flex: 1"
    >
      <Welcome
        variant="borderless"
        icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
        title="欢迎使用AI平台信息获取"
        description="请选择数据信息列表中需要获取信息的链接，选取时间后开始爬取获取信息。"
      />
    </Space>
    <Bubble.List
      v-else
      variant="shadow"
      :typing="true"
      :items="resultItems"
      :roles="roles"
      style="flex: 1"
    />

    <Card class="w-full self-end" v-loading="isFetching">
      <CardHeader class="py-4">
        <CardTitle class="text-lg">{{ title }}</CardTitle>
      </CardHeader>
      <CardContent class="flex flex-wrap pt-0">
        {{ props.item ? props.item.description : '请选择左侧列表' }}
      </CardContent>
      <CardFooter class="flex justify-end">
        <RangePicker
          v-if="item.id === '77c068fd-d5b6-4c33-97d8-db5511a09b26'"
          class="mx-2"
          v-model:value="selectedDateRange"
          format="YYYY/MM/DD"
        />
        <Button
          :disabled="!item || selectedDateRange.length < 2"
          type="primary"
          @click="startFetching"
        >
          {{ isFetching ? '抓取中...' : '开始抓取' }}
        </Button>
      </CardFooter>
    </Card>
  </div>
</template>
