import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  DeleteOutlined,
  PlusOutlined,
  ReloadOutlined,
  SaveOutlined,
  SearchOutlined,
} from '@ant-design/icons'
import {
  Alert,
  App,
  Badge,
  Button,
  Card,
  Col,
  Collapse,
  Dropdown,
  Empty,
  Form,
  Input,
  InputNumber,
  Row,
  Select,
  Space,
  Switch,
  Tag,
  Typography,
  type MenuProps,
} from 'antd'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { useCallback, useEffect, useMemo, useState } from 'react'

import PercentTable from '@/components/common/PercentTable'
import ImageUpload from '@/components/files/ImageUpload'
import {
  archiveAdminOrderServiceProfile,
  fetchAdminOrderServiceAutoPublishJobs,
  fetchAdminOrderServiceProfiles,
  publishAdminOrderServiceProfile,
  retryAdminOrderServiceAutoPublishJob,
  saveAdminOrderServiceProfile,
  type AdminOrderServiceAutoPublishJob,
  type AdminOrderServiceProfile,
  type OrderServiceField,
  type OrderServiceMaterialConfirmation,
  type OrderServiceStatusSteps,
} from '@/services/admin/worker-platform'
import { uploadFile } from '@/services/files'
import type { UploadedFile } from '@/types/worker-platform'
import { formatAdminDateTime } from '@/utils/admin-time'

const { Text, Title } = Typography

type ScreenshotForm = {
  enabled: boolean
  required: boolean
  minCount: number
  maxCount: number
  label: string
  helpText: string
}

type AutoPublishForm = {
  enabled: boolean
  requireVoucherConsume: boolean
  retryMax: number
}

type OrderServiceFormValues = {
  name: string
  title: string
  description: string
  submitText: string
  successText: string
  postSubmitText: string
  screenshots: ScreenshotForm
  autoPublish: AutoPublishForm
  materialConfirmation: OrderServiceMaterialConfirmation
  statusSteps: OrderServiceStatusSteps
}

const DEFAULT_SCREENSHOTS: ScreenshotForm = {
  enabled: true,
  required: true,
  minCount: 1,
  maxCount: 5,
  label: '买家主页截图',
  helpText: '',
}

const DEFAULT_AUTO_PUBLISH: AutoPublishForm = {
  enabled: false,
  requireVoucherConsume: true,
  retryMax: 3,
}

const DEFAULT_MATERIAL_CONFIRMATION: OrderServiceMaterialConfirmation = {
  enabled: true,
  title: '提交资料确认',
  content:
    '请确认资料填写准确无误。资料提交后不能修改，因个人资料填写错误导致的赠送错误，店铺概不负责！',
  confirmText: '确认提交',
  cancelText: '返回检查',
}

const DEFAULT_POST_SUBMIT_TEXT = '资料提交后如需修改，请联系客服。'

const DEFAULT_STATUS_STEPS: OrderServiceStatusSteps = {
  submitted: { title: '提交资料', description: '' },
  scheduled: { title: '客服安排', description: '' },
  processing: { title: '订单处理', description: '' },
  completed: { title: '交付完成', description: '' },
}

const STATUS_STEP_OPTIONS: Array<{
  key: keyof OrderServiceStatusSteps
  label: string
}> = [
  { key: 'submitted', label: '第 1 步 · 提交资料' },
  { key: 'scheduled', label: '第 2 步 · 客服安排' },
  { key: 'processing', label: '第 3 步 · 订单处理' },
  { key: 'completed', label: '第 4 步 · 交付完成' },
]

type FieldPreset = Omit<OrderServiceField, 'sortOrder'>

