import React from 'react';

/**
 * SEC Filing Management - SEC文件提交与管理
 *
 * 管理所有SEC申报文件（10-K, 10-Q, S-1, 8-K等），
 * 追踪提交状态、审核进度、截止日期，以及自动生成披露文件的状态。
 */

const filingStats = [
  { label: '已提交文件数', value: '24', color: 'var(--color-primary)' },
  { label: '待审核', value: '3', color: 'var(--color-warning)' },
  { label: '已通过', value: '19', color: 'var(--color-success)' },
  { label: '距下次截止', value: '18天', color: 'var(--color-error)' },
];

const secFilings = [
  { id: 'SEC-001', formType: 'S-1', title: 'IPO注册声明书', filingDate: '2026-01-15', deadline: '2026-02-28', status: '审核中', reviewer: 'SEC Division of Corporation Finance' },
  { id: 'SEC-002', formType: '10-K', title: '2025年度报告', filingDate: '2026-01-30', deadline: '2026-03-31', status: '已提交', reviewer: 'Internal Audit' },
  { id: 'SEC-003', formType: '10-Q', title: '2025 Q4季度报告', filingDate: '2026-02-01', deadline: '2026-02-15', status: '已通过', reviewer: 'External Auditor' },
  { id: 'SEC-004', formType: '8-K', title: '重大事项披露-战略合作', filingDate: '2026-02-05', deadline: '2026-02-09', status: '已通过', reviewer: 'Legal Counsel' },
  { id: 'SEC-005', formType: 'S-1/A', title: 'S-1修订稿（第2版）', filingDate: '2026-02-08', deadline: '2026-02-28', status: '需修订', reviewer: 'SEC Division of Corporation Finance' },
  { id: 'SEC-006', formType: '10-Q', title: '2026 Q1季度报告', filingDate: '', deadline: '2026-05-15', status: '待提交', reviewer: '-' },
];

const timelineEvents = [
  { date: '2026-02-15', event: '10-Q (Q4 2025) 截止', type: 'deadline', done: true },
  { date: '2026-02-28', event: 'S-1 注册声明审核回复', type: 'deadline', done: false },
  { date: '2026-03-15', event: '8-K 材料事件披露窗口', type: 'info', done: false },
  { date: '2026-03-31', event: '10-K 年度报告截止', type: 'deadline', done: false },
  { date: '2026-04-15', event: 'Proxy Statement 提交', type: 'deadline', done: false },
  { date: '2026-05-15', event: '10-Q (Q1 2026) 截止', type: 'deadline', done: false },
];

const disclosureItems = [
  { name: '风险因素 (Risk Factors)', status: 'done', lastUpdated: '2026-02-05' },
  { name: '管理层讨论与分析 (MD&A)', status: 'done', lastUpdated: '2026-02-03' },
  { name: '财务报表 (Financial Statements)', status: 'progress', lastUpdated: '2026-02-08' },
  { name: '关联交易披露', status: 'progress', lastUpdated: '2026-02-07' },
  { name: '高管薪酬披露', status: 'pending', lastUpdated: '-' },
  { name: '公司治理结构', status: 'done', lastUpdated: '2026-01-28' },
  { name: '法律诉讼披露', status: 'pending', lastUpdated: '-' },
];

const getFilingStatusStyle = (status: string) => {
  switch (status) {
    case '已通过':
      return { background: 'var(--color-success-light)', color: 'var(--color-success)' };
    case '审核中':
      return { background: 'var(--color-info-light)', color: 'var(--color-info)' };
    case '已提交':
      return { background: 'var(--color-primary-light)', color: 'var(--color-primary)' };
    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)' };
  }
};

export const SecFilingPage: 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)' }}>SEC文件管理</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)',
        }}>
          + 新建Filing
        </button>
      </div>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {filingStats.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>

      {/* Filing Table */}
      <div style={{
        background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-border-light)', overflow: 'hidden', marginBottom: 24,
      }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--color-border-light)' }}>
          <h2 style={{ font: 'var(--text-h2)', color: 'var(--color-text-primary)' }}>SEC申报文件列表</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>
            {secFilings.map(f => (
              <tr key={f.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 14px' }}>{f.id}</td>
                <td style={{ padding: '10px 14px' }}>
                  <span style={{
                    padding: '2px 10px', borderRadius: 'var(--radius-full)',
                    background: 'var(--color-primary-light)', color: 'var(--color-primary)',
                    font: 'var(--text-label-sm)', fontWeight: 600,
                  }}>{f.formType}</span>
                </td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{f.title}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{f.filingDate || '-'}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-secondary)' }}>{f.deadline}</td>
                <td style={{ font: 'var(--text-caption)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{f.reviewer}</td>
                <td style={{ padding: '10px 14px' }}>
                  <span style={{
                    padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                    ...getFilingStatusStyle(f.status),
                  }}>{f.status}</span>
                </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>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Filing Timeline */}
        <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: 16 }}>申报日程</h2>
          {timelineEvents.map((evt, 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,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                background: evt.done ? 'var(--color-success)' : evt.type === 'deadline' ? 'var(--color-error)' : 'var(--color-info)',
                color: 'white', fontSize: 10,
              }}>
                {evt.done ? '✓' : evt.type === 'deadline' ? '!' : 'i'}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ font: 'var(--text-body)', color: 'var(--color-text-primary)' }}>{evt.event}</div>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginTop: 2 }}>{evt.date}</div>
              </div>
              {!evt.done && evt.type === 'deadline' && (
                <span style={{
                  padding: '2px 8px', borderRadius: 'var(--radius-full)',
                  background: 'var(--color-error-light)', color: 'var(--color-error)',
                  font: 'var(--text-caption)', whiteSpace: 'nowrap',
                }}>即将到期</span>
              )}
            </div>
          ))}
        </div>

        {/* Auto-generation 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: 16 }}>披露文件自动生成状态</h2>
          {disclosureItems.map((item, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--color-border-light)' }}>
              <div style={{
                width: 20, height: 20, borderRadius: '50%', marginRight: 12,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: item.status === 'done' ? 'var(--color-success)' : item.status === 'progress' ? 'var(--color-warning)' : 'var(--color-gray-200)',
                color: item.status === 'pending' ? 'var(--color-text-tertiary)' : 'white', fontSize: 12,
              }}>
                {item.status === 'done' ? '✓' : item.status === 'progress' ? '...' : '○'}
              </div>
              <span style={{ flex: 1, font: 'var(--text-body)', color: 'var(--color-text-primary)' }}>{item.name}</span>
              <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginRight: 12 }}>{item.lastUpdated}</span>
              <span style={{
                font: 'var(--text-caption)',
                color: item.status === 'done' ? 'var(--color-success)' : item.status === 'progress' ? 'var(--color-warning)' : 'var(--color-text-tertiary)',
              }}>
                {item.status === 'done' ? '已完成' : item.status === 'progress' ? '生成中' : '待开始'}
              </span>
            </div>
          ))}
          {/* Overall Progress */}
          <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)' }}>57%</span>
            </div>
            <div style={{ height: 8, background: 'var(--color-gray-100)', borderRadius: 'var(--radius-full)', overflow: 'hidden' }}>
              <div style={{ width: '57%', height: '100%', background: 'var(--color-primary)', borderRadius: 'var(--radius-full)' }} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
