import React from 'react';
import { t } from '@/i18n/locales';

/**
 * D8.4 IPO准备度检查清单 - 独立页面
 *
 * 法律/财务/合规/治理/保险 五大类别
 * Gantt时间线、依赖管理、阻塞项跟踪
 */

interface CheckItem {
  id: string;
  item: string;
  category: string;
  status: 'done' | 'progress' | 'blocked' | 'pending';
  owner: string;
  deadline: string;
  dependency?: string;
  note?: string;
}

const categories = [
  { key: 'legal', label: t('ipo_cat_legal'), icon: '§', color: 'var(--color-primary)' },
  { key: 'financial', label: t('ipo_cat_financial'), icon: '$', color: 'var(--color-success)' },
  { key: 'sox', label: t('ipo_cat_sox'), icon: '✓', color: 'var(--color-info)' },
  { key: 'governance', label: t('ipo_cat_governance'), icon: '◆', color: 'var(--color-warning)' },
  { key: 'insurance', label: t('ipo_cat_insurance'), icon: '☂', color: '#FF6B6B' },
];

const overallProgress = {
  total: 28,
  done: 16,
  inProgress: 7,
  blocked: 2,
  pending: 3,
  percent: 72,
};

const milestones: { name: string; date: string; status: 'done' | 'progress' | 'pending' }[] = [
  { name: 'S-1初稿提交', date: '2026-Q2', status: 'progress' },
  { name: 'SEC审核期', date: '2026-Q3', status: 'pending' },
  { name: '路演 (Roadshow)', date: '2026-Q3', status: 'pending' },
  { name: '定价 & 上市', date: '2026-Q4', status: 'pending' },
];

const checklistItems: CheckItem[] = [
  // Legal
  { id: 'L1', item: 'FinCEN MSB牌照', category: 'legal', status: 'done', owner: 'Legal', deadline: '2026-01-15' },
  { id: 'L2', item: 'NY BitLicense申请', category: 'legal', status: 'progress', owner: 'Legal', deadline: '2026-06-30', note: '材料已提交，等待审核' },
  { id: 'L3', item: '各州MTL注册 (48州)', category: 'legal', status: 'progress', owner: 'Legal', deadline: '2026-05-31', note: '已完成38/48州' },
  { id: 'L4', item: 'SEC法律顾问意见书', category: 'legal', status: 'progress', owner: 'External Counsel', deadline: '2026-04-30' },
  { id: 'L5', item: '知识产权审计 (IP Audit)', category: 'legal', status: 'done', owner: 'Legal', deadline: '2026-02-01' },
  { id: 'L6', item: '商标注册 (USPTO)', category: 'legal', status: 'done', owner: 'Legal', deadline: '2026-01-20' },
  // Financial
  { id: 'F1', item: '独立审计报告 (Deloitte)', category: 'financial', status: 'progress', owner: 'Finance', deadline: '2026-05-15', dependency: 'F2' },
  { id: 'F2', item: 'GAAP财务报表 (3年)', category: 'financial', status: 'done', owner: 'Finance', deadline: '2026-03-01' },
  { id: 'F3', item: '税务合规证明', category: 'financial', status: 'done', owner: 'Finance', deadline: '2026-02-28' },
  { id: 'F4', item: '收入确认政策 (ASC 606)', category: 'financial', status: 'done', owner: 'Finance', deadline: '2026-02-15' },
  { id: 'F5', item: '估值模型 & 定价区间', category: 'financial', status: 'pending', owner: 'Finance + IB', deadline: '2026-07-31' },
  // SOX
  { id: 'S1', item: 'ICFR内部控制框架', category: 'sox', status: 'done', owner: 'Compliance', deadline: '2026-01-31' },
  { id: 'S2', item: 'IT通用控制 (ITGC)', category: 'sox', status: 'done', owner: 'Engineering', deadline: '2026-02-15' },
  { id: 'S3', item: '访问控制审计', category: 'sox', status: 'done', owner: 'Security', deadline: '2026-02-10' },
  { id: 'S4', item: '变更管理流程', category: 'sox', status: 'done', owner: 'Engineering', deadline: '2026-02-01' },
  { id: 'S5', item: 'SOX 404管理层评估', category: 'sox', status: 'progress', owner: 'Compliance', deadline: '2026-05-31', dependency: 'S1' },
  // Governance
  { id: 'G1', item: '独立董事会组建 (3+)', category: 'governance', status: 'done', owner: 'Board', deadline: '2026-03-01', note: '4名独立董事已任命' },
  { id: 'G2', item: '审计委员会', category: 'governance', status: 'done', owner: 'Board', deadline: '2026-03-15' },
  { id: 'G3', item: '薪酬委员会', category: 'governance', status: 'done', owner: 'Board', deadline: '2026-03-15' },
  { id: 'G4', item: '公司章程 & 治理政策', category: 'governance', status: 'done', owner: 'Legal', deadline: '2026-02-28' },
  { id: 'G5', item: 'D&O保险', category: 'governance', status: 'blocked', owner: 'Legal', deadline: '2026-04-30', note: '等待承保方最终报价' },
  { id: 'G6', item: 'Insider Trading Policy', category: 'governance', status: 'done', owner: 'Legal', deadline: '2026-03-01' },
  // Insurance
  { id: 'I1', item: '消费者保护基金 ≥$2M', category: 'insurance', status: 'done', owner: 'Finance', deadline: '2026-02-01' },
  { id: 'I2', item: 'AML/KYC体系', category: 'insurance', status: 'done', owner: 'Compliance', deadline: '2026-01-15' },
  { id: 'I3', item: '赔付机制运行报告', category: 'insurance', status: 'progress', owner: 'Operations', deadline: '2026-05-01' },
  { id: 'I4', item: 'Cyber保险', category: 'insurance', status: 'blocked', owner: 'Legal', deadline: '2026-04-15', note: '正在比价3家承保方' },
  { id: 'I5', item: '做市商协议签署', category: 'insurance', status: 'pending', owner: 'Finance + IB', deadline: '2026-07-15' },
  { id: 'I6', item: '承销商尽职调查', category: 'insurance', status: 'pending', owner: 'External', deadline: '2026-08-01' },
];

