import React from 'react';

/**
 * License & Regulatory Permits Management - 牌照与监管许可管理
 *
 * 管理平台在各司法管辖区的金融牌照、监管许可证状态，
 * 包括MSB、MTL、各州Money Transmitter License等，追踪续期与申请进度。
 */

const licenseStats = [
  { label: '活跃牌照数', value: '12', color: 'var(--color-success)' },
  { label: '待申请', value: '4', color: 'var(--color-info)' },
  { label: '即将到期', value: '2', color: 'var(--color-warning)' },
  { label: '已吊销', value: '0', color: 'var(--color-error)' },
];

const licenses = [
  { id: 'LIC-001', name: 'FinCEN MSB Registration', jurisdiction: 'Federal (US)', regBody: 'FinCEN', status: '有效', issueDate: '2024-06-01', expiryDate: '2026-06-01' },
  { id: 'LIC-002', name: 'New York BitLicense', jurisdiction: 'New York', regBody: 'NYDFS', status: '有效', issueDate: '2024-09-15', expiryDate: '2026-09-15' },
  { id: 'LIC-003', name: 'California MTL', jurisdiction: 'California', regBody: 'DFPI', status: '有效', issueDate: '2025-01-10', expiryDate: '2027-01-10' },
  { id: 'LIC-004', name: 'Texas Money Transmitter', jurisdiction: 'Texas', regBody: 'TDSML', status: '即将到期', issueDate: '2024-03-20', expiryDate: '2026-03-20' },
  { id: 'LIC-005', name: 'Florida Money Transmitter', jurisdiction: 'Florida', regBody: 'OFR', status: '有效', issueDate: '2025-04-01', expiryDate: '2027-04-01' },
  { id: 'LIC-006', name: 'Illinois TOMA', jurisdiction: 'Illinois', regBody: 'IDFPR', status: '申请中', issueDate: '-', expiryDate: '-' },
  { id: 'LIC-007', name: 'Washington Money Transmitter', jurisdiction: 'Washington', regBody: 'DFI', status: '有效', issueDate: '2025-02-15', expiryDate: '2027-02-15' },
  { id: 'LIC-008', name: 'SEC Broker-Dealer Registration', jurisdiction: 'Federal (US)', regBody: 'SEC / FINRA', status: '申请中', issueDate: '-', expiryDate: '-' },
  { id: 'LIC-009', name: 'Georgia Money Transmitter', jurisdiction: 'Georgia', regBody: 'DBF', status: '待续期', issueDate: '2024-02-28', expiryDate: '2026-02-28' },
  { id: 'LIC-010', name: 'Nevada Money Transmitter', jurisdiction: 'Nevada', regBody: 'FID', status: '有效', issueDate: '2025-06-01', expiryDate: '2027-06-01' },
];

const regulatoryBodies = [
  { name: 'FinCEN', fullName: 'Financial Crimes Enforcement Network', scope: '联邦反洗钱监管', licenses: 1 },
  { name: 'SEC', fullName: 'Securities and Exchange Commission', scope: '证券交易监管', licenses: 1 },
  { name: 'NYDFS', fullName: 'NY Dept. of Financial Services', scope: '纽约州金融服务', licenses: 1 },
  { name: 'DFPI', fullName: 'CA Dept. of Financial Protection & Innovation', scope: '加州金融保护', licenses: 1 },
  { name: 'FINRA', fullName: 'Financial Industry Regulatory Authority', scope: '经纪商自律监管', licenses: 1 },
  { name: 'OCC', fullName: 'Office of the Comptroller of the Currency', scope: '联邦银行监管', licenses: 0 },
];

const renewalAlerts = [
  { license: 'Texas Money Transmitter', expiryDate: '2026-03-20', daysRemaining: 38, urgency: 'high' },
  { license: 'Georgia Money Transmitter', expiryDate: '2026-02-28', daysRemaining: 18, urgency: 'critical' },
  { license: 'FinCEN MSB Registration', expiryDate: '2026-06-01', daysRemaining: 111, urgency: 'medium' },
  { license: 'New York BitLicense', expiryDate: '2026-09-15', daysRemaining: 217, urgency: 'low' },
];

const getLicenseStatusStyle = (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-warning-light)', color: 'var(--color-warning)' };
    case '即将到期':
      return { background: 'var(--color-error-light)', color: 'var(--color-error)' };
    case '已过期':
      return { background: 'var(--color-gray-100)', color: 'var(--color-error)' };
    default:
      return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
  }
};

