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

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

import {
  Button,
  Card,
  Modal,
  Select,
  Space,
  Switch,
  Table,
  Tag,
  Tabs,
  message,
  Popconfirm,
  Badge,
  Statistic,
  Row,
  Col,
} from 'ant-design-vue';
import { ExclamationCircleOutlined, SyncOutlined, DeleteOutlined } from '@ant-design/icons-vue';

import {
  getSyncConfig,
  startSyncTask,
  stopSyncTask,
  setSyncCron,
  executeSync,
  getSyncLogs,
  getSyncAlerts,
  resolveAlert,
  getSyncStats,
  getTenants,
  getTenantCompanies,
  getErpCompanies,
  bindCompany,
  unbindCompany,
} from '#/api/crm/sync';

defineOptions({ name: 'CrmSyncManage' });

// 同步执行状态
const syncing = ref(false);
const loading = ref(false);
const logs = ref<any[]>([]);
const alerts = ref<any[]>([]);
const totalLogs = ref(0);
const totalAlerts = ref(0);
const currentPageLogs = ref(1);
const currentPageAlerts = ref(1);
const pageSize = ref(10);
const alertStatusFilter = ref('PENDING');
const pollingTimer = ref<ReturnType<typeof setInterval> | null>(null);

// 统计数据
const stats = ref<any>({
  lastSyncTime: null,
  lastSyncDuration: null,
  lastSyncCount: 0,
  lastSyncUpdated: 0,
  lastSyncAlerts: 0,
  lastSyncErrors: 0,
  pendingAlerts: 0,
  boundDealers: 0,
});

// 定时任务状态
const taskRunning = ref(false);
const currentCron = ref('0 0 2 * * ?');
const taskLoading = ref(false);

// 租户公司映射（全局管理）
const tenants = ref<any[]>([]);
const tenantCompanies = ref<any[]>([]);
const erpCompanies = ref<any[]>([]);
const companyLoading = ref(false);
const tenantLoading = ref(false);
const selectedTenantId = ref<string>('');
const selectedTenantName = ref<string>('');
const selectedCompanyId = ref<string>('');
const selectedCompanyName = ref<string>('');

// 状态映射
const statusMap: Record<string, { text: string; color: string }> = {
  RUNNING: { text: '同步中', color: 'processing' },
  COMPLETED: { text: '已完成', color: 'success' },
  FAILED: { text: '失败', color: 'error' },
};

const syncTypeMap: Record<string, { text: string; color: string }> = {
  SCHEDULED: { text: '定时同步', color: 'blue' },
  MANUAL: { text: '手动同步', color: 'orange' },
};

const alertStatusMap: Record<string, { text: string; color: string }> = {
  PENDING: { text: '待处理', color: 'warning' },
  ACKNOWLEDGED: { text: '已确认', color: 'default' },
  RESOLVED: { text: '已处理', color: 'success' },
  IGNORED: { text: '已忽略', color: 'default' },
};

const alertTypeMap: Record<string, { text: string }> = {
  CONTACT_DIFF: { text: '联系人差异' },
  ADDRESS_DIFF: { text: '地址差异' },
  STATUS_DIFF: { text: '状态差异' },
};

const cronOptions = [
  { label: '每 1 小时', value: '0 0 * * * ?' },
  { label: '每 2 小时', value: '0 0 0/2 * * ?' },
  { label: '每日凌晨 1 点', value: '0 0 1 * * ?' },
  { label: '每日凌晨 2 点', value: '0 0 2 * * ?' },
  { label: '每日凌晨 3 点', value: '0 0 3 * * ?' },
];

// 同步日志表格列
const logColumns = [
  {
    title: '状态',
    key: 'status',
    width: 100,
    customRender: ({ record }: any) => {
      const info = statusMap[record.status] || { text: '未知', color: 'default' };
      return h(Tag, { color: info.color }, () => info.text);
    },
  },
  {
    title: '同步类型',
    key: 'syncType',
    width: 100,
    customRender: ({ record }: any) => {
      const info = syncTypeMap[record.syncType] || { text: record.syncType, color: 'default' };
      return h(Tag, { color: info.color }, () => info.text);
    },
  },
  { title: '开始时间', dataIndex: 'startTime', key: 'startTime', width: 180 },
  { title: '结束时间', dataIndex: 'endTime', key: 'endTime', width: 180 },
  { title: '耗时(秒)', dataIndex: 'duration', key: 'duration', width: 80 },
  { title: '扫描', dataIndex: 'totalCount', key: 'totalCount', width: 80 },
  { title: '同步', dataIndex: 'syncedCount', key: 'syncedCount', width: 80 },
  { title: '更新', dataIndex: 'updatedCount', key: 'updatedCount', width: 80 },
  { title: '预警', dataIndex: 'alertCount', key: 'alertCount', width: 80 },
  { title: '错误', dataIndex: 'errorCount', key: 'errorCount', width: 80 },
  { title: '操作人', dataIndex: 'operator', key: 'operator', width: 100 },
];

