trumpsignal-frontend/app/[locale]/trades/TradesPageClient.tsx

'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useLocale } from 'next-intl'
import { useAccount, useSignMessage } from 'wagmi'
import type { BotTrade, TrumpPost } from '@/types'
import { getTrades, getPosts } from '@/lib/api'
import { useDashboardStore } from '@/store/dashboard'
import { getCachedViewEnvelope, getOrCreateViewEnvelope } from '@/lib/signedRequest'
import TradeTable from '@/components/trades/TradeTable'
import OpenPositions from '@/components/positions/OpenPositions'
import PageHint from '@/components/ui/PageHint'

export default function TradesPageClient() {
  const intlLocale = useLocale()
  const isZh = false  // i18n shelved — Chinese branches kept as dead code for future revival; see messages/zh.json
  const { address, isConnected } = useAccount()
  const { signMessageAsync } = useSignMessage()
  const { isSubscribed, hlApiKeySet } = useDashboardStore()
  const pathname = usePathname()
  const locale = pathname.split('/')[1] || 'en'

  const [mounted, setMounted] = useState(false)
  const [trades, setTrades] = useState<BotTrade[]>([])
  const [posts, setPosts] = useState<TrumpPost[]>([])
  const [loading, setLoading] = useState(true)
  const [loadErr, setLoadErr] = useState('')

  useEffect(() => { setMounted(true) }, [])

  useEffect(() => {
    let cancelled = false
    if (!address || !isConnected) {
      setTrades([])
      setPosts([])
      setLoading(false)
      setLoadErr('')
      return
    }
    setLoading(true)
    ;(async () => {
      let failed = false
      try {
        const env = getCachedViewEnvelope('view_trades', address)
          ?? await getOrCreateViewEnvelope({ action: 'view_trades', wallet: address, signMessageAsync })
        const [t, p] = await Promise.all([
          getTrades(address, env, 100, 1).catch(e => {
            failed = true
            setLoadErr(e instanceof Error ? e.message : (isZh ? '交易加载失败' : 'Failed to load trades'))
            return [] as BotTrade[]
          }),
          getPosts(500, 1).catch(() => [] as TrumpPost[]),
        ])
        if (!cancelled) {
          setTrades(t)
          setPosts(p)
          if (!failed) setLoadErr('')
        }
      } finally {
        if (!cancelled) setLoading(false)
      }
    })()
    return () => { cancelled = true }
  }, [address, isConnected, signMessageAsync, isZh])

  const needsSetup = mounted && isConnected && (!isSubscribed || !hlApiKeySet)

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">{isZh ? '交易执行' : 'Trades'}</h1>
          <PageHint>
            What the bot actually did with your money — currently-open positions
            on top, closed-trade history with realized P&amp;L below.
          </PageHint>
        </div>
      </div>

      {needsSetup && (
        <div className="card" style={{
          padding: '14px 18px', marginBottom: 16,
          background: 'var(--amber-soft)',
          borderColor: 'color-mix(in oklab, var(--amber) 22%, var(--line))',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 12,
        }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{isZh ? '机器人尚未配置完成' : 'Bot not configured'}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>
              {isZh ? '在机器人开始交易前，请先去设置页订阅并绑定 Hyperliquid API。' : 'Subscribe and link your Hyperliquid API wallet on the Settings page before the bot can trade.'}
            </div>
          </div>
          <Link
            href={`/${locale}/settings`}
            className="btn amber"
            style={{ padding: '8px 16px', fontSize: 13, textDecoration: 'none' }}
          >
            {isZh ? '前往设置 →' : 'Go to Settings →'}
          </Link>
        </div>
      )}

      <OpenPositions />

      {!loading && loadErr && (
        <div className="card" style={{ padding: 16, margin: '12px 0', textAlign: 'center',
                                       color: 'var(--down)', fontSize: 13 }}>
          ⚠️ {isZh ? `无法加载交易历史：${loadErr}` : `Couldn’t load trade history — ${loadErr}`}
          <button className="btn ghost" style={{ fontSize: 12, padding: '5px 12px', marginLeft: 10 }}
            onClick={() => location.reload()}>{isZh ? '重试' : 'Retry'}</button>
        </div>
      )}

      <TradeTable trades={trades} posts={posts} loading={loading} />
    </div>
  )
}