import { ReloadOutlined } from '@ant-design/icons'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import {
  App,
  Alert,
  Button,
  Empty,
  Form,
  Input,
  Modal,
  Segmented,
  Space,
  Tag,
  Typography,
} from 'antd'
import { useMemo, useState } from 'react'

import ImagePreviewList from '@/components/files/ImagePreviewList'
import ImageUpload from '@/components/files/ImageUpload'
import { fetchWorkerAfterSalesCases, submitWorkerAfterSalesCaseResponse } from '@/services/worker'
import type { UploadedFile, WorkerAfterSalesCase } from '@/types/worker-platform'
import { formatDateTime } from '@/utils/date-time'
import { useIsMobile } from '@/utils/use-is-mobile'

type AfterSalesResponseFormValues = {
  response?: string
}

type StatusFilter =
  | 'all'
  | 'awaiting_worker_response'
  | 'under_review'
  | 'recovery_pending'
  | 'closed'

const STATUS_FILTERS: Array<{ value: StatusFilter; label: string }> = [
  { value: 'all', label: '全部' },
  { value: 'awaiting_worker_response', label: '待说明' },
  { value: 'under_review', label: '处理中' },
  { value: 'recovery_pending', label: '追缴中' },
  { value: 'closed', label: '已关闭' },
]

/** 待办优先：待说明 > 处理中 > 追缴中 > 已关闭，同状态按发起时间倒序。 */
const STATUS_WEIGHT: Record<string, number> = {
  awaiting_worker_response: 0,
  under_review: 1,
  recovery_pending: 2,
}

export function formatMoney(value: number | undefined) {
  return `￥${((Number(value || 0) || 0) / 100).toFixed(2)}`
}

export function formatWorkerAfterSalesStatus(status: string) {
  if (status === 'awaiting_worker_response') return '待说明'
  if (status === 'under_review') return '处理中'
  if (status === 'recovery_pending') return '追缴中'
  return '已关闭'
}

export function resolveWorkerAfterSalesStatusColor(status: string) {
  if (status === 'awaiting_worker_response') return 'orange'
  if (status === 'under_review') return 'blue'
  if (status === 'recovery_pending') return 'red'
  return 'green'
}

/** 与后台售后面板保持相同的问题类型口径。 */
export function formatWorkerAfterSalesProblemType(value: string) {
  if (value === 'fake_evidence') return '疑似P图 / 伪造验收'
  if (value === 'result_not_met') return '实际结果未达标'
  return '其他售后问题'
}

function resolveWorkerAfterSalesProblemTypeColor(value: string) {
  if (value === 'fake_evidence') return 'red'
  if (value === 'result_not_met') return 'volcano'
  return 'default'
}

export function formatWorkerAfterSalesResolution(value: string) {
  if (value === 'upheld') return '问题成立'
  if (value === 'remedied') return '补救完成'
  if (value === 'not_upheld') return '问题不成立'
  return ''
}

function resolveWorkerAfterSalesResolutionColor(value: string) {
  if (value === 'upheld') return 'red'
  if (value === 'remedied') return 'gold'
  if (value === 'not_upheld') return 'green'
  return 'default'
}

function isAfterSalesClosed(status: string) {
  return !['awaiting_worker_response', 'under_review', 'recovery_pending'].includes(status)
}

function matchesFilter(item: WorkerAfterSalesCase, filter: StatusFilter) {
  if (filter === 'all') return true
  if (filter === 'closed') return isAfterSalesClosed(item.status)
  return item.status === filter
}

export default function WorkerAfterSalesPage() {
  const isMobile = useIsMobile()
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all')

  const afterSalesCasesQuery = useQuery({
    queryKey: ['worker-after-sales-cases'],
    queryFn: fetchWorkerAfterSalesCases,
    retry: false,
  })
  const allCases = afterSalesCasesQuery.data?.data.items || []
  const pendingCount = allCases.filter((item) => item.status === 'awaiting_worker_response').length
  const countByFilter = useMemo(() => {
    const counts: Record<string, number> = { all: allCases.length }
    for (const filter of STATUS_FILTERS) {
      if (filter.value === 'all') continue
      counts[filter.value] = allCases.filter((item) => matchesFilter(item, filter.value)).length
    }
    return counts
  }, [allCases])
  const afterSalesCases = useMemo(
    () =>
      allCases
        .filter((item) => matchesFilter(item, statusFilter))
        .sort(
          (a, b) =>
            (STATUS_WEIGHT[a.status] ?? 3) - (STATUS_WEIGHT[b.status] ?? 3) ||
            String(b.createdAt).localeCompare(String(a.createdAt)),
        ),
    [allCases, statusFilter],
  )

  return (
    <section
      className={
        isMobile ? 'worker-after-sales-page worker-after-sales-mobile' : 'worker-after-sales-page'
      }
    >
      {pendingCount > 0 ? (
        <Alert
          className="worker-after-sales-reminder"
          type="warning"
          showIcon
          message={`你有 ${pendingCount} 条售后单待提交说明，请尽快处理，逾期可能影响结算与等级`}
        />
      ) : null}
      <div className="worker-after-sales-toolbar">
        <Segmented
          options={STATUS_FILTERS.map((filter) => ({
            value: filter.value,
            label: (
              <Space size={4}>
                {filter.label}
                {countByFilter[filter.value] > 0 ? (
                  <span className="worker-after-sales-filter-count">
                    {countByFilter[filter.value]}
                  </span>
                ) : null}
              </Space>
            ),
          }))}
          value={statusFilter}
          onChange={(value) => setStatusFilter(value as StatusFilter)}
          block={isMobile}
        />
        <Button
          icon={<ReloadOutlined />}
          loading={afterSalesCasesQuery.isFetching}
          onClick={() => afterSalesCasesQuery.refetch()}
        >
          刷新
        </Button>
      </div>

      {afterSalesCasesQuery.isLoading ? (
        <Typography.Text type="secondary">加载中…</Typography.Text>
      ) : afterSalesCasesQuery.isError ? (
        <Alert
          type="error"
          showIcon
          message="售后问题单加载失败"
          description="请刷新后重试；若问题持续存在，请联系客服。"
        />
      ) : afterSalesCases.length === 0 ? (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="暂无售后问题单，请保持验收资料真实完整"
        />
      ) : (
        <div className="worker-after-sales-list">
          {afterSalesCases.map((item) => (
            <WorkerAfterSalesItem key={item.caseId} item={item} isMobile={isMobile} />
          ))}
        </div>
      )}
    </section>
  )
}

