import React from 'react';

/**
 * D5. 报表中心 - 运营报表、合规报表、数据导出
 *
 * 日/周/月运营报表、监管合规报表、自定义数据导出
 * 包括：SOX审计、SEC Filing、税务合规
 */

const reportCategories = [
  {
    title: '运营报表',
    icon: '📊',
    reports: [
      { name: '日度运营报表', desc: '交易量/金额/用户/核销率', status: '已生成', date: '2026-02-10' },
      { name: '周度运营报表', desc: '周趋势分析', status: '已生成', date: '2026-02-09' },
      { name: '月度运营报表', desc: '月度综合分析', status: '已生成', date: '2026-01-31' },
    ],
  },
  {
    title: '合规报表',
    icon: '📋',
    reports: [
      { name: 'SAR可疑活动报告', desc: '本月可疑交易汇总', status: '待审核', date: '2026-02-10' },
      { name: 'CTR大额交易报告', desc: '>$10,000交易申报', status: '已提交', date: '2026-02-10' },
      { name: 'OFAC筛查报告', desc: '制裁名单筛查结果', status: '已生成', date: '2026-02-09' },
    ],
  },
  {
    title: '财务报表',
    icon: '💰',
    reports: [
      { name: '发行方结算报表', desc: '各发行方结算明细', status: '已生成', date: '2026-02-10' },
      { name: '平台收入报表', desc: '手续费/Breakage收入', status: '已生成', date: '2026-01-31' },
      { name: '税务合规报表', desc: '1099-K/消费税汇总', status: '待生成', date: '' },
    ],
  },
  {
    title: '审计报表',
    icon: '🔍',
    reports: [
      { name: 'SOX合规检查', desc: '内部控制审计', status: '已通过', date: '2026-01-15' },
      { name: 'SEC Filing', desc: '证券类披露（预留）', status: 'N/A', date: '' },
      { name: '操作审计日志', desc: '管理员操作记录', status: '已生成', date: '2026-02-10' },
    ],
  },
];

const statusStyle = (status: string): React.CSSProperties => {
  const map: Record<string, { bg: string; color: string }> = {
    '已生成': { bg: 'var(--color-success-light)', color: 'var(--color-success)' },
    '已提交': { bg: 'var(--color-info-light)', color: 'var(--color-info)' },
    '已通过': { bg: 'var(--color-success-light)', color: 'var(--color-success)' },
    '待审核': { bg: 'var(--color-warning-light)', color: 'var(--color-warning)' },
    '待生成': { bg: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' },
    'N/A': { bg: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' },
  };
  const s = map[status] || map['N/A'];
  return { padding: '2px 8px', borderRadius: 'var(--radius-full)', background: s.bg, color: s.color, font: 'var(--text-caption)', fontWeight: 600 };
};

export const ReportsPage: React.FC = () => {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)' }}>报表中心</h1>
        <button style={{
          padding: '8px 16px', border: 'none', borderRadius: 'var(--radius-sm)',
          background: 'var(--color-primary)', color: 'white', cursor: 'pointer', font: 'var(--text-label)',
        }}>自定义导出</button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {reportCategories.map(cat => (
          <div key={cat.title} 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 }}>
              <span style={{ marginRight: 8 }}>{cat.icon}</span>{cat.title}
            </h2>
            {cat.reports.map((r, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', padding: '12px 0',
                borderBottom: i < cat.reports.length - 1 ? '1px solid var(--color-border-light)' : 'none',
              }}>
                <div style={{ flex: 1 }}>
                  <div style={{ font: 'var(--text-label)', color: 'var(--color-text-primary)' }}>{r.name}</div>
                  <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{r.desc}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={statusStyle(r.status)}>{r.status}</span>
                  {r.date && <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{r.date}</span>}
                  {r.status !== 'N/A' && r.status !== '待生成' && (
                    <button style={{
                      padding: '4px 10px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-sm)',
                      background: 'transparent', cursor: 'pointer', font: 'var(--text-caption)', color: 'var(--color-text-secondary)',
                    }}>下载</button>
                  )}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};