// 预警表格列
const alertColumns = [
  {
    title: '状态',
    key: 'status',
    width: 100,
    customRender: ({ record }: any) => {
      const info = alertStatusMap[record.status] || { text: record.status, color: 'default' };
      return h(Tag, { color: info.color }, () => info.text);
    },
  },
  {
    title: '类型',
    key: 'alertType',
    width: 100,
    customRender: ({ record }: any) => {
      const info = alertTypeMap[record.alertType] || { text: record.alertType };
      return info.text;
    },
  },
  { title: '经销商', dataIndex: 'dealerName', key: 'dealerName', width: 150 },
  { title: 'ERP编码', dataIndex: 'customerCode', key: 'customerCode', width: 120 },
  { title: 'CRM值', dataIndex: 'crmValue', key: 'crmValue', width: 150 },
  { title: 'ERP值', dataIndex: 'erpValue', key: 'erpValue', width: 150 },
  { title: '描述', dataIndex: 'alertMessage', key: 'alertMessage', width: 200 },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
  {
    title: '操作',
    key: 'action',
    width: 180,
    customRender: ({ record }: any) => {
      if (record.status !== 'PENDING') return null;
      return h(Space, {}, () => [
        h(Button, { type: 'link', size: 'small', onClick: () => handleResolveAlert(record.id, 'acknowledge') }, () => '确认'),
        h(Button, { type: 'link', size: 'small', onClick: () => handleResolveAlert(record.id, 'ignore') }, () => '忽略'),
      ]);
    },
  },
];

// 手动同步
async function handleExecuteSync() {
  Modal.confirm({
    title: '确认手动同步',
    icon: () => h(ExclamationCircleOutlined),
    content: '将同步所有绑定ERP编码的经销商数据，后台异步执行。确定继续吗？',
    okText: '确定同步',
    cancelText: '取消',
    async onOk() {
      syncing.value = true;
      try {
        await executeSync();
        message.success('已启动同步，请查看同步日志');
        await loadLogs();
        await loadStats();
        startPolling();
      } catch {
        message.error('启动同步失败');
      } finally {
        syncing.value = false;
      }
    },
  });
}

// 轮询检查同步状态
function startPolling() {
  stopPolling();
  pollingTimer.value = setInterval(async () => {
    await loadLogs();
    const runningLog = logs.value.find((l: any) => l.status === 'RUNNING');
    if (!runningLog) {
      stopPolling();
      await loadStats();
    }
  }, 3000);
}

function stopPolling() {
  if (pollingTimer.value) {
    clearInterval(pollingTimer.value);
    pollingTimer.value = null;
  }
}

// 加载同步日志
async function loadLogs() {
  loading.value = true;
  try {
    const res = await getSyncLogs({ pageNum: currentPageLogs.value, pageSize: pageSize.value });
    logs.value = res?.rows ?? [];
    totalLogs.value = res?.total ?? 0;
  } catch (error: any) {
    message.error('加载同步日志失败');
  } finally {
    loading.value = false;
  }
}

// 加载预警列表
async function loadAlerts() {
  try {
    const res = await getSyncAlerts({ pageNum: currentPageAlerts.value, pageSize: pageSize.value, status: alertStatusFilter.value });
    alerts.value = res?.rows ?? [];
    totalAlerts.value = res?.total ?? 0;
  } catch {
    message.error('加载预警列表失败');
  }
}

// 加载统计数据
async function loadStats() {
  try {
    const res = await getSyncStats();
    stats.value = res ?? {};
  } catch { /* ignore */ }
}

// 加载任务状态
async function loadTaskStatus() {
  try {
    const config = await getSyncConfig();
    taskRunning.value = config.enabled;
    currentCron.value = config.cron || '0 0 2 * * ?';
  } catch { /* ignore */ }
}

// 加载租户公司映射
async function loadTenantCompanies() {
  try {
    tenantCompanies.value = await getTenantCompanies() ?? [];
  } catch {
    message.error('加载租户公司映射失败');
  }
}