function WorkerAfterSalesItem({
  item,
  isMobile,
}: {
  item: WorkerAfterSalesCase
  isMobile: boolean
}) {
  const { message } = App.useApp()
  const queryClient = useQueryClient()
  const [responseOpen, setResponseOpen] = useState(false)
  const [files, setFiles] = useState<UploadedFile[]>([])
  const [form] = Form.useForm<AfterSalesResponseFormValues>()

  async function submit(values: AfterSalesResponseFormValues) {
    const response = String(values.response || '').trim()
    if (!response && files.length === 0) {
      message.error('请填写说明或至少上传一张补救材料图片')
      return
    }
    try {
      await submitWorkerAfterSalesCaseResponse(item.caseId, {
        response,
        files,
      })
      message.success('售后说明已提交，等待客服处理')
      await queryClient.invalidateQueries({ queryKey: ['worker-after-sales-cases'] })
      setResponseOpen(false)
      setFiles([])
      form.resetFields()
    } catch (error) {
      message.error(error instanceof Error ? error.message : '提交失败')
    }
  }

  const resolutionLabel = formatWorkerAfterSalesResolution(item.resolutionAction)
  const hasRecoveryDetail =
    Number(item.recoveryAmount || 0) > 0 ||
    Number(item.pendingDepositDeductionAmount || 0) > 0 ||
    Number(item.availableDeductionAmount || 0) > 0 ||
    Number(item.debtAmount || 0) > 0

  return (
    <>
      <article
        className={`worker-after-sales-item${item.status === 'awaiting_worker_response' ? ' is-awaiting' : ''}`}
      >
        <div className="worker-after-sales-item-head">
          <Space size={6} wrap>
            <Tag color={resolveWorkerAfterSalesStatusColor(item.status)}>
              {formatWorkerAfterSalesStatus(item.status)}
            </Tag>
            <Tag color={resolveWorkerAfterSalesProblemTypeColor(item.problemType)}>
              {formatWorkerAfterSalesProblemType(item.problemType)}
            </Tag>
          </Space>
          <Typography.Text strong ellipsis={{ tooltip: item.productName || item.caseNo }}>
            {item.productName || item.caseNo}
          </Typography.Text>
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
            发起 {formatDateTime(item.createdAt)}
          </Typography.Text>
        </div>
        <Space size={12} wrap className="worker-after-sales-item-meta">
          <Typography.Text type="secondary" style={{ fontSize: 12 }} copyable>
            {item.platformOrderId || item.workOrderNo || item.caseNo}
          </Typography.Text>
          <Typography.Text
            type="secondary"
            style={{ fontSize: 12 }}
            copyable={{ text: item.caseNo }}
          >
            售后单号 {item.caseNo}
          </Typography.Text>
          {item.shareQuantity ? (
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
              拼单 {item.shareQuantity} 份
            </Typography.Text>
          ) : null}
        </Space>

        <div className="worker-after-sales-block">
          <div className="worker-after-sales-block-label">投诉内容</div>
          <Typography.Paragraph style={{ marginBottom: item.complaintFiles.length ? 8 : 0 }}>
            {item.complaintNote || '-'}
          </Typography.Paragraph>
          {item.complaintFiles.length > 0 ? (
            <ImagePreviewList files={item.complaintFiles} size={48} maxVisible={5} />
          ) : null}
        </div>

        {item.workerResponse || item.workerResponseFiles.length > 0 ? (
          <div className="worker-after-sales-block is-mine">
            <div className="worker-after-sales-block-label">
              我提交的说明{item.respondedAt ? ` · ${formatDateTime(item.respondedAt)}` : ''}
            </div>
            {item.workerResponse ? (
              <Typography.Paragraph
                style={{ marginBottom: item.workerResponseFiles.length ? 8 : 0 }}
              >
                {item.workerResponse}
              </Typography.Paragraph>
            ) : null}
            {item.workerResponseFiles.length > 0 ? (
              <ImagePreviewList files={item.workerResponseFiles} size={48} maxVisible={5} />
            ) : null}
          </div>
        ) : null}

        {resolutionLabel || item.resolutionNote || hasRecoveryDetail ? (
          <div className="worker-after-sales-block is-result">
            <div className="worker-after-sales-block-label">处理结果</div>
            <Space direction="vertical" size={6} style={{ width: '100%' }}>
              {resolutionLabel ? (
                <Space size={8} wrap>
                  <Tag color={resolveWorkerAfterSalesResolutionColor(item.resolutionAction)}>
                    {resolutionLabel}
                  </Tag>
                  {item.resolvedAt ? (
                    <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                      {formatDateTime(item.resolvedAt)}
                    </Typography.Text>
                  ) : null}
                </Space>
              ) : null}
              {item.resolutionNote ? (
                <Typography.Paragraph style={{ marginBottom: 0 }}>
                  {item.resolutionNote}
                </Typography.Paragraph>
              ) : null}
              {hasRecoveryDetail ? (
                <Space size={12} wrap>
                  {Number(item.recoveryAmount || 0) > 0 ? (
                    <Typography.Text type="danger" strong>
                      追缴 {formatMoney(item.recoveryAmount)}
                    </Typography.Text>
                  ) : null}
                  {Number(item.pendingDepositDeductionAmount || 0) > 0 ? (
                    <Typography.Text type="secondary">
                      待解冻资金抵扣 {formatMoney(item.pendingDepositDeductionAmount)}
                    </Typography.Text>
                  ) : null}
                  {Number(item.availableDeductionAmount || 0) > 0 ? (
                    <Typography.Text type="secondary">
                      余额抵扣 {formatMoney(item.availableDeductionAmount)}
                    </Typography.Text>
                  ) : null}
                  {Number(item.debtAmount || 0) > 0 ? (
                    <Typography.Text type="danger" strong>
                      待追缴 {formatMoney(item.debtAmount)}，后续验收报酬将自动抵扣
                    </Typography.Text>
                  ) : null}
                  {Number(item.refundedAmount || 0) > 0 ? (
                    <Typography.Text type="success" strong>
                      已退还追缴 {formatMoney(item.refundedAmount)} 至可用余额
                    </Typography.Text>
                  ) : null}
                </Space>
              ) : null}
            </Space>
          </div>
        ) : item.status === 'under_review' ? (
          <Typography.Text type="secondary">已提交说明，等待客服处理</Typography.Text>
        ) : null}

        {item.status === 'awaiting_worker_response' ? (
          <div className="worker-after-sales-item-actions">
            <Button
              type="primary"
              onClick={() => {
                setFiles([])
                form.resetFields()
                setResponseOpen(true)
              }}
            >
              提交说明
            </Button>
          </div>
        ) : null}
      </article>

      <Modal
        title={`售后说明 · ${item.productName || item.caseNo}`}
        open={responseOpen}
        width={isMobile ? '92%' : 560}
        onCancel={() => setResponseOpen(false)}
        onOk={() => form.submit()}
        okText="提交说明"
        destroyOnHidden
      >
        <Alert
          type="warning"
          showIcon
          message="请针对售后问题说明情况或提交补救材料，原验收资料不可在此修改。"
          style={{ marginBottom: 12 }}
        />
        <div className="worker-after-sales-block">
          <div className="worker-after-sales-block-label">
            投诉内容 · {formatWorkerAfterSalesProblemType(item.problemType)}
          </div>
          <Typography.Paragraph style={{ marginBottom: item.complaintFiles.length ? 8 : 0 }}>
            {item.complaintNote || '-'}
          </Typography.Paragraph>
          {item.complaintFiles.length > 0 ? (
            <ImagePreviewList files={item.complaintFiles} size={44} maxVisible={4} />
          ) : null}
        </div>
        <Form form={form} layout="vertical" onFinish={submit} style={{ marginTop: 12 }}>
          <Form.Item
            label="说明"
            name="response"
            extra="说明与补救材料至少填写一项"
            rules={[
              {
                validator: (_, value) =>
                  String(value || '').trim() || files.length > 0
                    ? Promise.resolve()
                    : Promise.reject(new Error('请填写说明或至少上传一张图片')),
              },
            ]}
          >
            <Input.TextArea
              rows={4}
              maxLength={2000}
              showCount
              placeholder="请说明当时的处理情况"
            />
          </Form.Item>
          <Form.Item label="补救材料图片">
            <ImageUpload
              scene="worker-acceptance"
              scope="worker"
              value={files}
              onChange={setFiles}
              maxCount={10}
              showPasteHint
            />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
