import { useMemo, useState } from 'react'
import { keepPreviousData, useQuery } from '@tanstack/react-query'
import {
  Alert,
  Button,
  Input,
  InputNumber,
  Select,
  Space,
  Tag,
  Typography,
  type TableColumnsType,
} from 'antd'
import { EyeOutlined, ReloadOutlined } from '@ant-design/icons'
import { useSearchParams, useNavigate } from 'react-router-dom'

import { fetchAdminListings, fetchAdminPendingListings } from '@/features/admin/api'
import { AdminPageHeader } from '@/features/admin/components/AdminPageHeader'
import { DataTable } from '@/features/admin/components/DataTable'
import { FilterBar, FilterField } from '@/features/admin/components/FilterBar'
import { StatusTag } from '@/features/admin/components/StatusTag'
import {
  listingAccountLevel,
  listingAllHeroText,
  listingAssetText,
  listingCharacterSkinText,
  listingCodeText,
  listingCoinText,
  listingLevelText,
  listingOwnerRemark,
  listingPureCoinPriceText,
  listingRatioText,
  listingRegionText,
  listingRentalDuration,
  listingRentDepositText,
  listingResourceText,
  listingSkinGroupText,
} from '@/features/admin/listingDisplay'
import {
  listingReviewStatusMeta,
  listingReviewStatusOptions,
  listingStatusMeta,
  listingStatusOptions,
} from '@/features/listings/labels'
import type { AdminListing, AdminListingQuery } from '@/features/admin/types'
import { emptyListingPublishOptions, fetchListingPublishOptions } from '@/features/seller/options'
import { useAdminSessionStore } from '@/stores/adminSession'
import { getAdminPath } from '@/shared/api/adminClient'
import { formatText } from '@/shared/utils/format'

type ListingMode = 'all' | 'review'

const emptyFilters: AdminListingQuery = {
  keyword: '',
  owner_id: undefined,
  status: '',
  review_status: '',
  insurance: '',
  stamina: '',
  load: '',
  skin_group: '',
  skin_name: '',
  min_coin: undefined,
  max_coin: undefined,
  min_deposit: undefined,
  max_deposit: undefined,
}

const fallbackInsuranceOptions = ['2*1', '2*2', '2*3', '3*3']
const fallbackLevelOptions = ['1级', '2级', '3级', '4级', '5级', '6级', '7级']

function insuranceLabel(value: string) {
  const parts = value.split('*').map(Number)
  if (parts.length === 2 && parts.every(part => Number.isFinite(part) && part > 0)) {
    return `${parts[0] * parts[1]}格`
  }
  return value
}

function levelLabel(value: string) {
  return value.replace(/级$/, '')
}

function EllipsisCell({ value }: { value: string }) {
  return (
    <span className="admin-listings-ellipsis" title={value}>
      {value}
    </span>
  )
}

function RangeFilter({
  min,
  max,
  minPlaceholder,
  maxPlaceholder,
  step,
  precision,
  onMinChange,
  onMaxChange,
}: {
  min?: number
  max?: number
  minPlaceholder: string
  maxPlaceholder: string
  step: number
  precision: number
  onMinChange: (value?: number) => void
  onMaxChange: (value?: number) => void
}) {
  return (
    <div className="admin-range-filter">
      <InputNumber
        min={0}
        step={step}
        precision={precision}
        controls={false}
        placeholder={minPlaceholder}
        value={min}
        onChange={value => onMinChange(typeof value === 'number' ? value : undefined)}
      />
      <span className="admin-range-filter__sep">-</span>
      <InputNumber
        min={0}
        step={step}
        precision={precision}
        controls={false}
        placeholder={maxPlaceholder}
        value={max}
        onChange={value => onMaxChange(typeof value === 'number' ? value : undefined)}
      />
    </div>
  )
}

