import React from 'react';

/**
 * D4. 交易监控
 *
 * 实时交易流、交易统计、订单管理
 */

export const TradingMonitorPage: React.FC = () => {
  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', marginBottom: 24 }}>交易监控</h1>

      {/* Stats Row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {[
          { label: '今日交易量', value: '2,456', color: 'var(--color-primary)' },
          { label: '今日交易额', value: '$156,789', color: 'var(--color-success)' },
          { label: '平均折扣率', value: '82.3%', color: 'var(--color-info)' },
          { label: '大额交易', value: '12', color: 'var(--color-warning)' },
        ].map(s => (
          <div key={s.label} style={{
            background: 'var(--color-surface)',
            borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)',
            padding: 16,
          }}>
            <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{s.label}</div>
            <div style={{ font: 'var(--text-h2)', color: s.color, marginTop: 4 }}>{s.value}</div>
          </div>
        ))}
      </div>

      {/* Chart Area */}
      <div style={{
        background: 'var(--color-surface)',
        borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-border-light)',
        padding: 20,
        marginBottom: 24,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <span style={{ font: 'var(--text-h3)' }}>交易量/金额趋势</span>
          <div style={{ display: 'flex', gap: 8 }}>
            {['1H', '24H', '7D', '30D'].map(p => (
              <button key={p} style={{
                padding: '4px 10px',
                border: '1px solid var(--color-border)',
                borderRadius: 'var(--radius-full)',
                background: p === '24H' ? 'var(--color-primary)' : 'none',
                color: p === '24H' ? 'white' : 'var(--color-text-tertiary)',
                cursor: 'pointer',
                font: 'var(--text-caption)',
              }}>{p}</button>
            ))}
          </div>
        </div>
        <div style={{
          height: 260,
          background: 'var(--color-gray-50)',
          borderRadius: 'var(--radius-sm)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'var(--color-text-tertiary)',
        }}>
          Recharts 双轴图 (交易量柱状 + 金额折线)
        </div>
      </div>

      {/* Orders Table */}
      <div style={{
        background: 'var(--color-surface)',
        borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-border-light)',
        overflow: 'hidden',
      }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--color-border-light)', display: 'flex', justifyContent: 'space-between' }}>
          <span style={{ font: 'var(--text-h3)' }}>订单管理</span>
          <input
            placeholder="搜索订单号..."
            style={{
              width: 240,
              height: 32,
              border: '1px solid var(--color-border)',
              borderRadius: 'var(--radius-sm)',
              padding: '0 12px',
              font: 'var(--text-body-sm)',
            }}
          />
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ background: 'var(--color-gray-50)' }}>
              {['订单号', '类型', '券名称', '买方', '卖方', '金额', '状态', '时间'].map(h => (
                <th key={h} style={{
                  font: 'var(--text-label-sm)',
                  color: 'var(--color-text-tertiary)',
                  padding: '10px 14px',
                  textAlign: 'left',
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {Array.from({ length: 8 }, (_, i) => (
              <tr key={i} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>
                  GNX-20260210-{String(1200 - i).padStart(6, '0')}
                </td>
                <td style={{ font: 'var(--text-label-sm)', padding: '10px 14px' }}>
                  {['购买', '转售', '核销', '转赠'][i % 4]}
                </td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px' }}>
                  {['星巴克 $25', 'Amazon $100', 'Nike $80', 'Target $30'][i % 4]}
                </td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px' }}>U-{String(i + 1).padStart(3, '0')}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px' }}>
                  {i % 4 === 1 ? `U-${String(10 + i).padStart(3, '0')}` : '-'}
                </td>
                <td style={{
                  font: 'var(--text-label-sm)',
                  color: i % 3 === 0 ? 'var(--color-error)' : 'var(--color-primary)',
                  padding: '10px 14px',
                }}>
                  ${[21.25, 85.00, 68.00, 24.00][i % 4].toFixed(2)}
                </td>
                <td style={{ padding: '10px 14px' }}>
                  <span style={{
                    padding: '2px 8px',
                    borderRadius: 'var(--radius-full)',
                    background: i < 6 ? 'var(--color-success-light)' : 'var(--color-warning-light)',
                    color: i < 6 ? 'var(--color-success)' : 'var(--color-warning)',
                    font: 'var(--text-caption)',
                  }}>
                    {i < 6 ? '完成' : '争议'}
                  </span>
                </td>
                <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', padding: '10px 14px' }}>
                  14:{30 + i}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};
