import type { TableColumnType } from 'antdv-next';

import type { QqbotApi } from '#/api/qqbot';
import type {
  NapcatLoginNewDeviceStatus,
  QqbotNapcatApi,
} from '#/api/qqbot/napcat';
import type {
  KtTableApi,
  KtTableButton,
  KtTableRowAction,
} from '#/components/ktTable';

import { computed, defineComponent, onBeforeUnmount, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

import { Page, useVbenModal } from '@vben/common-ui';
import { Plus } from '@vben/icons';

import { useQRCode } from '@vueuse/integrations/useQRCode';
import {
  Alert,
  Button,
  message,
  Space,
  Steps,
  Tag,
  Typography,
} from 'antdv-next';

import { useVbenForm } from '#/adapter/form';
import {
  createQqbotAccount,
  deleteQqbotAccount,
  getQqbotAccountList,
  kickQqbotAccount,
  updateQqbotAccount,
} from '#/api/qqbot';
import {
  cancelQqbotAccountScan,
  getNapcatLoginProgressLabel,
  getNapcatNewDeviceStatusMessage,
  getQqbotAccountScanEventsUrl,
  getQqbotAccountScanStatus,
  mergeNapcatAccountScanResult,
  refreshQqbotAccountScanQrcode,
  resolveNapcatLoginDisplayQrcode,
  startQqbotAccountScanCreate,
  startQqbotAccountScanRefresh,
  submitQqbotAccountScanCaptcha,
} from '#/api/qqbot/napcat';
import { KtTable, useKtTable } from '#/components/ktTable';

const AKtTable = KtTable as any;
const AButton = Button as any;
const ASteps = Steps as any;
const ATypographyLink = Typography.Link as any;
const ATypographyText = Typography.Text as any;

type TencentCaptchaResult = {
  appid?: string;
  errorCode?: number;
  errorMessage?: string;
  randstr?: string;
  ret: number;
  ticket?: string;
};

type TencentCaptchaInstance = {
  destroy: () => void;
  show: () => void;
};

declare global {
  interface Window {
    TencentCaptcha?: new (
      appid: string,
      callback: (res: TencentCaptchaResult) => void,
      options?: Record<string, unknown>,
    ) => TencentCaptchaInstance;
  }
}

let tencentCaptchaScriptPromise: Promise<void> | undefined;

export default defineComponent({
  name: 'QqBotAccountList',
  setup() {
    const editingId = ref<string>();
    const router = useRouter();
    const scanLoading = ref(false);
    const scanQrcodeImageFailed = ref(false);
    const scanQrcodeRevision = ref(0);
    const scanQrcodeText = ref('');
    const scanEvents = ref<QqbotNapcatApi.AccountScanEvent[]>([]);
    const scanState = reactive<{
      captchaUrl?: string;
      containerId?: string;
      containerName?: string;
      deviceVerifyUrl?: string;
      errorMessage?: string;
      expiresAt?: number;
      mode: 'create' | 'refresh';
      newDeviceQrcode?: string;
      newDeviceStatus?: NapcatLoginNewDeviceStatus;
      selfId?: string;
      sessionId?: string;
      status: 'error' | 'expired' | 'idle' | 'pending' | 'success';
      webuiPort?: null | number;
    }>({
      mode: 'create',
      status: 'idle',
    });
    const scanQrcode = useQRCode(scanQrcodeText, {
      errorCorrectionLevel: 'H',
      margin: 2,
      scale: 8,
    });
    const scanQrcodeImageSrc = computed(() => {
      const qrcode = scanQrcodeText.value.trim();
      if (!qrcode) return '';
      if (!scanQrcodeImageFailed.value && isQrcodeImageCandidate(qrcode)) {
        return normalizeQrcodeImageSrc(qrcode, scanQrcodeRevision.value);
      }
      return scanQrcode.value;
    });
    const scanQrcodeOpenHref = computed(() => {
      const qrcode = scanQrcodeText.value.trim();
      if (!qrcode) return '';
      if (isQrcodeImageCandidate(qrcode)) {
        return normalizeQrcodeImageSrc(qrcode, scanQrcodeRevision.value);
      }
      return qrcode;
    });
    const scanProgressItems = computed(() =>
      scanEvents.value.map((event) => ({
        description: formatEventTime(event.createdAt),
        status: getScanStepStatus(event.status),
        title: getNapcatLoginProgressLabel(event),
      })),
    );
    const scanProgressCurrent = computed(() =>
      Math.max(scanProgressItems.value.length - 1, 0),
    );
    const scanQrcodePlaceholderText = computed(() => {
      if (scanState.newDeviceStatus) {
        return getNapcatNewDeviceStatusMessage(scanState.newDeviceStatus);
      }
      if (scanState.captchaUrl) {
        return '等待安全验证';
      }
      if (
        scanState.mode === 'refresh' &&
        scanState.errorMessage?.includes('正在尝试快速登录')
      ) {
        return '正在尝试快速登录';
      }
      if (
        scanState.mode === 'refresh' &&
        scanState.errorMessage?.includes('正在尝试密码登录')
      ) {
        return '正在尝试密码登录';
      }
      return '二维码生成中';
    });
    let scanTimer: number | undefined;
    let scanEventSessionId = '';
    let scanEventSource: EventSource | undefined;

    const [AccountForm, accountFormApi] = useVbenForm({
      commonConfig: {
        labelClass: 'w-24',
      },
      layout: 'horizontal',
      schema: [
        {
          component: 'Input',
          componentProps: {
            placeholder: 'NapCat 当前登录 QQ',
          },
          fieldName: 'selfId',
          label: 'Self ID',
          rules: 'required',
        },
        {
          component: 'Input',
          componentProps: {
            placeholder: '便于后台识别',
          },
          fieldName: 'name',
          label: '账号名称',
        },
        {
          component: 'InputPassword',
          componentProps: () => ({
            placeholder: editingId.value
              ? '留空表示不修改'
              : 'OneBot 反向 WS token',
          }),
          fieldName: 'accessToken',
          label: 'Token',
        },
        {
          component: 'InputPassword',
          componentProps: () => ({
            placeholder: editingId.value
              ? '留空表示不修改 QQ 登录密码'
              : '可选，用于 NapCat 密码登录',
          }),
          fieldName: 'loginPassword',
          label: '登录密码',
        },
        {
          component: 'Switch',
          fieldName: 'enabled',
          label: '启用',
        },
        {
          component: 'Input',
          fieldName: 'remark',
          label: '备注',
        },
      ],
      showDefaultActions: false,
      wrapperClass: 'grid-cols-1',
    });

    const columns: Array<TableColumnType<QqbotApi.Account>> = [
      { dataIndex: 'selfId', key: 'selfId', title: 'Self ID', width: 140 },
      { dataIndex: 'name', key: 'name', title: '账号名称', width: 150 },
      {
        dataIndex: 'connectStatus',
        key: 'accountOnlineStatus',
        title: 'OneBot 连接',
        width: 140,
      },
      {
        dataIndex: 'napcat',
        key: 'qqLoginStatus',
        title: 'QQ 登录',
        width: 150,
      },
      {
        dataIndex: 'napcat',
        key: 'napcatRuntime',
        title: 'NapCat 运行',
        width: 240,
      },
      {
        dataIndex: 'lastHeartbeatAt',
        key: 'lastHeartbeatAt',
        title: '最近活动',
        width: 190,
      },
      {
        dataIndex: 'lastError',
        key: 'runtimeSummary',
        title: '运行说明',
        width: 220,
      },
    ];

    const api: KtTableApi<QqbotApi.Account> = {
      list: async (params) => await getQqbotAccountList(params),
    };
    const buttons: Array<KtTableButton<QqbotApi.Account>> = [
      {
        icon: <Plus class="kt-table__button-icon" />,
        key: 'scanCreate',
        label: '扫码新增账号',
        onClick: openScanCreate,
        permissionCodes: ['QqBot:Account:Create'],
        type: 'primary',
      },
      {
        key: 'manualCreate',
        label: '手动维护',
        onClick: openCreate,
        permissionCodes: ['QqBot:Account:Create'],
      },
    ];
    const rowActions: Array<KtTableRowAction<QqbotApi.Account>> = [
      {
        key: 'config',
        label: '配置',
        onClick: openConfig,
        permissionCodes: ['QqBot:Account:Config'],
      },
      {
        key: 'refreshLogin',
        label: '更新登录',
        onClick: openScanRefresh,
        permissionCodes: ['QqBot:Account:RefreshLogin'],
      },
      {
        confirm: (row) =>
          `确认删除账号「${row.selfId}」吗？该操作会同时删除该账号专属的 NapCat 容器。`,
        danger: true,
        key: 'delete',
        label: '删除',
        onClick: async (row, context) => {
          const result = await deleteQqbotAccount(row.id);
          message.success(
            result.deletedContainers > 0
              ? `账号删除成功，已删除 ${result.deletedContainers} 个 NapCat 容器`
              : '账号删除成功',
          );
          await context.reload();
        },
        permissionCodes: ['QqBot:Account:Delete'],
      },
      {
        disabled: (row) => getOneBotStatus(row) !== 'online',
        key: 'kick',
        label: '断开',
        onClick: async (row, context) => {
          await kickQqbotAccount(row.selfId);
          message.success('连接已断开');
          await context.reload();
        },
        permissionCodes: ['QqBot:Account:Kick'],
      },
      {
        key: 'edit',
        label: '编辑',
        onClick: openEdit,
        permissionCodes: ['QqBot:Account:Edit'],
      },
    ];
    const [registerTable, tableApi] = useKtTable<QqbotApi.Account>({
      api,
      buttons,
      columns,
      formOptions: {
        schema: [
          {
            component: 'Input',
            componentProps: { allowClear: true, placeholder: 'Self ID' },
            fieldName: 'selfId',
            label: 'Self ID',
          },
          {
            component: 'Input',
            componentProps: { allowClear: true, placeholder: '账号名称' },
            fieldName: 'name',
            label: '账号名称',
          },
          {
            component: 'Select',
            componentProps: {
              allowClear: true,
              options: [
                { label: 'OneBot 在线', value: 'online' },
                { label: 'OneBot 离线', value: 'offline' },
              ],
            },
            fieldName: 'connectStatus',
            label: 'OneBot',
          },
        ],
      },
      rowActions,
      tableTitle: 'QQBot 账号连接',
    });
    const modalTitle = computed(() =>
      editingId.value ? '编辑账号' : '新建账号',
    );
    const scanTitle = computed(() =>
      scanState.mode === 'refresh' ? '更新账号登录' : '扫码新增账号',
    );

    const [ScanModal, scanModalApi] = useVbenModal({
      class: 'w-[520px]',
      fullscreenButton: false,
      onBeforeClose() {
        cleanupScanSession();
        return true;
      },
      onCancel() {
        closeScanModal();
      },
    });

    const [AccountModal, accountModalApi] = useVbenModal({
      class: 'w-[620px]',
      fullscreenButton: false,
      async onConfirm() {
        await submitAccount();
      },
      onOpenChange(isOpen: boolean) {
        if (!isOpen) return;
        const { values } = accountModalApi.getData<{
          values?: QqbotApi.AccountBody;
        }>();
        void resetAccountForm(values || getAccountFormDefaults());
      },
    });
    onBeforeUnmount(() => {
      stopScanPolling();
      stopScanEvents();
    });

    async function openScanCreate() {
      await startScan('create');
    }

    async function openScanRefresh(row: QqbotApi.Account) {
      await startScan('refresh', row);
    }

    async function startScan(
      mode: 'create' | 'refresh',
      row?: QqbotApi.Account,
    ) {
      resetScanState(mode);
      scanModalApi.setState({ title: scanTitle.value }).open();
      scanLoading.value = true;
      try {
        if (mode === 'create') {
          await applyScanResult(await startQqbotAccountScanCreate(), {
            reloadQrcode: true,
          });
          return;
        }
        if (!row) {
          message.warning('请选择需要更新登录的账号');
          return;
        }
        await applyScanResult(await startQqbotAccountScanRefresh(row.id), {
          reloadQrcode: true,
        });
      } catch (error) {
        stopScanPolling();
        scanState.status = 'error';
        scanState.errorMessage = getErrorMessage(error);
      } finally {
        scanLoading.value = false;
      }
    }

    async function applyScanResult(
      result: QqbotNapcatApi.AccountScanResult,
      options: { reloadQrcode?: boolean } = {},
    ) {
      const nextState = mergeNapcatAccountScanResult(scanState, result);
      scanState.captchaUrl = nextState.captchaUrl;
      scanState.containerId = nextState.containerId;
      scanState.containerName = nextState.containerName;
      scanState.deviceVerifyUrl = nextState.deviceVerifyUrl;
      scanState.errorMessage = nextState.errorMessage;
      scanState.expiresAt = nextState.expiresAt;
      scanState.mode = nextState.mode;
      scanState.newDeviceQrcode = nextState.newDeviceQrcode;
      scanState.newDeviceStatus = nextState.newDeviceStatus;
      scanState.selfId = nextState.selfId;
      scanState.sessionId = nextState.sessionId;
      scanState.status = nextState.status;
      scanState.webuiPort = nextState.webuiPort;
      const nextQrcode = resolveNapcatLoginDisplayQrcode(nextState);
      const qrcodeChanged = nextQrcode !== scanQrcodeText.value;
      if (qrcodeChanged) {
        scanQrcodeImageFailed.value = false;
      }
      scanQrcodeText.value = nextQrcode;
      if (nextQrcode && (qrcodeChanged || options.reloadQrcode)) {
        scanQrcodeRevision.value += 1;
        scanQrcodeImageFailed.value = false;
      }

      if (result.status === 'pending') {
        startScanPolling();
        startScanEvents(result.sessionId);
        return;
      }
      stopScanPolling();
      stopScanEvents();
      if (result.status === 'success') {
        message.success(
          result.selfId ? `账号 ${result.selfId} 登录态已更新` : '账号已更新',
        );
        await scanModalApi.close();
        await tableApi.reload();
      }
    }

    async function pollScanStatus() {
      if (!scanState.sessionId || scanLoading.value) return;
      scanLoading.value = true;
      try {
        await applyScanResult(
          await getQqbotAccountScanStatus(scanState.sessionId),
        );
      } finally {
        scanLoading.value = false;
      }
    }

    async function refreshScanQrcode() {
      if (!scanState.sessionId) return;
      scanLoading.value = true;
      try {
        await applyScanResult(
          await refreshQqbotAccountScanQrcode(scanState.sessionId),
          { reloadQrcode: true },
        );
      } finally {
        scanLoading.value = false;
      }
    }

    async function submitScanCaptcha() {
      const sessionId = scanState.sessionId;
      const captchaUrl = scanState.captchaUrl;
      if (!sessionId || !captchaUrl || scanLoading.value) {
        return;
      }
      scanLoading.value = true;
      try {
        const captcha = await requestTencentCaptcha(captchaUrl);
        if (
          scanState.sessionId !== sessionId ||
          scanState.captchaUrl !== captchaUrl
        ) {
          return;
        }
        await applyScanResult(
          await submitQqbotAccountScanCaptcha({
            ...captcha,
            sessionId,
          }),
        );
      } catch (error) {
        const text = getErrorMessage(error);
        if (text !== '已取消安全验证') {
          message.error(text);
        }
      } finally {
        scanLoading.value = false;
      }
    }

    function startScanPolling() {
      if (scanTimer) return;
      scanTimer = window.setInterval(() => {
        void pollScanStatus();
      }, 2000);
    }

    function stopScanPolling() {
      if (!scanTimer) return;
      window.clearInterval(scanTimer);
      scanTimer = undefined;
    }

    function startScanEvents(sessionId?: string) {
      if (!sessionId || scanEventSessionId === sessionId) return;
      stopScanEvents();
      scanEventSessionId = sessionId;
      const source = new EventSource(getQqbotAccountScanEventsUrl(sessionId), {
        withCredentials: true,
      });
      scanEventSource = source;
      source.addEventListener('message', (event) => {
        handleScanEvent(event.data);
      });
      source.addEventListener('error', () => {
        stopScanEvents();
      });
    }

    function stopScanEvents() {
      if (scanEventSource) {
        scanEventSource.close();
      }
      scanEventSource = undefined;
      scanEventSessionId = '';
    }

    function handleScanEvent(payload: string) {
      try {
        const event = JSON.parse(payload) as QqbotNapcatApi.AccountScanEvent;
        const index = scanEvents.value.findIndex(
          (item) => item.step === event.step,
        );
        if (index === -1) {
          scanEvents.value.push(event);
        } else {
          scanEvents.value.splice(index, 1, event);
        }
        if (scanEvents.value.length > 20) {
          scanEvents.value.splice(0, scanEvents.value.length - 20);
        }
        if (event.result) {
          void applyScanResult(event.result, {
            reloadQrcode: ['new-device-qrcode-ready', 'qrcode-ready'].includes(
              event.step,
            ),
          });
        }
      } catch {
        // Ignore malformed SSE chunks and wait for the next event.
      }
    }

    function resetScanState(mode: 'create' | 'refresh') {
      stopScanPolling();
      stopScanEvents();
      Object.assign(scanState, {
        captchaUrl: undefined,
        containerId: undefined,
        containerName: undefined,
        deviceVerifyUrl: undefined,
        errorMessage: undefined,
        expiresAt: undefined,
        mode,
        newDeviceQrcode: undefined,
        newDeviceStatus: undefined,
        selfId: undefined,
        sessionId: undefined,
        status: 'idle',
        webuiPort: undefined,
      });
      scanQrcodeImageFailed.value = false;
      scanQrcodeRevision.value = 0;
      scanQrcodeText.value = '';
      scanEvents.value = [];
    }

    function cleanupScanSession() {
      const sessionId = scanState.sessionId;
      stopScanPolling();
      stopScanEvents();
      if (sessionId && scanState.status === 'pending') {
        void cancelQqbotAccountScan(sessionId);
      }
    }

    function closeScanModal() {
      void scanModalApi.close();
    }

    function getScanAlertType() {
      if (scanState.status === 'success') return 'success';
      if (scanState.status === 'error') return 'error';
      if (scanState.status === 'expired') return 'warning';
      return 'info';
    }

    function getNewDeviceAlertType(status?: NapcatLoginNewDeviceStatus) {
      if (status === 'failed') return 'error';
      if (status === 'verified') return 'success';
      return 'warning';
    }

    function getScanMessage() {
      if (scanState.status === 'success') return '扫码登录成功';
      if (scanState.status === 'error') {
        return scanState.errorMessage || '扫码登录失败';
      }
      if (scanState.status === 'expired') return '二维码已过期，请刷新二维码';
      if (scanState.errorMessage) return scanState.errorMessage;
      return '请使用目标 QQ 扫码登录，页面会自动轮询登录结果';
    }

    function getErrorMessage(error: unknown) {
      if (error instanceof Error) return error.message;
      if (typeof error === 'string') return error;
      if (error && typeof error === 'object') {
        const record = error as Record<string, unknown>;
        return `${record.msg || record.message || record.err || '扫码登录请求失败'}`;
      }
      return '扫码登录请求失败';
    }

    function getScanStepStatus(
      status: QqbotNapcatApi.AccountScanEvent['status'],
    ) {
      if (status === 'error') return 'error';
      if (status === 'processing') return 'process';
      if (status === 'success') return 'finish';
      return 'wait';
    }

    function formatEventTime(value: number) {
      const date = new Date(value);
      if (Number.isNaN(date.getTime())) return '';
      return date.toLocaleTimeString('zh-CN', { hour12: false });
    }

    function isQrcodeImageCandidate(value: string) {
      return (
        /^data:image\//i.test(value) ||
        /^https?:\/\//i.test(value) ||
        isRawBase64Image(value)
      );
    }

    function normalizeQrcodeImageSrc(value: string, revision = 0) {
      if (isRawBase64Image(value)) {
        return `data:image/png;base64,${value}`;
      }
      if (/^https?:\/\//i.test(value) && revision > 0) {
        return appendQrcodeCacheBuster(value, revision);
      }
      return value;
    }

    function appendQrcodeCacheBuster(value: string, revision: number) {
      try {
        const url = new URL(value);
        url.searchParams.set('_kt_qrcode_v', `${revision}`);
        return url.toString();
      } catch {
        const joiner = value.includes('?') ? '&' : '?';
        return `${value}${joiner}_kt_qrcode_v=${revision}`;
      }
    }

    function isRawBase64Image(value: string) {
      const normalized = value.trim();
      return (
        normalized.startsWith('iVBORw0KGgo') ||
        normalized.startsWith('/9j/') ||
        normalized.startsWith('R0lGOD')
      );
    }

    const renderAccountOnlineStatus = (row: QqbotApi.Account) => {
      if (!row.enabled) {
        return <Tag color="default">已停用</Tag>;
      }
      const online = getOneBotStatus(row) === 'online';
      return (
        <Tag color={online ? 'success' : 'default'}>
          {online ? 'OneBot 在线' : 'OneBot 离线'}
        </Tag>
      );
    };

    const renderQqLoginStatus = (row: QqbotApi.Account) => {
      const meta = getQqLoginStatusMeta(row);
      const message = getQqLoginMessage(row);
      return (
        <Space direction="vertical" size={2}>
          <Tag color={meta.color}>{meta.label}</Tag>
          {message ? (
            <ATypographyText type="secondary">{message}</ATypographyText>
          ) : null}
        </Space>
      );
    };

    const renderNapcatRuntime = (row: QqbotApi.Account) => {
      const napcat = row.napcat;
      const meta = getNapcatStatusMeta(row);
      const webuiMeta = getNapcatWebuiMeta(row);
      return (
        <Space direction="vertical" size={2}>
          <Space size={4} wrap>
            <Tag color={meta.color}>{meta.label}</Tag>
            <Tag color={webuiMeta.color}>{webuiMeta.label}</Tag>
          </Space>
          {napcat?.containerName ? (
            <ATypographyText type="secondary">
              {napcat.containerName}
              {napcat.webuiPort ? `:${napcat.webuiPort}` : ''}
            </ATypographyText>
          ) : null}
        </Space>
      );
    };

    const renderRecentActivity = (row: QqbotApi.Account) => {
      const active = getRecentActivity(row);
      return (
        <Space direction="vertical" size={2}>
          <span>{active.label}</span>
          <ATypographyText type="secondary">
            {active.time || '暂无记录'}
          </ATypographyText>
        </Space>
      );
    };

    const renderRuntimeSummary = (row: QqbotApi.Account) => {
      const summary = getRuntimeSummary(row);
      return (
        <ATypographyText
          title={summary.text}
          type={summary.level === 'warning' ? 'warning' : undefined}
        >
          {summary.text}
        </ATypographyText>
      );
    };

    function getNapcatStatusMeta(row: QqbotApi.Account) {
      const status = row.containerStatus || row.napcat?.containerStatus;
      if (!row.napcat && !status) {
        return { color: 'default', label: '未绑定专属容器' };
      }
      if (!status) {
        return { color: 'warning', label: '容器记录缺失' };
      }
      const statusMap: Record<
        NonNullable<QqbotApi.AccountNapcatRuntime['containerStatus']>,
        { color: string; label: string }
      > = {
        creating: { color: 'processing', label: '容器创建中' },
        error: { color: 'error', label: '容器异常' },
        running: { color: 'success', label: '容器运行中' },
        stopped: { color: 'default', label: '容器已停止' },
      };
      return statusMap[status];
    }

    function getNapcatWebuiMeta(row: QqbotApi.Account) {
      const status = getWebuiStatus(row);
      if (!row.napcat && status === 'unknown') {
        return { color: 'default', label: 'WebUI 未绑定' };
      }
      if (status === 'online') {
        return { color: 'success', label: 'WebUI 可用' };
      }
      if (status === 'offline') {
        return { color: 'error', label: 'WebUI 不可用' };
      }
      return { color: 'default', label: 'WebUI 未检查' };
    }

    function getQqLoginStatusMeta(row: QqbotApi.Account) {
      if (!row.napcat && !row.qqLoginStatus) {
        return { color: 'default', label: '未绑定容器' };
      }
      const statusMap: Record<
        QqbotApi.QqLoginStatus,
        { color: string; label: string }
      > = {
        offline: { color: 'error', label: 'QQ 离线' },
        online: { color: 'success', label: 'QQ 在线' },
        qrcode_expired: { color: 'warning', label: '二维码过期' },
        qrcode_pending: { color: 'processing', label: '等待扫码' },
        unknown: { color: 'default', label: '状态未知' },
      };
      return statusMap[getQqLoginStatus(row)];
    }

    function getOneBotStatus(row: QqbotApi.Account): QqbotApi.OneBotStatus {
      if (row.oneBotStatus) return row.oneBotStatus;
      if (row.napcat?.oneBotOnline !== undefined) {
        return row.napcat.oneBotOnline ? 'online' : 'offline';
      }
      return row.connectStatus === 'online' ? 'online' : 'offline';
    }

    function getWebuiStatus(row: QqbotApi.Account): QqbotApi.WebuiStatus {
      if (row.webuiStatus) return row.webuiStatus;
      if (row.napcat?.webuiOnline === true) return 'online';
      if (row.napcat?.webuiOnline === false) return 'offline';
      return 'unknown';
    }

    function getQqLoginStatus(row: QqbotApi.Account): QqbotApi.QqLoginStatus {
      return row.qqLoginStatus || row.napcat?.qqLoginStatus || 'unknown';
    }

    function getQqLoginMessage(row: QqbotApi.Account) {
      return row.qqLoginMessage ?? row.napcat?.qqLoginMessage;
    }

    function getRecentActivity(row: QqbotApi.Account) {
      const candidates = [
        { label: '最近心跳', value: row.lastHeartbeatAt },
        { label: '最近连接', value: row.lastConnectedAt },
        { label: '最近扫码登录', value: row.napcat?.lastLoginAt },
        { label: '容器启动', value: row.napcat?.lastStartedAt },
      ].filter((item) => item.value);
      const latest = candidates.toSorted(
        (left, right) =>
          new Date(right.value || '').getTime() -
          new Date(left.value || '').getTime(),
      )[0];
      return {
        label: latest?.label || '暂无活动',
        time: latest?.value ? formatDisplayTime(latest.value) : '',
      };
    }

    function getRuntimeSummary(row: QqbotApi.Account) {
      if (!row.enabled) {
        return { level: 'warning', text: '账号已停用' };
      }
      if (row.lastError) {
        return { level: 'warning', text: `账号异常：${row.lastError}` };
      }
      const qqLoginMessage = getQqLoginMessage(row);
      const qqLoginStatus = getQqLoginStatus(row);
      const containerStatus =
        row.containerStatus || row.napcat?.containerStatus;
      if (qqLoginMessage) {
        return {
          level: 'warning',
          text: `QQ 登录：${qqLoginMessage}`,
        };
      }
      if (row.napcat?.lastError) {
        return { level: 'warning', text: `NapCat：${row.napcat.lastError}` };
      }
      if (qqLoginStatus === 'qrcode_expired') {
        return { level: 'warning', text: '二维码已过期，点击更新登录' };
      }
      if (getOneBotStatus(row) === 'online') {
        return { level: 'normal', text: '消息链路可用' };
      }
      if (qqLoginStatus === 'online') {
        return { level: 'warning', text: 'QQ 在线，等待 OneBot 连接' };
      }
      if (containerStatus === 'running') {
        return { level: 'warning', text: 'NapCat 运行中，等待 OneBot 连接' };
      }
      if (containerStatus === 'creating') {
        return { level: 'warning', text: '容器创建中' };
      }
      if (containerStatus === 'stopped') {
        return { level: 'warning', text: '容器已停止' };
      }
      if (!row.napcat) {
        return {
          level: 'warning',
          text: '可更新登录绑定容器',
        };
      }
      return { level: 'normal', text: '暂无异常记录' };
    }

    function formatDisplayTime(value: string) {
      const date = new Date(value);
      if (Number.isNaN(date.getTime())) return value;
      return date.toLocaleString('zh-CN', { hour12: false });
    }

    function getAccountFormDefaults(): QqbotApi.AccountBody {
      return {
        accessToken: '',
        connectionMode: 'reverse-ws',
        enabled: true,
        loginPassword: '',
        name: '',
        remark: '',
        selfId: '',
      };
    }

    async function resetAccountForm(values: QqbotApi.AccountBody) {
      await accountFormApi.resetForm();
      await accountFormApi.setValues(values);
      await accountFormApi.resetValidate();
    }

    function openCreate() {
      editingId.value = undefined;
      accountModalApi.setData({ values: getAccountFormDefaults() }).open();
    }

    function openConfig(row: QqbotApi.Account) {
      void router.push({
        name: 'QqBotAccountConfig',
        query: {
          selfId: row.selfId,
        },
      });
    }

    function openEdit(row: QqbotApi.Account) {
      editingId.value = row.id;
      accountModalApi
        .setData({
          values: {
            accessToken: '',
            connectionMode: row.connectionMode,
            enabled: row.enabled,
            id: row.id,
            loginPassword: '',
            name: row.name,
            remark: row.remark || '',
            selfId: row.selfId,
          },
        })
        .open();
    }

    async function submitAccount() {
      const { valid } = await accountFormApi.validate();
      if (!valid) return;

      const values = await accountFormApi.getValues<QqbotApi.AccountBody>();
      const selfId = values.selfId?.trim();
      if (!selfId) {
        message.warning('请填写 Self ID');
        return;
      }

      accountModalApi.lock();
      try {
        const payload = {
          ...values,
          id: editingId.value,
          selfId,
        };
        if (!payload.accessToken) delete payload.accessToken;
        if (!payload.loginPassword) delete payload.loginPassword;
        await (editingId.value
          ? updateQqbotAccount(payload)
          : createQqbotAccount(payload));
        message.success('账号保存成功');
        await accountModalApi.close();
        await tableApi.reload();
      } finally {
        accountModalApi.unlock();
      }
    }

    return () => (
      <Page autoContentHeight>
        <AKtTable
          onRegister={registerTable}
          v-slots={{
            bodyCell: ({ column, record }: any) => {
              const row = record as QqbotApi.Account;
              if (column.key === 'accountOnlineStatus') {
                return renderAccountOnlineStatus(row);
              }
              if (column.key === 'qqLoginStatus') {
                return renderQqLoginStatus(row);
              }
              if (column.key === 'napcatRuntime') {
                return renderNapcatRuntime(row);
              }
              if (column.key === 'lastHeartbeatAt') {
                return renderRecentActivity(row);
              }
              if (column.key === 'runtimeSummary') {
                return renderRuntimeSummary(row);
              }
              return undefined;
            },
          }}
        />
        <ScanModal
          title={scanTitle.value}
          v-slots={{
            footer: () => [
              <AButton key="close" onClick={closeScanModal}>
                关闭
              </AButton>,
              <AButton
                disabled={
                  !scanState.sessionId ||
                  !!scanState.captchaUrl ||
                  !!scanState.newDeviceStatus
                }
                key="refresh"
                loading={scanLoading.value}
                onClick={refreshScanQrcode}
              >
                刷新二维码
              </AButton>,
              <AButton
                disabled={!scanState.sessionId}
                key="check"
                loading={scanLoading.value}
                onClick={pollScanStatus}
                type="primary"
              >
                检查状态
              </AButton>,
            ],
          }}
        >
          <Space direction="vertical" size={16} style={{ width: '100%' }}>
            <Alert
              message={getScanMessage()}
              showIcon
              type={getScanAlertType() as any}
            />
            {scanState.containerName ? (
              <Alert
                message={`NapCat 容器：${scanState.containerName}${
                  scanState.webuiPort
                    ? `，WebUI 端口：${scanState.webuiPort}`
                    : ''
                }`}
                showIcon
                type="info"
              />
            ) : null}
            {scanState.newDeviceStatus ? (
              <Alert
                description={
                  <Space direction="vertical">
                    <ATypographyText>
                      请使用手机 QQ
                      扫描下方新设备验证二维码，并在手机端确认登录。
                    </ATypographyText>
                    {scanState.deviceVerifyUrl ? (
                      <ATypographyLink
                        href={scanState.deviceVerifyUrl}
                        target="_blank"
                      >
                        打开新设备验证链接
                      </ATypographyLink>
                    ) : null}
                  </Space>
                }
                message={getNapcatNewDeviceStatusMessage(
                  scanState.newDeviceStatus,
                )}
                showIcon
                type={getNewDeviceAlertType(scanState.newDeviceStatus)}
              />
            ) : null}
            {scanState.captchaUrl && !scanState.newDeviceStatus ? (
              <Alert
                description={
                  <Space>
                    <ATypographyText>
                      请在当前页面完成腾讯安全验证，验证结果会自动提交到对应
                      NapCat 容器。
                    </ATypographyText>
                    <AButton
                      loading={scanLoading.value}
                      onClick={submitScanCaptcha}
                      type="primary"
                    >
                      完成安全验证
                    </AButton>
                  </Space>
                }
                message="QQ 密码登录需要安全验证"
                showIcon
                type="warning"
              />
            ) : null}
            {scanProgressItems.value.length > 0 ? (
              <ASteps
                current={scanProgressCurrent.value}
                direction="vertical"
                items={scanProgressItems.value}
                size="small"
              />
            ) : null}
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              {scanQrcodeText.value ? (
                <img
                  alt="qqbot-login-qrcode"
                  onError={() => {
                    if (isQrcodeImageCandidate(scanQrcodeText.value)) {
                      scanQrcodeImageFailed.value = true;
                    }
                  }}
                  src={scanQrcodeImageSrc.value}
                  style={{
                    background: '#fff',
                    borderRadius: '8px',
                    height: '240px',
                    padding: '12px',
                    width: '240px',
                  }}
                />
              ) : (
                <div
                  style={{
                    alignItems: 'center',
                    border: '1px dashed var(--border-color)',
                    borderRadius: '8px',
                    display: 'flex',
                    height: '240px',
                    justifyContent: 'center',
                    width: '240px',
                  }}
                >
                  {scanQrcodePlaceholderText.value}
                </div>
              )}
            </div>
            {scanQrcodeText.value ? (
              <ATypographyLink href={scanQrcodeOpenHref.value} target="_blank">
                打开扫码链接
              </ATypographyLink>
            ) : null}
          </Space>
        </ScanModal>
        <AccountModal title={modalTitle.value}>
          <AccountForm class="mx-2" />
        </AccountModal>
      </Page>
    );
  },
});

function requestTencentCaptcha(
  proofWaterUrl: string,
): Promise<Omit<QqbotNapcatApi.AccountScanCaptchaBody, 'sessionId'>> {
  const params = parseUrlParams(proofWaterUrl);
  const appid = params.aid || '2081081773';
  const sid = params.sid || '';

  return loadTencentCaptchaScript().then(
    () =>
      new Promise((resolve, reject) => {
        if (!window.TencentCaptcha) {
          reject(new Error('腾讯验证码组件加载失败'));
          return;
        }

        let captcha: TencentCaptchaInstance | undefined;
        let settled = false;
        const finish = (
          error?: Error,
          value?: Omit<QqbotNapcatApi.AccountScanCaptchaBody, 'sessionId'>,
        ) => {
          if (settled) return;
          settled = true;
          try {
            captcha?.destroy();
          } catch {
            // The captcha SDK may already have cleaned up its popup.
          }
          if (error) {
            reject(error);
            return;
          }
          if (!value) {
            reject(new Error('腾讯验证码未返回验证结果'));
            return;
          }
          resolve(value);
        };

        captcha = new window.TencentCaptcha(
          appid,
          (res) => {
            if (res.ret === 0 && res.ticket && res.randstr) {
              finish(undefined, {
                randstr: res.randstr,
                sid,
                ticket: res.ticket,
              });
              return;
            }
            finish(new Error('已取消安全验证'));
          },
          {
            enableAged: true,
            login_appid: params.login_appid,
            showHeader: false,
            sid: params.sid,
            type: 'popup',
            uin: params.uin,
          },
        );
        captcha.show();
      }),
  );
}

async function loadTencentCaptchaScript() {
  if (window.TencentCaptcha) return;
  tencentCaptchaScriptPromise =
    tencentCaptchaScriptPromise ||
    loadScriptWithFallback([
      'https://captcha.gtimg.com/TCaptcha.js',
      'https://ssl.captcha.qq.com/TCaptcha.js',
    ]);
  try {
    await tencentCaptchaScriptPromise;
  } catch (error) {
    tencentCaptchaScriptPromise = undefined;
    throw error;
  }
}

async function loadScriptWithFallback(sources: string[]) {
  let lastError: unknown;
  for (const source of sources) {
    try {
      await loadScript(source);
      return;
    } catch (error) {
      lastError = error;
    }
  }
  throw lastError instanceof Error
    ? lastError
    : new Error('腾讯验证码脚本加载失败');
}

function loadScript(source: string) {
  return new Promise<void>((resolve, reject) => {
    const existing = document.querySelector<HTMLScriptElement>(
      `script[src="${source}"]`,
    );
    if (existing) {
      existing.addEventListener('load', () => resolve(), { once: true });
      existing.addEventListener(
        'error',
        () => reject(new Error(`腾讯验证码脚本加载失败：${source}`)),
        { once: true },
      );
      return;
    }

    const script = document.createElement('script');
    script.async = true;
    script.src = source;
    script.addEventListener('load', () => resolve(), { once: true });
    script.addEventListener(
      'error',
      () => reject(new Error(`腾讯验证码脚本加载失败：${source}`)),
      { once: true },
    );
    document.head.append(script);
  });
}

function parseUrlParams(url: string) {
  const params: Record<string, string> = {};
  try {
    const parsed = new URL(url);
    parsed.searchParams.forEach((value, key) => {
      params[key] = value;
    });
    return params;
  } catch {
    const query = url.split('?')[1] || '';
    query.split('&').forEach((pair) => {
      const [key, value = ''] = pair.split('=');
      if (key) params[key] = decodeURIComponent(value);
    });
    return params;
  }
}