const FIELD_PRESETS: Record<string, FieldPreset> = {
  gameId: {
    key: 'gameId',
    label: '游戏 ID',
    type: 'text',
    validation: 'digits',
    required: true,
    placeholder: '请输入纯数字游戏 ID',
    helpText: '仅支持数字，不会丢失前导零或超长 ID。',
    options: [],
  },
  gameNickname: {
    key: 'gameNickname',
    label: '游戏昵称',
    type: 'text',
    validation: 'none',
    required: true,
    placeholder: '请输入游戏昵称',
    helpText: '用于交付时核对角色，允许中文、字母和符号。',
    options: [],
  },
  serverZone: {
    key: 'serverZone',
    label: '区服',
    type: 'text',
    validation: 'none',
    required: true,
    placeholder: '例如：微信区 / QQ区 / 具体区服',
    helpText: '区服不固定的游戏可改为下拉，并填写对应选项。',
    options: [],
  },
  system: {
    key: 'system',
    label: '系统',
    type: 'select',
    validation: 'none',
    required: false,
    placeholder: '',
    helpText: '按需收集客户使用的系统。',
    options: ['安卓', '苹果'],
  },
  gameAccount: {
    key: 'gameAccount',
    label: '游戏登录账号',
    type: 'text',
    validation: 'none',
    required: false,
    placeholder: '请输入游戏登录账号',
    helpText: '只有确实需要登录账号时添加，不要收集密码。',
    options: [],
  },
  roleLevel: {
    key: 'roleLevel',
    label: '角色等级',
    type: 'number',
    validation: 'none',
    required: false,
    placeholder: '请输入角色等级',
    helpText: '选填，用于交付前核对。',
    options: [],
  },
  contactPhone: {
    key: 'contactPhone',
    label: '联系电话',
    type: 'text',
    validation: 'none',
    required: false,
    placeholder: '请输入联系电话',
    helpText: '仅在业务需要联系客户时添加。',
    options: [],
  },
  orderNote: {
    key: 'orderNote',
    label: '订单备注',
    type: 'textarea',
    validation: 'none',
    required: false,
    placeholder: '请输入补充说明',
    helpText: '用于收集无法归入标准字段的补充信息。',
    options: [],
  },
}

const GAME_BASIC_PRESET_KEYS = ['gameId', 'gameNickname', 'serverZone']
const STANDARD_FIELD_KEYS = new Set(Object.keys(FIELD_PRESETS))
const FIELD_PRESET_MENU_ITEMS: MenuProps['items'] = [
  { key: 'game-basic', label: '游戏基础三件套（ID / 昵称 / 区服）' },
  { type: 'divider' },
  { key: 'gameId', label: '游戏 ID（默认纯数字）' },
  { key: 'gameNickname', label: '游戏昵称' },
  { key: 'serverZone', label: '区服' },
  { key: 'system', label: '系统（可选）' },
  { key: 'gameAccount', label: '游戏登录账号（可选）' },
  { key: 'roleLevel', label: '角色等级（可选）' },
  { key: 'contactPhone', label: '联系电话（可选）' },
  { key: 'orderNote', label: '订单备注（可选）' },
]

function buildPresetFields(keys: string[]) {
  return keys.flatMap((key) => {
    const preset = FIELD_PRESETS[key]
    return preset ? [{ ...preset, options: [...(preset.options || [])] }] : []
  })
}

