trumpsignal-frontend/app/[locale]/analytics/page.tsx

'use client'

import { useState, useEffect } from 'react'
import { getPerformance, getTrades } from '@/lib/api'
import type { BotPerformance, BotTrade } from '@/types'

type Period = '7d' | '30d' | '90d' | 'All'

function fmtMoney(n: number) {
  if (n == null || isNaN(n)) return '—'
  const abs = Math.abs(n)
  const s = abs.toLocaleString('en-US', { maximumFractionDigits: 0 })
  if (n < 0) return '-$' + s
  if (n > 0) return '+$' + s
  return '$' + s
}

function fmtHold(s: number) {
  if (s < 60) return s + 's'
  const m = Math.floor(s / 60)
  if (m < 60) return m + 'm'
  return Math.floor(m / 60) + 'h ' + (m % 60) + 'm'
}

function inPeriod(iso: string, period: Period) {
  if (period === 'All') return true
  const days = Number.parseInt(period, 10)
  if (Number.isNaN(days)) return true
  const time = new Date(iso).getTime()
  return time >= Date.now() - days * 24 * 60 * 60 * 1000
}

function calcDrawdownPct(trades: BotTrade[]) {
  const ordered = [...trades].sort(
    (a, b) => new Date(a.closed_at).getTime() - new Date(b.closed_at).getTime()
  )
  let equity = 0
  let peak = 0
  let maxDrawdownPct = 0

  for (const trade of ordered) {
    equity += trade.pnl_usd
    peak = Math.max(peak, equity)
    if (peak > 0) {
      maxDrawdownPct = Math.max(maxDrawdownPct, ((peak - equity) / peak) * 100)
    }
  }

  return maxDrawdownPct
}

export default function AnalyticsPage() {
  const [perf, setPerf] = useState<BotPerformance | null>(null)
  const [trades, setTrades] = useState<BotTrade[]>([])
  const [period, setPeriod] = useState<Period>('30d')

  useEffect(() => {
    Promise.all([
      getPerformance().catch(() => null),
      getTrades(100, 1).catch(() => []),
    ]).then(([p, t]) => {
      setPerf(p)
      setTrades(t)
    })
  }, [])

  const filteredTrades = trades.filter((trade) => inPeriod(trade.closed_at, period))
  const totalPnl = filteredTrades.reduce((sum, trade) => sum + trade.pnl_usd, 0)
  const wins = filteredTrades.filter((trade) => trade.pnl_usd > 0).length
  const winRate = filteredTrades.length ? (wins / filteredTrades.length) * 100 : 0
  const bestTrade = filteredTrades.length ? Math.max(...filteredTrades.map(t => t.pnl_usd)) : 0
  const worstTrade = filteredTrades.length ? Math.min(...filteredTrades.map(t => t.pnl_usd)) : 0
  const avgTrade = filteredTrades.length ? filteredTrades.reduce((s, t) => s + t.pnl_usd, 0) / filteredTrades.length : 0
  const avgHold = filteredTrades.length ? filteredTrades.reduce((sum, trade) => sum + trade.hold_seconds, 0) / filteredTrades.length : 0
  const maxDrawdown = period === '30d' && perf ? perf.max_drawdown_pct : calcDrawdownPct(filteredTrades)
  const summaryPnl = period === '30d' && perf && trades.length >= filteredTrades.length
    ? perf.net_pnl_usd
    : totalPnl

  const metrics = [
    { k: 'Max drawdown', v: filteredTrades.length ? maxDrawdown.toFixed(1) + '%' : '—', sub: 'Worst peak-to-trough', down: true },
    { k: 'Total trades', v: String(filteredTrades.length || '—'), sub: 'Closed bot executions' },
    { k: 'Avg hold time', v: filteredTrades.length ? fmtHold(Math.round(avgHold)) : '—', sub: 'Per trade' },
    { k: 'Avg trade P&L', v: fmtMoney(avgTrade), sub: 'Mean per trade', up: avgTrade > 0 },
    { k: 'Best trade', v: fmtMoney(bestTrade), sub: 'Largest single win', up: true },
    { k: 'Worst trade', v: fmtMoney(worstTrade), sub: 'Largest single loss', down: true },
  ]

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Analytics</h1>
          <p className="page-sub">Deep dive into {period} of signals and trades.</p>
        </div>
        <div className="nav-tabs">
          {(['7d', '30d', '90d', 'All'] as const).map(p => (
            <button key={p} className={`nav-tab ${period === p ? 'active' : ''}`} onClick={() => setPeriod(p)}>{p}</button>
          ))}
        </div>
      </div>

      {/* Summary card */}
      <div className="card" style={{ padding: 28, marginBottom: 20 }}>
        <div className="row between" style={{ alignItems: 'flex-start', marginBottom: 20 }}>
          <div>
            <div className="tiny">Performance · {period}</div>
            <div className="hero-value mono" style={{ marginTop: 6, fontSize: 40 }}>
              {filteredTrades.length ? fmtMoney(summaryPnl) : '—'}
            </div>
            <div className="row gap-s" style={{ marginTop: 8 }}>
              <span className={`chip ${winRate >= 50 ? 'up' : 'down'}`}>{winRate.toFixed(1)}% win rate</span>
              <span className="chip">{filteredTrades.length} trades</span>
            </div>
          </div>
        </div>
      </div>

      {/* Metric grid */}
      <div className="metric-grid" style={{ marginBottom: 20 }}>
        {metrics.map(m => (
          <div key={m.k} className="card" style={{ padding: 20 }}>
            <div className="tiny" style={{ marginBottom: 8 }}>{m.k}</div>
            <div className={`mono ${m.up ? 'delta up' : m.down ? 'delta down' : ''}`} style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.01em' }}>{m.v}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>{m.sub}</div>
          </div>
        ))}
      </div>

      {/* No data message */}
      {!filteredTrades.length && (
        <div className="card" style={{ padding: 60, textAlign: 'center', color: 'var(--ink-3)' }}>
          <p style={{ fontSize: 14 }}>
            {trades.length
              ? `No trades closed in the ${period} window yet.`
              : 'No trade data yet. The bot will populate analytics once it starts executing.'}
          </p>
        </div>
      )}
    </div>
  )
}