import React from 'react';

/**
 * 用户分析仪表盘
 *
 * 用户增长趋势、KYC分布、地理分布、留存矩阵、活跃分群
 */

const stats = [
  { label: '总用户数', value: '128,456', change: '+3.2%', trend: 'up' as const, color: 'var(--color-primary)' },
  { label: 'DAU', value: '12,340', change: '+5.8%', trend: 'up' as const, color: 'var(--color-success)' },
  { label: 'MAU', value: '45,678', change: '+2.1%', trend: 'up' as const, color: 'var(--color-info)' },
  { label: '新增用户/周', value: '1,234', change: '-1.4%', trend: 'down' as const, color: 'var(--color-warning)' },
];

const kycDistribution = [
  { level: 'L0 - 未验证', count: 32_114, percent: 25, color: 'var(--color-gray-400)' },
  { level: 'L1 - 基础验证', count: 51_382, percent: 40, color: 'var(--color-info)' },
  { level: 'L2 - 身份验证', count: 33_399, percent: 26, color: 'var(--color-primary)' },
  { level: 'L3 - 高级验证', count: 11_561, percent: 9, color: 'var(--color-success)' },
];

const geoDistribution = [
  { rank: 1, region: '北美', users: '38,536', percent: '30.0%' },
  { rank: 2, region: '东亚', users: '29,545', percent: '23.0%' },
  { rank: 3, region: '东南亚', users: '19,268', percent: '15.0%' },
  { rank: 4, region: '欧洲', users: '14,130', percent: '11.0%' },
  { rank: 5, region: '南美', users: '9,003', percent: '7.0%' },
  { rank: 6, region: '中东', users: '5,138', percent: '4.0%' },
  { rank: 7, region: '南亚', users: '3,854', percent: '3.0%' },
  { rank: 8, region: '非洲', users: '3,854', percent: '3.0%' },
  { rank: 9, region: '大洋洲', users: '2,569', percent: '2.0%' },
  { rank: 10, region: '其他', users: '2,559', percent: '2.0%' },
];

const cohortRetention = [
  { cohort: '第1周 (01/06)', week0: '100%', week1: '68%', week2: '52%', week3: '41%', week4: '35%' },
  { cohort: '第2周 (01/13)', week0: '100%', week1: '71%', week2: '55%', week3: '44%', week4: '38%' },
  { cohort: '第3周 (01/20)', week0: '100%', week1: '65%', week2: '49%', week3: '40%', week4: '-' },
  { cohort: '第4周 (01/27)', week0: '100%', week1: '70%', week2: '53%', week3: '-', week4: '-' },
  { cohort: '第5周 (02/03)', week0: '100%', week1: '67%', week2: '-', week3: '-', week4: '-' },
];

const userSegments = [
  { name: '高频交易', count: '8,456', percent: 6.6, color: 'var(--color-primary)' },
  { name: '偶尔购买', count: '34,230', percent: 26.6, color: 'var(--color-success)' },
  { name: '仅浏览', count: '52,890', percent: 41.2, color: 'var(--color-warning)' },
  { name: '流失用户', count: '32,880', percent: 25.6, color: 'var(--color-error)' },
];