export default function OrderServicePanel() {
  const { message } = App.useApp()
  const queryClient = useQueryClient()
  const [form] = Form.useForm<OrderServiceFormValues>()
  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null)
  const [categoryKeyword, setCategoryKeyword] = useState('')
  const [fields, setFields] = useState<OrderServiceField[]>([])
  const [guideImage, setGuideImage] = useState<UploadedFile | Record<string, unknown> | null>(null)
  const [saving, setSaving] = useState(false)
  const [publishing, setPublishing] = useState(false)
  const [retryingJobId, setRetryingJobId] = useState(0)

  const profilesQuery = useQuery({
    queryKey: ['admin-order-service-profiles'],
    queryFn: fetchAdminOrderServiceProfiles,
  })
  const jobsQuery = useQuery({
    queryKey: ['admin-order-service-auto-publish-jobs', 'failed'],
    queryFn: () => fetchAdminOrderServiceAutoPublishJobs('failed'),
  })

  const categories = profilesQuery.data?.data.categories || []
  const profiles = profilesQuery.data?.data.profiles || []
  const failedJobs = jobsQuery.data?.data.items || []
  const profileByCategoryId = useMemo(
    () => new Map(profiles.map((item) => [item.categoryId, item])),
    [profiles],
  )
  const normalizedKeyword = categoryKeyword.trim().toLowerCase()
  const filteredCategories = useMemo(
    () =>
      categories.filter((item) => {
        if (!normalizedKeyword) return true
        return (
          item.name.toLowerCase().includes(normalizedKeyword) ||
          item.categoryKey.toLowerCase().includes(normalizedKeyword)
        )
      }),
    [categories, normalizedKeyword],
  )
  const configuredCount = categories.filter((item) =>
    profileByCategoryId.has(item.categoryId),
  ).length
  const selectedCategory = categories.find((item) => item.categoryId === selectedCategoryId) || null
  const profile = (selectedCategoryId ? profileByCategoryId.get(selectedCategoryId) : null) || null
  const guideFiles = useMemo(() => (guideImage ? [guideImage as UploadedFile] : []), [guideImage])
  const handleGuideImageChange = useCallback((files: UploadedFile[]) => {
    setGuideImage(files[0] || null)
  }, [])
  const uploadGuideImage = useCallback(
    (file: File, scene: string) => uploadFile(file, scene, 'admin'),
    [],
  )
  const materialConfirmationPreview =
    Form.useWatch('materialConfirmation', form) || DEFAULT_MATERIAL_CONFIRMATION

  useEffect(() => {
    if (selectedCategoryId !== null || categories.length === 0) return
    setSelectedCategoryId(categories[0]?.categoryId || null)
  }, [categories, selectedCategoryId])

  useEffect(() => {
    applyProfile(profile)
  }, [profile, selectedCategoryId])

  function applyProfile(nextProfile: AdminOrderServiceProfile | null) {
    form.setFieldsValue({
      name: nextProfile?.name || selectedCategory?.name || '',
      title: nextProfile?.title || '',
      description: nextProfile?.description || '',
      submitText: nextProfile?.submitText || '提交资料',
      successText: nextProfile?.successText || '资料已提交，请等待处理',
      postSubmitText: nextProfile?.postSubmitText || DEFAULT_POST_SUBMIT_TEXT,
      screenshots: nextProfile?.screenshots || DEFAULT_SCREENSHOTS,
      autoPublish: nextProfile?.autoPublish || DEFAULT_AUTO_PUBLISH,
      materialConfirmation: nextProfile?.materialConfirmation || DEFAULT_MATERIAL_CONFIRMATION,
      statusSteps: nextProfile?.statusSteps || DEFAULT_STATUS_STEPS,
    })
    setFields(
      normalizeFieldOrder(
        nextProfile ? nextProfile.fields : buildPresetFields(GAME_BASIC_PRESET_KEYS),
      ),
    )
    setGuideImage(nextProfile?.guideImage || null)
  }

  async function refresh() {
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ['admin-order-service-profiles'] }),
      queryClient.invalidateQueries({ queryKey: ['admin-order-service-auto-publish-jobs'] }),
      queryClient.invalidateQueries({ queryKey: ['admin-categories'] }),
    ])
  }

  function addFieldPreset(presetId: string) {
    const presetKeys = presetId === 'game-basic' ? GAME_BASIC_PRESET_KEYS : [presetId]
    const existingKeys = new Set(fields.map((field) => field.key))
    const missingKeys = presetKeys.filter((key) => FIELD_PRESETS[key] && !existingKeys.has(key))
    if (missingKeys.length === 0) {
      message.info('所选字段已存在')
      return
    }
    setFields((current) => normalizeFieldOrder([...current, ...buildPresetFields(missingKeys)]))
  }

  function addCustomField() {
    setFields((current) =>
      normalizeFieldOrder([
        ...current,
        {
          key: '',
          label: '',
          type: 'text',
          validation: 'none',
          required: false,
          placeholder: '',
          helpText: '',
          options: [],
          sortOrder: (current.length + 1) * 10,
        },
      ]),
    )
  }

  function updateField(index: number, patch: Partial<OrderServiceField>) {
    setFields((current) =>
      current.map((row, rowIndex) => {
        if (rowIndex !== index) return row
        const next = { ...row, ...patch }
        if (patch.key !== undefined) {
          next.validation = patch.key === 'gameId' ? 'digits' : next.validation
        }
        return next
      }),
    )
  }

  function moveField(index: number, direction: -1 | 1) {
    const next = index + direction
    if (next < 0 || next >= fields.length) return
    setFields((current) => {
      const rows = [...current]
      const [row] = rows.splice(index, 1)
      if (!row) return current
      rows.splice(next, 0, row)
      return normalizeFieldOrder(rows)
    })
  }

  function removeField(index: number) {
    setFields((current) => normalizeFieldOrder(current.filter((_, rowIndex) => rowIndex !== index)))
  }

  async function handleSave(values: OrderServiceFormValues) {
    if (!selectedCategoryId) return
    const normalizedFields = normalizeFieldOrder(fields)
    const duplicateKeys = findDuplicateKeys(normalizedFields)
    if (duplicateKeys.length > 0) {
      message.error(`字段 Key 不能重复：${duplicateKeys.join('、')}`)
      return
    }
    const invalidKey = normalizedFields.find(
      (field) => !/^[a-zA-Z][a-zA-Z0-9_]{0,59}$/.test(field.key),
    )
    if (invalidKey) {
      message.error('字段 Key 必须以英文字母开头，只能包含字母、数字和下划线')
      return
    }
    const emptyLabel = normalizedFields.find((field) => !String(field.label || '').trim())
    if (emptyLabel) {
      message.error('请填写所有字段的显示名称')
      return
    }
    setSaving(true)
    try {
      await saveAdminOrderServiceProfile({
        categoryId: selectedCategoryId,
        name: values.name || selectedCategory?.name || '订单服务配置',
        title: values.title || '',
        description: values.description || '',
        guideImage: guideImage || {},
        fields: normalizedFields,
        screenshots: values.screenshots,
        autoPublish: values.autoPublish,
        materialConfirmation: values.materialConfirmation,
        statusSteps: values.statusSteps,
        submitText: values.submitText,
        successText: values.successText,
        postSubmitText: values.postSubmitText,
      })
      message.success('草稿已保存；点击“发布新版本”后才会影响新工单')
      await refresh()
    } catch (error) {
      message.error(error instanceof Error ? error.message : '保存失败')
    } finally {
      setSaving(false)
    }
  }

  async function handlePublish() {
    if (!profile) {
      message.warning('请先保存配置草稿')
      return
    }
    setPublishing(true)
    try {
      const response = await publishAdminOrderServiceProfile(profile.id)
      const backfilled = Number(response.data.backfilledPendingOrders || 0)
      message.success(
        backfilled > 0
          ? `已发布 v${response.data.versionNo}，同步 ${backfilled} 个未提交工单`
          : `已发布 v${response.data.versionNo}`,
      )
      await refresh()
    } catch (error) {
      message.error(error instanceof Error ? error.message : '发布失败')
    } finally {
      setPublishing(false)
    }
  }

  async function handleArchive() {
    if (!profile) return
    setPublishing(true)
    try {
      await archiveAdminOrderServiceProfile(profile.id)
      message.success('配置已归档；已有工单快照不受影响')
      await refresh()
    } catch (error) {
      message.error(error instanceof Error ? error.message : '归档失败')
    } finally {
      setPublishing(false)
    }
  }

  async function handleRetryJob(job: AdminOrderServiceAutoPublishJob) {
    setRetryingJobId(job.id)
    try {
      await retryAdminOrderServiceAutoPublishJob(job.id)
      message.success('自动发布任务已重新排队')
      await refresh()
    } catch (error) {
      message.error(error instanceof Error ? error.message : '重试失败')
    } finally {
      setRetryingJobId(0)
    }
  }

  const jobColumns = useMemo(
    () => [
      {
        key: 'order',
        title: '订单',
        render: (_: unknown, row: AdminOrderServiceAutoPublishJob) => (
          <Space direction="vertical" size={0}>
            <Text strong>{row.productName || '-'}</Text>
            <Text type="secondary">{row.platformOrderId || '-'}</Text>
          </Space>
        ),
      },
      {
        key: 'attempts',
        title: '重试',
        width: 90,
        render: (_: unknown, row: AdminOrderServiceAutoPublishJob) =>
          `${row.attemptCount}/${row.maxAttempts}`,
      },
      {
        key: 'error',
        title: '失败原因',
        render: (_: unknown, row: AdminOrderServiceAutoPublishJob) => (
          <Text type="danger">{row.lastError || '未知错误'}</Text>
        ),
      },
      {
        key: 'updatedAt',
        title: '更新时间',
        width: 180,
        render: (_: unknown, row: AdminOrderServiceAutoPublishJob) =>
          row.updatedAt ? formatAdminDateTime(row.updatedAt) : '-',
      },
      {
        key: 'actions',
        title: '操作',
        width: 100,
        render: (_: unknown, row: AdminOrderServiceAutoPublishJob) => (
          <Button
            size="small"
            loading={retryingJobId === row.id}
            onClick={() => void handleRetryJob(row)}
          >
            重试
          </Button>
        ),
      },
    ],
    [retryingJobId],
  )

  return (
    <div className="page-stack order-service-page">
      <Card
        className="order-service-shell"
        title={
          <Space size={8}>
            <span>订单服务配置</span>
            <Tag color="blue">{configuredCount} 个分类已配置</Tag>
          </Space>
        }
        extra={
          <Button
            icon={<ReloadOutlined />}
            loading={profilesQuery.isFetching || jobsQuery.isFetching}
            onClick={() => void refresh()}
          >
            刷新
          </Button>
        }
      >
        <div className="order-service-layout">
          <aside className="order-service-sidebar">
            <div className="order-service-sidebar-head">
              <Space size={6}>
                <Text strong>接单分类</Text>
                <Text type="secondary">
                  {filteredCategories.length}/{categories.length}
                </Text>
              </Space>
              <Input
                allowClear
                prefix={<SearchOutlined />}
                placeholder="搜索分类"
                size="small"
                value={categoryKeyword}
                onChange={(event) => setCategoryKeyword(event.target.value)}
              />
            </div>
            <div className="order-service-category-list">
              {filteredCategories.map((category) => {
                const rowProfile = profileByCategoryId.get(category.categoryId)
                const status = resolveProfileStatus(rowProfile)
                return (
                  <button
                    key={category.categoryId}
                    type="button"
                    className={`order-service-category-item${
                      category.categoryId === selectedCategoryId ? ' is-active' : ''
                    }`}
                    onClick={() => setSelectedCategoryId(category.categoryId)}
                  >
                    <span className="order-service-category-main">
                      <span className="order-service-category-name">{category.name}</span>
                      <span className={`order-service-status-pill is-${status.tone}`}>
                        {status.label}
                      </span>
                    </span>
                    <span className="order-service-category-meta">
                      {category.categoryKey}
                      {category.status === 'active' ? '' : ' · 已停用'}
                    </span>
                  </button>
                )
              })}
              {filteredCategories.length === 0 ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有匹配分类" />
              ) : null}
            </div>
          </aside>

          <section className="order-service-editor">
            {selectedCategory ? (
              <>
                <div className="order-service-editor-head">
                  <div>
                    <Space size={8} wrap>
                      <Title level={5}>{selectedCategory.name}</Title>
                      <Tag color={selectedCategory.status === 'active' ? 'green' : 'default'}>
                        {selectedCategory.status === 'active' ? '启用' : '停用'}
                      </Tag>
                      <Tag color={profile?.status === 'published' ? 'green' : 'orange'}>
                        {profile?.status === 'published'
                          ? `线上 v${profile.currentVersionNo || 1}`
                          : profile?.currentVersionNo
                            ? `线上 v${profile.currentVersionNo} · 有草稿`
                            : '尚未发布'}
                      </Tag>
                    </Space>
                    <Text type="secondary">分类标识：{selectedCategory.categoryKey}</Text>
                  </div>
                  <Space size={8} wrap>
                    <Button loading={publishing} onClick={() => void handlePublish()}>
                      发布新版本
                    </Button>
                    {profile ? (
                      <Button danger loading={publishing} onClick={() => void handleArchive()}>
                        归档
                      </Button>
                    ) : null}
                  </Space>
                </div>

                <Alert
                  className="order-service-tip"
                  type="info"
                  showIcon
                  message="一个分类复用一套资料配置，接单模板通过“所属分类”自动关联。"
                />

                <Form form={form} layout="vertical" onFinish={handleSave}>
                  <section className="order-service-section">
                    <div className="order-service-section-head">
                      <div>
                        <Text strong>基础信息</Text>
                        <Text type="secondary">客户打开 `/o` 后看到的标题与提示。</Text>
                      </div>
                    </div>
                    <div className="order-service-basic-grid">
                      <div>
                        <Row gutter={[12, 0]}>
                          <Col xs={24} md={12}>
                            <Form.Item label="配置名称" name="name" rules={[{ required: true }]}>
                              <Input placeholder="后台识别名称" />
                            </Form.Item>
                          </Col>
                          <Col xs={24} md={12}>
                            <Form.Item label="客户页标题" name="title">
                              <Input placeholder="例如：蛋仔派对资料填写" />
                            </Form.Item>
                          </Col>
                          <Col span={24}>
                            <Form.Item label="页面说明" name="description">
                              <Input.TextArea
                                autoSize={{ minRows: 1, maxRows: 3 }}
                                placeholder="显示在客户页顶部"
                              />
                            </Form.Item>
                          </Col>
                          <Col xs={24} md={12}>
                            <Form.Item label="提交按钮" name="submitText">
                              <Input />
                            </Form.Item>
                          </Col>
                          <Col xs={24} md={12}>
                            <Form.Item label="提交成功提示" name="successText">
                              <Input />
                            </Form.Item>
                          </Col>
                          <Col span={24}>
                            <Form.Item
                              label="提交后说明"
                              name="postSubmitText"
                              extra="显示在客户页底部，支持换行；适合填写资料修改、客服联系等说明。"
                            >
                              <Input.TextArea
                                autoSize={{ minRows: 2, maxRows: 5 }}
                                maxLength={500}
                                showCount
                                placeholder="资料提交后如需修改，请联系客服。"
                              />
                            </Form.Item>
                          </Col>
                        </Row>
                      </div>
                      <div className="order-service-guide">
                        <Text strong>用户引导图</Text>
                        <Text type="secondary">首版一张，展示在字段上方</Text>
                        <ImageUpload
                          scene="order-service"
                          scope="admin"
                          maxCount={1}
                          value={guideFiles}
                          onChange={handleGuideImageChange}
                          uploader={uploadGuideImage}
                        />
                      </div>
                    </div>
                  </section>

                  <section className="order-service-section">
                    <div className="order-service-section-head">
                      <div>
                        <Text strong>客户状态进度文案</Text>
                        <Text type="secondary">
                          四个节点独立展示；标题保持简短，补充说明可填写引导文案。
                        </Text>
                      </div>
                    </div>
                    <div className="order-service-status-step-grid">
                      {STATUS_STEP_OPTIONS.map((step) => (
                        <div className="order-service-status-step-card" key={step.key}>
                          <Text strong>{step.label}</Text>
                          <Form.Item
                            label="节点标题"
                            name={['statusSteps', step.key, 'title']}
                            rules={[
                              { required: true, whitespace: true, message: '请填写节点标题' },
                            ]}
                          >
                            <Input maxLength={20} />
                          </Form.Item>
                          <Form.Item
                            label="补充说明"
                            name={['statusSteps', step.key, 'description']}
                          >
                            <Input maxLength={80} placeholder="选填，显示在节点标题下方" />
                          </Form.Item>
                        </div>
                      ))}
                    </div>
                  </section>

                  <section className="order-service-section">
                    <div className="order-service-section-head">
                      <div>
                        <Text strong>提交资料确认</Text>
                        <Text type="secondary">
                          客户点击提交时弹窗确认，可自定义提示内容和按钮文字。
                        </Text>
                      </div>
                      <Space size={8}>
                        <Text type="secondary">启用确认</Text>
                        <Form.Item
                          name={['materialConfirmation', 'enabled']}
                          valuePropName="checked"
                          noStyle
                        >
                          <Switch />
                        </Form.Item>
                      </Space>
                    </div>
                    <Row gutter={[12, 0]}>
                      <Col xs={24} md={12}>
                        <Form.Item label="确认标题" name={['materialConfirmation', 'title']}>
                          <Input maxLength={40} placeholder="例如：提交资料确认" />
                        </Form.Item>
                      </Col>
                      <Col xs={12} md={6}>
                        <Form.Item label="确认按钮" name={['materialConfirmation', 'confirmText']}>
                          <Input maxLength={12} placeholder="确认提交" />
                        </Form.Item>
                      </Col>
                      <Col xs={12} md={6}>
                        <Form.Item label="取消按钮" name={['materialConfirmation', 'cancelText']}>
                          <Input maxLength={12} placeholder="返回检查" />
                        </Form.Item>
                      </Col>
                      <Col span={24}>
                        <Form.Item label="确认内容" name={['materialConfirmation', 'content']}>
                          <Input.TextArea
                            autoSize={{ minRows: 3, maxRows: 6 }}
                            maxLength={500}
                            showCount
                            placeholder="请输入客户提交资料前需要确认的内容"
                          />
                        </Form.Item>
                      </Col>
                    </Row>
                    <MaterialConfirmationPreview confirmation={materialConfirmationPreview} />
                  </section>

                  <section className="order-service-section">
                    <div className="order-service-section-head">
                      <div>
                        <Text strong>资料字段</Text>
                        <Text type="secondary">
                          优先添加常用字段；标准字段会自动支持搜索、复制和资料匹配。
                        </Text>
                      </div>
                      <Space wrap>
                        <Dropdown
                          menu={{
                            items: FIELD_PRESET_MENU_ITEMS,
                            onClick: ({ key }) => addFieldPreset(String(key)),
                          }}
                          trigger={['click']}
                        >
                          <Button icon={<PlusOutlined />} type="dashed">
                            添加常用字段
                          </Button>
                        </Dropdown>
                        <Button icon={<PlusOutlined />} onClick={addCustomField}>
                          自定义字段
                        </Button>
                      </Space>
                    </div>

                    {fields.length === 0 ? (
                      <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        description="至少添加一个资料字段后才能发布，推荐先添加游戏基础三件套"
                      />
                    ) : (
                      <div className="order-service-field-list">
                        {fields.map((field, index) => (
                          <div className="order-service-field-row" key={`${field.key}-${index}`}>
                            <div className="order-service-field-main">
                              <label>
                                <Text type="secondary">字段 Key</Text>
                                <Input
                                  addonAfter={
                                    field.validation === 'digits'
                                      ? '纯数字'
                                      : STANDARD_FIELD_KEYS.has(field.key)
                                        ? '标准'
                                        : undefined
                                  }
                                  disabled={STANDARD_FIELD_KEYS.has(field.key)}
                                  value={field.key}
                                  maxLength={60}
                                  placeholder="例如：accountName"
                                  onChange={(event) =>
                                    updateField(index, { key: event.target.value })
                                  }
                                />
                              </label>
                              <label>
                                <Text type="secondary">显示名称</Text>
                                <Input
                                  value={field.label}
                                  onChange={(event) =>
                                    updateField(index, { label: event.target.value })
                                  }
                                />
                              </label>
                              <label>
                                <Text type="secondary">类型</Text>
                                <Select
                                  style={{ width: '100%' }}
                                  value={field.type}
                                  onChange={(value) =>
                                    updateField(index, { type: value, options: [] })
                                  }
                                  options={[
                                    { value: 'text', label: '文本' },
                                    { value: 'textarea', label: '长文本' },
                                    { value: 'select', label: '下拉' },
                                    { value: 'radio', label: '单选' },
                                    { value: 'number', label: '数字' },
                                    { value: 'date', label: '日期' },
                                  ]}
                                />
                              </label>
                              <label className="order-service-field-required">
                                <Text type="secondary">必填</Text>
                                <Switch
                                  checked={field.required}
                                  onChange={(value) => updateField(index, { required: value })}
                                />
                              </label>
                              <div className="order-service-field-actions">
                                <Button
                                  disabled={index === 0}
                                  icon={<ArrowUpOutlined />}
                                  size="small"
                                  onClick={() => moveField(index, -1)}
                                />
                                <Button
                                  disabled={index === fields.length - 1}
                                  icon={<ArrowDownOutlined />}
                                  size="small"
                                  onClick={() => moveField(index, 1)}
                                />
                                <Button
                                  danger
                                  icon={<DeleteOutlined />}
                                  size="small"
                                  onClick={() => removeField(index)}
                                />
                              </div>
                            </div>
                            <div className="order-service-field-extra">
                              <Input
                                addonBefore="占位提示"
                                value={field.placeholder || ''}
                                onChange={(event) =>
                                  updateField(index, { placeholder: event.target.value })
                                }
                              />
                              <Input
                                addonBefore="填写说明"
                                value={field.helpText || ''}
                                onChange={(event) =>
                                  updateField(index, { helpText: event.target.value })
                                }
                              />
                              {!STANDARD_FIELD_KEYS.has(field.key) ? (
                                <Text type="secondary" className="order-service-field-extra-tip">
                                  自定义 Key 仅用于展示；需要搜索、复制或匹配能力请使用标准字段。
                                </Text>
                              ) : null}
                              {field.type === 'select' || field.type === 'radio' ? (
                                <Input
                                  addonBefore="选项"
                                  placeholder="选项1,选项2,选项3"
                                  value={(field.options || []).join(',')}
                                  onChange={(event) =>
                                    updateField(index, {
                                      options: event.target.value
                                        .split(/[,，]/)
                                        .map((option) => option.trim())
                                        .filter(Boolean),
                                    })
                                  }
                                />
                              ) : null}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </section>

                  <Row gutter={[16, 16]}>
                    <Col xs={24} xl={12}>
                      <section className="order-service-section order-service-section-fill">
                        <div className="order-service-section-head">
                          <div>
                            <Text strong>截图规则</Text>
                            <Text type="secondary">控制客户上传买家主页截图的限制。</Text>
                          </div>
                        </div>
                        <Row gutter={[12, 0]}>
                          <Col xs={24} md={12}>
                            <Form.Item name={['screenshots', 'label']} label="截图标题">
                              <Input />
                            </Form.Item>
                          </Col>
                          <Col xs={24} md={12}>
                            <Form.Item name={['screenshots', 'helpText']} label="截图说明">
                              <Input />
                            </Form.Item>
                          </Col>
                        </Row>
                        <div className="order-service-switch-grid">
                          <Form.Item
                            name={['screenshots', 'enabled']}
                            label="启用截图"
                            valuePropName="checked"
                          >
                            <Switch />
                          </Form.Item>
                          <Form.Item
                            name={['screenshots', 'required']}
                            label="必须上传"
                            valuePropName="checked"
                          >
                            <Switch />
                          </Form.Item>
                          <Form.Item name={['screenshots', 'minCount']} label="最少张数">
                            <InputNumber min={0} max={10} style={{ width: '100%' }} />
                          </Form.Item>
                          <Form.Item name={['screenshots', 'maxCount']} label="最多张数">
                            <InputNumber min={1} max={10} style={{ width: '100%' }} />
                          </Form.Item>
                        </div>
                      </section>
                    </Col>
                    <Col xs={24} xl={12}>
                      <section className="order-service-section order-service-section-fill">
                        <div className="order-service-section-head">
                          <div>
                            <Text strong>自动发布并核销</Text>
                            <Text type="secondary">客户提交后按工单快照自动处理。</Text>
                          </div>
                        </div>
                        <div className="order-service-switch-grid is-auto-publish">
                          <Form.Item
                            name={['autoPublish', 'enabled']}
                            label="启用自动发布"
                            valuePropName="checked"
                          >
                            <Switch />
                          </Form.Item>
                          <Form.Item
                            name={['autoPublish', 'requireVoucherConsume']}
                            label="要求核销"
                            valuePropName="checked"
                          >
                            <Switch />
                          </Form.Item>
                          <Form.Item name={['autoPublish', 'retryMax']} label="额外重试次数">
                            <InputNumber min={0} max={10} style={{ width: '100%' }} />
                          </Form.Item>
                        </div>
                        <Text type="secondary" className="order-service-inline-tip">
                          要求核销时，核销失败不会发布到大厅，会进入失败任务。
                        </Text>
                      </section>
                    </Col>
                  </Row>

                  <div className="order-service-save-bar">
                    <Text type="secondary">保存只更新草稿，发布后才会影响新工单。</Text>
                    <Space>
                      <Button
                        htmlType="button"
                        onClick={() => {
                          form.resetFields()
                          applyProfile(profile)
                        }}
                      >
                        重置
                      </Button>
                      <Button
                        htmlType="submit"
                        icon={<SaveOutlined />}
                        loading={saving}
                        type="primary"
                      >
                        保存草稿
                      </Button>
                    </Space>
                  </div>
                </Form>
              </>
            ) : (
              <Empty description="请选择分类" />
            )}
          </section>
        </div>
      </Card>

      <Collapse
        ghost
        className="order-service-jobs-collapse"
        items={[
          {
            key: 'failed-jobs',
            label: (
              <Space size={8}>
                <Text strong>自动发布失败任务</Text>
                <Badge
                  count={failedJobs.length}
                  showZero
                  color={failedJobs.length > 0 ? 'red' : 'default'}
                />
              </Space>
            ),
            children:
              failedJobs.length > 0 ? (
                <PercentTable
                  rowKey="id"
                  size="small"
                  loading={jobsQuery.isLoading}
                  dataSource={failedJobs}
                  columns={jobColumns}
                  pagination={false}
                />
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无失败任务" />
              ),
          },
        ]}
      />
    </div>
  )
}

function normalizeFieldOrder(fields: OrderServiceField[]) {
  return fields.map((field, index) => ({
    ...field,
    sortOrder: (index + 1) * 10,
  }))
}

function findDuplicateKeys(fields: OrderServiceField[]) {
  const seen = new Set<string>()
  const duplicates = new Set<string>()
  for (const field of fields) {
    const key = String(field.key || '').trim()
    if (!key) continue
    if (seen.has(key)) duplicates.add(key)
    seen.add(key)
  }
  return [...duplicates]
}

function resolveProfileStatus(profile: AdminOrderServiceProfile | undefined) {
  if (!profile) return { label: '未配置', tone: 'muted' }
  if (profile.status === 'published') {
    return { label: `v${profile.currentVersionNo || 1}`, tone: 'success' }
  }
  if (profile.status === 'draft') {
    return {
      label: profile.currentVersionNo ? `草稿 · 线上 v${profile.currentVersionNo}` : '草稿',
      tone: 'warning',
    }
  }
  return { label: '已归档', tone: 'muted' }
}

function MaterialConfirmationPreview({
  confirmation,
}: {
  confirmation: OrderServiceMaterialConfirmation
}) {
  return (
    <div
      className={`order-service-confirmation-preview${confirmation.enabled ? '' : ' is-disabled'}`}
    >
      <strong>{confirmation.title || '提交资料确认'}</strong>
      <div className="order-service-confirmation-preview-summary">
        <span>商品：示例商品</span>
        <span>游戏账号：customer@example.com</span>
        <span>区服：安卓</span>
        <span>截图：2 张</span>
      </div>
      <div className="order-service-confirmation-preview-content">
        {confirmation.content || '提交资料确认内容'}
      </div>
      <div className="order-service-confirmation-preview-actions">
        <span>{confirmation.cancelText || '返回检查'}</span>
        <span className="is-primary">{confirmation.confirmText || '确认提交'}</span>
      </div>
      {!confirmation.enabled ? <small>当前已关闭，点击提交将直接提交资料</small> : null}
    </div>
  )
}