import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  DeleteOutlined,
  PlusOutlined,
  ReloadOutlined,
  SaveOutlined,
  SearchOutlined,
} from '@ant-design/icons'
import {
  Alert,
  App,
  Badge,
  Button,
  Card,
  Col,
  Collapse,
  Empty,
  Form,
  Input,
  InputNumber,
  Row,
  Select,
  Space,
  Switch,
  Tag,
  Typography,
} 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,
} 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
  screenshots: ScreenshotForm
  autoPublish: AutoPublishForm
}

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,
}

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'),
    [],
  )

  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 || '资料已提交，请等待处理',
      screenshots: nextProfile?.screenshots || DEFAULT_SCREENSHOTS,
      autoPublish: nextProfile?.autoPublish || DEFAULT_AUTO_PUBLISH,
    })
    setFields(normalizeFieldOrder(nextProfile?.fields || []))
    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 addField() {
    setFields((current) =>
      normalizeFieldOrder([
        ...current,
        {
          key: `field${Date.now().toString(36)}`,
          label: '新字段',
          type: 'text',
          required: true,
          placeholder: '',
          helpText: '',
          options: [],
          sortOrder: (current.length + 1) * 10,
        },
      ]),
    )
  }

  function updateField(index: number, patch: Partial<OrderServiceField>) {
    setFields((current) =>
      current.map((row, rowIndex) => (rowIndex === index ? { ...row, ...patch } : row)),
    )
  }

  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
    }
    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,
        submitText: values.submitText,
        successText: values.successText,
      })
      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)
      message.success(`已发布 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>
                        </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>
                      <Button icon={<PlusOutlined />} onClick={addField} type="dashed">
                        添加字段
                      </Button>
                    </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
                                  value={field.key}
                                  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 })
                                }
                              />
                              {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' }
}