// 加载租户列表
async function loadTenants() {
  tenantLoading.value = true;
  try {
    tenants.value = await getTenants() ?? [];
  } catch {
    message.error('加载租户列表失败');
  } finally {
    tenantLoading.value = false;
  }
}

// 加载ERP公司列表
async function loadErpCompanies() {
  companyLoading.value = true;
  try {
    erpCompanies.value = await getErpCompanies() ?? [];
  } catch {
    message.error('加载ERP公司列表失败');
  } finally {
    companyLoading.value = false;
  }
}

// 启动/停止定时任务
async function handleTaskToggle(checked: boolean) {
  taskLoading.value = true;
  try {
    if (checked) {
      await startSyncTask();
      message.success('定时任务已启动');
    } else {
      await stopSyncTask();
      message.success('定时任务已停止');
    }
    await loadTaskStatus();
  } catch {
    message.error(checked ? '启动失败' : '停止失败');
  } finally {
    taskLoading.value = false;
  }
}

// 设置Cron
async function handleCronChange(value: string) {
  try {
    await setSyncCron(value);
    message.success('同步频率已更新');
    currentCron.value = value;
  } catch {
    message.error('更新频率失败');
  }
}

// 处理预警
async function handleResolveAlert(alertId: number, action: string) {
  try {
    await resolveAlert(alertId, action);
    message.success('预警已处理');
    await loadAlerts();
    await loadStats();
  } catch {
    message.error('处理预警失败');
  }
}

// 绑定ERP公司
async function handleBindCompany() {
  if (!selectedTenantId.value) {
    message.warning('请选择租户');
    return;
  }
  if (!selectedCompanyId.value) {
    message.warning('请选择要绑定的ERP公司');
    return;
  }
  try {
    await bindCompany(selectedTenantId.value, selectedTenantName.value, selectedCompanyId.value, selectedCompanyName.value);
    message.success('绑定成功');
    await loadTenantCompanies();
    selectedTenantId.value = '';
    selectedTenantName.value = '';
    selectedCompanyId.value = '';
    selectedCompanyName.value = '';
  } catch {
    message.error('绑定失败');
  }
}

// 解绑ERP公司
async function handleUnbindCompany(id: number) {
  try {
    await unbindCompany(id);
    message.success('已解绑');
    await loadTenantCompanies();
  } catch {
    message.error('解绑失败');
  }
}

// 选择租户
function handleTenantSelect(value: string) {
  selectedTenantId.value = value;
  const tenant = tenants.value.find((t: any) => t.tenantId === value);
  selectedTenantName.value = tenant?.companyName ?? '';
}

// 选择公司
function handleCompanySelect(value: string) {
  selectedCompanyId.value = value;
  const company = erpCompanies.value.find((c: any) => c.companyCode === value);
  selectedCompanyName.value = company?.companyName ?? '';
}

// 分页处理
function handleLogPageChange(pagination: any) {
  currentPageLogs.value = pagination.current ?? 1;
  pageSize.value = pagination.pageSize ?? 10;
  loadLogs();
}

function handleAlertPageChange(pagination: any) {
  currentPageAlerts.value = pagination.current ?? 1;
  pageSize.value = pagination.pageSize ?? 10;
  loadAlerts();
}

// 预警状态筛选
function handleAlertStatusChange(value: string) {
  alertStatusFilter.value = value;
  currentPageAlerts.value = 1;
  loadAlerts();
}

onMounted(() => {
  loadLogs();
  loadAlerts();
  loadStats();
  loadTaskStatus();
  loadTenants();
  loadTenantCompanies();
  loadErpCompanies();
});

onUnmounted(() => {
  stopPolling();
});
</script>

