import React from 'react';

/**
 * D5. 风控中心
 *
 * 风险仪表盘、可疑交易、黑名单管理、OFAC筛查日志
 */

export const RiskCenterPage: React.FC = () => {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <h1 style={{ font: 'var(--text-h1)' }}>风控中心</h1>
        <button style={{
          padding: '8px 16px',
          border: '1px solid var(--color-primary)',
          borderRadius: 'var(--radius-full)',
          background: 'var(--color-primary-surface)',
          color: 'var(--color-primary)',
          cursor: 'pointer',
          font: 'var(--text-label-sm)',
        }}>
          ✨ AI 风险预警
        </button>
      </div>

      {/* Risk Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {[
          { label: '风险事件', value: '23', color: 'var(--color-error)', bg: 'var(--color-error-light)' },
          { label: '可疑交易', value: '15', color: 'var(--color-warning)', bg: 'var(--color-warning-light)' },
          { label: '冻结账户', value: '3', color: 'var(--color-info)', bg: 'var(--color-info-light)' },
          { label: 'OFAC命中', value: '0', color: 'var(--color-success)', bg: 'var(--color-success-light)' },
        ].map(s => (
          <div key={s.label} style={{
            background: s.bg,
            borderRadius: 'var(--radius-md)',
            padding: 16,
          }}>
            <div style={{ font: 'var(--text-body-sm)', color: s.color, opacity: 0.8 }}>{s.label}</div>
            <div style={{ font: 'var(--text-h1)', color: s.color, marginTop: 4 }}>{s.value}</div>
          </div>
        ))}
      </div>

      {/* AI Risk Alerts */}
      <div style={{
        background: 'var(--color-primary-surface)',
        borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-primary)22',
        padding: 16,
        marginBottom: 24,
      }}>
        <div style={{ font: 'var(--text-label)', color: 'var(--color-primary)', marginBottom: 12 }}>
          🤖 AI 风险预警
        </div>
        {[
          '检测到异常模式：用户U-045在30分钟内完成12笔交易，总金额$4,560，建议人工审核',
          '可疑关联账户：U-078和U-091 IP地址相同但KYC信息不同，可能存在刷单行为',
        ].map((alert, i) => (
          <div key={i} style={{
            padding: 12,
            background: 'var(--color-surface)',
            borderRadius: 'var(--radius-sm)',
            font: 'var(--text-body-sm)',
            marginBottom: i < 1 ? 8 : 0,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}>
            <span>{alert}</span>
            <button style={{
              padding: '4px 12px',
              border: 'none',
              borderRadius: 'var(--radius-sm)',
              background: 'var(--color-primary)',
              color: 'white',
              cursor: 'pointer',
              font: 'var(--text-caption)',
              whiteSpace: 'nowrap',
              marginLeft: 12,
            }}>处理</button>
          </div>
        ))}
      </div>

      {/* Suspicious Transactions 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', font: 'var(--text-h3)', borderBottom: '1px solid var(--color-border-light)' }}>
          可疑交易
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr style={{ background: 'var(--color-gray-50)' }}>
              {['交易ID', '用户', '异常类型', '金额', '时间', '风险评分', '操作'].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>
            {[
              { id: 'TXN-8901', user: 'U-045', type: '高频交易', amount: '$4,560', time: '14:15', score: 87 },
              { id: 'TXN-8900', user: 'U-078', type: '大额单笔', amount: '$8,900', time: '13:45', score: 72 },
              { id: 'TXN-8899', user: 'U-091', type: '关联账户', amount: '$3,200', time: '12:30', score: 65 },
              { id: 'TXN-8898', user: 'U-023', type: '异常IP', amount: '$1,500', time: '11:20', score: 58 },
            ].map(tx => (
              <tr key={tx.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 14px' }}>{tx.id}</td>
                <td style={{ font: 'var(--text-label-sm)', padding: '10px 14px' }}>{tx.user}</td>
                <td style={{ padding: '10px 14px' }}>
                  <span style={{
                    padding: '2px 8px',
                    borderRadius: 'var(--radius-full)',
                    background: 'var(--color-warning-light)',
                    color: 'var(--color-warning)',
                    font: 'var(--text-caption)',
                  }}>{tx.type}</span>
                </td>
                <td style={{ font: 'var(--text-label-sm)', color: 'var(--color-error)', padding: '10px 14px' }}>{tx.amount}</td>
                <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', padding: '10px 14px' }}>{tx.time}</td>
                <td style={{ padding: '10px 14px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{
                      width: 60, height: 6,
                      background: 'var(--color-gray-100)',
                      borderRadius: 3,
                      overflow: 'hidden',
                    }}>
                      <div style={{
                        width: `${tx.score}%`,
                        height: '100%',
                        background: tx.score >= 80 ? 'var(--color-error)' : tx.score >= 60 ? 'var(--color-warning)' : 'var(--color-info)',
                        borderRadius: 3,
                      }} />
                    </div>
                    <span style={{ font: 'var(--text-caption)', color: tx.score >= 80 ? 'var(--color-error)' : 'var(--color-warning)' }}>
                      {tx.score}
                    </span>
                  </div>
                </td>
                <td style={{ padding: '10px 14px', display: 'flex', gap: 4 }}>
                  <button style={{ padding: '4px 10px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', font: 'var(--text-caption)', color: 'var(--color-text-secondary)' }}>标记</button>
                  <button style={{ padding: '4px 10px', border: 'none', borderRadius: 'var(--radius-sm)', background: 'var(--color-error)', cursor: 'pointer', font: 'var(--text-caption)', color: 'white' }}>冻结</button>
                  <button style={{ padding: '4px 10px', border: 'none', borderRadius: 'var(--radius-sm)', background: 'var(--color-warning)', cursor: 'pointer', font: 'var(--text-caption)', color: 'white' }}>SAR</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};
