import React from 'react';

/**
 * Tax Compliance Management - 税务合规管理
 *
 * 管理平台在各司法管辖区的税务义务，追踪联邦和州级税务申报，
 * 包括所得税、销售税、预扣税、交易税等，以及IRS表格提交进度。
 */

const taxStats = [
  { label: '应纳税额', value: '$1,245,890', color: 'var(--color-primary)' },
  { label: '已缴税额', value: '$982,450', color: 'var(--color-success)' },
  { label: '税务合规率', value: '96.8%', color: 'var(--color-info)' },
  { label: '待处理事项', value: '5', color: 'var(--color-warning)' },
];

const taxObligations = [
  { jurisdiction: 'Federal', taxType: 'Corporate Income Tax', period: 'FY 2025', amount: '$425,000', paid: '$425,000', status: '已缴', dueDate: '2026-04-15' },
  { jurisdiction: 'Federal', taxType: 'Employment Tax (FICA)', period: 'Q4 2025', amount: '$68,200', paid: '$68,200', status: '已缴', dueDate: '2026-01-31' },
  { jurisdiction: 'California', taxType: 'State Income Tax', amount: '$187,500', paid: '$187,500', period: 'FY 2025', status: '已缴', dueDate: '2026-04-15' },
  { jurisdiction: 'California', taxType: 'Sales & Use Tax', amount: '$42,300', paid: '$42,300', period: 'Q4 2025', status: '已缴', dueDate: '2026-01-31' },
  { jurisdiction: 'New York', taxType: 'State Income Tax', amount: '$156,800', paid: '$120,000', period: 'FY 2025', status: '部分缴纳', dueDate: '2026-04-15' },
  { jurisdiction: 'New York', taxType: 'Metropolitan Commuter Tax', amount: '$12,400', paid: '$0', period: 'FY 2025', status: '待缴', dueDate: '2026-04-15' },
  { jurisdiction: 'Texas', taxType: 'Franchise Tax', amount: '$34,600', paid: '$34,600', period: 'FY 2025', status: '已缴', dueDate: '2026-05-15' },
  { jurisdiction: 'Florida', taxType: 'Sales Tax', amount: '$28,900', paid: '$28,900', period: 'Q4 2025', status: '已缴', dueDate: '2026-01-31' },
  { jurisdiction: 'Federal', taxType: 'Estimated Tax (Q1 2026)', amount: '$263,190', paid: '$0', period: 'Q1 2026', status: '待缴', dueDate: '2026-04-15' },
];

const taxTypeBreakdown = [
  { type: 'Income Tax (所得税)', federal: '$425,000', state: '$344,300', total: '$769,300', percentage: 61.7 },
  { type: 'Sales/Use Tax (销售税)', federal: '-', state: '$71,200', total: '$71,200', percentage: 5.7 },
  { type: 'Employment/Withholding Tax (预扣税)', federal: '$68,200', state: '$45,600', total: '$113,800', percentage: 9.1 },
  { type: 'Transaction Tax (交易税)', federal: '$28,400', state: '$0', total: '$28,400', percentage: 2.3 },
  { type: 'Estimated Tax (预估税)', federal: '$263,190', state: '$0', total: '$263,190', percentage: 21.2 },
];

const irsFilings = [
  { form: 'Form 1120', description: '公司所得税申报', taxYear: '2025', deadline: '2026-04-15', status: '准备中', filedDate: '-' },
  { form: 'Form 1099-K', description: '支付卡和第三方网络交易', taxYear: '2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-28' },
  { form: 'Form 1099-MISC', description: '杂项收入（承包商支付）', taxYear: '2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-29' },
  { form: 'Form 1099-NEC', description: '非雇员报酬', taxYear: '2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-30' },
  { form: 'Form 941', description: '雇主季度联邦税', taxYear: 'Q4 2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-25' },
  { form: 'Form W-2', description: '工资与税务声明', taxYear: '2025', deadline: '2026-01-31', status: '已提交', filedDate: '2026-01-27' },
  { form: 'Form 1042-S', description: '外国人预扣所得', taxYear: '2025', deadline: '2026-03-15', status: '准备中', filedDate: '-' },
  { form: 'Form 8300', description: '现金支付超$10,000报告', taxYear: '2025', deadline: '交易后15天', status: '按需提交', filedDate: '-' },
];

