import React from 'react';

/**
 * D3. 财务管理 - 平台级财务总览
 *
 * 平台收入（手续费）、发行方结算、消费者退款、资金池监控
 */

const financeStats = [
  { label: '平台手续费收入', value: '$234,567', period: '本月', color: 'var(--color-success)' },
  { label: '待结算给发行方', value: '$1,456,000', period: '累计', color: 'var(--color-warning)' },
  { label: '消费者退款', value: '$12,340', period: '本月', color: 'var(--color-error)' },
  { label: '资金池余额', value: '$8,234,567', period: '实时', color: 'var(--color-primary)' },
];

const recentSettlements = [
  { issuer: 'Starbucks', amount: '$45,200', status: '已结算', time: '2026-02-10 14:00' },
  { issuer: 'Amazon', amount: '$128,000', status: '处理中', time: '2026-02-10 12:00' },
  { issuer: 'Nike', amount: '$23,500', status: '待结算', time: '2026-02-09' },
  { issuer: 'Walmart', amount: '$67,800', status: '已结算', time: '2026-02-08' },
];

export const FinanceManagementPage: React.FC = () => {
  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 24 }}>财务管理</h1>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {financeStats.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 style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginTop: 4 }}>{s.period}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Settlement Queue */}
        <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>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>{['发行方', '金额', '状态', '时间'].map(h => (
                <th key={h} style={{ padding: '8px 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>
              {recentSettlements.map((s, i) => (
                <tr key={i} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ padding: '10px 0', font: 'var(--text-body)' }}>{s.issuer}</td>
                  <td style={{ padding: '10px 0', font: 'var(--text-label)', color: 'var(--color-primary)' }}>{s.amount}</td>
                  <td style={{ padding: '10px 0' }}>
                    <span style={{
                      padding: '2px 8px', borderRadius: 'var(--radius-full)', font: 'var(--text-caption)', fontWeight: 600,
                      background: s.status === '已结算' ? 'var(--color-success-light)' : s.status === '处理中' ? 'var(--color-info-light)' : 'var(--color-warning-light)',
                      color: s.status === '已结算' ? 'var(--color-success)' : s.status === '处理中' ? 'var(--color-info)' : 'var(--color-warning)',
                    }}>{s.status}</span>
                  </td>
                  <td style={{ padding: '10px 0', font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{s.time}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Revenue Chart Placeholder */}
        <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>
          <div style={{
            height: 240, background: 'var(--color-gray-50)', borderRadius: 'var(--radius-sm)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--color-text-tertiary)', font: 'var(--text-body)',
          }}>
            月度手续费收入趋势图
          </div>
        </div>
      </div>
    </div>
  );
};
