import React from 'react';

/**
 * D4. 链上监控 - 合约状态与链上数据
 *
 * 合约状态、铸造/销毁记录、Gas费监控、链上异常检测
 * 注：此页面仅对平台管理员可见，发行方/消费者不可见
 */

const contractStats = [
  { label: 'CouponFactory', status: 'Active', txCount: '45,231', lastBlock: '#18,234,567' },
  { label: 'Marketplace', status: 'Active', txCount: '12,890', lastBlock: '#18,234,560' },
  { label: 'RedemptionGateway', status: 'Active', txCount: '38,456', lastBlock: '#18,234,565' },
  { label: 'StablecoinBridge', status: 'Active', txCount: '8,901', lastBlock: '#18,234,555' },
];

const recentEvents = [
  { event: 'Mint', detail: 'Starbucks $25 Gift Card x500', hash: '0xabc...def', time: '2分钟前', type: 'mint' },
  { event: 'Transfer', detail: 'P2P Transfer #1234', hash: '0x123...456', time: '5分钟前', type: 'transfer' },
  { event: 'Redeem', detail: 'Batch Redeem x8', hash: '0x789...abc', time: '8分钟前', type: 'redeem' },
  { event: 'Burn', detail: 'Expired coupons x12', hash: '0xdef...789', time: '15分钟前', type: 'burn' },
];

const eventColors: Record<string, string> = {
  mint: 'var(--color-success)',
  transfer: 'var(--color-info)',
  redeem: 'var(--color-primary)',
  burn: 'var(--color-error)',
};

export const ChainMonitorPage: React.FC = () => {
  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 24 }}>链上监控</h1>

      {/* Contract Status */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {contractStats.map(c => (
          <div key={c.label} style={{
            background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)', padding: 16,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <span style={{ font: 'var(--text-label)', color: 'var(--color-text-primary)' }}>{c.label}</span>
              <span style={{
                padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)',
                background: 'var(--color-success-light)', color: 'var(--color-success)', fontWeight: 600,
              }}>{c.status}</span>
            </div>
            <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>TX: {c.txCount} · Block: {c.lastBlock}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Chain Events */}
        <div style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-light)', padding: 20 }}>
          <h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>最近链上事件</h2>
          {recentEvents.map((e, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--color-border-light)' }}>
              <div style={{
                width: 8, height: 8, borderRadius: '50%', background: eventColors[e.type], marginRight: 12,
              }} />
              <div style={{ flex: 1 }}>
                <div style={{ font: 'var(--text-label)', color: 'var(--color-text-primary)' }}>{e.event}</div>
                <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{e.detail}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ font: 'var(--text-caption)', fontFamily: 'var(--font-family-mono)', color: 'var(--color-text-link)' }}>{e.hash}</div>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{e.time}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Gas Monitor */}
        <div style={{ background: 'var(--color-surface)', borderRadius: 'var(--radius-md)', border: '1px solid var(--color-border-light)', padding: 20 }}>
          <h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>Gas费监控</h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 16 }}>
            {[
              { label: '当前Gas', value: '12 gwei', color: 'var(--color-success)' },
              { label: '今日均值', value: '18 gwei', color: 'var(--color-info)' },
              { label: '今日Gas支出', value: '$1,234', color: 'var(--color-warning)' },
            ].map(g => (
              <div key={g.label} style={{ textAlign: 'center', padding: 12, background: 'var(--color-gray-50)', borderRadius: 'var(--radius-sm)' }}>
                <div style={{ font: 'var(--text-h3)', color: g.color }}>{g.value}</div>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{g.label}</div>
              </div>
            ))}
          </div>
          <div style={{
            height: 160, background: 'var(--color-gray-50)', borderRadius: 'var(--radius-sm)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--color-text-tertiary)', font: 'var(--text-body)',
          }}>Gas费24小时趋势图</div>
        </div>
      </div>
    </div>
  );
};