function buildColumns(
  onOpen: (row: AdminListing) => void,
  canView: boolean
): TableColumnsType<AdminListing> {
  return [
    {
      title: '商品编码',
      key: 'listing_no',
      width: 118,
      fixed: 'left',
      render: (_, row) => (
        <div className="admin-listing-code">
          {canView ? (
            <button type="button" className="admin-order-link" onClick={() => onOpen(row)}>
              {listingCodeText(row)}
            </button>
          ) : (
            <strong>{listingCodeText(row)}</strong>
          )}
          <span className="admin-listing-code__tags">
            <StatusTag meta={listingStatusMeta(row.status)} />
            {row.review_status !== 'approved' ? (
              <StatusTag meta={listingReviewStatusMeta(row.review_status)} />
            ) : null}
          </span>
        </div>
      ),
    },
    {
      title: '地区',
      key: 'region',
      width: 92,
      render: (_, row) => <EllipsisCell value={listingRegionText(row)} />,
    },
    {
      title: '上号方式',
      dataIndex: 'login_platform',
      width: 82,
      render: value => <EllipsisCell value={formatText(value)} />,
    },
    {
      title: '哈夫币(M)',
      key: 'coin',
      width: 88,
      align: 'right',
      render: (_, row) => <strong className="admin-listings-number">{listingCoinText(row)}</strong>,
    },
    {
      title: '保险',
      key: 'insurance',
      width: 62,
      align: 'center',
      render: (_, row) => listingAssetText(row, 'season_insurance'),
    },
    {
      title: '体力(级)',
      key: 'stamina',
      width: 74,
      align: 'center',
      render: (_, row) => listingLevelText(row, 'stamina_level'),
    },
    {
      title: '负重(级)',
      key: 'load',
      width: 74,
      align: 'center',
      render: (_, row) => listingLevelText(row, 'load_level'),
    },
    {
      title: '账号等级',
      key: 'account_level',
      width: 78,
      align: 'center',
      render: (_, row) => listingAccountLevel(row),
    },
    {
      title: '绝密KD',
      key: 'secret_kd',
      width: 72,
      align: 'center',
      render: (_, row) => listingAssetText(row, 'secret_kd'),
    },
    {
      title: 'awm子弹',
      key: 'awm',
      width: 76,
      align: 'center',
      render: (_, row) => listingResourceText(row, 'awmAmmo'),
    },
    {
      title: '六头',
      key: 'helmet6',
      width: 54,
      align: 'center',
      render: (_, row) => listingResourceText(row, 'helmet6'),
    },
    {
      title: '六甲',
      key: 'armor6',
      width: 54,
      align: 'center',
      render: (_, row) => listingResourceText(row, 'armor6'),
    },
    {
      title: '特殊刀皮',
      key: 'melee',
      width: 126,
      render: (_, row) => <EllipsisCell value={listingSkinGroupText(row, 'melee')} />,
    },
    {
      title: '人物红皮/人物金皮/武器皮肤',
      key: 'skins',
      width: 300,
      render: (_, row) => <EllipsisCell value={listingCharacterSkinText(row)} />,
    },
    {
      title: '全英雄',
      key: 'all_hero',
      width: 72,
      align: 'center',
      render: (_, row) => listingAllHeroText(row),
    },
    {
      title: '号主备注',
      key: 'description',
      width: 190,
      render: (_, row) => <EllipsisCell value={listingOwnerRemark(row)} />,
    },
    {
      title: '租客纯币价格',
      key: 'pure_coin_price',
      width: 118,
      align: 'right',
      render: (_, row) => <span className="admin-money">{listingPureCoinPriceText(row)}</span>,
    },
    {
      title: '租期',
      key: 'rental_duration',
      width: 96,
      align: 'center',
      render: (_, row) => {
        const duration = listingRentalDuration(row)
        return (
          <div className="admin-listing-duration">
            <strong>{duration.days}</strong>
            {duration.dailyLoss ? <small>{duration.dailyLoss}</small> : null}
          </div>
        )
      },
    },
    {
      title: '租金/押金',
      key: 'rent_deposit',
      width: 142,
      align: 'right',
      render: (_, row) => (
        <span className="admin-listing-money-pair">{listingRentDepositText(row)}</span>
      ),
    },
    {
      title: '比例',
      key: 'ratio',
      width: 70,
      align: 'center',
      render: (_, row) => <span className="admin-listings-ratio">{listingRatioText(row)}</span>,
    },
    {
      title: '详情',
      key: 'actions',
      width: 74,
      fixed: 'right',
      align: 'center',
      render: (_, row) =>
        canView ? (
          <Button
            type="link"
            size="small"
            icon={<EyeOutlined />}
            onClick={event => {
              event.stopPropagation()
              onOpen(row)
            }}
          >
            详情
          </Button>
        ) : (
          <Typography.Text type="secondary">无权限</Typography.Text>
        ),
    },
  ]
}

