<template>
  <div class="container">
    <Breadcrumb :items="['京东订单管理', 'Cookie管理']" />
    <a-card class="general-card" title="京东Cookie管理">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="left"
          >
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="keyword" label="关键字">
                  <a-input
                    v-model="formModel.keyword"
                    placeholder="Cookie ID/账户名称"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="status" label="状态">
                  <a-select
                    v-model="formModel.status"
                    placeholder="请选择状态"
                    allow-clear
                  >
                    <a-option :value="0">未知</a-option>
                    <a-option :value="1">正常</a-option>
                    <a-option :value="2">暂停</a-option>
                    <a-option :value="3">失效</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 42px" direction="vertical" />
        <a-col flex="172px" style="text-align: right">
          <a-space direction="horizontal" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              搜索
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-space>
          <a-button type="primary" size="small" @click="showAddModal()">
            <template #icon>
              <icon-plus />
            </template>
            添加Cookie
          </a-button>
          <a-button type="secondary" size="small" @click="showBatchAddModal">
            <template #icon>
              <icon-plus-circle />
            </template>
            批量添加Cookie
          </a-button>
          <a-button
            type="outline"
            status="danger"
            size="small"
            :loading="deleteInvalidLoading"
            @click="handleDeleteInvalidCookies"
          >
            <template #icon>
              <icon-delete />
            </template>
            删除所有失效Cookie
          </a-button>
        </a-space>
      </a-row>
      <a-table
        :loading="loading"
        :pagination="{
          current: pagination.current,
          pageSize: pagination.pageSize,
          total: pagination.total,
          pageSizeOptions: [10, 20, 50, 100],
          showPageSize: true
        }"
        :columns="columns"
        :data="renderData"
        :scroll="{ x: 1400 }"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #status="{ record }">
          <a-tag v-if="record.status === 0" color="gray">未知</a-tag>
          <a-tag v-else-if="record.status === 1" color="green">正常</a-tag>
          <a-tag v-else-if="record.status === 2" color="orange">暂停</a-tag>
          <a-tag v-else-if="record.status === 3" color="red">失效</a-tag>
          <a-tag v-else color="gray">未知</a-tag>
        </template>
        <template #operations="{ record }">
          <a-space size="small">
            <a-tooltip content="查看详情">
              <a-button size="small" @click="showDetail(record)">
                <template #icon>
                  <icon-eye />
                </template>
              </a-button>
            </a-tooltip>
            <a-tooltip content="变更记录">
              <a-button size="small" @click="showHistory(record)">
                <template #icon>
                  <icon-history />
                </template>
              </a-button>
            </a-tooltip>
            <a-tooltip content="编辑">
              <a-button
                size="small"
                status="warning"
                @click="showEditModal(record)"
              >
                <template #icon>
                  <icon-edit />
                </template>
              </a-button>
            </a-tooltip>
            <a-popconfirm
              content="确认删除此Cookie吗？"
              @ok="deleteCookie(record.cookieId)"
            >
              <a-tooltip content="删除">
                <a-button size="small" status="danger">
                  <template #icon>
                    <icon-delete />
                  </template>
                </a-button>
              </a-tooltip>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 添加/编辑Cookie弹窗 -->
    <cookie-modal
      v-model:visible="modalVisible"
      :cookie-id="currentCookieId"
      :cookie-data="currentCookie"
      @success="handleModalSuccess"
    />

    <!-- Cookie详情弹窗 -->
    <cookie-detail
      v-model:visible="detailVisible"
      :cookie-id="currentCookieId"
    />

    <!-- Cookie变更记录侧边栏 -->
    <cookie-history-drawer
      v-model:visible="historyVisible"
      :cookie-id="currentCookieId"
    />

    <!-- 批量添加Cookie弹窗 -->
    <batch-import-modal
      v-model:visible="batchAddVisible"
      @success="handleBatchAddSuccess"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Message, Modal } from '@arco-design/web-vue';
import type { TableColumnData } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { jdCookieClient } from '@/api';
import type {
  KamiApiJdCookieV1CookieAccountInfo,
  KamiApiJdCookieV1DeleteInvalidRes
} from '@/api/generated';
import CookieModal from './components/cookie-modal.vue';
import CookieDetail from './components/cookie-detail.vue';
import CookieHistoryDrawer from './components/cookie-history-drawer.vue';
import BatchImportModal from './components/batch-import-modal.vue';

const { loading, setLoading } = useLoading(true);
const deleteInvalidLoading = ref(false);

// 分页配置
const basePagination: Pagination = {
  current: 1,
  pageSize: 20
};
const pagination = reactive({ ...basePagination });

// 表格列配置
const columns: TableColumnData[] = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 80,
    render: ({ rowIndex }) => {
      return rowIndex + 1 + (pagination.current - 1) * pagination.pageSize;
    }
  },
  {
    title: 'Cookie ID',
    dataIndex: 'cookieId',
    width: 200,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '账户名称',
    dataIndex: 'accountName',
    width: 150,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '连续失败次数',
    dataIndex: 'failureCount',
    width: 120
  },
  {
    title: '最后使用时间',
    dataIndex: 'lastUsedAt',
    width: 180
  },
  {
    title: '暂停解除时间',
    dataIndex: 'suspendUntil',
    width: 180
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    width: 180
  },
  {
    title: '更新时间',
    dataIndex: 'updatedAt',
    width: 180
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 200,
    ellipsis: true,
    tooltip: true
  },
  {
    title: '操作',
    dataIndex: 'operations',
    slotName: 'operations',
    width: 200,
    fixed: 'right'
  }
];