const statusConfig: Record<string, { label: string; bg: string; fg: string }> = {
  done: { label: t('completed'), bg: 'var(--color-success-light)', fg: 'var(--color-success)' },
  progress: { label: t('in_progress'), bg: 'var(--color-warning-light)', fg: 'var(--color-warning)' },
  blocked: { label: t('blocked'), bg: 'var(--color-error-light)', fg: 'var(--color-error)' },
  pending: { label: t('pending'), bg: 'var(--color-gray-100)', fg: 'var(--color-text-tertiary)' },
};

export const IpoReadinessPage: React.FC = () => {
  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 8 }}>{t('ipo_title')}</h1>
      <p style={{ font: 'var(--text-body)', color: 'var(--color-text-secondary)', marginBottom: 24 }}>
        {t('ipo_subtitle')}
      </p>

      {/* Summary Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, marginBottom: 24 }}>
        {[
          { label: t('ipo_total_items'), value: overallProgress.total, color: 'var(--color-text-primary)' },
          { label: t('completed'), value: overallProgress.done, color: 'var(--color-success)' },
          { label: t('in_progress'), value: overallProgress.inProgress, color: 'var(--color-warning)' },
          { label: t('blocked'), value: overallProgress.blocked, color: 'var(--color-error)' },
          { label: t('pending'), value: overallProgress.pending, color: 'var(--color-text-tertiary)' },
        ].map(s => (
          <div key={s.label} style={{
            background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)', padding: 20, textAlign: 'center',
          }}>
            <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)', marginBottom: 8 }}>{s.label}</div>
            <div style={{ font: 'var(--text-display)', color: s.color }}>{s.value}</div>
          </div>
        ))}
      </div>

      {/* Overall Progress Bar */}
      <div style={{
        background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-border-light)', padding: 20, marginBottom: 24,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
          <span style={{ font: 'var(--text-label)', color: 'var(--color-text-primary)' }}>{t('ipo_overall_progress')}</span>
          <span style={{ font: 'var(--text-h2)', color: 'var(--color-primary)' }}>{overallProgress.percent}%</span>
        </div>
        <div style={{ height: 12, background: 'var(--color-gray-100)', borderRadius: 'var(--radius-full)', overflow: 'hidden', display: 'flex' }}>
          <div style={{ width: `${(overallProgress.done / overallProgress.total * 100).toFixed(0)}%`, height: '100%', background: 'var(--color-success)' }} />
          <div style={{ width: `${(overallProgress.inProgress / overallProgress.total * 100).toFixed(0)}%`, height: '100%', background: 'var(--color-warning)' }} />
          <div style={{ width: `${(overallProgress.blocked / overallProgress.total * 100).toFixed(0)}%`, height: '100%', background: 'var(--color-error)' }} />
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 8 }}>
          {[
            { label: t('completed'), color: 'var(--color-success)' },
            { label: t('in_progress'), color: 'var(--color-warning)' },
            { label: t('blocked'), color: 'var(--color-error)' },
            { label: t('pending'), color: 'var(--color-gray-200)' },
          ].map(l => (
            <div key={l.label} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: l.color }} />
              <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{l.label}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24 }}>
        {/* Left: Checklist by Category */}
        <div>
          {categories.map(cat => {
            const items = checklistItems.filter(i => i.category === cat.key);
            const catDone = items.filter(i => i.status === 'done').length;
            return (
              <div key={cat.key} style={{
                background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
                border: '1px solid var(--color-border-light)', padding: 20, marginBottom: 16,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: 'var(--radius-sm)', display: 'flex',
                      alignItems: 'center', justifyContent: 'center', background: cat.color, color: 'white',
                      font: 'var(--text-label)', fontWeight: 700,
                    }}>
                      {cat.icon}
                    </div>
                    <span style={{ font: 'var(--text-h3)', color: 'var(--color-text-primary)' }}>{cat.label}</span>
                  </div>
                  <span style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-secondary)' }}>
                    {catDone}/{items.length} {t('ipo_unit_done')}
                  </span>
                </div>

                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                  <thead>
                    <tr>
                      {[t('ipo_th_id'), t('ipo_th_item'), t('ipo_th_owner'), t('ipo_th_deadline'), t('ipo_th_status')].map(h => (
                        <th key={h} style={{
                          padding: '6px 0', textAlign: 'left', font: 'var(--text-label-sm)',
                          color: 'var(--color-text-tertiary)', borderBottom: '1px solid var(--color-border-light)',
                        }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {items.map(item => {
                      const st = statusConfig[item.status];
                      return (
                        <tr key={item.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                          <td style={{ padding: '10px 0', fontFamily: 'var(--font-family-mono)', font: 'var(--text-body-sm)' }}>{item.id}</td>
                          <td style={{ padding: '10px 0' }}>
                            <div style={{ font: 'var(--text-body)' }}>{item.item}</div>
                            {item.note && <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginTop: 2 }}>{item.note}</div>}
                            {item.dependency && (
                              <div style={{ font: 'var(--text-caption)', color: 'var(--color-info)', marginTop: 2 }}>
                                {t('ipo_dependency')}: {item.dependency}
                              </div>
                            )}
                          </td>
                          <td style={{ padding: '10px 0', font: 'var(--text-body-sm)' }}>{item.owner}</td>
                          <td style={{ padding: '10px 0', font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)' }}>{item.deadline}</td>
                          <td style={{ padding: '10px 0' }}>
                            <span style={{
                              padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)',
                              fontWeight: 600, background: st.bg, color: st.fg,
                            }}>{st.label}</span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            );
          })}
        </div>

        {/* Right: Timeline & Blockers */}
        <div>
          {/* IPO Timeline */}
          <div style={{
            background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)', padding: 20, marginBottom: 16,
          }}>
            <h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>{t('ipo_timeline')}</h2>
            {milestones.map((m, i) => (
              <div key={m.name} style={{ display: 'flex', gap: 12, marginBottom: i < milestones.length - 1 ? 0 : 0 }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                  <div style={{
                    width: 12, height: 12, borderRadius: '50%',
                    background: m.status === 'progress' ? 'var(--color-warning)' : m.status === 'done' ? 'var(--color-success)' : 'var(--color-gray-200)',
                    border: m.status === 'progress' ? '2px solid var(--color-warning)' : 'none',
                  }} />
                  {i < milestones.length - 1 && (
                    <div style={{ width: 2, height: 40, background: 'var(--color-border-light)' }} />
                  )}
                </div>
                <div style={{ paddingBottom: 16 }}>
                  <div style={{ font: 'var(--text-label)', color: 'var(--color-text-primary)' }}>{m.name}</div>
                  <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{m.date}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Blockers */}
          <div style={{
            background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-error)', padding: 20, marginBottom: 16,
          }}>
            <h2 style={{ font: 'var(--text-h2)', color: 'var(--color-error)', marginBottom: 16 }}>{t('ipo_blockers')}</h2>
            {checklistItems.filter(i => i.status === 'blocked').map(item => (
              <div key={item.id} style={{
                padding: 12, background: 'var(--color-error-light)', borderRadius: 'var(--radius-sm)', marginBottom: 8,
              }}>
                <div style={{ font: 'var(--text-label)', color: 'var(--color-error)' }}>{item.id}: {item.item}</div>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-secondary)', marginTop: 4 }}>
                  {t('ipo_owner')}: {item.owner} · {t('ipo_deadline')}: {item.deadline}
                </div>
                {item.note && (
                  <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-secondary)', marginTop: 2 }}>{item.note}</div>
                )}
              </div>
            ))}
          </div>

          {/* Category Progress */}
          <div style={{
            background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
            border: '1px solid var(--color-border-light)', padding: 20, marginBottom: 16,
          }}>
            <h2 style={{ font: 'var(--text-h2)', marginBottom: 16 }}>{t('ipo_category_progress')}</h2>
            {categories.map(cat => {
              const items = checklistItems.filter(i => i.category === cat.key);
              const catDone = items.filter(i => i.status === 'done').length;
              const pct = Math.round(catDone / items.length * 100);
              return (
                <div key={cat.key} style={{ marginBottom: 14 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                    <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-primary)' }}>{cat.label}</span>
                    <span style={{ font: 'var(--text-label-sm)', color: cat.color }}>{pct}%</span>
                  </div>
                  <div style={{ height: 6, background: 'var(--color-gray-100)', borderRadius: 'var(--radius-full)', overflow: 'hidden' }}>
                    <div style={{ width: `${pct}%`, height: '100%', background: cat.color, borderRadius: 'var(--radius-full)' }} />
                  </div>
                </div>
              );
            })}
          </div>

          {/* Key Contacts */}
          <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 }}>{t('ipo_key_contacts')}</h2>
            {[
              { role: '承销商 (Lead)', name: 'Goldman Sachs', status: '已签约' },
              { role: '审计师', name: 'Deloitte', status: '审计中' },
              { role: '法律顾问', name: 'Skadden, Arps', status: '已签约' },
              { role: 'SEC联络', name: 'SEC Division of Corp Finance', status: '对接中' },
            ].map(c => (
              <div key={c.role} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--color-border-light)' }}>
                <div>
                  <div style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-primary)' }}>{c.role}</div>
                  <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-secondary)' }}>{c.name}</div>
                </div>
                <span style={{
                  padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)',
                  background: 'var(--color-primary-surface)', color: 'var(--color-primary)', fontWeight: 600,
                }}>{c.status}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};