import React from 'react';

/**
 * D6. 商户核销管理 - 平台视角的核销数据
 *
 * 核销统计、门店核销排行、异常核销检测
 */

const redemptionStats = [
  { label: '今日核销', value: '1,234', change: '+15%', color: 'var(--color-success)' },
  { label: '今日核销金额', value: '$45,600', change: '+8%', color: 'var(--color-primary)' },
  { label: '活跃门店', value: '89', change: '+3', color: 'var(--color-info)' },
  { label: '异常核销', value: '2', change: '需审核', color: 'var(--color-error)' },
];

const topStores = [
  { rank: 1, store: 'Starbucks 徐汇店', count: 156, amount: '$3,900' },
  { rank: 2, store: 'Amazon Locker #A23', count: 98, amount: '$9,800' },
  { rank: 3, store: 'Nike 南京西路店', count: 67, amount: '$5,360' },
  { rank: 4, store: 'Walmart 浦东店', count: 45, amount: '$2,250' },
  { rank: 5, store: 'Target Downtown', count: 34, amount: '$1,020' },
];

export const MerchantRedemptionPage: 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 }}>
        {redemptionStats.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.change}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Top Stores */}
        <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>
          {topStores.map(s => (
            <div key={s.rank} style={{
              display: 'flex', alignItems: 'center', padding: '10px 0',
              borderBottom: '1px solid var(--color-border-light)',
            }}>
              <span style={{
                width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: s.rank <= 3 ? 'var(--color-primary)' : 'var(--color-gray-200)',
                color: s.rank <= 3 ? 'white' : 'var(--color-text-tertiary)', font: 'var(--text-caption)', fontWeight: 700,
              }}>{s.rank}</span>
              <span style={{ flex: 1, marginLeft: 12, font: 'var(--text-body)' }}>{s.store}</span>
              <span style={{ font: 'var(--text-label)', color: 'var(--color-primary)', marginRight: 16 }}>{s.count}笔</span>
              <span style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-secondary)' }}>{s.amount}</span>
            </div>
          ))}
        </div>

        {/* Realtime Feed */}
        <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>
          {[
            { store: 'Starbucks 徐汇店', coupon: '¥25 礼品卡', time: '刚刚' },
            { store: 'Nike 南京西路店', coupon: '¥80 运动券', time: '1分钟前' },
            { store: 'Amazon Locker #A23', coupon: '¥100 购物券', time: '3分钟前' },
            { store: 'Starbucks 徐汇店', coupon: '¥25 礼品卡 x2', time: '5分钟前' },
            { store: 'Walmart 浦东店', coupon: '¥50 生活券', time: '8分钟前' },
          ].map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--color-border-light)' }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--color-success)', marginRight: 12 }} />
              <div style={{ flex: 1 }}>
                <div style={{ font: 'var(--text-body)', color: 'var(--color-text-primary)' }}>{r.store}</div>
                <div style={{ font: 'var(--text-body-sm)', color: 'var(--color-text-tertiary)' }}>{r.coupon}</div>
              </div>
              <span style={{ font: 'var(--text-caption)', color: 'var(--color-text-tertiary)' }}>{r.time}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
