import { useEffect, useMemo, useState } from 'react'
import { Alert, Checkbox, Input, Modal, Space, Tag, Typography } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import {
  rockApi,
  type RockTokenDeletePreview,
  type RockTokenDeleteResult,
  type RockTokenDeleteStatusCount,
  type RockTokenItem,
} from '../../api'

const { Text } = Typography

export type TokenDeleteMode = 'batch' | 'all'

export interface TokenDeleteModalProps {
  open: boolean
  mode: TokenDeleteMode
  selectedTokens: RockTokenItem[]
  selectedTokenIds: number[]
  filterStatus: string
  searchKeyword: string
  onCancel: () => void
  onDeleted: (result: RockTokenDeleteResult) => void
}

const STATUS_LABELS: Record<string, string> = {
  available: '可用库存',
  using: '使用中',
  bound: '已绑定',
  redeemed: '已发货',
  mismatch: '绑定错误',
  abnormal: '已上报失效',
}

const DANGEROUS_STATUSES = new Set(['using', 'bound', 'mismatch'])

function statusLabel(status: string) {
  return STATUS_LABELS[status] || status || '-'
}

function statusTagColor(status: string) {
  switch (status) {
    case 'available':
      return 'success'
    case 'using':
      return 'processing'
    case 'bound':
      return 'cyan'
    case 'redeemed':
      return 'purple'
    case 'mismatch':
      return 'error'
    default:
      return 'default'
  }
}

function countSelectedByStatus(tokens: RockTokenItem[]) {
  const counts = new Map<string, number>()
  for (const token of tokens) {
    counts.set(token.status, (counts.get(token.status) || 0) + 1)
  }
  return Array.from(counts.entries()).map(([status, count]) => ({ status, count }))
}

function renderStatusCounts(counts: RockTokenDeleteStatusCount[]) {
  if (!counts.length) return <Text type="secondary">无</Text>
  return (
    <Space size={[6, 6]} wrap>
      {counts.map((item) => (
        <Tag key={item.status} color={statusTagColor(item.status)}>
          {statusLabel(item.status)} {item.count}
        </Tag>
      ))}
    </Space>
  )
}

