// 交易记录页 —— 核心证据页 (支持双语与左对齐排版)
function RecordPage({ onNavigate, lang = 'zh', t }) {
  const i18n = t || (window.I18N && window.I18N[lang]) || window.I18N.zh;
  const r = i18n.record;
  const isEn = lang === 'en';

  const [filter, setFilter] = React.useState('all');
  const [activeTab, setActiveTab] = React.useState('curve');
  const [page, setPage] = React.useState(1);
  const pageSize = 10;

  const [monthPage, setMonthPage] = React.useState(1);
  const monthPageSize = 5;

  const [liveData, setLiveData] = React.useState(null);

  React.useEffect(() => {
    let isMounted = true;
    fetch('/api/records')
      .then(res => res.json())
      .then(res => {
        if (isMounted && res && res.success && res.data) {
          setLiveData(res.data);
        }
      })
      .catch(() => {});
    return () => { isMounted = false; };
  }, []);

  const allTrades = React.useMemo(() => {
    if (liveData && liveData.trades) {
      return liveData.trades;
    }
    return [...SAMPLE_TRADES].reverse();
  }, [liveData]);

  const stats = liveData ? liveData.stats : SITE_STATS;
  const monthlyData = liveData ? liveData.monthly : MONTHLY_SUMMARY;
  const curveData = liveData ? liveData.curve : SAMPLE_TRADES;

  const filteredTrades = React.useMemo(() => {
    if (filter === 'all') return allTrades;
    if (filter === 'win') {
      return allTrades.filter(t => t.result === 'tp' || (t.result === 'manual' && t.pnlPercent > 0) || t.result === 'breakeven');
    }
    if (filter === 'loss') {
      return allTrades.filter(t => t.result === 'sl' || (t.result === 'manual' && t.pnlPercent < 0));
    }
    if (filter === 'manual') return allTrades.filter(t => t.result === 'manual');
    if (filter === 'breakeven') return allTrades.filter(t => t.result === 'breakeven');
    return allTrades;
  }, [allTrades, filter]);

  const totalPages = Math.ceil(filteredTrades.length / pageSize) || 1;
  const pagedTrades = filteredTrades.slice((page - 1) * pageSize, page * pageSize);

  const totalMonthPages = Math.ceil(monthlyData.length / monthPageSize) || 1;
  const pagedMonthly = monthlyData.slice((monthPage - 1) * monthPageSize, monthPage * monthPageSize);

  React.useEffect(() => {
    setPage(1);
  }, [filter]);

  React.useEffect(() => {
    if (!window.echarts) return;
    if (activeTab !== 'curve') return;

    const chartDom = document.getElementById('equityChart');
    if (!chartDom) return;

    const chart = echarts.init(chartDom);
    const xData = curveData.map(t => t.id ? t.id.replace('TRD-', '') : '');
    const yData = curveData.map(t => t.equity);

    let peak = yData[0] || 100;
    let maxDD = 0;
    let ddStartIdx = 0;
    let ddEndIdx = 0;
    let peakIdx = 0;

    for (let i = 0; i < yData.length; i++) {
      if (yData[i] > peak) {
        peak = yData[i];
        peakIdx = i;
      }
      const dd = ((peak - yData[i]) / peak) * 100;
      if (dd > maxDD) {
        maxDD = dd;
        ddStartIdx = peakIdx;
        ddEndIdx = i;
      }
    }

    const option = {
      backgroundColor: 'transparent',
      grid: { left: 50, right: 30, top: 40, bottom: 40 },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(20, 24, 33, 0.95)',
        borderColor: 'rgba(255,255,255,0.1)',
        textStyle: { color: '#e2e8f0', fontSize: 12 },
        formatter: function(params) {
          const idx = params[0].dataIndex;
          const trade = curveData[idx];
          if (!trade) return '';
          const dirTxt = isEn ? (trade.direction === 'long' ? 'LONG' : 'SHORT') : (trade.directionLabel || '');
          const netLabel = isEn ? 'Net Equity' : '净值';
          const pnlLabel = isEn ? 'P&L' : '盈亏';
          return (
            '<div style="font-weight:600;margin-bottom:4px">' + trade.id + ' · ' + trade.symbol + ' ' + dirTxt + '</div>' +
            '<div style="opacity:0.7;font-size:11px">' + trade.date + '</div>' +
            '<div style="margin-top:6px;color:' + (trade.pnlPercent >= 0 ? '#22c55e' : '#ef4444') + '">' +
            netLabel + ': ' + trade.equity.toFixed(2) + '%' +
            '</div>' +
            '<div>' + pnlLabel + ': ' + (trade.pnlPercent >= 0 ? '+' : '') + trade.pnlPercent + '%</div>'
          );
        }
      },
      xAxis: {
        type: 'category',
        data: xData,
        axisLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
        axisTick: { show: false },
        axisLabel: { show: false },
      },
      yAxis: {
        type: 'value',
        min: function(value) { return Math.floor(value.min - 2); },
        max: function(value) { return Math.ceil(value.max + 2); },
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { lineStyle: { color: 'rgba(255,255,255,0.05)', type: 'dashed' } },
        axisLabel: {
          color: 'rgba(255,255,255,0.4)',
          fontSize: 11,
          formatter: '{value}%'
        },
      },
      series: [
        {
          type: 'line',
          data: yData,
          smooth: false,
          symbol: 'circle',
          symbolSize: curveData.length > 50 ? 3 : 5,
          lineStyle: { color: '#22c55e', width: 2 },
          itemStyle: {
            color: function(params) {
              const trade = curveData[params.dataIndex];
              return (trade && trade.pnlPercent >= 0) ? '#22c55e' : '#ef4444';
            },
            borderColor: '#141821',
            borderWidth: 2,
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(34, 197, 94, 0.2)' },
              { offset: 1, color: 'rgba(34, 197, 94, 0)' },
            ]),
          },
          markArea: {
            silent: true,
            itemStyle: { color: 'rgba(239, 68, 68, 0.08)' },
            data: [
              [
                { name: isEn ? 'Max DD' : '最大回撤', xAxis: xData[ddStartIdx], itemStyle: { color: 'rgba(239, 68, 68, 0.1)' } },
                { xAxis: xData[ddEndIdx] }
              ]
            ],
            label: {
              show: true,
              position: 'top',
              color: '#ef4444',
              fontSize: 11,
              formatter: (isEn ? 'Max DD ' : '最大回撤 ') + (stats.maxDrawdown ? stats.maxDrawdown + '%' : '-' + maxDD.toFixed(2) + '%'),
            }
          },
        }
      ]
    };

    chart.setOption(option);
    const handleResize = () => chart.resize();
    window.addEventListener('resize', handleResize);
    window.addEventListener('orientationchange', handleResize);

    let ro = null;
    if (typeof ResizeObserver !== 'undefined') {
      ro = new ResizeObserver(() => {
        try { chart.resize(); } catch (e) {}
      });
      ro.observe(chartDom);
    }

    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('orientationchange', handleResize);
      if (ro) ro.disconnect();
      chart.dispose();
    };
  }, [activeTab, curveData, lang]);

  const getResultTag = (res, label) => {
    if (!isEn) return label;
    if (res === 'tp') return 'TP';
    if (res === 'sl') return 'SL';
    if (res === 'breakeven') return 'BE';
    if (res === 'manual') return 'Manual';
    return label;
  };

  const getMonthLabel = (m) => {
    if (!isEn) return m.monthLabel;
    const parts = (m.month || '').split('-');
    const monthNames = ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const monNum = parseInt(parts[1] || '0', 10);
    return (monthNames[monNum] || parts[1]) + " " + parts[0];
  };

  return (
    <div className="page record-page">
      <div className="page-header page-header-compact">
        <div className="section-inner">
          <div className="page-header-inner">
            <div>
              <h1 className="page-title page-title-compact">{r.pageTitle}</h1>
              <p className="page-desc page-desc-compact">{r.pageDesc}</p>
            </div>
            <div className="page-header-cta">
              <a
                href="https://t.me/gib137"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-ghost btn-ghost-sm"
              >
                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z" />
                </svg>
                {r.joinTgBtn}
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* 统计带 */}
      <div className="section record-stats record-stats-compact">
        <div className="section-inner">
          <StatsBand stats={stats} compact variant="live" lang={lang} t={t} />
        </div>
      </div>

      {/* 收益曲线与按月汇总 */}
      <div className="section chart-section chart-section-compact">
        <div className="section-inner">
          <div className="chart-section-header">
            <div className="chart-tabs">
              <button
                className={'chart-tab ' + (activeTab === 'curve' ? 'active' : '')}
                onClick={() => setActiveTab('curve')}
              >
                {r.tabCurve}
              </button>
              <button
                className={'chart-tab ' + (activeTab === 'monthly' ? 'active' : '')}
                onClick={() => setActiveTab('monthly')}
              >
                {r.tabMonthly}
              </button>
            </div>
            <div className="chart-note">
              <span className="note-badge">{isEn ? 'Audit Note' : '口径说明'}</span>
              {r.scopeNote}
            </div>
          </div>

          {activeTab === 'curve' ? (
            <div className="chart-container">
              <div id="equityChart" style={{ width: '100%', height: '360px' }}></div>
              <div className="chart-legend">
                <span className="legend-item">
                  <span className="legend-dot legend-win"></span>{r.legendWin}
                </span>
                <span className="legend-item">
                  <span className="legend-dot legend-loss"></span>{r.legendLoss}
                </span>
                <span className="legend-item">
                  <span className="legend-area legend-dd"></span>{r.legendDD}
                </span>
              </div>
            </div>
          ) : (
            <div className="monthly-table-wrap">
              <table className="monthly-table">
                <thead>
                  <tr>
                    <th>{r.monthCol}</th>
                    <th>{r.tradesCol}</th>
                    <th>{r.winRateCol}</th>
                    <th>{r.rrCol}</th>
                    <th>{r.sharpeCol}</th>
                    <th>{r.netReturnCol}</th>
                    <th>{r.maxDDCol}</th>
                  </tr>
                </thead>
                <tbody>
                  {pagedMonthly.length === 0 ? (
                    <tr>
                      <td colSpan="7" style={{ textAlign: 'center', padding: '36px 20px', color: 'var(--text-tertiary)' }}>
                        {isEn ? 'No monthly data recorded yet' : '暂无月度数据记录'}
                      </td>
                    </tr>
                  ) : pagedMonthly.map((m) => (
                    <tr key={m.month}>
                      <td><strong>{getMonthLabel(m)}</strong></td>
                      <td>{m.tradeCount} {isEn ? 'orders' : '单'}</td>
                      <td>{m.winRate}%</td>
                      <td>{m.avgRR} R</td>
                      <td>{m.sharpeRatio}</td>
                      <td className={m.netReturn >= 0 ? "positive" : "negative"}>
                        {m.netReturn >= 0 ? '+' : ''}{m.netReturn}%
                      </td>
                      <td className="negative">{m.maxDrawdown}%</td>
                    </tr>
                  ))}
                </tbody>
              </table>

              {totalMonthPages > 1 && (
                <div className="pagination" style={{ marginTop: '16px' }}>
                  <button
                    className="page-btn"
                    onClick={() => setMonthPage(p => Math.max(1, p - 1))}
                    disabled={monthPage === 1}
                  >
                    {r.prevPage}
                  </button>
                  <div className="page-numbers">
                    {Array.from({ length: totalMonthPages }, (_, i) => i + 1).map(n => (
                      <button
                        key={n}
                        className={'page-num ' + (monthPage === n ? 'active' : '')}
                        onClick={() => setMonthPage(n)}
                      >
                        {n}
                      </button>
                    ))}
                  </div>
                  <button
                    className="page-btn"
                    onClick={() => setMonthPage(p => Math.min(totalMonthPages, p + 1))}
                    disabled={monthPage === totalMonthPages}
                  >
                    {r.nextPage}
                  </button>
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* 交易列表（最新在前） */}
      <div className="section trades-section">
        <div className="section-inner">
          <div className="trades-header">
            <h2 className="trades-title">{r.tradesTitle}</h2>
            <div className="trades-filters">
              <button
                className={'filter-btn ' + (filter === 'all' ? 'active' : '')}
                onClick={() => setFilter('all')}
              >
                {r.filterAll} ({allTrades.length})
              </button>
              <button
                className={'filter-btn ' + (filter === 'win' ? 'active' : '')}
                onClick={() => setFilter('win')}
              >
                {r.filterWin} ({stats.winningTrades || 0})
              </button>
              <button
                className={'filter-btn ' + (filter === 'loss' ? 'active' : '')}
                onClick={() => setFilter('loss')}
              >
                {r.filterLoss} ({stats.losingTrades || 0})
              </button>
              <button
                className={'filter-btn ' + (filter === 'breakeven' ? 'active' : '')}
                onClick={() => setFilter('breakeven')}
              >
                {r.filterBe} ({stats.breakevenTrades || 0})
              </button>
              <button
                className={'filter-btn ' + (filter === 'manual' ? 'active' : '')}
                onClick={() => setFilter('manual')}
              >
                {r.filterManual} ({stats.manualTrades != null ? stats.manualTrades : allTrades.filter(t => t.result === 'manual').length})
              </button>
            </div>
          </div>

          <div className="trades-list">
            {pagedTrades.length === 0 ? (
              <div style={{ textAlign: 'center', padding: '48px 20px', background: 'var(--bg-card)', color: 'var(--text-tertiary)', borderRadius: 'var(--radius-lg)' }}>
                <div style={{ fontSize: '28px', marginBottom: '8px' }}>📊</div>
                <div style={{ fontSize: '15px', fontWeight: 600, color: 'var(--text-secondary)', marginBottom: '4px' }}>
                  {isEn ? 'No trading records yet' : '暂无交易记录'}
                </div>
                <div style={{ fontSize: '13px' }}>
                  {isEn ? 'New closed orders will appear here automatically.' : '管理员在后台导入交割单后将实时在此处呈现。'}
                </div>
              </div>
            ) : pagedTrades.map((trade) => (
              <div
                key={trade.id}
                className={'trade-row trade-row-noclick ' + trade.result}
              >
                <div className="trade-col trade-id">
                  <span className="trade-id-text">{trade.id}</span>
                  <span className="trade-date">{trade.date}</span>
                </div>
                <div className="trade-col trade-symbol">
                  <span className="symbol-code">{trade.symbol}</span>
                  <span className={'direction-badge ' + trade.direction}>
                    {trade.direction === 'long' ? (isEn ? 'L' : '多') : (isEn ? 'S' : '空')}
                  </span>
                </div>
                <div className="trade-col trade-entry">
                  <div className="trade-label">{r.entryLabel}</div>
                  <div className="trade-value">{"$" + Number(trade.entryPrice || 0).toFixed(2)}</div>
                </div>
                <div className="trade-col trade-stop">
                  <div className="trade-label">{r.stopLabel}</div>
                  <div className="trade-value">{"$" + Number(trade.stopLoss || 0).toFixed(2)}</div>
                </div>
                <div className="trade-col trade-target">
                  <div className="trade-label">{r.targetLabel}</div>
                  <div className="trade-value">{"$" + Number(trade.targetPrice || 0).toFixed(2)}</div>
                </div>
                <div className="trade-col trade-exit">
                  <div className="trade-label">{r.exitLabel}</div>
                  <div className="trade-value">{"$" + Number(trade.exitPrice || 0).toFixed(2)}</div>
                </div>
                <div className="trade-col trade-pnl">
                  <div className={'pnl-amount ' + (trade.pnlPercent >= 0 ? 'positive' : 'negative')}>
                    {trade.pnlPercent >= 0 ? '+' : ''}{trade.pnlPercent}%
                  </div>
                </div>
                <div className="trade-col trade-result">
                  <span className={'result-badge ' + trade.result}>
                    {getResultTag(trade.result, trade.resultLabel)}
                  </span>
                </div>
              </div>
            ))}
          </div>

          {totalPages > 1 && (
            <div className="pagination">
              <button
                className="page-btn"
                onClick={() => setPage(p => Math.max(1, p - 1))}
                disabled={page === 1}
              >
                {r.prevPage}
              </button>
              <div className="page-numbers">
                {Array.from({ length: totalPages }, (_, i) => i + 1).map(n => (
                  <button
                    key={n}
                    className={'page-num ' + (page === n ? 'active' : '')}
                    onClick={() => setPage(n)}
                  >
                    {n}
                  </button>
                ))}
              </div>
              <button
                className="page-btn"
                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                disabled={page === totalPages}
              >
                {r.nextPage}
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="section">
        <div className="section-inner">
          <RiskBanner lang={lang} t={t} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RecordPage });