'use client';

import React, { useState } from 'react';

/**
 * D7. 系统管理
 *
 * 管理员账号（RBAC）、系统配置、合约管理、系统监控
 */

export const SystemManagementPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'admins' | 'config' | 'contracts' | 'monitor'>('admins');

  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', marginBottom: 24 }}>系统管理</h1>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 4, marginBottom: 20, borderBottom: '1px solid var(--color-border-light)' }}>
        {[
          { key: 'admins', label: '管理员账号' },
          { key: 'config', label: '系统配置' },
          { key: 'contracts', label: '合约管理' },
          { key: 'monitor', label: '系统监控' },
        ].map(t => (
          <button
            key={t.key}
            onClick={() => setActiveTab(t.key as typeof activeTab)}
            style={{
              padding: '10px 16px',
              border: 'none',
              borderBottom: activeTab === t.key ? '2px solid var(--color-primary)' : '2px solid transparent',
              background: 'none',
              color: activeTab === t.key ? 'var(--color-primary)' : 'var(--color-text-tertiary)',
              cursor: 'pointer',
              font: 'var(--text-label)',
            }}
          >{t.label}</button>
        ))}
      </div>

      {/* Admin Accounts */}
      {activeTab === 'admins' && (
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          overflow: 'hidden',
        }}>
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--color-border-light)', display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ font: 'var(--text-h3)' }}>管理员列表</span>
            <button style={{
              padding: '6px 14px', border: 'none', borderRadius: 'var(--radius-sm)',
              background: 'var(--color-primary)', color: 'white', cursor: 'pointer', font: 'var(--text-label-sm)',
            }}>+ 添加管理员</button>
          </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>
              {[
                { account: 'admin@genex.io', name: '超级管理员', role: '超管', lastLogin: '2026-02-10 14:00', active: true },
                { account: 'ops@genex.io', name: '运营', role: '运营管理', lastLogin: '2026-02-10 09:30', active: true },
                { account: 'risk@genex.io', name: '风控', role: '风控审核', lastLogin: '2026-02-09 18:00', active: true },
                { account: 'cs@genex.io', name: '客服', role: '客服处理', lastLogin: '2026-02-08 14:30', active: false },
              ].map(admin => (
                <tr key={admin.account} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px' }}>{admin.account}</td>
                  <td style={{ font: 'var(--text-label-sm)', padding: '10px 14px' }}>{admin.name}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{
                      padding: '2px 8px', borderRadius: 'var(--radius-full)',
                      background: 'var(--color-primary-surface)', color: 'var(--color-primary)',
                      font: 'var(--text-caption)', fontWeight: 500,
                    }}>{admin.role}</span>
                  </td>
                  <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', padding: '10px 14px' }}>{admin.lastLogin}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{
                      width: 8, height: 8, borderRadius: '50%', display: 'inline-block',
                      background: admin.active ? 'var(--color-success)' : 'var(--color-text-disabled)',
                    }} />
                  </td>
                  <td style={{ padding: '10px 14px' }}>
                    <button style={{ padding: '4px 10px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', font: 'var(--text-caption)' }}>编辑</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* System Config */}
      {activeTab === 'config' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {[
            { title: '手续费率设置', items: [{ label: '一级市场手续费', value: '2.5%' }, { label: '二级市场手续费', value: '3.0%' }, { label: '提现手续费', value: '1.0%' }] },
            { title: 'KYC阈值配置', items: [{ label: 'L0每日限额', value: '$100' }, { label: 'L1每日限额', value: '$1,000' }, { label: 'L2每日限额', value: '$10,000' }] },
            { title: '交易限额配置', items: [{ label: '单笔最大金额', value: '$50,000' }, { label: '每日最大金额', value: '$100,000' }, { label: '大额交易阈值', value: '$10,000' }] },
            { title: '系统参数', items: [{ label: 'Utility Track价格上限', value: '≤面值' }, { label: '最大转售次数', value: '5次' }, { label: 'Breakage阈值', value: '3年' }] },
          ].map(section => (
            <div key={section.title} 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', marginBottom: 16 }}>
                <span style={{ font: 'var(--text-h3)' }}>{section.title}</span>
                <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-primary)',
                }}>编辑</button>
              </div>
              {section.items.map((item, i) => (
                <div key={item.label} style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  padding: '10px 0',
                  borderTop: i > 0 ? '1px solid var(--color-border-light)' : 'none',
                }}>
                  <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-secondary)' }}>{item.label}</span>
                  <span style={{ font: 'var(--text-label-sm)', color: 'var(--color-primary)' }}>{item.value}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      )}

      {/* Contract Management */}
      {activeTab === 'contracts' && (
        <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: 'CouponNFT', address: '0x1234...abcd', version: 'v1.2.0', status: '运行中' },
            { name: 'Settlement', address: '0x5678...efgh', version: 'v1.1.0', status: '运行中' },
            { name: 'Marketplace', address: '0x9abc...ijkl', version: 'v1.0.0', status: '运行中' },
            { name: 'Oracle', address: '0xdef0...mnop', version: 'v1.0.0', status: '运行中' },
          ].map(c => (
            <div key={c.name} style={{
              display: 'flex', alignItems: 'center', padding: '14px 0',
              borderBottom: '1px solid var(--color-border-light)',
            }}>
              <div style={{ flex: 1 }}>
                <div style={{ font: 'var(--text-label)' }}>{c.name}</div>
                <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', fontFamily: 'var(--font-family-mono)' }}>{c.address}</div>
              </div>
              <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginRight: 16 }}>{c.version}</span>
              <span style={{
                padding: '2px 8px', borderRadius: 'var(--radius-full)',
                background: 'var(--color-success-light)', color: 'var(--color-success)',
                font: 'var(--text-caption)',
              }}>{c.status}</span>
            </div>
          ))}
        </div>
      )}

      {/* System Monitor */}
      {activeTab === 'monitor' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {/* Service 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 Gateway', status: 'healthy', cpu: '23%', mem: '45%' },
              { name: 'Auth Service', status: 'healthy', cpu: '12%', mem: '34%' },
              { name: 'Trading Engine', status: 'healthy', cpu: '56%', mem: '67%' },
              { name: 'Genex Chain Node', status: 'healthy', cpu: '34%', mem: '78%' },
              { name: 'Redis Cache', status: 'healthy', cpu: '8%', mem: '52%' },
            ].map(s => (
              <div key={s.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: 'var(--color-success)', marginRight: 10 }} />
                <span style={{ flex: 1, font: 'var(--text-body-sm)' }}>{s.name}</span>
                <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginRight: 16 }}>CPU {s.cpu}</span>
                <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>MEM {s.mem}</span>
              </div>
            ))}
          </div>

          {/* API Response Time */}
          <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 }}>API 响应时间</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)',
            }}>
              P50 / P95 / P99 延迟趋势图
            </div>
          </div>
        </div>
      )}
    </div>
  );
};
