'use client';

import React, { useState } from 'react';

/**
 * D6. 合规报表
 *
 * SAR管理、CTR管理、审计日志、监管报表
 */

export const CompliancePage: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'sar' | 'ctr' | 'audit' | 'reports'>('sar');

  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: 'none',
          borderRadius: 'var(--radius-full)',
          background: 'var(--color-primary)',
          color: 'white',
          cursor: 'pointer',
          font: 'var(--text-label-sm)',
        }}>
          ✨ AI 生成报表
        </button>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 4, marginBottom: 20, borderBottom: '1px solid var(--color-border-light)', paddingBottom: 0 }}>
        {[
          { key: 'sar', label: 'SAR管理', badge: 3 },
          { key: 'ctr', label: 'CTR管理', badge: 0 },
          { key: 'audit', label: '审计日志', badge: 0 },
          { key: 'reports', label: '监管报表', badge: 0 },
        ].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)',
              display: 'flex',
              alignItems: 'center',
              gap: 6,
            }}
          >
            {t.label}
            {t.badge > 0 && (
              <span style={{
                padding: '1px 6px',
                borderRadius: 'var(--radius-full)',
                background: 'var(--color-error)',
                color: 'white',
                fontSize: 10,
              }}>{t.badge}</span>
            )}
          </button>
        ))}
      </div>

      {/* SAR Tab Content */}
      {activeTab === 'sar' && (
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          overflow: 'hidden',
        }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: 'var(--color-gray-50)' }}>
                {['SAR编号', '相关交易', '涉及用户', '金额', '风险类型', '状态', '创建时间', '操作'].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: 'SAR-2026-001', txn: 'TXN-8901', user: 'U-045', amount: '$4,560', type: '高频交易', status: '待提交' },
                { id: 'SAR-2026-002', txn: 'TXN-8900', user: 'U-078', amount: '$8,900', type: '大额异常', status: '已提交' },
                { id: 'SAR-2026-003', txn: 'TXN-8850', user: 'U-012', amount: '$12,000', type: '结构化交易', status: '已提交' },
              ].map(sar => (
                <tr key={sar.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 14px' }}>{sar.id}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-link)' }}>{sar.txn}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px' }}>{sar.user}</td>
                  <td style={{ font: 'var(--text-label-sm)', color: 'var(--color-error)', padding: '10px 14px' }}>{sar.amount}</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)',
                    }}>{sar.type}</span>
                  </td>
                  <td style={{ padding: '10px 14px' }}>
                    <span style={{
                      padding: '2px 8px', borderRadius: 'var(--radius-full)',
                      background: sar.status === '已提交' ? 'var(--color-success-light)' : 'var(--color-warning-light)',
                      color: sar.status === '已提交' ? 'var(--color-success)' : 'var(--color-warning)',
                      font: 'var(--text-caption)',
                    }}>{sar.status}</span>
                  </td>
                  <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', padding: '10px 14px' }}>2026-02-{10 - parseInt(sar.id.slice(-1))}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <button style={{ padding: '4px 12px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', font: 'var(--text-caption)', color: 'var(--color-primary)' }}>查看</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* CTR Tab */}
      {activeTab === 'ctr' && (
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          padding: 40,
          textAlign: 'center',
          color: 'var(--color-text-tertiary)',
        }}>
          <div style={{ fontSize: 48, marginBottom: 12 }}>📋</div>
          <div style={{ font: 'var(--text-h3)', color: 'var(--color-text-secondary)', marginBottom: 8 }}>大额交易报告</div>
          <div style={{ font: 'var(--text-body-sm)' }}>超过$10,000的交易自动生成CTR，当前无待处理项</div>
        </div>
      )}

      {/* Audit Log Tab */}
      {activeTab === 'audit' && (
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          overflow: 'hidden',
        }}>
          <div style={{ padding: 16, borderBottom: '1px solid var(--color-border-light)', display: 'flex', gap: 12 }}>
            <input
              placeholder="搜索操作日志..."
              style={{ flex: 1, height: 36, border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', padding: '0 12px', font: 'var(--text-body-sm)' }}
            />
            <button style={{ padding: '6px 14px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)', background: 'none', cursor: 'pointer', font: 'var(--text-label-sm)' }}>
              导出
            </button>
          </div>
          {Array.from({ length: 6 }, (_, i) => (
            <div key={i} style={{
              padding: '12px 16px',
              borderBottom: '1px solid var(--color-border-light)',
              display: 'flex',
              alignItems: 'center',
              gap: 12,
            }}>
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', width: 80 }}>14:{30 + i}:00</span>
              <span style={{
                padding: '2px 8px', borderRadius: 'var(--radius-full)',
                background: 'var(--color-info-light)', color: 'var(--color-info)',
                font: 'var(--text-caption)',
              }}>
                {['登录', '审核', '配置', '冻结', '导出', '查询'][i]}
              </span>
              <span style={{ font: 'var(--text-body-sm)', flex: 1 }}>
                管理员 admin{i + 1} {['登录系统', '审核发行方ISS-003通过', '修改手续费率为2.5%', '冻结用户U-045', '导出月度报表', '查询OFAC筛查记录'][i]}
              </span>
              <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>
                192.168.1.{100 + i}
              </span>
            </div>
          ))}
        </div>
      )}

      {/* Reports Tab */}
      {activeTab === 'reports' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {[
            { title: '日报', desc: '每日交易汇总、异常事件', date: '2026-02-10', auto: true },
            { title: '月报', desc: '月度运营指标、合规状态', date: '2026-01-31', auto: true },
            { title: '季度SAR汇总', desc: '季度可疑活动报告汇总', date: '2025-12-31', auto: false },
            { title: '年度合规报告', desc: '年度合规审计报告', date: '2025-12-31', auto: false },
          ].map(report => (
            <div key={report.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: 8 }}>
                <span style={{ font: 'var(--text-h3)' }}>{report.title}</span>
                {report.auto && (
                  <span style={{
                    padding: '2px 8px', borderRadius: 'var(--radius-full)',
                    background: 'var(--color-success-light)', color: 'var(--color-success)',
                    font: 'var(--text-caption)',
                  }}>自动生成</span>
                )}
              </div>
              <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 12 }}>{report.desc}</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>截至 {report.date}</span>
                <button style={{
                  padding: '6px 14px',
                  border: '1px solid var(--color-primary)',
                  borderRadius: 'var(--radius-sm)',
                  background: 'none',
                  color: 'var(--color-primary)',
                  cursor: 'pointer',
                  font: 'var(--text-label-sm)',
                }}>下载</button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};
