import {
  ArrowLeftOutlined,
  CopyOutlined,
  FileTextOutlined,
  PauseCircleOutlined,
  PlayCircleOutlined,
  StopOutlined,
} from '@ant-design/icons'
import {
  Alert,
  App,
  Button,
  Card,
  Descriptions,
  Input,
  Modal,
  Skeleton,
  Space,
  Table,
  Tag,
  Typography,
} from 'antd'
import type { TableColumnsType } from 'antd'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useEffect, useState } from 'react'
import { useNavigate, useParams, useSearchParams } from 'react-router'

import JsonPreview from '@/components/admin/JsonPreview'
import ManualOrderCostModal from '@/components/admin/ManualOrderCostModal'
import PageHeader from '@/components/admin/PageHeader'
import StatusTag from '@/components/admin/StatusTag'
import { fetchAdminOrderDetail, updateAdminOrderClaimStatus } from '@/services/admin'
import type { AdminOrderDetail, AdminTaskListItem } from '@/types/admin'
import { formatAdminDateTime } from '@/utils/admin-time'
import { resolveOrderFulfillmentMode, resolveVoucherStateLabel } from '@/utils/admin-display'

export default function AdminOrderDetailPage() {
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const { message, modal } = App.useApp()
  const { orderId = '' } = useParams()
  const [searchParams, setSearchParams] = useSearchParams()
  const [statusModalVisible, setStatusModalVisible] = useState(false)
  const [manualCostOpen, setManualCostOpen] = useState(false)
  const [targetStatus, setTargetStatus] = useState<'active' | 'paused' | 'closed'>('active')
  const [statusReason, setStatusReason] = useState('')

  useEffect(() => {
    if (searchParams.get('manualCost') === '1') {
      setManualCostOpen(true)
    }
  }, [searchParams])

  function closeManualCost() {
    setManualCostOpen(false)
    if (searchParams.get('manualCost')) {
      const next = new URLSearchParams(searchParams)
      next.delete('manualCost')
      setSearchParams(next, { replace: true })
    }
  }

  const query = useQuery({
    queryKey: ['admin-order-detail', orderId],
    queryFn: () => fetchAdminOrderDetail(orderId),
    enabled: Boolean(orderId),
  })
  const detail = query.data?.data

  const statusMutation = useMutation({
    mutationFn: async (data: { status: 'active' | 'paused' | 'closed'; reason?: string }) => {
      const targetOrderId = orderId || detail?.order?.orderId
      if (!targetOrderId) throw new Error('订单 ID 缺失')
      return updateAdminOrderClaimStatus(targetOrderId, data)
    },
    onSuccess: () => {
      message.success('订单兑换状态已更新')
      setStatusModalVisible(false)
      setStatusReason('')
      void queryClient.invalidateQueries({ queryKey: ['admin-order-detail', orderId] })
    },
    onError: (err: unknown) => {
      message.error(err instanceof Error ? err.message : '更新状态失败')
    },
  })

  const handleCopyH5Link = () => {
    if (!detail?.order.platformOrderId) return
    const h5Url = `${window.location.origin}/h5/${encodeURIComponent(detail.order.platformOrderId)}`
    navigator.clipboard
      .writeText(h5Url)
      .then(() => message.success('已复制 H5 领取链接: ' + h5Url))
      .catch(() => message.error('复制失败，请手动复制'))
  }

  const openStatusModal = (status: 'active' | 'paused' | 'closed') => {
    if (status === 'active') {
      modal.confirm({
        title: '恢复启用订单兑换',
        content: '恢复后，买家可正常进入 H5 页面提交 UID 领取，确认恢复吗？',
        onOk: async () => {
          await statusMutation.mutateAsync({ status: 'active', reason: '管理员恢复启用' })
        },
      })
      return
    }
    setTargetStatus(status)
    setStatusReason('')
    setStatusModalVisible(true)
  }

  if (query.isLoading) {
    return (
      <section className="page-stack">
        <PageHeader title="订单详情" extra={<BackButton />} />
        <Card>
          <Skeleton active paragraph={{ rows: 10 }} />
        </Card>
      </section>
    )
  }

  if (query.error || !detail) {
    return (
      <section className="page-stack">
        <PageHeader title="订单详情" extra={<BackButton />} />
        <Alert
          type="error"
          showIcon
          message={query.error instanceof Error ? query.error.message : '订单不存在或读取失败'}
        />
      </section>
    )
  }

  const taskColumns: TableColumnsType<AdminTaskListItem> = [
    {
      title: '任务号',
      dataIndex: 'taskNo',
      minWidth: 180,
      render: (_, row) => (
        <Typography.Link onClick={() => navigate(`/admin/tasks/${row.taskId}`)}>
          {row.taskNo}
        </Typography.Link>
      ),
    },
    {
      title: '状态',
      minWidth: 220,
      render: (_, row) => (
        <Space size={[0, 6]} wrap>
          <StatusTag value={row.status} kind="task" />
          <StatusTag value={row.resourceStatus} kind="resource" />
          <StatusTag value={row.customerStatus} kind="customer" />
        </Space>
      ),
    },
    {
      title: '角色',
      minWidth: 160,
      render: (_, row) => (
        <div className="cell-stack">
          <span>{row.roleName || '-'}</span>
          <span className="muted">{row.roleId || '-'}</span>
        </div>
      ),
    },
    {
      title: '错误',
      dataIndex: 'lastError',
      minWidth: 220,
      render: (value) => <span className="muted">{value || '-'}</span>,
    },
  ]

  const allTasksCompleted =
    detail.tasks.length > 0 &&
    detail.tasks.every(
      (t) =>
        ['completed', 'redeemed', 'delivered', 'success'].includes(t.status) ||
        t.deliveryStatus === 'delivered',
    )
  const isOrderFulfilled = detail.order.orderStatus === 'completed' || allTasksCompleted
  const isOrderRefundedOrCancelled =
    detail.order.payStatus === 'refunded' || detail.order.orderStatus === 'cancelled'
  const canPauseOrClose = !isOrderFulfilled && !isOrderRefundedOrCancelled
  const isAutoClaimOrder = Boolean(
    detail.order.fulfillmentMode === 'affiliate_dash' ||
    (detail.order.fulfillmentMode === 'mixed' && detail.order.canClaimH5),
  )
  const fulfillmentMode = resolveOrderFulfillmentMode(detail.order)
  const voucherLabel = resolveVoucherStateLabel(detail.order.voucherState)

  return (
    <section className="page-stack">
      <PageHeader
        title="订单详情"
        description={detail.order.platformOrderId}
        extra={<BackButton />}
      />

      <Card
        title="基础信息"
        extra={
          <Space>
            <Button icon={<FileTextOutlined />} onClick={() => setManualCostOpen(true)}>
              人工录单
            </Button>
            {isAutoClaimOrder ? (
              <>
                <Button icon={<CopyOutlined />} onClick={handleCopyH5Link}>
                  复制 H5 领取链接
                </Button>
                {detail.order.claimStatus === 'paused' || detail.order.claimStatus === 'closed' ? (
                  <Button
                    type="primary"
                    icon={<PlayCircleOutlined />}
                    onClick={() => openStatusModal('active')}
                    loading={statusMutation.isPending}
                  >
                    恢复启用
                  </Button>
                ) : canPauseOrClose ? (
                  <Button
                    danger
                    icon={<PauseCircleOutlined />}
                    onClick={() => openStatusModal('paused')}
                    loading={statusMutation.isPending}
                  >
                    暂停兑换
                  </Button>
                ) : null}
                {canPauseOrClose && detail.order.claimStatus !== 'closed' ? (
                  <Button
                    danger
                    icon={<StopOutlined />}
                    onClick={() => openStatusModal('closed')}
                    loading={statusMutation.isPending}
                  >
                    关闭兑换
                  </Button>
                ) : null}
              </>
            ) : null}
          </Space>
        }
      >
        <Descriptions column={{ xs: 1, md: 2, xl: 3 }} bordered size="small">
          <Descriptions.Item label="订单 ID">{detail.order.orderId}</Descriptions.Item>
          <Descriptions.Item label="店铺">
            {detail.order.shopName || detail.order.shopId || '-'}
          </Descriptions.Item>
          <Descriptions.Item label="平台订单号">{detail.order.platformOrderId}</Descriptions.Item>
          <Descriptions.Item label="履约模式">
            <Tag color={fulfillmentMode.color} style={{ margin: 0 }}>
              {fulfillmentMode.label}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="核销码">
            {detail.order.hasVoucher && voucherLabel ? (
              <Tag color="gold" style={{ margin: 0 }}>
                🎫 {voucherLabel}
              </Tag>
            ) : (
              <span className="muted">无</span>
            )}
          </Descriptions.Item>
          <Descriptions.Item label="订单状态">
            <StatusTag value={detail.order.orderStatus} />
          </Descriptions.Item>
          <Descriptions.Item label="支付状态">
            <StatusTag value={detail.order.payStatus} kind="pay" />
          </Descriptions.Item>
          {isAutoClaimOrder ? (
            <Descriptions.Item label="H5 兑换状态">
              <Space wrap>
                {detail.order.claimStatus === 'paused' ? (
                  <Tag color="warning" icon={<PauseCircleOutlined />}>
                    已暂停兑换
                  </Tag>
                ) : detail.order.claimStatus === 'closed' ? (
                  <Tag color="default" icon={<StopOutlined />}>
                    已关闭兑换
                  </Tag>
                ) : (
                  <Tag color="success" icon={<PlayCircleOutlined />}>
                    正常有效
                  </Tag>
                )}
                {detail.order.claimStatusReason ? (
                  <span className="muted" style={{ fontSize: 12 }}>
                    ({detail.order.claimStatusReason})
                  </span>
                ) : null}
              </Space>
            </Descriptions.Item>
          ) : null}
          <Descriptions.Item label="金额">
            {detail.order.totalAmount} {detail.order.currency}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">
            {formatAdminDateTime(detail.order.createdAt)}
          </Descriptions.Item>
          <Descriptions.Item label="更新时间">
            {formatAdminDateTime(detail.order.updatedAt)}
          </Descriptions.Item>
          <Descriptions.Item label="商品摘要">
            <div className="cell-stack" style={{ gap: 4 }}>
              <span>{detail.order.itemTitle || detail.order.itemSummary || '-'}</span>
              {detail.order.skuNick ? (
                <Tag color="blue" style={{ margin: 0, width: 'fit-content' }}>
                  {detail.order.skuNick}
                </Tag>
              ) : null}
            </div>
          </Descriptions.Item>
        </Descriptions>
      </Card>

      <Card title="商品明细">
        <Table<AdminOrderDetail['items'][number]>
          rowKey="orderItemId"
          pagination={false}
          dataSource={detail.items}
          scroll={{ x: 760 }}
          columns={[
            {
              title: '商品',
              dataIndex: 'itemTitle',
              minWidth: 240,
              render: (value) => <strong>{value || '-'}</strong>,
            },
            {
              title: 'SKU / 规格',
              minWidth: 180,
              render: (_, item) => (
                <div className="cell-stack" style={{ gap: 4 }}>
                  {item.skuNick ? (
                    <Tag color="blue" style={{ margin: 0, width: 'fit-content' }}>
                      {item.skuNick}
                    </Tag>
                  ) : null}
                  {/* 商品列已是内部 SKU 时不再重复展示同一串 */}
                  {item.skuCode && item.skuCode !== item.itemTitle ? (
                    <span className="muted">{item.skuCode}</span>
                  ) : null}
                </div>
              ),
            },
            { title: '数量', dataIndex: 'quantity', width: 90 },
            { title: '履约模式', dataIndex: 'deliveryMode', minWidth: 140 },
          ]}
        />
      </Card>

      <Card title="任务">
        <Table<AdminTaskListItem>
          rowKey="taskId"
          pagination={false}
          dataSource={detail.tasks}
          columns={taskColumns}
          scroll={{ x: 900 }}
        />
      </Card>

      <Card title="原始载荷">
        <JsonPreview value={detail.order.rawPayload} />
      </Card>

      <Modal
        title={targetStatus === 'paused' ? '暂停订单兑换' : '关闭订单兑换'}
        open={statusModalVisible}
        onCancel={() => setStatusModalVisible(false)}
        confirmLoading={statusMutation.isPending}
        onOk={() => {
          if (!statusReason.trim()) {
            message.warning('请填写原因或备注（如：买家申请退款）')
            return
          }
          statusMutation.mutate({ status: targetStatus, reason: statusReason.trim() })
        }}
      >
        <div style={{ padding: '12px 0' }}>
          <p style={{ color: '#64748b', marginBottom: 8 }}>
            {targetStatus === 'paused'
              ? '暂停后，买家访问 H5 链接将被拦截并提示“兑换已暂停，请联系客服”，后续可随时恢复启用。'
              : '关闭后，买家将无法继续进入 H5 页面兑换，适用于已退款或订单作废。'}
          </p>
          <Input.TextArea
            rows={3}
            placeholder="请输入暂停/关闭原因（必填，如：买家退款、售后争议排查）"
            value={statusReason}
            onChange={(e) => setStatusReason(e.target.value)}
          />
        </div>
      </Modal>

      <ManualOrderCostModal
        open={manualCostOpen}
        orderId={detail.order.orderId}
        orderNo={detail.order.platformOrderId || String(detail.order.orderId)}
        items={detail.items.map((item) => ({
          orderItemId: item.orderItemId,
          matchSku: item.matchSku,
          skuName: item.skuName,
          skuCode: item.skuCode,
          quantity: item.quantity,
        }))}
        onClose={closeManualCost}
      />
    </section>
  )
}

function BackButton() {
  const navigate = useNavigate()
  return (
    <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/admin/orders')}>
      返回订单
    </Button>
  )
}