const taxDeadlines = [
  { date: '2026-01-31', event: 'Form 1099-K/1099-MISC/W-2 提交截止', done: true },
  { date: '2026-01-31', event: 'Q4 Employment Tax (Form 941) 截止', done: true },
  { date: '2026-03-15', event: 'Form 1042-S 外国人预扣税申报截止', done: false },
  { date: '2026-04-15', event: 'Form 1120 公司所得税申报截止', done: false },
  { date: '2026-04-15', event: 'Q1 2026 Estimated Tax Payment', done: false },
  { date: '2026-04-15', event: 'CA/NY State Income Tax 截止', done: false },
  { date: '2026-05-15', event: 'Texas Franchise Tax 截止', done: false },
  { date: '2026-06-15', event: 'Q2 2026 Estimated Tax Payment', done: false },
];

const getPaymentStatusStyle = (status: string) => {
  switch (status) {
    case '已缴':
      return { background: 'var(--color-success-light)', color: 'var(--color-success)' };
    case '部分缴纳':
      return { background: 'var(--color-warning-light)', color: 'var(--color-warning)' };
    case '待缴':
      return { background: 'var(--color-error-light)', color: 'var(--color-error)' };
    default:
      return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
  }
};

const getFilingStatusStyle = (status: string) => {
  switch (status) {
    case '已提交':
      return { background: 'var(--color-success-light)', color: 'var(--color-success)' };
    case '准备中':
      return { background: 'var(--color-warning-light)', color: 'var(--color-warning)' };
    case '按需提交':
      return { background: 'var(--color-info-light)', color: 'var(--color-info)' };
    case '逾期':
      return { background: 'var(--color-error-light)', color: 'var(--color-error)' };
    default:
      return { background: 'var(--color-gray-100)', color: 'var(--color-text-tertiary)' };
  }
};

export const TaxCompliancePage: 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 }}>
        {taxStats.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>

      {/* Tax Obligations by Jurisdiction */}
      <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>
            {taxObligations.map((t, i) => (
              <tr key={i} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                <td style={{ padding: '10px 14px' }}>
                  <span style={{
                    padding: '2px 8px', borderRadius: 'var(--radius-full)',
                    background: t.jurisdiction === 'Federal' ? 'var(--color-primary-light)' : 'var(--color-info-light)',
                    color: t.jurisdiction === 'Federal' ? 'var(--color-primary)' : 'var(--color-info)',
                    font: 'var(--text-caption)', fontWeight: 600,
                  }}>{t.jurisdiction}</span>
                </td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{t.taxType}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{t.period}</td>
                <td style={{ font: 'var(--text-label-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{t.amount}</td>
                <td style={{ font: 'var(--text-label-sm)', padding: '10px 14px', color: 'var(--color-success)' }}>{t.paid}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{t.dueDate}</td>
                <td style={{ padding: '10px 14px' }}>
                  <span style={{
                    padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                    ...getPaymentStatusStyle(t.status),
                  }}>{t.status}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Tax Type Breakdown + IRS Filings */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
        {/* Tax Type Breakdown */}
        <div style={{
          background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)', overflow: 'hidden',
        }}>
          <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>
              {taxTypeBreakdown.map((row, i) => (
                <tr key={i} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{row.type}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-secondary)' }}>{row.federal}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-secondary)' }}>{row.state}</td>
                  <td style={{ font: 'var(--text-label-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{row.total}</td>
                  <td style={{ padding: '10px 14px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ flex: 1, height: 6, background: 'var(--color-gray-100)', borderRadius: 'var(--radius-full)', overflow: 'hidden' }}>
                        <div style={{ width: `${row.percentage}%`, height: '100%', background: 'var(--color-primary)', borderRadius: 'var(--radius-full)' }} />
                      </div>
                      <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', minWidth: 40, textAlign: 'right' }}>{row.percentage}%</span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Tax Calendar / Deadlines */}
        <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>
          {taxDeadlines.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, flexShrink: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: evt.done ? 'var(--color-success)' : 'var(--color-error)',
                color: 'white', fontSize: 10,
              }}>
                {evt.done ? '✓' : '!'}
              </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>
              <span style={{
                font: 'var(--text-caption)',
                color: evt.done ? 'var(--color-success)' : 'var(--color-error)',
              }}>
                {evt.done ? '已完成' : '待处理'}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* IRS Filing Tracker */}
      <div style={{
        background: 'var(--color-surface)', borderRadius: 'var(--radius-md)',
        border: '1px solid var(--color-border-light)', overflow: 'hidden',
      }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--color-border-light)' }}>
          <h2 style={{ font: 'var(--text-h2)', color: 'var(--color-text-primary)' }}>IRS表格提交追踪</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>
            {irsFilings.map((f, i) => (
              <tr key={i} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                <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.form}</span>
                </td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-primary)' }}>{f.description}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{f.taxYear}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-secondary)' }}>{f.deadline}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px', color: 'var(--color-text-tertiary)' }}>{f.filedDate}</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>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};