<template>
  <Page :auto-content-height="true">
    <div style="overflow-y: auto; padding: 16px">
      <!-- 统计卡片 -->
      <Card title="同步概览" :bordered="false" style="margin-bottom: 16px">
        <Row :gutter="16">
          <Col :span="4">
            <Statistic title="绑定经销商" :value="stats.boundDealers" />
          </Col>
          <Col :span="4">
            <Statistic title="待处理预警" :value="stats.pendingAlerts">
              <template #suffix>
                <Badge v-if="stats.pendingAlerts > 0" color="warning" />
              </template>
            </Statistic>
          </Col>
          <Col :span="4">
            <Statistic title="最近同步" :value="stats.lastSyncCount" suffix="条" />
          </Col>
          <Col :span="4">
            <Statistic title="更新数量" :value="stats.lastSyncUpdated" suffix="条" />
          </Col>
          <Col :span="4">
            <Statistic title="新增预警" :value="stats.lastSyncAlerts" suffix="条" />
          </Col>
          <Col :span="4">
            <Statistic title="耗时" :value="stats.lastSyncDuration" suffix="秒" />
          </Col>
        </Row>
      </Card>

      <!-- 操作区 -->
      <Card title="同步操作" :bordered="false" style="margin-bottom: 16px">
        <Space>
          <Button type="primary" :loading="syncing" @click="handleExecuteSync">
            <template #icon><SyncOutlined /></template>
            手动同步
          </Button>
          <span style="margin-left: 24px">启用定时同步：</span>
          <Switch
            v-model:checked="taskRunning"
            :loading="taskLoading"
            checked-children="开"
            un-checked-children="关"
            @change="handleTaskToggle"
          />
          <span style="margin-left: 24px">同步频率：</span>
          <Select
            :value="currentCron"
            style="width: 180px"
            :options="cronOptions"
            @change="handleCronChange"
          />
          <Tag :color="taskRunning ? 'green' : 'default'">
            {{ taskRunning ? '运行中' : '已停止' }}
          </Tag>
        </Space>
      </Card>

      <!-- 租户公司映射 -->
      <Card title="租户-ERP公司映射" :bordered="false" style="margin-bottom: 16px">
        <Space style="margin-bottom: 16px">
          <Select
            v-model:value="selectedTenantId"
            placeholder="选择租户"
            style="width: 250px"
            show-search
            :loading="tenantLoading"
            :options="tenants.map((t: any) => ({ label: `${t.companyName} (${t.tenantId})`, value: t.tenantId }))"
            @change="handleTenantSelect"
          />
          <Select
            v-model:value="selectedCompanyId"
            placeholder="选择ERP公司"
            style="width: 300px"
            show-search
            :loading="companyLoading"
            :options="erpCompanies.map((c: any) => ({ label: `${c.companyName} (${c.companyCode})`, value: c.companyCode }))"
            @change="handleCompanySelect"
          />
          <Button type="primary" @click="handleBindCompany">绑定</Button>
        </Space>
        <Table
          :columns="[
            { title: '租户编号', dataIndex: 'tenantId', width: 120 },
            { title: '租户名称', dataIndex: 'tenantName', width: 150 },
            { title: 'ERP公司ID', dataIndex: 'erpCompanyId', width: 150 },
            { title: 'ERP公司名称', dataIndex: 'erpCompanyName', width: 200 },
            { title: '状态', dataIndex: 'status', width: 100, customRender: ({ record }: any) => h(Tag, { color: record.status === '0' ? 'green' : 'default' }, () => record.status === '0' ? '正常' : '停用') },
            { title: '操作', key: 'action', width: 100, customRender: ({ record }: any) => h(Popconfirm, { title: '确定解绑？', onConfirm: () => handleUnbindCompany(record.id) }, () => h(Button, { type: 'link', danger: true, size: 'small' }, () => '解绑')) },
          ]"
          :data-source="tenantCompanies"
          row-key="id"
          :pagination="false"
          size="small"
        />
      </Card>

      <!-- 日志和预警Tab -->
      <Card :bordered="false">
        <Tabs>
          <Tabs.TabPane key="logs" tab="同步日志">
            <Table
              :columns="logColumns"
              :data-source="logs"
              :loading="loading"
              :pagination="{
                current: currentPageLogs,
                pageSize: pageSize,
                total: totalLogs,
                showSizeChanger: true,
                showTotal: (t: number) => `共 ${t} 条`,
              }"
              row-key="id"
              @change="handleLogPageChange"
            />
          </Tabs.TabPane>
          <Tabs.TabPane key="alerts" tab="预警管理">
            <Space style="margin-bottom: 16px">
              <span>状态筛选：</span>
              <Select
                v-model:value="alertStatusFilter"
                style="width: 150px"
                :options="[
                  { label: '全部', value: '' },
                  { label: '待处理', value: 'PENDING' },
                  { label: '已确认', value: 'ACKNOWLEDGED' },
                  { label: '已处理', value: 'RESOLVED' },
                  { label: '已忽略', value: 'IGNORED' },
                ]"
                @change="handleAlertStatusChange"
              />
            </Space>
            <Table
              :columns="alertColumns"
              :data-source="alerts"
              :loading="loading"
              :pagination="{
                current: currentPageAlerts,
                pageSize: pageSize,
                total: totalAlerts,
                showSizeChanger: true,
                showTotal: (t: number) => `共 ${t} 条`,
              }"
              row-key="id"
              @change="handleAlertPageChange"
            />
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </div>
  </Page>
</template>