export function TokenDeleteModal({
  open,
  mode,
  selectedTokens,
  selectedTokenIds,
  filterStatus,
  searchKeyword,
  onCancel,
  onDeleted,
}: TokenDeleteModalProps) {
  const [preview, setPreview] = useState<RockTokenDeletePreview | null>(null)
  const [loadingPreview, setLoadingPreview] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState('')
  const [acknowledged, setAcknowledged] = useState(false)
  const [allConfirmText, setAllConfirmText] = useState('')
  const [forceConfirmText, setForceConfirmText] = useState('')

  const selectedStatusCounts = useMemo(
    () => countSelectedByStatus(selectedTokens),
    [selectedTokens],
  )
  const selectedDangerous = useMemo(
    () => selectedTokens.filter((token) => DANGEROUS_STATUSES.has(token.status)).length,
    [selectedTokens],
  )
  const selectedAvailable = useMemo(
    () => selectedTokens.filter((token) => token.status === 'available').length,
    [selectedTokens],
  )

  const total = mode === 'batch' ? selectedTokenIds.length : preview?.total ?? 0
  const dangerous = mode === 'batch' ? selectedDangerous : preview?.dangerous ?? 0
  const available = mode === 'batch' ? selectedAvailable : preview?.available ?? 0
  const statusCounts = mode === 'batch' ? selectedStatusCounts : preview?.status_counts ?? []
  const requiresForce = dangerous > 0
  const filterLabel =
    filterStatus && filterStatus !== 'all' ? statusLabel(filterStatus) : '全部状态'
  const canSubmit =
    total > 0 &&
    acknowledged &&
    !submitting &&
    (!requiresForce || forceConfirmText.trim() === '强制删除') &&
    (mode === 'batch' || allConfirmText.trim() === '全部删除')

  useEffect(() => {
    if (!open) return
    setAcknowledged(false)
    setAllConfirmText('')
    setForceConfirmText('')
    setError('')
    if (mode === 'all') {
      setLoadingPreview(true)
      setPreview(null)
      rockApi
        .previewTokenDelete({
          status: filterStatus && filterStatus !== 'all' ? filterStatus : undefined,
          search: searchKeyword || undefined,
        })
        .then((data) => setPreview(data))
        .catch((e) => setError(e instanceof Error ? e.message : '预览失败'))
        .finally(() => setLoadingPreview(false))
    }
  }, [open, mode, filterStatus, searchKeyword])

  const handleSubmit = async () => {
    if (!canSubmit) return
    setSubmitting(true)
    setError('')
    try {
      const result =
        mode === 'batch'
          ? await rockApi.batchDeleteTokens({
              ids: selectedTokenIds,
              force: requiresForce,
              force_confirm_text: requiresForce ? forceConfirmText.trim() : undefined,
            })
          : await rockApi.deleteAllTokens({
              status: filterStatus && filterStatus !== 'all' ? filterStatus : undefined,
              search: searchKeyword || undefined,
              expected_count: preview?.total ?? 0,
              force: requiresForce,
              confirm_text: allConfirmText.trim(),
              force_confirm_text: requiresForce ? forceConfirmText.trim() : undefined,
            })
      onDeleted(result)
    } catch (e) {
      setError(e instanceof Error ? e.message : '删除失败')
      if (mode === 'all') {
        rockApi
          .previewTokenDelete({
            status: filterStatus && filterStatus !== 'all' ? filterStatus : undefined,
            search: searchKeyword || undefined,
          })
          .then((data) => setPreview(data))
          .catch(() => {})
      }
    } finally {
      setSubmitting(false)
    }
  }

  const title = mode === 'batch' ? '批量软删除 Token' : '按当前筛选全部软删除'

  return (
    <Modal
      open={open}
      title={title}
      onCancel={submitting ? undefined : onCancel}
      okText={submitting ? '删除中…' : '确认软删除'}
      cancelText="取消"
      okButtonProps={{ danger: true, disabled: !canSubmit, loading: submitting }}
      onOk={handleSubmit}
      width={640}
      destroyOnHidden
    >
      <Space direction="vertical" size={12} style={{ width: '100%' }}>
        <Alert
          type="warning"
          showIcon
          message="软删除只影响本地列表、统计与库存分配"
          description="不会删除或退回 0666.pro 上游 Token，数据仍保留在数据库；删除后全量导入不会把已删除的 Token 重新拉回。"
        />

        {mode === 'all' && (
          <div>
            <Text type="secondary">
              删除范围：{filterLabel}
              {searchKeyword ? ` · 搜索「${searchKeyword}」` : ''}
            </Text>
          </div>
        )}

        {loadingPreview ? (
          <Text type="secondary">正在统计当前筛选结果…</Text>
        ) : (
          <>
            <div>
              <Text strong>共 {total} 条</Text>
              {available > 0 && (
                <Text type="secondary"> · 其中可用库存 {available} 条</Text>
              )}
              {dangerous > 0 && (
                <Text type="danger"> · 使用中/已绑定/绑定错误 {dangerous} 条</Text>
              )}
            </div>
            <div>
              <Text type="secondary">状态分布：</Text>
              {renderStatusCounts(statusCounts)}
            </div>
          </>
        )}

        {available > 0 && (
          <Alert
            type="warning"
            showIcon
            message={`将删除 ${available} 条可用库存`}
            description="本地可用库存会立即减少；当前开启了自动补货，后续触发库存检查时可能自动补货，把库存补回来。"
          />
        )}

        {dangerous > 0 && (
          <Alert
            type="error"
            showIcon
            icon={<ExclamationCircleOutlined />}
            message={`包含 ${dangerous} 条进行中的 Token`}
            description="使用中/已绑定/绑定错误的 Token 与订单履约相关。删除后它们会从列表和统计中消失，可能导致客服排查困难；请确认这些订单已无需处理，或已经人工接管。"
          />
        )}

        {error && <Alert type="error" showIcon message={error} />}

        <Checkbox
          checked={acknowledged}
          onChange={(e) => setAcknowledged(e.target.checked)}
        >
          我已确认上述影响，同意软删除
        </Checkbox>

        {mode === 'all' && (
          <div>
            <Text type="secondary">
              请输入 <Text code>全部删除</Text> 确认按当前筛选删除：
            </Text>
            <Input
              value={allConfirmText}
              onChange={(e) => setAllConfirmText(e.target.value)}
              placeholder="全部删除"
              style={{ marginTop: 6 }}
              autoComplete="off"
            />
          </div>
        )}

        {requiresForce && (
          <div>
            <Text type="danger">
              本次包含进行中的 Token，请再输入 <Text code>强制删除</Text> 确认：
            </Text>
            <Input
              value={forceConfirmText}
              onChange={(e) => setForceConfirmText(e.target.value)}
              placeholder="强制删除"
              style={{ marginTop: 6 }}
              autoComplete="off"
              status="error"
            />
          </div>
        )}
      </Space>
    </Modal>
  )
}