import React from 'react';

/**
 * SOX Compliance (Sarbanes-Oxley) - SOX合规管理
 *
 * 管理SOX 404内部控制合规状态，包括ICFR、ITGC、访问控制、变更管理、运营控制等，
 * 追踪测试结果、缺陷修复、审计师审核进度。
 */

const overallScore = 78;

const controlCategories = [
  {
    name: '财务报告内控 (ICFR)',
    description: '确保财务报告的准确性和完整性，包括收入确认、费用分摊、资产估值等关键控制点',
    controls: [
      { name: '收入确认控制', result: '通过', lastTest: '2026-01-15', nextTest: '2026-04-15' },
      { name: '费用审批流程', result: '通过', lastTest: '2026-01-20', nextTest: '2026-04-20' },
      { name: '期末关账控制', result: '发现缺陷', lastTest: '2026-02-01', nextTest: '2026-03-01' },
      { name: '合并报表控制', result: '通过', lastTest: '2026-01-25', nextTest: '2026-04-25' },
    ],
  },
  {
    name: 'IT通用控制 (ITGC)',
    description: '信息系统通用控制，包括系统开发、程序变更、计算机操作和数据安全',
    controls: [
      { name: '系统开发生命周期', result: '通过', lastTest: '2026-01-10', nextTest: '2026-04-10' },
      { name: '程序变更管理', result: '通过', lastTest: '2026-01-18', nextTest: '2026-04-18' },
      { name: '数据备份与恢复', result: '发现缺陷', lastTest: '2026-02-03', nextTest: '2026-03-03' },
      { name: '逻辑安全控制', result: '待测试', lastTest: '-', nextTest: '2026-02-20' },
    ],
  },
  {
    name: '访问控制',
    description: '系统与数据访问权限管理，包括用户权限分配、特权账户管理、职责分离',
    controls: [
      { name: '用户权限审查', result: '通过', lastTest: '2026-02-01', nextTest: '2026-05-01' },
      { name: '特权账户管理', result: '通过', lastTest: '2026-01-28', nextTest: '2026-04-28' },
      { name: '职责分离 (SoD)', result: '发现缺陷', lastTest: '2026-02-05', nextTest: '2026-03-05' },
    ],
  },
  {
    name: '变更管理',
    description: '对生产环境变更的审批、测试、部署流程控制',
    controls: [
      { name: '变更审批流程', result: '通过', lastTest: '2026-01-22', nextTest: '2026-04-22' },
      { name: '部署前测试验证', result: '通过', lastTest: '2026-01-30', nextTest: '2026-04-30' },
      { name: '紧急变更管理', result: '待测试', lastTest: '-', nextTest: '2026-02-25' },
    ],
  },
  {
    name: '运营控制',
    description: '日常运营流程控制，包括交易监控、对账、异常处理',
    controls: [
      { name: '日终对账', result: '通过', lastTest: '2026-02-08', nextTest: '2026-05-08' },
      { name: '异常交易监控', result: '通过', lastTest: '2026-02-06', nextTest: '2026-05-06' },
      { name: '客户资金隔离', result: '通过', lastTest: '2026-02-04', nextTest: '2026-05-04' },
    ],
  },
];

const deficiencies = [
  { id: 'DEF-001', control: '期末关账控制', category: 'ICFR', severity: '重大缺陷', description: '部分手工调整缺少二级审批', foundDate: '2026-02-01', dueDate: '2026-03-01', status: '整改中', owner: 'CFO办公室' },
  { id: 'DEF-002', control: '数据备份与恢复', category: 'ITGC', severity: '一般缺陷', description: 'DR演练未按季度执行', foundDate: '2026-02-03', dueDate: '2026-03-15', status: '整改中', owner: 'IT部门' },
  { id: 'DEF-003', control: '职责分离 (SoD)', category: '访问控制', severity: '重大缺陷', description: '3名用户同时拥有创建与审批权限', foundDate: '2026-02-05', dueDate: '2026-02-20', status: '待整改', owner: '合规部门' },
];

