import { useEffect, useState } from 'react'
import { Table, Input, Button, Card, Divider, Spin, message } from 'antd'
import { apiService } from '../../services/api'
import { formatUSDC, isAutoGeneratedOrderId, copyToClipboard } from '../../utils'
import { useMediaQuery } from 'react-responsive'
import { useTranslation } from 'react-i18next'
import type { MatchedOrderInfo, OrderTrackingRequest, OrderTrackingListResponse } from '../../types'

import { ReloadOutlined, CopyOutlined } from '@ant-design/icons'

interface MatchedOrdersTabProps {
  copyTradingId: string
  active?: boolean
}

const MatchedOrdersTab: React.FC<MatchedOrdersTabProps> = ({ copyTradingId, active = false }) => {
  const { t } = useTranslation()
  const isMobile = useMediaQuery({ maxWidth: 768 })
  const [loading, setLoading] = useState(false)
  const [orders, setOrders] = useState<MatchedOrderInfo[]>([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [limit, setLimit] = useState(20)
  const [filters, setFilters] = useState<{
    sellOrderId?: string
    buyOrderId?: string
  }>({})

  useEffect(() => {
    if (copyTradingId && active) {
      fetchOrders()
    }
  }, [copyTradingId, active, page, limit, filters])

  const fetchOrders = async () => {
    if (!copyTradingId) return

    setLoading(true)
    try {
      const request: OrderTrackingRequest = {
        copyTradingId: parseInt(copyTradingId),
        type: 'matched',
        page,
        limit,
        ...filters
      }

      const response = await apiService.orderTracking.list(request)
      if (response.data.code === 0 && response.data.data) {
        const data = response.data.data as OrderTrackingListResponse
        setOrders((data.list || []) as MatchedOrderInfo[])
        setTotal(data.total || 0)
      }
    } catch (error: any) {
      console.error('获取匹配关系列表失败:', error)
    } finally {
      setLoading(false)
    }
  }

  const getPnlColor = (value: string): string => {
    const num = parseFloat(value)
    if (isNaN(num)) return '#666'
    return num >= 0 ? '#3f8600' : '#cf1322'
  }

  const handleCopyOrderId = async (orderId: string) => {
    const success = await copyToClipboard(orderId)
    if (success) {
      message.success(t('common.copySuccess') || '已复制到剪贴板')
    } else {
      message.error(t('common.copyFailed') || '复制失败')
    }
  }

  const columns = [
    {
      title: t('copyTradingOrders.sellOrderId') || '卖出订单ID',
      dataIndex: 'sellOrderId',
      key: 'sellOrderId',
      width: isMobile ? 120 : 180,
      render: (text: string) => {
        const isAuto = isAutoGeneratedOrderId(text)
        return (
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
              {isMobile
                ? `${text.slice(0, 6)}...${text.slice(-4)}`
                : `${text.slice(0, 8)}...${text.slice(-6)}`
              }
            </span>
            {!isAuto && (
              <Button
                type="text"
                size="small"
                icon={<CopyOutlined />}
                onClick={() => handleCopyOrderId(text)}
                style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
                title={t('common.copy') || '复制'}
              />
            )}
          </div>
        )
      }
    },
    {
      title: t('copyTradingOrders.buyOrderId') || '买入订单ID',
      dataIndex: 'buyOrderId',
      key: 'buyOrderId',
      width: isMobile ? 120 : 180,
      render: (text: string) => {
        const isAuto = isAutoGeneratedOrderId(text)
        return (
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontFamily: 'monospace', fontSize: isMobile ? 11 : 12 }}>
              {isMobile
                ? `${text.slice(0, 6)}...${text.slice(-4)}`
                : `${text.slice(0, 8)}...${text.slice(-6)}`
              }
            </span>
            {!isAuto && (
              <Button
                type="text"
                size="small"
                icon={<CopyOutlined />}
                onClick={() => handleCopyOrderId(text)}
                style={{ padding: 0, height: 'auto', fontSize: isMobile ? 11 : 12 }}
                title={t('common.copy') || '复制'}
              />
            )}
          </div>
        )
      }
    },
    {
      title: t('copyTradingOrders.matchedQuantity') || '匹配数量',
      dataIndex: 'matchedQuantity',
      key: 'matchedQuantity',
      width: isMobile ? 80 : 100,
      render: (value: string) => (
        <span style={{ fontSize: isMobile ? 12 : 14 }}>{formatUSDC(value)}</span>
      )
    },
    {
      title: t('copyTradingOrders.buyPrice') || '买入价格',
      dataIndex: 'buyPrice',
      key: 'buyPrice',
      width: isMobile ? 80 : 100,
      render: (value: string) => (
        <span style={{ fontSize: isMobile ? 12 : 14 }}>{formatUSDC(value)}</span>
      )
    },
    {
      title: t('copyTradingOrders.sellPrice') || '卖出价格',
      dataIndex: 'sellPrice',
      key: 'sellPrice',
      width: isMobile ? 80 : 100,
      render: (value: string) => (
        <span style={{ fontSize: isMobile ? 12 : 14 }}>{formatUSDC(value)}</span>
      )
    },
    {
      title: t('copyTradingOrders.realizedPnl') || '盈亏',
      dataIndex: 'realizedPnl',
      key: 'realizedPnl',
      width: isMobile ? 100 : 120,
      render: (value: string) => (
        <span style={{
          color: getPnlColor(value),
          fontWeight: 500,
          fontSize: isMobile ? 12 : 14
        }}>
          {isMobile ? formatUSDC(value) : `${formatUSDC(value)} USDC`}
        </span>
      )
    },
    {
      title: t('copyTradingOrders.matchedAt') || '匹配时间',
      dataIndex: 'matchedAt',
      key: 'matchedAt',
      width: isMobile ? 120 : 160,
      render: (timestamp: number) => (
        <span style={{ fontSize: isMobile ? 11 : 12 }}>
          {isMobile
            ? new Date(timestamp).toLocaleDateString('zh-CN')
            : new Date(timestamp).toLocaleString('zh-CN')
          }
        </span>
      )
    }
  ]

  return (
    <div>
      <div style={{ marginBottom: 16, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
        <Input
          placeholder={t('copyTradingOrders.filterSellOrderId') || '筛选卖出订单ID'}
          allowClear
          style={{ width: isMobile ? '100%' : 200 }}
          value={filters.sellOrderId}
          onChange={(e) => setFilters({ ...filters, sellOrderId: e.target.value || undefined })}
        />

        <Input
          placeholder={t('copyTradingOrders.filterBuyOrderId') || '筛选买入订单ID'}
          allowClear
          style={{ width: isMobile ? '100%' : 200 }}
          value={filters.buyOrderId}
          onChange={(e) => setFilters({ ...filters, buyOrderId: e.target.value || undefined })}
        />

        <Button type="primary" onClick={fetchOrders} icon={<ReloadOutlined />}>{t('common.search') || '查询'}</Button>
      </div>

      {isMobile ? (
        <div>
          {loading ? (
            <div style={{ textAlign: 'center', padding: '40px' }}>
              <Spin size="large" />
            </div>
          ) : orders.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
              {t('copyTradingOrders.noMatchedOrders') || '暂无匹配关系'}
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              {orders.map((order) => {
                const date = new Date(order.matchedAt)
                const formattedDate = date.toLocaleString('zh-CN', {
                  year: 'numeric',
                  month: '2-digit',
                  day: '2-digit',
                  hour: '2-digit',
                  minute: '2-digit'
                })

                return (
                  <Card
                    key={`${order.sellOrderId}-${order.buyOrderId}-${order.matchedAt}`}
                    style={{
                      borderRadius: '12px',
                      boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                      border: '1px solid #e8e8e8'
                    }}
                    bodyStyle={{ padding: '16px' }}
                  >
                    <div style={{ marginBottom: '12px' }}>
                      {(order.marketTitle || order.marketId) && (
                        <div style={{ marginBottom: '12px' }}>
                          <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.market') || '市场'}</div>
                          {order.marketTitle ? (
                            <div style={{ fontSize: '13px', fontWeight: '500', marginBottom: '4px' }}>
                              {order.marketTitle}
                            </div>
                          ) : null}
                          {order.marketId && (
                            <div style={{ fontSize: '12px', color: '#999', fontFamily: 'monospace' }}>
                              {order.marketId.slice(0, 8)}...{order.marketId.slice(-6)}
                            </div>
                          )}
                        </div>
                      )}
                      <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.sellOrderId') || '卖出订单ID'}</div>
                      <div style={{
                        fontSize: '13px',
                        fontWeight: '500',
                        fontFamily: 'monospace',
                        marginBottom: '8px',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '8px'
                      }}>
                        <span>{order.sellOrderId.slice(0, 8)}...{order.sellOrderId.slice(-6)}</span>
                        {!isAutoGeneratedOrderId(order.sellOrderId) && (
                          <Button
                            type="text"
                            size="small"
                            icon={<CopyOutlined />}
                            onClick={() => handleCopyOrderId(order.sellOrderId)}
                            style={{ padding: 0, height: 'auto', fontSize: '12px' }}
                            title={t('common.copy') || '复制'}
                          />
                        )}
                      </div>
                      <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.buyOrderId') || '买入订单ID'}</div>
                      <div style={{
                        fontSize: '13px',
                        fontWeight: '500',
                        fontFamily: 'monospace',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '8px'
                      }}>
                        <span>{order.buyOrderId.slice(0, 8)}...{order.buyOrderId.slice(-6)}</span>
                        {!isAutoGeneratedOrderId(order.buyOrderId) && (
                          <Button
                            type="text"
                            size="small"
                            icon={<CopyOutlined />}
                            onClick={() => handleCopyOrderId(order.buyOrderId)}
                            style={{ padding: 0, height: 'auto', fontSize: '12px' }}
                            title={t('common.copy') || '复制'}
                          />
                        )}
                      </div>
                    </div>

                    <Divider style={{ margin: '12px 0' }} />

                    <div style={{ marginBottom: '12px' }}>
                      <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.matchedQuantity') || '匹配数量'}</div>
                      <div style={{ fontSize: '14px', fontWeight: '500' }}>
                        {formatUSDC(order.matchedQuantity)}
                      </div>
                    </div>

                    <div style={{ marginBottom: '12px' }}>
                      <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.priceInfo') || '价格信息'}</div>
                      <div style={{ fontSize: '13px', color: '#333' }}>
                        {t('copyTradingOrders.buy') || '买入'}: {formatUSDC(order.buyPrice)} | {t('copyTradingOrders.sell') || '卖出'}: {formatUSDC(order.sellPrice)}
                      </div>
                    </div>

                    <div style={{ marginBottom: '16px' }}>
                      <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>{t('copyTradingOrders.realizedPnl') || '盈亏'}</div>
                      <div style={{
                        fontSize: '16px',
                        fontWeight: 'bold',
                        color: getPnlColor(order.realizedPnl)
                      }}>
                        {formatUSDC(order.realizedPnl)} USDC
                      </div>
                    </div>

                    <div style={{ marginBottom: '16px' }}>
                      <div style={{ fontSize: '12px', color: '#999' }}>
                        {t('copyTradingOrders.matchedAt') || '匹配时间'}: {formattedDate}
                      </div>
                    </div>
                  </Card>
                )
              })}
            </div>
          )}
        </div>
      ) : (
        <Table
          columns={columns}
          dataSource={orders}
          rowKey={(record) => `${record.sellOrderId}-${record.buyOrderId}-${record.matchedAt}`}
          loading={loading}
          pagination={{
            current: page,
            pageSize: limit,
            total,
            showSizeChanger: true,
            showTotal: (total) => `${t('common.total') || '共'} ${total} ${t('common.items') || '条'}`,
            onChange: (newPage, newLimit) => {
              setPage(newPage)
              setLimit(newLimit)
            }
          }}
        />
      )}
    </div>
  )
}

export default MatchedOrdersTab

