import React from 'react';

/**
 * 券分析仪表盘
 *
 * 券发行/核销/过期统计、品类分布、热销排行、Breakage趋势、二级市场分析
 */

const stats = [
  { label: '券总量', value: '45,230', change: '+6.5%', trend: 'up' as const, color: 'var(--color-primary)' },
  { label: '活跃券', value: '32,100', change: '+3.2%', trend: 'up' as const, color: 'var(--color-success)' },
  { label: '已核销', value: '8,450', change: '+12.1%', trend: 'up' as const, color: 'var(--color-info)' },
  { label: '即将过期', value: '2,340', change: '+8.7%', trend: 'up' as const, color: 'var(--color-warning)' },
];

const categoryDistribution = [
  { name: '餐饮', count: 14_474, percent: 32, color: 'var(--color-primary)' },
  { name: '零售', count: 11_308, percent: 25, color: 'var(--color-success)' },
  { name: '娱乐', count: 9_046, percent: 20, color: 'var(--color-info)' },
  { name: '旅游', count: 5_428, percent: 12, color: 'var(--color-warning)' },
  { name: '数码', count: 4_974, percent: 11, color: 'var(--color-error)' },
];

const topCoupons = [
  { rank: 1, brand: '星巴克', name: '大杯拿铁兑换券', sales: 4_230, revenue: '$105,750', rating: 4.8 },
  { rank: 2, brand: 'Amazon', name: '$100电子礼品卡', sales: 3_890, revenue: '$389,000', rating: 4.9 },
  { rank: 3, brand: 'Nike', name: '旗舰店8折券', sales: 2_750, revenue: '$220,000', rating: 4.6 },
  { rank: 4, brand: '海底捞', name: '双人套餐券', sales: 2_340, revenue: '$187,200', rating: 4.7 },
  { rank: 5, brand: 'Target', name: '$30消费券', sales: 2_100, revenue: '$63,000', rating: 4.5 },
  { rank: 6, brand: 'Apple', name: 'App Store $25', sales: 1_980, revenue: '$49,500', rating: 4.8 },
  { rank: 7, brand: '万达影城', name: '双人电影票', sales: 1_750, revenue: '$52,500', rating: 4.4 },
  { rank: 8, brand: 'Uber', name: '$20出行券', sales: 1_620, revenue: '$32,400', rating: 4.3 },
  { rank: 9, brand: '携程', name: '酒店满减券', sales: 1_480, revenue: '$148,000', rating: 4.6 },
  { rank: 10, brand: 'Steam', name: '$50充值卡', sales: 1_310, revenue: '$65,500', rating: 4.7 },
];

const breakageTrend = [
  { month: '9月', rate: '18.2%' },
  { month: '10月', rate: '17.5%' },
  { month: '11月', rate: '16.8%' },
  { month: '12月', rate: '19.3%' },
  { month: '1月', rate: '17.1%' },
  { month: '2月', rate: '16.5%' },
];

const secondaryMarket = [
  { metric: '挂牌率', value: '23.5%', change: '+1.2%', trend: 'up' as const },
  { metric: '平均加价率', value: '8.3%', change: '-0.5%', trend: 'down' as const },
  { metric: '日均交易量', value: '1,230', change: '+15.2%', trend: 'up' as const },
  { metric: '日均交易额', value: '$98,400', change: '+11.8%', trend: 'up' as const },
  { metric: '平均成交时间', value: '4.2h', change: '-8.3%', trend: 'down' as const },
  { metric: '撤单率', value: '12.1%', change: '+0.8%', trend: 'up' as const },
];

export const CouponAnalyticsPage: 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>

      {/* Category Distribution + Price Histogram */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 24 }}>
        {/* Category 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 }}>品类分布</div>
          {categoryDistribution.map(cat => (
            <div key={cat.name} style={{ marginBottom: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                <span style={{ font: 'var(--text-label-sm)', color: 'var(--color-text-primary)' }}>{cat.name}</span>
                <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>
                  {cat.count.toLocaleString()} ({cat.percent}%)
                </span>
              </div>
              <div style={{
                width: '100%', height: 8,
                background: 'var(--color-gray-100)',
                borderRadius: 4,
                overflow: 'hidden',
              }}>
                <div style={{
                  width: `${cat.percent}%`,
                  height: '100%',
                  background: cat.color,
                  borderRadius: 4,
                }} />
              </div>
            </div>
          ))}
        </div>

        {/* Price Distribution Histogram */}
        <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>
          <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 柱状图 (面值区间: $0-25 / $25-50 / $50-100 / $100-200 / $200+)
          </div>
        </div>
      </div>

      {/* Top 10 Best-Selling Coupons */}
      <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', 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: '10px 14px',
                  textAlign: 'left',
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {topCoupons.map(row => (
              <tr key={row.rank} style={{ borderBottom: '1px solid var(--color-border-light)' }}>
                <td style={{
                  font: 'var(--text-label-sm)',
                  padding: '10px 14px',
                  color: row.rank <= 3 ? 'var(--color-primary)' : 'var(--color-text-tertiary)',
                  fontWeight: row.rank <= 3 ? 700 : 400,
                }}>{row.rank}</td>
                <td style={{ font: 'var(--text-label-sm)', padding: '10px 14px' }}>{row.brand}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px' }}>{row.name}</td>
                <td style={{ font: 'var(--text-body-sm)', padding: '10px 14px' }}>{row.sales.toLocaleString()}</td>
                <td style={{ font: 'var(--text-label-sm)', color: 'var(--color-success)', padding: '10px 14px' }}>{row.revenue}</td>
                <td style={{ padding: '10px 14px' }}>
                  <span style={{
                    padding: '2px 8px',
                    borderRadius: 'var(--radius-full)',
                    background: row.rating >= 4.7 ? 'var(--color-success-light)' : 'var(--color-warning-light)',
                    color: row.rating >= 4.7 ? 'var(--color-success)' : 'var(--color-warning)',
                    font: 'var(--text-caption)',
                  }}>
                    {row.rating}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Breakage Rate Trend + Secondary Market */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        {/* Breakage Rate Trend */}
        <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 }}>Breakage趋势 (未核销率)</div>
          <div style={{
            height: 160,
            background: 'var(--color-gray-50)',
            borderRadius: 'var(--radius-sm)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'var(--color-text-tertiary)',
            marginBottom: 16,
          }}>
            Recharts 折线图 (月度 Breakage Rate)
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            {breakageTrend.map(item => (
              <div key={item.month} style={{
                padding: '6px 12px',
                background: 'var(--color-gray-50)',
                borderRadius: 'var(--radius-sm)',
                font: 'var(--text-caption)',
                color: 'var(--color-text-secondary)',
              }}>
                {item.month}: <span style={{ color: 'var(--color-primary)', fontWeight: 600 }}>{item.rate}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Secondary Market Analytics */}
        <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>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {secondaryMarket.map(item => (
              <div key={item.metric} style={{
                padding: 12,
                background: 'var(--color-gray-50)',
                borderRadius: 'var(--radius-sm)',
              }}>
                <div style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)', marginBottom: 4 }}>
                  {item.metric}
                </div>
                <div style={{ font: 'var(--text-h3)', color: 'var(--color-text-primary)' }}>
                  {item.value}
                </div>
                <div style={{
                  font: 'var(--text-caption)',
                  color: item.trend === 'up' ? 'var(--color-success)' : 'var(--color-error)',
                  marginTop: 2,
                }}>
                  {item.change}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};