const getUrgencyStyle = (urgency: string) => {
  switch (urgency) {
    case 'critical':
      return { background: 'var(--color-error)', color: 'white' };
    case 'high':
      return { background: 'var(--color-error-light)', color: 'var(--color-error)' };
    case 'medium':
      return { background: 'var(--color-warning-light)', color: 'var(--color-warning)' };
    case 'low':
      return { background: 'var(--color-success-light)', color: 'var(--color-success)' };
    default:
      return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
  }
};

export const LicenseManagementPage: 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-full)',
          background: 'var(--color-primary)',
          color: 'white',
          cursor: 'pointer',
          font: 'var(--text-label-sm)',
        }}>
          + 新增牌照申请
        </button>
      </div>

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

      {/* License 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)' }}>牌照清单</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>
            {licenses.map(l => (
              <tr key={l.id} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                <td style={{ font: 'var(--text-body-sm)', fontFamily: 'var(--font-family-mono)', padding: '10px 14px' }}>{l.id}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-primary)', fontWeight: 500 }}>{l.name}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-secondary)' }}>{l.jurisdiction}</td>
                <td style={{ padding: '10px 14px' }}>
                  <span style={{
                    padding: '2px 8px', borderRadius: 'var(--radius-full)',
                    background: 'var(--color-info-light)', color: 'var(--color-info)',
                    font: 'var(--text-caption)',
                  }}>{l.regBody}</span>
                </td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{l.issueDate}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{l.expiryDate}</td>
                <td style={{ padding: '10px 14px' }}>
                  <span style={{
                    padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                    ...getLicenseStatusStyle(l.status),
                  }}>{l.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 }}>
        {/* Regulatory Body Mapping */}
        <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>
          {regulatoryBodies.map((rb, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--color-border-light)' }}>
              <div style={{
                width: 40, height: 40, borderRadius: 'var(--radius-sm)', marginRight: 12,
                background: 'var(--color-primary-light)', color: 'var(--color-primary)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                font: 'var(--text-label-sm)', fontWeight: 700, flexShrink: 0,
              }}>
                {rb.name.slice(0, 3)}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ font: 'var(--text-label)', color: 'var(--color-text-primary)' }}>{rb.name}</div>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{rb.fullName}</div>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-secondary)', marginTop: 2 }}>{rb.scope}</div>
              </div>
              <span style={{
                padding: '2px 10px', borderRadius: 'var(--radius-full)',
                background: rb.licenses > 0 ? 'var(--color-success-light)' : 'var(--color-gray-100)',
                color: rb.licenses > 0 ? 'var(--color-success)' : 'var(--color-text-tertiary)',
                font: 'var(--text-caption)',
              }}>
                {rb.licenses > 0 ? `${rb.licenses} 牌照` : '未申请'}
              </span>
            </div>
          ))}
        </div>

        {/* Renewal Alerts */}
        <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>
          {renewalAlerts.map((alert, i) => (
            <div key={i} style={{
              padding: 16, marginBottom: 12,
              borderRadius: 'var(--radius-sm)',
              border: `1px solid ${alert.urgency === 'critical' ? 'var(--color-error)' : 'var(--color-border-light)'}`,
              background: alert.urgency === 'critical' ? 'var(--color-error-light)' : 'var(--color-surface)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <span style={{ font: 'var(--text-label)', color: 'var(--color-text-primary)' }}>{alert.license}</span>
                <span style={{
                  padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                  ...getUrgencyStyle(alert.urgency),
                }}>
                  {alert.urgency === 'critical' ? '紧急' : alert.urgency === 'high' ? '高' : alert.urgency === 'medium' ? '中' : '低'}
                </span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>到期日: {alert.expiryDate}</span>
                <span style={{
                  font: 'var(--text-label-sm)',
                  color: alert.daysRemaining <= 30 ? 'var(--color-error)' : alert.daysRemaining <= 90 ? 'var(--color-warning)' : 'var(--color-text-secondary)',
                }}>
                  剩余 {alert.daysRemaining} 天
                </span>
              </div>
              {alert.urgency === 'critical' && (
                <button style={{
                  marginTop: 10, padding: '6px 14px', width: '100%',
                  border: 'none', borderRadius: 'var(--radius-sm)',
                  background: 'var(--color-error)', color: 'white',
                  cursor: 'pointer', font: 'var(--text-label-sm)',
                }}>
                  立即续期
                </button>
              )}
            </div>
          ))}
          {/* Summary */}
          <div style={{ marginTop: 16, padding: 12, background: 'var(--color-gray-50)', borderRadius: 'var(--radius-sm)' }}>
            <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-secondary)' }}>
              共 {licenses.filter(l => l.status === '有效').length} 个有效牌照覆盖 {new Set(licenses.filter(l => l.status === '有效').map(l => l.jurisdiction)).size} 个司法管辖区
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