export function AdminListingsPage({ mode = 'all' }: { mode?: ListingMode }) {
  const isReviewMode = mode === 'review'
  const [searchParams] = useSearchParams()
  const initialOwnerId = Number(searchParams.get('owner_id')) || undefined
  const initialKeyword = searchParams.get('keyword')?.trim() ?? ''
  const [draft, setDraft] = useState<AdminListingQuery>(() => ({
    ...emptyFilters,
    keyword: initialKeyword,
    owner_id: initialOwnerId,
    review_status: isReviewMode ? 'pending' : '',
  }))
  const [applied, setApplied] = useState<AdminListingQuery>(() => ({
    ...emptyFilters,
    keyword: initialKeyword,
    owner_id: initialOwnerId,
    review_status: isReviewMode ? 'pending' : '',
  }))
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const navigate = useNavigate()
  const permissions = useAdminSessionStore(state => state.admin?.permissions)
  const canView = Boolean(permissions?.includes('*') || permissions?.includes('listing:view'))

  const optionsQuery = useQuery({
    queryKey: ['listing-publish-options'],
    queryFn: fetchListingPublishOptions,
    staleTime: 5 * 60_000,
  })
  const publishOptions = optionsQuery.data ?? emptyListingPublishOptions
  const insuranceOptions = publishOptions.insurance_options.length
    ? publishOptions.insurance_options
    : fallbackInsuranceOptions
  const levelOptions = publishOptions.level_options.length
    ? publishOptions.level_options
    : fallbackLevelOptions
  const skinOptions = publishOptions.skin_groups.map(group => ({
    label: group.title,
    options: group.options.map(name => ({ value: name, label: name })),
  }))
  const selectedSkinNames = draft.skin_name
    ? draft.skin_name
        .split(',')
        .map(name => name.trim())
        .filter(Boolean)
    : []

  const listQuery = useQuery({
    queryKey: ['admin-listings', applied, page, pageSize],
    queryFn: () => fetchAdminListings({ ...applied, page, page_size: pageSize }),
    enabled: !isReviewMode,
    placeholderData: keepPreviousData,
  })
  const pendingQuery = useQuery({
    queryKey: ['admin-pending-listings'],
    queryFn: fetchAdminPendingListings,
    enabled: isReviewMode,
  })

  const rawItems = useMemo(
    () => (isReviewMode ? (pendingQuery.data ?? []) : (listQuery.data?.items ?? [])),
    [isReviewMode, pendingQuery.data, listQuery.data?.items]
  )

  const reviewFiltered = useMemo(() => {
    if (!isReviewMode) return rawItems
    const keyword = (applied.keyword ?? '').toLowerCase()
    return rawItems.filter(item => {
      if (applied.status && item.status !== applied.status) return false
      if (applied.owner_id && item.owner_id !== applied.owner_id) return false
      if (!keyword) return true
      return [item.title, item.listing_no, item.owner_phone, item.owner_nickname]
        .filter(Boolean)
        .some(value => String(value).toLowerCase().includes(keyword))
    })
  }, [isReviewMode, rawItems, applied.keyword, applied.owner_id, applied.status])

  const total = isReviewMode ? reviewFiltered.length : (listQuery.data?.total ?? 0)
  const items = isReviewMode
    ? reviewFiltered.slice((page - 1) * pageSize, page * pageSize)
    : rawItems
  const isFetching = isReviewMode ? pendingQuery.isFetching : listQuery.isFetching
  const isPending = isReviewMode ? pendingQuery.isPending : listQuery.isPending
  const isError = isReviewMode ? pendingQuery.isError : listQuery.isError
  const error = isReviewMode ? pendingQuery.error : listQuery.error
  const refetch = () => (isReviewMode ? pendingQuery.refetch() : listQuery.refetch())

  const publishedCount = items.filter(item => item.status === 'published').length
  const rentedCount = items.filter(item => item.status === 'rented').length
  const pendingReviewCount = items.filter(item => item.review_status === 'pending').length

  const openDetail = (id: number) => {
    if (!canView) return
    navigate(getAdminPath(isReviewMode ? `/listings/review/${id}` : `/listings/${id}`))
  }

  const columns = buildColumns(row => openDetail(row.id), canView)

  const patchFilter = (patch: Partial<AdminListingQuery>) => {
    setDraft(current => ({ ...current, ...patch }))
  }

  const applyFilters = () => {
    setApplied({
      ...draft,
      keyword: draft.keyword?.trim() ?? '',
      review_status: draft.review_status || (isReviewMode ? 'pending' : ''),
    })
    setPage(1)
  }

  const resetFilters = () => {
    const next = { ...emptyFilters, review_status: isReviewMode ? 'pending' : '' }
    setDraft(next)
    setApplied(next)
    setPage(1)
  }

  const setStatusFilter = (status: string) => {
    const nextStatus = applied.status === status ? '' : status
    const next = { ...applied, status: nextStatus, review_status: '' }
    setDraft(next)
    setApplied(next)
    setPage(1)
  }

  const setReviewStatusFilter = (reviewStatus: string) => {
    const nextReviewStatus = isReviewMode
      ? 'pending'
      : applied.review_status === reviewStatus
        ? ''
        : reviewStatus
    const next = { ...applied, status: '', review_status: nextReviewStatus }
    setDraft(next)
    setApplied(next)
    setPage(1)
  }

  const hasActiveFilters = Object.entries(draft).some(
    ([key, value]) => !(isReviewMode && key === 'review_status') && value !== '' && value != null
  )
  const errorText = error instanceof Error ? error.message : '请稍后重试或重新登录后台。'
  const allActive = !applied.status && !applied.review_status
  const reviewModeActive = applied.review_status === 'pending' && !applied.status

  return (
    <div className="admin-page admin-listings-page">
      <AdminPageHeader
        eyebrow={isReviewMode ? 'JIEYOU OPS · 审核' : 'JIEYOU OPS · 商品'}
        title={isReviewMode ? '商品审核' : '商品管理'}
        description={
          isReviewMode
            ? '按提交顺序处理待审商品，核对账号、价格与截图后再上架。'
            : '查看商品编码、地区、上号方式、账号资产、号主备注、租金押金、比例和预计租期。'
        }
        meta={
          <Space size={8} wrap>
            <Tag color="geekblue">共 {total} 件</Tag>
            {isReviewMode ? <Tag color="gold">待审核队列</Tag> : null}
            {isFetching && !isPending ? <Tag color="processing">正在更新</Tag> : null}
          </Space>
        }
        extra={
          <Button icon={<ReloadOutlined />} onClick={() => void refetch()} loading={isFetching}>
            刷新数据
          </Button>
        }
      />

      <section className="admin-listing-overview">
        <button
          type="button"
          className={`admin-listing-stat${allActive ? ' is-active' : ''}`}
          onClick={resetFilters}
        >
          <span>全部商品</span>
          <strong>{total}</strong>
          <small>当前筛选结果</small>
        </button>
        <button
          type="button"
          className={`admin-listing-stat is-published${applied.status === 'published' ? ' is-active' : ''}`}
          onClick={() => setStatusFilter('published')}
        >
          <span>已上架</span>
          <strong>{publishedCount}</strong>
          <small>当前页</small>
        </button>
        <button
          type="button"
          className={`admin-listing-stat is-rented${applied.status === 'rented' ? ' is-active' : ''}`}
          onClick={() => setStatusFilter('rented')}
        >
          <span>已锁定</span>
          <strong>{rentedCount}</strong>
          <small>当前页</small>
        </button>
        <button
          type="button"
          className={`admin-listing-stat is-review${reviewModeActive ? ' is-active' : ''}`}
          onClick={() => setReviewStatusFilter('pending')}
        >
          <span>待审核</span>
          <strong>{pendingReviewCount}</strong>
          <small>当前页</small>
        </button>
      </section>

      <FilterBar
        onSearch={applyFilters}
        onReset={hasActiveFilters ? resetFilters : undefined}
        loading={isFetching}
      >
        <FilterField label="编号" width={240}>
          <Input
            allowClear
            value={draft.keyword}
            placeholder="商品编号 / 订单编号"
            onChange={event => patchFilter({ keyword: event.target.value })}
          />
        </FilterField>
        <FilterField label="号主 ID" width={130}>
          <Input
            allowClear
            inputMode="numeric"
            value={draft.owner_id ?? ''}
            placeholder="筛选号主"
            onChange={event => {
              const value = event.target.value.replace(/\D/g, '')
              patchFilter({ owner_id: value ? Number(value) : undefined })
            }}
          />
        </FilterField>
        <FilterField label="纯币(M)" width={260}>
          <RangeFilter
            min={draft.min_coin}
            max={draft.max_coin}
            minPlaceholder="最低哈夫币"
            maxPlaceholder="最高哈夫币"
            step={10}
            precision={1}
            onMinChange={value => patchFilter({ min_coin: value })}
            onMaxChange={value => patchFilter({ max_coin: value })}
          />
        </FilterField>
        <FilterField label="押金(元)" width={260}>
          <RangeFilter
            min={draft.min_deposit}
            max={draft.max_deposit}
            minPlaceholder="最低押金"
            maxPlaceholder="最高押金"
            step={100}
            precision={1}
            onMinChange={value => patchFilter({ min_deposit: value })}
            onMaxChange={value => patchFilter({ max_deposit: value })}
          />
        </FilterField>
        <FilterField label="商品状态" width={142}>
          <Select
            allowClear
            value={draft.status || undefined}
            placeholder="全部状态"
            options={listingStatusOptions}
            onChange={value => patchFilter({ status: value ?? '' })}
          />
        </FilterField>
        <FilterField label="审核状态" width={142}>
          <Select
            allowClear
            value={draft.review_status || undefined}
            placeholder="全部审核"
            options={listingReviewStatusOptions}
            onChange={value => patchFilter({ review_status: value ?? '' })}
          />
        </FilterField>
        <FilterField label="资产" width={360}>
          <div className="admin-triple-filter">
            <Select
              allowClear
              value={draft.insurance || undefined}
              placeholder="保险"
              options={insuranceOptions.map(value => ({
                value,
                label: insuranceLabel(value),
              }))}
              onChange={value => patchFilter({ insurance: value ?? '' })}
            />
            <Select
              allowClear
              value={draft.stamina || undefined}
              placeholder="体力"
              options={levelOptions.map(value => ({
                value,
                label: levelLabel(value),
              }))}
              onChange={value => patchFilter({ stamina: value ?? '' })}
            />
            <Select
              allowClear
              value={draft.load || undefined}
              placeholder="负重"
              options={levelOptions.map(value => ({
                value,
                label: levelLabel(value),
              }))}
              onChange={value => patchFilter({ load: value ?? '' })}
            />
          </div>
        </FilterField>
        <FilterField label="皮肤" width={230}>
          <Select
            mode="multiple"
            allowClear
            maxTagCount="responsive"
            value={selectedSkinNames}
            placeholder="全部皮肤"
            options={skinOptions}
            onChange={values => patchFilter({ skin_name: values.join(','), skin_group: '' })}
          />
        </FilterField>
      </FilterBar>

      {isError ? (
        <Alert
          type="error"
          showIcon
          className="admin-table-alert"
          message="商品列表没有加载出来"
          description={errorText}
          action={
            <Button size="small" onClick={() => void refetch()}>
              重试
            </Button>
          }
        />
      ) : null}

      <DataTable<AdminListing>
        title={<span>{isReviewMode ? '待审核商品' : '商品列表'}</span>}
        extra={
          <Typography.Text type="secondary">
            {isPending ? '加载中' : `第 ${page} 页 · 当前 ${items.length} 条`}
          </Typography.Text>
        }
        className="admin-listings-table"
        rowKey="id"
        columns={columns}
        dataSource={items}
        loading={isFetching}
        total={total}
        page={page}
        pageSize={pageSize}
        onPageChange={(nextPage, nextPageSize) => {
          setPage(nextPageSize !== pageSize ? 1 : nextPage)
          setPageSize(nextPageSize)
        }}
        onRowClick={canView ? row => openDetail(row.id) : undefined}
        emptyDescription={isReviewMode ? '没有待审核商品' : '没有匹配的商品'}
      />
    </div>
  )
}