const auditorReview = [
  { phase: '审计计划确认', status: 'done', date: '2026-01-05', auditor: 'Deloitte' },
  { phase: 'Walk-through 测试', status: 'done', date: '2026-01-20', auditor: 'Deloitte' },
  { phase: '控制有效性测试', status: 'progress', date: '2026-02-10', auditor: 'Deloitte' },
  { phase: '缺陷评估与分类', status: 'pending', date: '2026-03-01', auditor: 'Deloitte' },
  { phase: '管理层报告出具', status: 'pending', date: '2026-03-15', auditor: 'Deloitte' },
  { phase: '最终审计意见', status: 'pending', date: '2026-04-01', auditor: 'Deloitte' },
];

const getResultStyle = (result: string) => {
  switch (result) {
    case '通过':
      return { background: 'var(--color-success-light)', color: 'var(--color-success)' };
    case '发现缺陷':
      return { background: 'var(--color-error-light)', color: 'var(--color-error)' };
    case '待测试':
      return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
    default:
      return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
  }
};

const getSeverityStyle = (severity: string) => {
  switch (severity) {
    case '重大缺陷':
      return { background: 'var(--color-error-light)', color: 'var(--color-error)' };
    case '一般缺陷':
      return { background: 'var(--color-warning-light)', color: 'var(--color-warning)' };
    case '观察项':
      return { background: 'var(--color-info-light)', color: 'var(--color-info)' };
    default:
      return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
  }
};

