import React from 'react';

/**
 * D1. 平台运营仪表盘
 *
 * 平台总交易量/金额、活跃用户数、发行方数量、券流通总量、
 * 实时交易流、系统健康状态
 */

interface StatCard {
  label: string;
  value: string;
  change: string;
  trend: 'up' | 'down';
  color: string;
}

const stats: StatCard[] = [
  { label: '总交易量', value: '156,890', change: '+12.3%', trend: 'up', color: 'var(--color-primary)' },
  { label: '交易金额', value: '$4,523,456', change: '+8.7%', trend: 'up', color: 'var(--color-success)' },
  { label: '活跃用户', value: '28,456', change: '+5.2%', trend: 'up', color: 'var(--color-info)' },
  { label: '发行方数量', value: '342', change: '+15', trend: 'up', color: 'var(--color-warning)' },
  { label: '券流通总量', value: '1,234,567', change: '-2.1%', trend: 'down', color: 'var(--color-primary-dark)' },
  { label: '系统健康', value: '99.97%', change: 'Normal', trend: 'up', color: 'var(--color-success)' },
];

export const DashboardPage: React.FC = () => {
  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 24 }}>
        运营总览
      </h1>

      {/* Stats Grid */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 16,
        marginBottom: 24,
      }}>
        {stats.map(stat => (
          <div key={stat.label} style={{
            background: 'var(--color-surface)',
            borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)',
            padding: 20,
          }}>
            <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 8 }}>
              {stat.label}
            </div>
            <div style={{ font: 'var(--text-h1)', color: stat.color }}>
              {stat.value}
            </div>
            <div style={{
              font: 'var(--text-label-sm)',
              color: stat.trend === 'up' ? 'var(--color-success)' : 'var(--color-error)',
              marginTop: 4,
            }}>
              {stat.change}
            </div>
          </div>
        ))}
      </div>

      {/* Charts Row */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, marginBottom: 24 }}>
        {/* Transaction Volume Chart */}
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          padding: 20,
        }}>
          <div style={{ font: 'var(--text-h3)', marginBottom: 16 }}>交易量趋势</div>
          <div style={{
            height: 240,
            background: 'var(--color-gray-50)',
            borderRadius: 'var(--radius-sm)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'var(--color-text-tertiary)',
          }}>
            Recharts / ECharts 折线图
          </div>
        </div>

        {/* Transaction Type Pie */}
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          padding: 20,
        }}>
          <div style={{ font: 'var(--text-h3)', marginBottom: 16 }}>交易类型占比</div>
          <div style={{
            height: 240,
            background: 'var(--color-gray-50)',
            borderRadius: 'var(--radius-sm)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'var(--color-text-tertiary)',
          }}>
            饼图 (一级/二级/核销/转赠)
          </div>
        </div>
      </div>

      {/* Real-time Transaction Feed + System Health */}
      <div style={{ display: 'grid', gridTemplateColumns: '3fr 1fr', gap: 16 }}>
        {/* Real-time Feed */}
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          padding: 20,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <div style={{ font: 'var(--text-h3)' }}>实时交易流</div>
            <span style={{
              width: 8, height: 8,
              borderRadius: '50%',
              background: 'var(--color-success)',
              display: 'inline-block',
              animation: 'pulse 2s infinite',
            }} />
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                {['时间', '类型', '订单号', '金额', '状态'].map(h => (
                  <th key={h} style={{
                    font: 'var(--text-label-sm)',
                    color: 'var(--color-text-tertiary)',
                    padding: '8px 12px',
                    textAlign: 'left',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                { time: '14:32:15', type: '购买', order: 'GNX-20260210-001234', amount: '$21.25', status: '完成' },
                { time: '14:31:58', type: '核销', order: 'GNX-20260210-001233', amount: '$50.00', status: '完成' },
                { time: '14:31:42', type: '转售', order: 'GNX-20260210-001232', amount: '$85.00', status: '完成' },
                { time: '14:31:20', type: '购买', order: 'GNX-20260210-001231', amount: '$42.50', status: '处理中' },
                { time: '14:30:55', type: '转赠', order: 'GNX-20260210-001230', amount: '$30.00', status: '完成' },
              ].map((row, i) => (
                <tr key={i} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', padding: '10px 12px' }}>{row.time}</td>
                  <td style={{ font: 'var(--text-label-sm)', padding: '10px 12px' }}>{row.type}</td>
                  <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 12px' }}>{row.order}</td>
                  <td style={{ font: 'var(--text-label-sm)', color: 'var(--color-primary)', padding: '10px 12px' }}>{row.amount}</td>
                  <td style={{ padding: '10px 12px' }}>
                    <span style={{
                      padding: '2px 8px',
                      borderRadius: 'var(--radius-full)',
                      font: 'var(--text-caption)',
                      background: row.status === '完成' ? 'var(--color-success-light)' : 'var(--color-warning-light)',
                      color: row.status === '完成' ? 'var(--color-success)' : 'var(--color-warning)',
                    }}>
                      {row.status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* System Health */}
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          padding: 20,
        }}>
          <div style={{ font: 'var(--text-h3)', marginBottom: 16 }}>系统健康</div>
          {[
            { name: 'API服务', status: 'healthy', latency: '12ms' },
            { name: '数据库', status: 'healthy', latency: '3ms' },
            { name: 'Genex Chain', status: 'healthy', latency: '156ms' },
            { name: '缓存服务', status: 'healthy', latency: '1ms' },
            { name: '消息队列', status: 'warning', latency: '45ms' },
          ].map(service => (
            <div key={service.name} style={{
              display: 'flex',
              alignItems: 'center',
              padding: '10px 0',
              borderBottom: '1px solid var(--color-border-light)',
            }}>
              <span style={{
                width: 8, height: 8,
                borderRadius: '50%',
                background: service.status === 'healthy' ? 'var(--color-success)' : 'var(--color-warning)',
                marginRight: 8,
              }} />
              <span style={{ flex: 1, font: 'var(--text-body-sm)' }}>{service.name}</span>
              <span style={{
                font: 'var(--text-caption)',
                color: 'var(--color-text-tertiary)',
              }}>{service.latency}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
