/**
 * @name 自动删粉
 *
 * 参考资料：
 * - /rules/development-standards.md
 * - /rules/axure-api-guide.md
 * - /assets/docs/设计指导（简约）.md
 * - /src/themes/antd-new/DESIGN-SPEC.md
 */

import './style.css';

import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
import {
  Layout,
  Card,
  Typography,
  Space,
  Button,
  Table,
  Row,
  Col,
  Form,
  Input,
  Select,
  DatePicker,
  Modal,
  Radio,
  Popconfirm,
  message,
  Descriptions,
  Badge,
  Tag,
  Checkbox,
  Alert,
  Upload
} from 'antd';
import {
  PlusOutlined,
  ExportOutlined,
  SearchOutlined,
  ArrowLeftOutlined,
  InboxOutlined,
  PlayCircleOutlined,
  PauseCircleOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { AxureProps, AxureHandle, EventItem, Action } from '../../common/axure-types';
import { MENU_ITEMS, resolveMenuTarget } from '../../common/menu';
import SideMenu from '../../components/side-menu';
import dayjs from 'dayjs';

const { Header, Content } = Layout;
const { Title, Text } = Typography;
const { RangePicker } = DatePicker;

interface ManagedStaff {
  userid: string;
  name: string;
  dept: string;
  phone: string;
}

interface TaskStats {
  total: number;
  pending: number;
  running: number;
  success: number;
  failed: number;
}

interface DeleteScope {
  includeEnterprise: boolean;
  includeSingleOrBlocked: boolean;
  addedAtStart: string;
  addedAtEnd: string;
}

interface TaskItem {
  id: string;
  name: string;
  staffList: ManagedStaff[];
  deleteScope: DeleteScope;
  onecodeMode: 'auto' | 'manual';
  onecodeCount: number;
  executionType: 'scheduled' | 'immediate' | 'manual';
  executionTime?: string;
  webhook: string;
  creator: string;
  createdAt: string;
  status: 'draft' | 'running' | 'paused' | 'finished' | 'failed';
  stats: TaskStats;
  rpaMode: 'mouse_keyboard';
}

interface ExecutionRecord {
  id: string;
  customerName: string;
  onecode: string;
  actionType: '单删' | '拉黑';
  status: '未开始' | '执行中' | '成功' | '失败';
  execTime: string;
  errorReason: string;
}

const EVENT_LIST: EventItem[] = [
  { name: 'on_detail', desc: '点击详情', desc_en: 'Click detail' },
  { name: 'on_delete', desc: '确认删除', desc_en: 'Confirm delete' },
  { name: 'on_create', desc: '提交新建', desc_en: 'Submit create' },
  { name: 'on_export', desc: '点击导出', desc_en: 'Click export' },
  { name: 'on_detail_export', desc: '详情页导出', desc_en: 'Export detail' },
  { name: 'on_webhook_test', desc: '测试 webhook', desc_en: 'Test webhook' }
];

const ACTION_LIST: Action[] = [
  { name: 'set_view', desc: '切换视图', params: 'string' }
];

const STAFF_OPTIONS: ManagedStaff[] = [
  { userid: 'u10001', name: '绿化移动小微客服-琦琦', dept: '绿化区', phone: '183****4754' },
  { userid: 'u10002', name: '双鸭山移动小微客服-晓脉', dept: '双鸭山', phone: '157****0863' },
  { userid: 'u10003', name: '齐齐哈尔移动小微客服-铭铭', dept: '齐齐哈尔', phone: '178****1430' },
  { userid: 'u10004', name: '哈尔滨移动小微客服-柠柠', dept: '哈尔滨', phone: '183****4742' },
  { userid: 'u10005', name: '黑河移动小微客服-安安', dept: '黑河', phone: '183****4753' }
];

const DEFAULT_TASKS: TaskItem[] = [
  {
    id: '1772529290407',
    name: '2月批量删客-绿化区',
    staffList: [STAFF_OPTIONS[0], STAFF_OPTIONS[1]],
    deleteScope: {
      includeEnterprise: true,
      includeSingleOrBlocked: true,
      addedAtStart: '2026-02-01 00:00:00',
      addedAtEnd: '2026-02-29 23:59:59'
    },
    onecodeMode: 'auto',
    onecodeCount: 1024,
    executionType: 'immediate',
    webhook: 'https://hooks.example.com/wecom/task-delete',
    creator: '杨艳',
    createdAt: '2026-03-03 17:14:58',
    status: 'running',
    rpaMode: 'mouse_keyboard',
    stats: { total: 1024, pending: 812, running: 108, success: 92, failed: 12 }
  },
  {
    id: '1772529197488',
    name: '2月批量删客-双鸭山',
    staffList: [STAFF_OPTIONS[1]],
    deleteScope: {
      includeEnterprise: true,
      includeSingleOrBlocked: false,
      addedAtStart: '2026-02-10 00:00:00',
      addedAtEnd: '2026-02-28 23:59:59'
    },
    onecodeMode: 'auto',
    onecodeCount: 1058,
    executionType: 'scheduled',
    executionTime: '2026-03-03 20:00:00',
    webhook: 'https://hooks.example.com/wecom/task-delete',
    creator: '杨艳',
    createdAt: '2026-03-03 17:13:08',
    status: 'running',
    rpaMode: 'mouse_keyboard',
    stats: { total: 1058, pending: 900, running: 70, success: 72, failed: 16 }
  }
];

const DEFAULT_RECORDS: ExecutionRecord[] = [
  {
    id: '1',
    customerName: '胡晓丹',
    onecode: '14jctu',
    actionType: '单删',
    status: '执行中',
    execTime: '-',
    errorReason: ''
  },
  {
    id: '2',
    customerName: '杨雨珊',
    onecode: '12knut',
    actionType: '拉黑',
    status: '未开始',
    execTime: '-',
    errorReason: ''
  },
  {
    id: '3',
    customerName: '中百大厦',
    onecode: '103ttc',
    actionType: '单删',
    status: '失败',
    execTime: '2026-03-03 17:38:11',
    errorReason: 'RPA 页面元素定位超时，已上报 webhook'
  }
];

const statusTextMap: Record<TaskItem['status'], string> = {
  draft: '草稿',
  running: '执行中',
  paused: '已暂停',
  finished: '已完成',
  failed: '异常'
};

const statusBadgeMap: Record<TaskItem['status'], 'default' | 'processing' | 'warning' | 'success' | 'error'> = {
  draft: 'default',
  running: 'processing',
  paused: 'warning',
  finished: 'success',
  failed: 'error'
};

const getExecutionTypeLabel = (value: TaskItem['executionType']) => {
  if (value === 'scheduled') return '定时执行';
  if (value === 'manual') return '手动执行';
  return '立即执行';
};

const formatDeleteScope = (scope: DeleteScope) => {
  const tags: string[] = [];
  if (scope.includeEnterprise) tags.push('企业客户');
  if (scope.includeSingleOrBlocked) tags.push('单删/拉黑客户');
  const category = tags.length > 0 ? tags.join(' + ') : '未选择';
  return `${category} | 添加时间: ${scope.addedAtStart} ~ ${scope.addedAtEnd}`;
};

const CreateTaskModal = ({
  visible,
  onCancel,
  onCreate,
  onWebhookTest
}: {
  visible: boolean;
  onCancel: () => void;
  onCreate: (values: any) => void;
  onWebhookTest: (webhook: string) => void;
}) => {
  const [form] = Form.useForm();
  const [execType, setExecType] = useState<TaskItem['executionType']>('immediate');
  const [onecodeMode, setOnecodeMode] = useState<TaskItem['onecodeMode']>('auto');

  const handleOk = () => {
    form.validateFields().then((values) => {
      onCreate(values);
      form.resetFields();
      setExecType('immediate');
      setOnecodeMode('auto');
    });
  };

  return (
    <Modal
      title="新建删客任务"
      open={visible}
      onOk={handleOk}
      onCancel={onCancel}
      width={760}
    >
      <Alert
        showIcon
        type="info"
        message="系统将根据所选托管员工 userid 与删除范围，自动查询 onecode 并生成 RPA 执行任务。"
        style={{ marginBottom: 16 }}
      />
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          deleteCategories: ['enterprise', 'single_or_blocked'],
          onecodeMode: 'auto',
          executionType: 'immediate'
        }}
      >
        <Form.Item label="任务方式" name="onecodeMode" rules={[{ required: true }]}>
          <Radio.Group onChange={(e) => setOnecodeMode(e.target.value)}>
            <Radio value="auto">自动查询（推荐）</Radio>
            <Radio value="manual">导入文件</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="任务名称" name="name" rules={[{ required: true, message: '请输入任务名称' }]}>
          <Input placeholder="例如：3月第一批企业删客" />
        </Form.Item>

        {onecodeMode === 'auto' ? (
          <>
            <Form.Item
              label="托管员工（通讯录组件）"
              name="staffUserIds"
              rules={[{ required: true, message: '请选择托管员工' }]}
              extra="可多选，系统将基于所选员工 userid 自动查询 onecode"
            >
              <Select
                mode="multiple"
                optionFilterProp="label"
                placeholder="请选择托管员工"
                options={STAFF_OPTIONS.map((item) => ({
                  label: `${item.name}（${item.userid}）`,
                  value: item.userid
                }))}
              />
            </Form.Item>

            <Row gutter={12}>
              <Col span={12}>
                <Form.Item
                  label="删除范围"
                  name="deleteCategories"
                  rules={[{ required: true, message: '请选择删除范围' }]}
                >
                  <Checkbox.Group>
                    <Space direction="vertical">
                      <Checkbox value="enterprise">企业客户</Checkbox>
                      <Checkbox value="single_or_blocked">单删/拉黑客户</Checkbox>
                    </Space>
                  </Checkbox.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="客户添加时间"
                  name="addedAtRange"
                  rules={[{ required: true, message: '请选择添加时间范围' }]}
                >
                  <RangePicker showTime style={{ width: '100%' }} />
                </Form.Item>
              </Col>
            </Row>
          </>
        ) : (
          <Form.Item
            label="导入文件"
            name="uploadFile"
            rules={[{ required: true, message: '请上传文件' }]}
            extra="支持 .xlsx, .csv 格式，包含 userid 和 onecode 列"
            valuePropName="fileList"
            getValueFromEvent={(e: any) => {
              if (Array.isArray(e)) {
                return e;
              }
              return e && e.fileList;
            }}
          >
            <Upload.Dragger
              name="file"
              action="https://run.mocky.io/v3/435ba68c-f2a8-44c2-8e13-638355555c23"
              accept=".csv,.xlsx"
              maxCount={1}
            >
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
              <p className="ant-upload-hint">
                仅支持单文件上传，严禁上传涉密数据或其他违禁文件
              </p>
            </Upload.Dragger>
          </Form.Item>
        )}

        <Row gutter={12}>
          <Col span={12}>
            <Form.Item label="执行方式" name="executionType" rules={[{ required: true }]}>
              <Radio.Group onChange={(e) => setExecType(e.target.value)}>
                <Radio value="scheduled">定时执行</Radio>
                <Radio value="immediate">立即执行</Radio>
                <Radio value="manual">手动执行</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={12}>
            {execType === 'scheduled' ? (
              <Form.Item
                label="执行时间"
                name="executionTime"
                rules={[{ required: true, message: '请选择执行时间' }]}
              >
                <DatePicker showTime style={{ width: '100%' }} />
              </Form.Item>
            ) : null}
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

const Component = forwardRef<AxureHandle, AxureProps>(function AutoDeleteTasks(innerProps, ref) {
  const dataSource = innerProps && innerProps.data ? innerProps.data : {};
  const onEventHandler = typeof innerProps.onEvent === 'function' ? innerProps.onEvent : () => undefined;

  const [view, setView] = useState<'list' | 'detail'>('list');
  const [selectedTask, setSelectedTask] = useState<TaskItem | null>(null);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [tasks, setTasks] = useState<TaskItem[]>(() =>
    Array.isArray(dataSource.tasks) && dataSource.tasks.length > 0 ? dataSource.tasks : DEFAULT_TASKS
  );

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const handleCreate = (values: any) => {
    const isAuto = values.onecodeMode === 'auto';

    const selectedStaff = isAuto
      ? STAFF_OPTIONS.filter((item) => (values.staffUserIds || []).includes(item.userid))
      : [];

    const rangeStart =
      isAuto && values.addedAtRange?.[0]
        ? dayjs(values.addedAtRange[0]).format('YYYY-MM-DD HH:mm:ss')
        : dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss');
    const rangeEnd =
      isAuto && values.addedAtRange?.[1]
        ? dayjs(values.addedAtRange[1]).format('YYYY-MM-DD HH:mm:ss')
        : dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss');

    const includeEnterprise = isAuto ? (values.deleteCategories || []).includes('enterprise') : false;
    const includeSingleOrBlocked = isAuto ? (values.deleteCategories || []).includes('single_or_blocked') : false;

    let onecodeCount = 0;
    if (isAuto) {
      const baseCount = selectedStaff.length * 240;
      onecodeCount = Math.max(baseCount + (includeEnterprise ? 120 : 0) + (includeSingleOrBlocked ? 80 : 0), 0);
    } else {
      // 模拟解析文件后的行数
      const file = values.uploadFile?.[0];
      onecodeCount = file ? Math.floor(file.size / 20) : 0; // 简单模拟：假设每行 20 字节
    }

    const newTask: TaskItem = {
      id: `${Date.now()}`,
      name: values.name,
      staffList: selectedStaff,
      deleteScope: {
        includeEnterprise,
        includeSingleOrBlocked,
        addedAtStart: rangeStart,
        addedAtEnd: rangeEnd
      },
      onecodeMode: values.onecodeMode,
      onecodeCount,
      executionType: values.executionType,
      executionTime: values.executionTime ? dayjs(values.executionTime).format('YYYY-MM-DD HH:mm:ss') : undefined,
      webhook: 'https://hooks.example.com/wecom/task-delete',
      creator: '当前用户',
      createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      status: values.executionType === 'immediate' ? 'running' : 'draft',
      rpaMode: 'mouse_keyboard',
      stats: {
        total: onecodeCount,
        pending: onecodeCount,
        running: 0,
        success: 0,
        failed: 0
      }
    };

    setTasks([newTask, ...tasks]);
    setIsCreateModalOpen(false);
    onEventHandler('on_create', newTask);
    message.success(
      values.onecodeMode === 'auto' ? '任务已创建，系统正在自动查询 onecode' : '任务已创建，等待手动 onecode 数据校验'
    );
  };

  const handleDelete = (id: string) => {
    setTasks(tasks.filter((item) => item.id !== id));
    onEventHandler('on_delete', id);
    message.success('任务已删除');
  };

  const handlePause = (task: TaskItem) => {
    Modal.confirm({
      title: '确认暂停任务',
      content: `确定要暂停任务 "${task.name}" 吗？暂停后任务将停止执行。`,
      onOk: () => {
        setTasks((prev) =>
          prev.map((t) => (t.id === task.id ? { ...t, status: 'paused' } : t))
        );
        message.success('任务已暂停');
      }
    });
  };

  const handleResume = (task: TaskItem) => {
    Modal.confirm({
      title: '确认启动任务',
      content: `确定要启动任务 "${task.name}" 吗？启动后任务将继续执行。`,
      onOk: () => {
        setTasks((prev) =>
          prev.map((t) => (t.id === task.id ? { ...t, status: 'running' } : t))
        );
        message.success('任务已启动');
      }
    });
  };

  const handleBatchPause = () => {
    if (selectedRowKeys.length === 0) return;
    Modal.confirm({
      title: '批量暂停任务',
      content: `确定要暂停选中的 ${selectedRowKeys.length} 个任务吗？`,
      onOk: () => {
        setTasks((prev) =>
          prev.map((t) =>
            selectedRowKeys.includes(t.id) && (t.status === 'running' || t.status === 'draft')
              ? { ...t, status: 'paused' }
              : t
          )
        );
        setSelectedRowKeys([]);
        message.success('批量暂停成功');
      }
    });
  };

  const handleBatchResume = () => {
    if (selectedRowKeys.length === 0) return;
    Modal.confirm({
      title: '批量启动任务',
      content: `确定要启动选中的 ${selectedRowKeys.length} 个任务吗？`,
      onOk: () => {
        setTasks((prev) =>
          prev.map((t) =>
            selectedRowKeys.includes(t.id) && (t.status === 'paused' || t.status === 'failed')
              ? { ...t, status: 'running' }
              : t
          )
        );
        setSelectedRowKeys([]);
        message.success('批量启动成功');
      }
    });
  };

  const handleViewDetail = (record: TaskItem) => {
    setSelectedTask(record);
    setView('detail');
    onEventHandler('on_detail', record.id);
  };

  const handleWebhookTest = (webhook: string) => {
    onEventHandler('on_webhook_test', webhook);
    message.success('webhook 测试消息已发送');
  };

  useImperativeHandle(ref, () => ({
    fireAction: (name: string, params?: string) => {
      if (name === 'set_view' && (params === 'list' || params === 'detail')) {
        setView(params);
      }
    },
    eventList: EVENT_LIST,
    actionList: ACTION_LIST
  }));

  const columns: ColumnsType<TaskItem> = [
    { title: '任务ID', dataIndex: 'id', key: 'id', width: 150 },
    { title: '任务名称', dataIndex: 'name', key: 'name', width: 180 },
    {
      title: '企业账号手机号',
      key: 'enterprisePhone',
      width: 220,
      render: (_, record) => record.staffList.map((item) => item.phone).join('、')
    },
    {
      title: '删除范围',
      key: 'deleteScope',
      ellipsis: true,
      width: 260,
      render: (_, record) => formatDeleteScope(record.deleteScope)
    },
    {
      title: 'onecode获取',
      key: 'onecodeMode',
      width: 140,
      render: (_, record) => (
        <Tag color={record.onecodeMode === 'auto' ? 'blue' : 'gold'}>
          {record.onecodeMode === 'auto' ? '自动查询' : '手动上传'}
        </Tag>
      )
    },
    { title: '预计删客数量', dataIndex: 'onecodeCount', key: 'onecodeCount', width: 140 },
    {
      title: '任务状态',
      dataIndex: 'status',
      key: 'status',
      width: 110,
      render: (status) => <Badge status={statusBadgeMap[status]} text={statusTextMap[status]} />
    },
    { title: '创建人', dataIndex: 'creator', key: 'creator', width: 100 },
    { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', width: 170 },
    {
      title: '操作',
      key: 'action',
      width: 180,
      fixed: 'right',
      render: (_, record) => (
        <Space size="small">
          <a onClick={() => handleViewDetail(record)}>详情</a>
          {(record.status === 'running' || record.status === 'draft') && (
            <a onClick={() => handlePause(record)}>暂停</a>
          )}
          {(record.status === 'paused' || record.status === 'failed') && (
            <a onClick={() => handleResume(record)}>启动</a>
          )}
          <Popconfirm title="确定要删除该任务吗？" onConfirm={() => handleDelete(record.id)}>
            <a style={{ color: '#ff4d4f' }}>删除</a>
          </Popconfirm>
        </Space>
      )
    }
  ];

  const detailColumns: ColumnsType<ExecutionRecord> = [
    { title: '客户昵称', dataIndex: 'customerName', key: 'customerName', width: 160 },
    { title: '客户onecode', dataIndex: 'onecode', key: 'onecode', width: 120 },
    { title: '执行动作', dataIndex: 'actionType', key: 'actionType', width: 100 },
    {
      title: '执行状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: ExecutionRecord['status']) => {
        const colorMap: Record<ExecutionRecord['status'], string> = {
          未开始: 'default',
          执行中: 'processing',
          成功: 'success',
          失败: 'error'
        };
        return <Badge status={colorMap[status] as any} text={status} />;
      }
    },
    { title: '执行时间', dataIndex: 'execTime', key: 'execTime', width: 160 },
    { title: '异常原因', dataIndex: 'errorReason', key: 'errorReason' }
  ];

  const taskSummary = useMemo(() => {
    if (!selectedTask) return null;
    return `成功 ${selectedTask.stats.success} / 失败 ${selectedTask.stats.failed} / 执行中 ${selectedTask.stats.running} / 待执行 ${selectedTask.stats.pending}`;
  }, [selectedTask]);

  return (
    <Layout className="auto-delete-page" style={{ height: '100%' }} hasSider>
      <SideMenu
        title="营销中心"
        width={280}
        defaultSelectedKey="marketing_auto_delete"
        items={MENU_ITEMS}
        onMenuSelect={(key) => {
          const target = resolveMenuTarget(key);
          if (target) window.location.href = target;
        }}
      />
      <Layout style={{ overflow: 'hidden' }}>
        <Header className="auto-delete-header">
          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
            {view === 'detail' ? (
              <Button
                type="text"
                icon={<ArrowLeftOutlined />}
                onClick={() => {
                  setView('list');
                  setSelectedTask(null);
                }}
                style={{ marginRight: 16 }}
              />
            ) : null}
            <div>
              <Title level={4} style={{ margin: 0 }}>
                {view === 'list' ? '自动删客任务' : '任务详情'}
              </Title>
              <Text type="secondary">
                {view === 'list'
                  ? '托管管理 · 选择员工后系统自动查询 onecode 并执行删客'
                  : `任务ID: ${selectedTask?.id}`}
              </Text>
            </div>
          </div>
        </Header>

        <Content className="auto-delete-content" style={{ padding: 24, overflow: 'auto' }}>
          {view === 'list' ? (
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              <Card bordered={false}>
                <Form layout="inline" style={{ rowGap: 16 }}>
                  <Form.Item label="任务名称">
                    <Input placeholder="请输入" />
                  </Form.Item>
                  <Form.Item label="托管员工">
                    <Input placeholder="姓名 / userid" />
                  </Form.Item>
                  <Form.Item label="任务状态">
                    <Select placeholder="全部" style={{ width: 130 }}>
                      <Select.Option value="all">全部</Select.Option>
                      <Select.Option value="running">执行中</Select.Option>
                      <Select.Option value="finished">已完成</Select.Option>
                      <Select.Option value="failed">异常</Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item label="创建时间">
                    <RangePicker showTime />
                  </Form.Item>
                  <Form.Item>
                    <Button type="primary" icon={<SearchOutlined />}>查询</Button>
                    <Button style={{ marginLeft: 8 }}>重置</Button>
                  </Form.Item>
                </Form>
              </Card>

              <Card bordered={false} bodyStyle={{ padding: 0 }}>
                <div style={{ padding: '16px 24px', borderBottom: '1px solid #f0f0f0', display: 'flex', justifyContent: 'space-between' }}>
                  <Space>
                    <Button type="primary" icon={<PlusOutlined />} onClick={() => setIsCreateModalOpen(true)}>
                      新建任务
                    </Button>
                    <Button icon={<ExportOutlined />} onClick={() => onEventHandler('on_export')}>
                      导出任务
                    </Button>
                    {selectedRowKeys.length > 0 && (
                      <>
                        <Button icon={<PauseCircleOutlined />} onClick={handleBatchPause}>
                          批量暂停
                        </Button>
                        <Button icon={<PlayCircleOutlined />} onClick={handleBatchResume}>
                          批量启动
                        </Button>
                      </>
                    )}
                  </Space>
                  <Text type="secondary">说明：新任务默认走自动 onecode 查询，无需人工导出导入</Text>
                </div>
                <Table
                  rowSelection={rowSelection}
                  rowKey="id"
                  columns={columns}
                  dataSource={tasks}
                  scroll={{ x: 1600 }}
                  pagination={{ pageSize: 10 }}
                />
              </Card>
            </Space>
          ) : (
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              <Card bordered={false}>
                {selectedTask ? (
                  <Descriptions title="任务详情" bordered size="small" column={3}>
                    <Descriptions.Item label="任务名称">{selectedTask.name}</Descriptions.Item>
                    <Descriptions.Item label="任务状态">
                      <Badge status={statusBadgeMap[selectedTask.status]} text={statusTextMap[selectedTask.status]} />
                    </Descriptions.Item>
                    <Descriptions.Item label="执行进度">
                      <Space direction="vertical" size={0}>
                        <span>{taskSummary}</span>
                        <Text type="secondary" style={{ fontSize: 12 }}>如执行异常，自动上报到 webhook 群聊</Text>
                      </Space>
                    </Descriptions.Item>
                    <Descriptions.Item label="托管员工(userid)" span={3}>
                      {selectedTask.staffList.map((item) => `${item.name}(${item.userid})`).join('、')}
                    </Descriptions.Item>
                    <Descriptions.Item label="删除范围" span={3}>
                      {formatDeleteScope(selectedTask.deleteScope)}
                    </Descriptions.Item>
                    <Descriptions.Item label="onecode 获取方式">
                      {selectedTask.onecodeMode === 'auto' ? '自动查询' : '手动上传'}
                    </Descriptions.Item>
                    <Descriptions.Item label="系统查询 onecode 数量">{selectedTask.onecodeCount}</Descriptions.Item>
                    <Descriptions.Item label="执行方式">{getExecutionTypeLabel(selectedTask.executionType)}</Descriptions.Item>
                    <Descriptions.Item label="执行时间">{selectedTask.executionTime || '-'}</Descriptions.Item>
                    <Descriptions.Item label="创建人">{selectedTask.creator}</Descriptions.Item>
                    <Descriptions.Item label="创建时间">{selectedTask.createdAt}</Descriptions.Item>
                  </Descriptions>
                ) : null}
              </Card>

              <Card bordered={false}>
                <Form layout="inline" style={{ rowGap: 16 }}>
                  <Form.Item label="客户昵称">
                    <Input placeholder="请输入" />
                  </Form.Item>
                  <Form.Item label="客户onecode">
                    <Input placeholder="请输入" />
                  </Form.Item>
                  <Form.Item label="执行状态">
                    <Select placeholder="全部" style={{ width: 120 }}>
                      <Select.Option value="all">全部</Select.Option>
                      <Select.Option value="running">执行中</Select.Option>
                      <Select.Option value="success">成功</Select.Option>
                      <Select.Option value="failed">失败</Select.Option>
                    </Select>
                  </Form.Item>
                  <Form.Item>
                    <Button type="primary" icon={<SearchOutlined />}>查询</Button>
                    <Button style={{ marginLeft: 8 }}>重置</Button>
                  </Form.Item>
                </Form>
              </Card>

              <Card bordered={false} bodyStyle={{ padding: 0 }}>
                <div style={{ padding: '16px 24px', borderBottom: '1px solid #f0f0f0' }}>
                  <Button
                    type="primary"
                    icon={<ExportOutlined />}
                    onClick={() => onEventHandler('on_detail_export', selectedTask?.id)}
                  >
                    导出执行明细
                  </Button>
                </div>
                <Table rowKey="id" columns={detailColumns} dataSource={DEFAULT_RECORDS} pagination={{ pageSize: 10 }} />
              </Card>
            </Space>
          )}
        </Content>
      </Layout>

      <CreateTaskModal
        visible={isCreateModalOpen}
        onCancel={() => setIsCreateModalOpen(false)}
        onCreate={handleCreate}
        onWebhookTest={handleWebhookTest}
      />
    </Layout>
  );
});

export default Component;