export const UserAnalyticsPage: React.FC = () => {
  return (
    <div>
      <h1 style={{ font: 'var(--text-h1)', color: 'var(--color-text-primary)', marginBottom: 24 }}>
        用户分析
      </h1>

      {/* Stats Grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {stats.map(stat => (
          <div key={stat.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 }}>
              {stat.label}
            </div>
            <div style={{ font: 'var(--text-h1)', color: stat.color }}>
              {stat.value}
            </div>
            <div style={{
              font: 'var(--text-label-sm)',
              color: stat.trend === 'up' ? 'var(--color-success)' : 'var(--color-error)',
              marginTop: 4,
            }}>
              {stat.change}
            </div>
          </div>
        ))}
      </div>

      {/* User Growth Chart */}
      <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: 16 }}>
          <span style={{ font: 'var(--text-h3)' }}>用户增长趋势</span>
          <div style={{ display: 'flex', gap: 8 }}>
            {['7D', '30D', '90D', '1Y'].map(p => (
              <button key={p} style={{
                padding: '4px 10px',
                border: '1px solid var(--color-border)',
                borderRadius: 'var(--radius-full)',
                background: p === '30D' ? 'var(--color-primary)' : 'none',
                color: p === '30D' ? 'white' : 'var(--color-text-tertiary)',
                cursor: 'pointer',
                font: 'var(--text-caption)',
              }}>{p}</button>
            ))}
          </div>
        </div>
        <div style={{
          height: 260,
          background: 'var(--color-gray-50)',
          borderRadius: 'var(--radius-sm)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'var(--color-text-tertiary)',
        }}>
          Recharts 面积图 (用户增长 / DAU / MAU)
        </div>
      </div>

      {/* KYC Distribution + Geographic Distribution */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
        {/* KYC Distribution */}
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          padding: 20,
        }}>
          <div style={{ font: 'var(--text-h3)', marginBottom: 16 }}>KYC等级分布</div>
          {kycDistribution.map(item => (
            <div key={item.level} style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                <span style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-primary)' }}>{item.level}</span>
                <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>
                  {item.count.toLocaleString()} ({item.percent}%)
                </span>
              </div>
              <div style={{
                width: '100%', height: 8,
                background: 'var(--color-gray-100)',
                borderRadius: 4,
                overflow: 'hidden',
              }}>
                <div style={{
                  width: `${item.percent}%`,
                  height: '100%',
                  background: item.color,
                  borderRadius: 4,
                }} />
              </div>
            </div>
          ))}
        </div>

        {/* Geographic Distribution */}
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          overflow: 'hidden',
        }}>
          <div style={{ padding: '16px 20px', font: 'var(--text-h3)', borderBottom: '1px solid var(--color-border-light)' }}>
            地理分布 (Top 10)
          </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: '8px 14px',
                    textAlign: 'left',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {geoDistribution.map(row => (
                <tr key={row.rank} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-tertiary)', padding: '8px 14px' }}>{row.rank}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '8px 14px' }}>{row.region}</td>
                  <td style={{ font: 'var(--text-body-sm)', padding: '8px 14px' }}>{row.users}</td>
                  <td style={{ font: 'var(--text-body-sm)', color: 'var(--color-primary)', padding: '8px 14px' }}>{row.percent}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Cohort Retention Matrix + User Segments */}
      <div style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', gap: 16 }}>
        {/* Cohort Retention Matrix */}
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          overflow: 'hidden',
        }}>
          <div style={{ padding: '16px 20px', font: 'var(--text-h3)', borderBottom: '1px solid var(--color-border-light)' }}>
            用户留存矩阵
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: 'var(--color-gray-50)' }}>
                {['注册周', 'Week 0', 'Week 1', 'Week 2', 'Week 3', 'Week 4'].map(h => (
                  <th key={h} style={{
                    font: 'var(--text-label-sm)',
                    color: 'var(--color-text-tertiary)',
                    padding: '8px 12px',
                    textAlign: 'left',
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {cohortRetention.map(row => (
                <tr key={row.cohort} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                  <td style={{ font: 'var(--text-body-sm)', padding: '8px 12px', whiteSpace: 'nowrap' }}>{row.cohort}</td>
                  {[row.week0, row.week1, row.week2, row.week3, row.week4].map((val, i) => {
                    const numVal = parseInt(val);
                    const bgOpacity = !isNaN(numVal) ? Math.max(0.05, numVal / 100 * 0.4) : 0;
                    return (
                      <td key={i} style={{
                        font: 'var(--text-label-sm)',
                        padding: '8px 12px',
                        textAlign: 'center',
                        color: val === '-' ? 'var(--color-text-tertiary)' : 'var(--color-primary)',
                        background: val !== '-' ? `rgba(108, 92, 231, ${bgOpacity})` : 'transparent',
                      }}>
                        {val}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Active User Segments */}
        <div style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--radius-md)',
          border: '1px solid var(--color-border-light)',
          padding: 20,
        }}>
          <div style={{ font: 'var(--text-h3)', marginBottom: 16 }}>活跃用户分群</div>
          {userSegments.map(seg => (
            <div key={seg.name} style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px 0',
              borderBottom: '1px solid var(--color-border-light)',
            }}>
              <span style={{
                width: 10, height: 10,
                borderRadius: '50%',
                background: seg.color,
                marginRight: 10,
                flexShrink: 0,
              }} />
              <div style={{ flex: 1 }}>
                <div style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-primary)' }}>{seg.name}</div>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{seg.count} 人</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ font: 'var(--text-h3)', color: seg.color }}>{seg.percent}%</div>
              </div>
            </div>
          ))}
          <div style={{
            marginTop: 16,
            height: 160,
            background: 'var(--color-gray-50)',
            borderRadius: 'var(--radius-sm)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'var(--color-text-tertiary)',
          }}>
            Recharts 环形图 (用户分群占比)
          </div>
        </div>
      </div>
    </div>
  );
};
