byreal-table/src/app/components/DataTable.tsx

'use client'

import { useEffect, useState } from 'react'
import { Table, Select, Typography, Tag, Button, InputNumber, App } from 'antd'

interface TableData {
	key: string
	liquidity: string
	earnedUsd: string
	positionAgeMs: number
	tokenAaddress?: string
	tokenBaddress?: string
	[key: string]: unknown
}

interface ApiResponse {
	retCode: number
	result: {
		data: {
			records: Record<string, unknown>[]
			total: number
			current: number
			pageSize: number
			pages: number
			poolMap?: Record<string, PoolInfo>
		}
	}
	retMsg?: string
}

interface PoolOption {
	label: string
	value: string
}

interface PoolInfo {
	poolAddress: string
	mintA?: {
		address: string
		symbol?: string
		mintInfo?: {
			symbol?: string
		}
	}
	mintB?: {
		address: string
		symbol?: string
		mintInfo?: {
			symbol?: string
		}
	}
}

interface PoolsListResponse {
	retCode: number
	result?: {
		data?: {
			records?: PoolInfo[]
		}
	}
	retMsg?: string
}

function DataTableContent() {
	const { message } = App.useApp()
	const [data, setData] = useState<TableData[]>([])
	const [loading, setLoading] = useState(true)
	const [poolOptions, setPoolOptions] = useState<PoolOption[]>([])
	const [quickCopyAmount, setQuickCopyAmount] = useState<number>(1)

	const [selectedPoolAddress, setSelectedPoolAddress] = useState<string>(
		'FPBW9dtVRoUug2BeUKZAzaknd6iiet9jHM8RcTvwUkyC'
	)
	const [pagination, setPagination] = useState({
		current: 1,
		pageSize: 100,
		total: 0,
	})
	const [sortField, setSortField] = useState<string>('liquidity')
	const [expandedRowKeys, setExpandedRowKeys] = useState<React.Key[]>([])
	const [childTableData, setChildTableData] = useState<
		Record<string, TableData[]>
	>({})
	const [childTableLoading, setChildTableLoading] = useState<
		Record<string, boolean>
	>({})

	// 获取 pools 列表
	const fetchPoolsList = async () => {
		try {
			const response = await fetch('/api/pools/list?page=1&pageSize=500')
			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`)
			}

			const result: PoolsListResponse = await response.json()
			if (result.result?.data?.records) {
				const options: PoolOption[] = result.result.data.records.map((pool) => {
					const symbolA = pool.mintA?.mintInfo?.symbol || ''
					const symbolB = pool.mintB?.mintInfo?.symbol || ''
					const label = `${symbolA}/${symbolB}`
					return {
						label,
						value: pool.poolAddress,
					}
				})
				setPoolOptions(options)
			}
		} catch (error) {
			console.error('Error fetching pools list:', error)
			message.error('获取 pools 列表失败')
		}
	}

	const fetchData = async (
		page: number = 1,
		pageSize: number = 100,
		poolAddress?: string,
		currentSortField?: string
	) => {
		setLoading(true)
		try {
			const response = await fetch('/api/top-positions', {
				method: 'POST',
				headers: {
					'content-type': 'application/json',
				},
				body: JSON.stringify({
					poolAddress: poolAddress || selectedPoolAddress,
					page,
					pageSize,
					sortField: currentSortField || sortField,
					status: 0,
				}),
			})
			// console.log(response.json())
			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`)
			}

			const result: ApiResponse = await response.json()
			console.log(result)
			if (result.result) {
				const { records, total, current, pageSize, poolMap } =
					result.result.data
				const poolMapData = poolMap
					? (Object.values(poolMap)[0] as PoolInfo)
					: undefined
				const tokenAaddress = poolMapData?.mintA?.address
				const tokenBaddress = poolMapData?.mintB?.address
				setData(
					records.map((item, index) => ({
						key: `${item.id || index}`,
						tokenAaddress,
						tokenBaddress,
						...item,
					})) as TableData[]
				)
				setExpandedRowKeys([])
				setPagination({
					current: current,
					pageSize: pageSize,
					total: total,
				})
			} else {
				message.error(result.retMsg || '获取数据失败')
			}
		} catch (error) {
			console.error('Error fetching data:', error)
			message.error('网络请求失败，请稍后重试')
		} finally {
			setLoading(false)
		}
	}

	const init = async () => {
		await fetchPoolsList()
		await fetchData(1, 100)
	}

	const calculateAPR = (record: TableData) => {
		const useEarnSecond =
			Number(record.earnedUsd) / (Number(record.positionAgeMs) / 1000)
		const apr =
			(useEarnSecond * 60 * 60 * 24 * 365) / Number(record.liquidityUsd)
		return (apr * 100).toFixed(2) + '%'
	}

	const calculateAPRValue = (record: TableData) => {
		const useEarnSecond =
			Number(record.earnedUsd) / (Number(record.positionAgeMs) / 1000)
		const apr =
			(useEarnSecond * 60 * 60 * 24 * 365) / Number(record.liquidityUsd)
		return apr * 100
	}

	function handleQuickCopy(record: TableData) {
		message.loading({
			key: 'quickCopy',
			content: '复制中...',
			duration: 0,
		})
		fetch('/api/lp-copy', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json',
			},
			body: JSON.stringify({
				positionAddress: record.positionAddress,
				nftMintAddress: record.nftMintAddress,
				maxUsdValue: quickCopyAmount,
			}),
		})
			.then((res) => res.json())
			.then((data) => {
				message.destroy('quickCopy')
				if (data.success) {
					message.success('快速复制成功')
				} else {
					message.error(data.error || '快速复制失败')
				}
			})
			.catch((err) => {
				console.error('Error quick copying:', err)
				message.error('快速复制失败')
			})
	}

	useEffect(() => {
		init()
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [])

	const columns = [
		{
			title: '创建地址',
			dataIndex: 'walletAddress',
			key: 'walletAddress',
			render: (text: string) => {
				return (
					<span className="font-bold text-lg">
						{text.slice(0, 6)}...{text.slice(-4)}
					</span>
				)
			},
		},
		{
			title: 'Liquidity',
			dataIndex: 'liquidityUsd',
			key: 'liquidityUsd',
			sorter: (a: TableData, b: TableData) => {
				return Number(a.liquidityUsd) - Number(b.liquidityUsd)
			},
			render: (text: string) => {
				return (
					<span
						className="text-orange-500 font-bold text-lg"
						style={{ color: '#00B098' }}
					>
						${Number(text).toFixed(2)}
					</span>
				)
			},
		},
		{
			title: '复制数',
			dataIndex: 'copies',
			key: 'copies',
			render: (text: string) => {
				return (
					<span
						className={`font-bold text-lg ${Number(text) === 0 ? 'text-red-500' : 'text-green-500'}`}
					>
						{text}
					</span>
				)
			},
		},
		{
			title: '奖励',
			dataIndex: 'bonusUsd',
			key: 'bonusUsd',
			render: (text: string) => {
				return (
					<span className="text-orange-500 font-bold text-lg">
						${Number(text).toFixed(2)}
					</span>
				)
			},
		},
		{
			title: 'APR',
			dataIndex: 'apr',
			key: 'apr',
			sorter: (a: TableData, b: TableData) => {
				return calculateAPRValue(a) - calculateAPRValue(b)
			},
			render: (_text: string, record: TableData) => {
				return (
					<span className="font-bold text-lg" style={{ color: '#00B098' }}>
						{calculateAPR(record)}
					</span>
				)
			},
		},
		{
			title: 'FEE',
			dataIndex: 'earnedUsd',
			key: 'earnedUsd',
			render: (text: string) => {
				return (
					<span
						className="text-orange-500 font-bold text-lg"
						style={{ color: Number(text) > 0 ? '#00B098' : '#FF0000' }}
					>
						${Number(text).toFixed(2)}
					</span>
				)
			},
		},
		{
			title: 'PNL',
			dataIndex: 'pnlUsd',
			key: 'pnlUsd',
			render: (text: string) => {
				return (
					<span
						className="text-orange-500 font-bold text-lg"
						style={{ color: Number(text) > 0 ? '#00B098' : '#FF0000' }}
					>
						${Number(text).toFixed(2)}
					</span>
				)
			},
		},
		{
			title: '创建时间',
			dataIndex: 'positionAgeMs',
			key: 'positionAgeMs',
			sorter: (a: TableData, b: TableData) => {
				return Number(a.positionAgeMs) - Number(b.positionAgeMs)
			},
			render: (text: string) => {
				return (
					<span className="font-bold text-lg">
						{Math.floor(Number(text) / 1000 / 60 / 60)} 小时
					</span>
				)
			},
		},
		{
			title: '操作',
			dataIndex: 'walletAddress',
			key: 'walletAddress',
			render: (text: string, record: TableData) => {
				return (
					<div className="flex items-center gap-2">
						<Typography.Link
							href={`https://www.byreal.io/en/portfolio?userAddress=${text}&tab=current&positionAddress=${record.positionAddress}&tokenAddress=${record.tokenAaddress}&tokenAddress=${record.tokenBaddress}`}
							target="_blank"
						>
							复制
						</Typography.Link>
						<Typography.Link
							onClick={() => handleQuickCopy(record)}
							target="_blank"
						>
							快速复制
						</Typography.Link>
					</div>
				)
			},
		},
	]

	const handleTableChange = (
		newPagination: {
			current?: number
			pageSize?: number
		},
		_filters: unknown,
		sorter:
			| {
					field?: string
					order?: 'ascend' | 'descend' | null
			  }
			| unknown
	) => {
		let currentSortField = sortField
		let shouldResetPage = false
		if (newPagination.current && newPagination.current !== pagination.current) {
			const targetPage = newPagination.current
			const targetPageSize = newPagination.pageSize || pagination.pageSize
			setPagination({
				...pagination,
				current: targetPage,
				pageSize: targetPageSize,
			})

			fetchData(
				targetPage,
				targetPageSize,
				selectedPoolAddress,
				currentSortField
			)
		} else {
			if (sorter && typeof sorter === 'object' && 'field' in sorter) {
				const sorterObj = sorter as {
					field?: string
					order?: 'ascend' | 'descend' | null
				}
				if (sorterObj.field && sorterObj.order) {
					// 映射字段名到 API 的 sortField
					const fieldMap: Record<string, string> = {
						copies: 'copies',
						earnedUsd: 'earnedUsd',
						pnlUsd: 'pnlUsd',
						liquidityUsd: 'liquidity',
						positionAgeMs: 'positionAgeMs',
					}
					const newSortField = fieldMap[sorterObj.field] || sortField
					if (newSortField !== sortField) {
						currentSortField = newSortField
						shouldResetPage = true
					}
				}
			}
		}
	}

	const handlePoolChange = (value: string) => {
		setSelectedPoolAddress(value)
		fetchData(1, 100, value)
	}

	// 获取子表格数据
	const fetchChildData = async (parentPositionAddress: string) => {
		if (childTableData[parentPositionAddress]) {
			// 如果已经加载过，直接返回
			return
		}

		setChildTableLoading((prev) => ({
			...prev,
			[parentPositionAddress]: true,
		}))

		try {
			const response = await fetch('/api/top-positions', {
				method: 'POST',
				headers: {
					'content-type': 'application/json',
				},
				body: JSON.stringify({
					poolAddress: selectedPoolAddress,
					parentPositionAddress,
					page: 1,
					pageSize: 500,
					sortField: 'liquidity',
				}),
			})

			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`)
			}

			const result: ApiResponse = await response.json()
			if (result.result) {
				const { records } = result.result.data
				const childData: TableData[] = records.map((item, index) => ({
					key: `${parentPositionAddress}-${item.id || index}`,
					...item,
				})) as TableData[]
				setChildTableData((prev) => ({
					...prev,
					[parentPositionAddress]: childData,
				}))
			}
		} catch (error) {
			console.error('Error fetching child data:', error)
			message.error('获取子表格数据失败')
		} finally {
			setChildTableLoading((prev) => ({
				...prev,
				[parentPositionAddress]: false,
			}))
		}
	}

	// 处理展开/收起
	const handleExpand = (expanded: boolean, record: TableData) => {
		const positionAddress = record.positionAddress as string
		if (expanded && positionAddress) {
			setExpandedRowKeys((prev) => [...prev, record.key])
			fetchChildData(positionAddress)
		} else {
			setExpandedRowKeys((prev) => prev.filter((key) => key !== record.key))
		}
	}

	const handleRefresh = () => {
		fetchData(1, 100, selectedPoolAddress, sortField)
	}

	// 子表格的列定义
	const childColumns = [
		{
			title: '创建地址',
			dataIndex: 'walletAddress',
			key: 'walletAddress',
			render: (text: string) => {
				return (
					<span className="font-bold text-base">
						{text.slice(0, 6)}...{text.slice(-4)}
					</span>
				)
			},
		},
		{
			title: 'Liquidity',
			dataIndex: 'liquidityUsd',
			key: 'liquidityUsd',
			render: (text: string) => {
				return (
					<span
						className="text-orange-500 font-bold text-base"
						style={{ color: '#00B098' }}
					>
						${Number(text).toFixed(2)}
					</span>
				)
			},
		},
		{
			title: '复制数',
			dataIndex: 'copies',
			key: 'copies',
			render: (text: string) => {
				return (
					<span className="text-green-500 font-bold text-base">{text}</span>
				)
			},
		},
		{
			title: '奖励',
			dataIndex: 'bonusUsd',
			key: 'bonusUsd',
			render: (text: string) => {
				return (
					<span className="text-orange-500 font-bold text-base">
						${Number(text).toFixed(2)}
					</span>
				)
			},
		},
		{
			title: 'FEE',
			dataIndex: 'earnedUsd',
			key: 'earnedUsd',
			render: (text: string) => {
				return (
					<span
						className="text-orange-500 font-bold text-base"
						style={{ color: Number(text) > 0 ? '#00B098' : '#FF0000' }}
					>
						${Number(text).toFixed(2)}
					</span>
				)
			},
		},
		{
			title: 'PNL',
			dataIndex: 'pnlUsd',
			key: 'pnlUsd',
			render: (text: string) => {
				return (
					<span
						className="text-orange-500 font-bold text-base"
						style={{ color: Number(text) > 0 ? '#00B098' : '#FF0000' }}
					>
						${Number(text).toFixed(2)}
					</span>
				)
			},
		},
		{
			title: '创建时间',
			dataIndex: 'positionAgeMs',
			key: 'positionAgeMs',
			render: (text: string) => {
				return (
					<span className="font-bold text-base">
						{Math.floor(Number(text) / 1000 / 60 / 60)} 小时
					</span>
				)
			},
		},
		{
			title: '状态',
			dataIndex: 'status',
			key: 'status',
			render: (status: number) => {
				return status === 0 ? (
					<Tag color="green">Active</Tag>
				) : (
					<Tag color="red">Inactive</Tag>
				)
			},
		},
		{
			title: '操作',
			dataIndex: 'walletAddress',
			key: 'walletAddress',
			render: (text: string, record: TableData) => {
				return (
					<Typography.Link
						href={`https://www.byreal.io/en/portfolio?userAddress=${text}&tab=current&positionAddress=${record.positionAddress}`}
						target="_blank"
					>
						复制
					</Typography.Link>
				)
			},
		},
	]

	return (
		<div style={{ padding: '24px' }}>
			<div style={{ marginBottom: '16px' }}>
				<Select
					style={{ width: 300 }}
					placeholder="选择 Pool"
					value={selectedPoolAddress}
					onChange={handlePoolChange}
					options={poolOptions}
					showSearch
					filterOption={(input, option) =>
						(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
					}
				/>
				<Button type="primary" className="ml-2 mr-2" onClick={handleRefresh}>
					刷新
				</Button>
				<span className="mr-2">快速复制金额($):</span>
				<InputNumber
					placeholder="快速复制金额($)"
					value={quickCopyAmount}
					min={0.01}
					step={0.1}
					onChange={(value) => setQuickCopyAmount(value as number)}
				/>
			</div>
			<Table
				columns={columns}
				dataSource={data}
				loading={loading}
				pagination={{
					...pagination,
					showSizeChanger: true,
					showTotal: (total) => `共 ${total} 条`,
				}}
				onChange={handleTableChange}
				scroll={{ x: 'max-content' }}
				rowClassName={(record: TableData) => {
					return Number(record.copies) === 0 ? 'bg-red-100' : ''
				}}
				expandable={{
					expandedRowKeys,
					onExpand: handleExpand,
					expandedRowRender: (record: TableData) => {
						const positionAddress = record.positionAddress as string
						const childData = childTableData[positionAddress] || []
						const isLoading = childTableLoading[positionAddress] || false

						return (
							<Table
								columns={childColumns}
								dataSource={childData}
								loading={isLoading}
								pagination={false}
								size="small"
								scroll={{ x: 'max-content' }}
								rowClassName={(childRecord: TableData) => {
									return Number(childRecord.copies) === 0 ? 'bg-red-100' : ''
								}}
							/>
						)
					},
				}}
			/>
		</div>
	)
}

export default function DataTable() {
	return <DataTableContent />
}