export const SoxCompliancePage: React.FC = () => {
  const totalControls = controlCategories.reduce((sum, cat) => sum + cat.controls.length, 0);
  const passedControls = controlCategories.reduce((sum, cat) => sum + cat.controls.filter(c => c.result === '通过').length, 0);
  const defectControls = controlCategories.reduce((sum, cat) => sum + cat.controls.filter(c => c.result === '发现缺陷').length, 0);
  const pendingControls = controlCategories.reduce((sum, cat) => sum + cat.controls.filter(c => c.result === '待测试').length, 0);

  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 24 }}>SOX合规管理</h1>

      {/* Compliance Score Gauge + Summary Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 3fr', gap: 24, marginBottom: 24 }}>
        {/* Gauge */}
        <div style={{
          background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)', padding: 24,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 12 }}>整体合规评分</div>
          <div style={{
            width: 120, height: 120, borderRadius: '50%', position: 'relative',
            background: `conic-gradient(${overallScore >= 80 ? 'var(--color-success)' : overallScore >= 60 ? 'var(--color-warning)' : 'var(--color-error)'} ${overallScore * 3.6}deg, var(--color-gray-100) 0deg)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{
              width: 90, height: 90, borderRadius: '50%', background: 'var(--color-surface)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <span style={{ font: 'var(--text-h1)', color: overallScore >= 80 ? 'var(--color-success)' : overallScore >= 60 ? 'var(--color-warning)' : 'var(--color-error)' }}>
                {overallScore}
              </span>
            </div>
          </div>
          <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginTop: 8 }}>满分 100</div>
        </div>

        {/* Summary Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            { label: '总控制点', value: String(totalControls), color: 'var(--color-primary)' },
            { label: '测试通过', value: String(passedControls), color: 'var(--color-success)' },
            { label: '发现缺陷', value: String(defectControls), color: 'var(--color-error)' },
            { label: '待测试', value: String(pendingControls), 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: 20,
            }}>
              <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 8 }}>{s.label}</div>
              <div style={{ font: 'var(--text-h1)', color: s.color }}>{s.value}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Control Categories */}
      <div style={{
        background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-border-light)', marginBottom: 24, overflow: 'hidden',
      }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--color-border-light)' }}>
          <h2 style={{ font: 'var(--text-h2)', color: 'var(--color-text-primary)' }}>内部控制类别</h2>
        </div>
        {controlCategories.map((cat, catIdx) => (
          <div key={catIdx} style={{ borderBottom: catIdx < controlCategories.length - 1 ? '2px solid var(--color-border-light)' : 'none' }}>
            {/* Category Header */}
            <div style={{ padding: '14px 20px', background: 'var(--color-gray-50)' }}>
              <div style={{ font: 'var(--text-h3)', color: 'var(--color-text-primary)', marginBottom: 4 }}>{cat.name}</div>
              <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{cat.description}</div>
            </div>
            {/* Controls */}
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
                <tr>
                  {['控制点', '测试结果', '上次测试', '下次测试'].map(h => (
                    <th key={h} style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-tertiary)', padding: '8px 20px', textAlign: 'left' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {cat.controls.map((ctrl, ctrlIdx) => (
                  <tr key={ctrlIdx} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                    <td style={{ font: 'var(--text-body-sm)', padding: '10px 20px', color: 'var(--color-text-primary)' }}>{ctrl.name}</td>
                    <td style={{ padding: '10px 20px' }}>
                      <span style={{
                        padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                        ...getResultStyle(ctrl.result),
                      }}>{ctrl.result}</span>
                    </td>
                    <td style={{ font: 'var(--text-body-sm)', padding: '10px 20px', color: 'var(--color-text-tertiary)' }}>{ctrl.lastTest}</td>
                    <td style={{ font: 'var(--text-body-sm)', padding: '10px 20px', color: 'var(--color-text-secondary)' }}>{ctrl.nextTest}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24 }}>
        {/* Deficiency Tracking */}
        <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)' }}>
            <h2 style={{ font: 'var(--text-h2)', color: 'var(--color-text-primary)' }}>缺陷追踪</h2>
          </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>
              {deficiencies.map(d => (
                <tr key={d.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 14px' }}>{d.id}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{d.control}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{
                      padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                      ...getSeverityStyle(d.severity),
                    }}>{d.severity}</span>
                  </td>
                  <td style={{ font: 'var(--text-caption)', padding: '10px 14px', color: 'var(--color-text-secondary)', maxWidth: 200 }}>{d.description}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{d.dueDate}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{
                      padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                      background: d.status === '整改中' ? 'var(--color-warning-light)' : 'var(--color-error-light)',
                      color: d.status === '整改中' ? 'var(--color-warning)' : 'var(--color-error)',
                    }}>{d.status}</span>
                  </td>
                  <td style={{ font: 'var(--text-caption)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{d.owner}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Auditor Review Status */}
        <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: 4 }}>审计师审核进度</h2>
          <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginBottom: 16 }}>External Auditor: Deloitte</div>
          {auditorReview.map((phase, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', padding: '10px 0', borderBottom: '1px solid var(--color-border-light)' }}>
              <div style={{
                width: 20, height: 20, borderRadius: '50%', marginRight: 12, marginTop: 2, flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: phase.status === 'done' ? 'var(--color-success)' : phase.status === 'progress' ? 'var(--color-warning)' : 'var(--color-gray-200)',
                color: phase.status === 'pending' ? 'var(--color-text-tertiary)' : 'white', fontSize: 10,
              }}>
                {phase.status === 'done' ? '✓' : phase.status === 'progress' ? '...' : '○'}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ font: 'var(--text-body)', color: 'var(--color-text-primary)' }}>{phase.phase}</div>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginTop: 2 }}>{phase.date}</div>
              </div>
              <span style={{
                font: 'var(--text-caption)',
                color: phase.status === 'done' ? 'var(--color-success)' : phase.status === 'progress' ? 'var(--color-warning)' : 'var(--color-text-tertiary)',
              }}>
                {phase.status === 'done' ? '已完成' : phase.status === 'progress' ? '进行中' : '待开始'}
              </span>
            </div>
          ))}
          {/* Progress Bar */}
          <div style={{ marginTop: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-secondary)' }}>审计进度</span>
              <span style={{ font: 'var(--text-label-sm)', color: 'var(--color-primary)' }}>33%</span>
            </div>
            <div style={{ height: 8, background: 'var(--color-gray-100)', borderRadius: 'var(--radius-full)', overflow: 'hidden' }}>
              <div style={{ width: '33%', height: '100%', background: 'var(--color-primary)', borderRadius: 'var(--radius-full)' }} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