// 类型定义
interface FormModel {
  keyword: string;
  status: number | undefined;
}

interface QueryParams {
  current?: number;
  pageSize?: number;
  keyword?: string;
  status?: number;
}

// 数据状态
const renderData = ref<KamiApiJdCookieV1CookieAccountInfo[]>([]);
const formModel = reactive<FormModel>({
  keyword: '',
  status: undefined
});

// 弹窗状态
const modalVisible = ref(false);
const detailVisible = ref(false);
const historyVisible = ref(false);
const batchAddVisible = ref(false);
const currentCookieId = ref('');
const currentCookie = ref<KamiApiJdCookieV1CookieAccountInfo | null>(null);

// 获取Cookie列表
const fetchData = async (params: QueryParams = {}) => {
  setLoading(true);
  try {
    const response = await jdCookieClient.apiJdCookieAccountListGet({
      page: params.current || pagination.current,
      size: params.pageSize || pagination.pageSize,
      keyword: params.keyword,
      status: params.status
    });

    renderData.value = response.data.list || [];
    pagination.total = response.data.total || 0;
  } catch (error) {
    Message.error('获取Cookie列表失败');
  } finally {
    setLoading(false);
  }
};

// 搜索
const search = (): void => {
  fetchData({
    current: 1,
    ...formModel
  });
};

// 重置
const reset = (): void => {
  formModel.keyword = '';
  formModel.status = undefined;
  search();
};

// 分页变化
const onPageChange = (current: number): void => {
  pagination.current = current;
  fetchData(formModel);
};

const onPageSizeChange = (pageSize: number): void => {
  pagination.pageSize = pageSize;
  pagination.current = 1;
  fetchData(formModel);
};

// 显示添加弹窗
const showAddModal = (): void => {
  currentCookieId.value = '';
  currentCookie.value = null;
  modalVisible.value = true;
};

// 显示编辑弹窗
const showEditModal = (record: KamiApiJdCookieV1CookieAccountInfo): void => {
  currentCookieId.value = record.cookieId;
  currentCookie.value = record;
  modalVisible.value = true;
};

// 显示详情
const showDetail = (record: KamiApiJdCookieV1CookieAccountInfo): void => {
  currentCookieId.value = record.cookieId;
  detailVisible.value = true;
};

// 显示变更记录
const showHistory = (record: KamiApiJdCookieV1CookieAccountInfo): void => {
  currentCookieId.value = record.cookieId;
  historyVisible.value = true;
};

// 删除Cookie
const deleteCookie = async (cookieId: string): Promise<void> => {
  try {
    await jdCookieClient.apiJdCookieAccountDeleteDelete({ cookieId });
    Message.success('删除成功');
    search();
  } catch (error) {
    Message.error('删除失败');
  }
};

// 显示批量添加弹窗
const showBatchAddModal = (): void => {
  batchAddVisible.value = true;
};

// 弹窗成功回调
const handleModalSuccess = (): void => {
  search();
};

// 批量添加成功回调
const handleBatchAddSuccess = (): void => {
  search();
};

// 删除所有失效Cookie
const handleDeleteInvalidCookies = async (): Promise<void> => {
  // 显示确认对话框
  const confirmed = await new Promise<boolean>(resolve => {
    const modal = Modal.confirm({
      title: '确认删除',
      content: '确认要删除所有失效的Cookie吗？此操作不可恢复。',
      okText: '确认删除',
      cancelText: '取消',
      okButtonProps: {
        status: 'danger'
      },
      onOk: () => {
        resolve(true);
        return new Promise(okResolve => {
          setTimeout(() => okResolve(true), 0);
        });
      },
      onCancel: () => {
        resolve(false);
      }
    });
  });

  if (!confirmed) {
    return;
  }

  deleteInvalidLoading.value = true;
  try {
    const response =
      await jdCookieClient.apiJdCookieAccountDeleteInvalidDelete();
    const result = response.data;

    // 显示详细的成功信息
    if (result.deletedCount && result.deletedCount > 0) {
      Message.success(
        `成功删除 ${result.deletedCount} 个失效Cookie${result.failedCount ? `，${result.failedCount} 个删除失败` : ''}`
      );

      // 如果有删除失败的详情，可以在控制台查看
      if (result.failedCount && result.results) {
        console.group('删除失效Cookie详情:');
        result.results.forEach((item, index) => {
          if (!item.success) {
            console.warn(`${index + 1}. ${item.cookieId}: ${item.message}`);
          }
        });
        console.groupEnd();
      }
    } else {
      Message.info('没有找到失效的Cookie');
    }

    // 刷新列表
    search();
  } catch (error) {
    console.error('删除失效Cookie失败:', error);
    Message.error('删除失效Cookie失败，请稍后重试');
  } finally {
    deleteInvalidLoading.value = false;
  }
};

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