// Member Center Supplement Modules: Performance Plan, Usage Stats, Team Permissions, Loyalty Points
const { useState, useMemo } = React;

function MemberPerformancePlan() {
  const { lang } = useApp();
  const [selected, setSelected] = useState('performance');

  const plans = [
    { id: 'subscription', name: lang === 'zh' ? '订阅制' : 'Subscription', desc: lang === 'zh' ? '稳定运营，月费全包' : 'Stable all-in monthly fee', price: '$299', period: lang === 'zh' ? '/月' : '/mo', features: [
      lang === 'zh' ? '所有AI员工无限使用' : 'Unlimited AI employees',
      lang === 'zh' ? '高级数据分析功能' : 'Advanced analytics',
      lang === 'zh' ? '优先技术支持' : 'Priority support',
      lang === 'zh' ? '适合成熟卖家' : 'Best for mature sellers',
    ], cta: lang === 'zh' ? '选择订阅制' : 'Choose Subscription', type: 'subscription' },
    { id: 'performance', name: lang === 'zh' ? '对赌分成' : 'Performance-Based', desc: lang === 'zh' ? '零月费，按效果分成' : 'Zero fee, pay by results', price: '0', period: lang === 'zh' ? '月费' : 'monthly fee', features: [
      lang === 'zh' ? '零启动成本，零月费' : 'Zero setup & zero monthly fee',
      lang === 'zh' ? '按增量利润10-20%分成' : '10-20% share of incremental profit',
      lang === 'zh' ? 'AI先帮你赚钱，赚到再分' : 'AI earns first, you split later',
      lang === 'zh' ? '最低业绩承诺，不达标不收费' : 'Performance guarantee — no charge if below target',
      lang === 'zh' ? '适合新手卖家/增长期' : 'Best for new & growing sellers',
    ], cta: lang === 'zh' ? '开启对赌模式' : 'Start Performance Plan', type: 'performance', featured: true },
  ];

  return (
    <div className="mbr-perf-page">
      <div className="mbr-page-head">
        <div>
          <h2>{lang === 'zh' ? '我的订阅' : 'My Subscription'}</h2>
          <p>{lang === 'zh' ? '选择最适合你的计费方式' : 'Choose the pricing model that fits you best'}</p>
        </div>
      </div>

      <div className="perf-compare-table glass-card">
        <div className="compare-title">{lang === 'zh' ? '订阅制 vs 对赌制' : 'Subscription vs Performance-Based'}</div>
        <div className="compare-grid">
          {[
            { item: lang === 'zh' ? '月费' : 'Monthly Fee', sub: lang === 'zh' ? '订阅制' : 'Sub', perf: lang === 'zh' ? '$0' : '$0', subVal: '$299' },
            { item: lang === 'zh' ? '启动成本' : 'Setup Cost', sub: lang === 'zh' ? '低' : 'Low', perf: lang === 'zh' ? '零' : 'Zero' },
            { item: lang === 'zh' ? '分成比例' : 'Revenue Share', sub: lang === 'zh' ? '无' : 'None', perf: '10-20%' },
            { item: lang === 'zh' ? '业绩承诺' : 'Performance Guarantee', sub: lang === 'zh' ? '—' : '—', perf: lang === 'zh' ? '有，不达标不收费' : 'Yes, no charge if below' },
            { item: lang === 'zh' ? 'AI功能权限' : 'AI Feature Access', sub: lang === 'zh' ? '全部' : 'All', perf: lang === 'zh' ? '全部' : 'All' },
            { item: lang === 'zh' ? '适合对象' : 'Best For', sub: lang === 'zh' ? '成熟卖家' : 'Mature sellers', perf: lang === 'zh' ? '新手/增长期' : 'New & growing sellers' },
            { item: lang === 'zh' ? '风险' : 'Risk', sub: lang === 'zh' ? '固定支出' : 'Fixed cost', perf: lang === 'zh' ? '仅在赚钱时付费' : 'Pay only when profitable' },
          ].map((row, i) => (
            <div key={i} className="compare-row">
              <span className="compare-item">{row.item}</span>
              <span className="compare-sub">{row.subVal || row.sub}</span>
              <span className="compare-perf">{row.perf}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="perf-plans-grid">
        {plans.map(p => (
          <div key={p.id} className={`perf-plan-card glass-card ${p.featured ? 'featured' : ''}`}>
            {p.featured && <div className="perf-badge">{lang === 'zh' ? '推荐' : 'Recommended'}</div>}
            <div className="perf-plan-head">
              <h3>{p.name}</h3>
              <p>{p.desc}</p>
            </div>
            <div className="perf-plan-price">
              <span className="pp-currency">$</span>
              <span className="pp-value">{p.price}</span>
              <span className="pp-period">{p.period}</span>
            </div>
            <ul className="perf-plan-features">
              {p.features.map((f, i) => (
                <li key={i}><Icon name="check" size={12} /> {f}</li>
              ))}
            </ul>
            <button className={`perf-plan-btn ${p.featured ? 'primary' : ''}`}>{p.cta}</button>
          </div>
        ))}
      </div>

      <style>{`
        .mbr-perf-page { display: flex; flex-direction: column; gap: 18px; }
        .mbr-page-head h2 { font-size: 22px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; margin-bottom: 4px; }
        .mbr-page-head p { font-size: 13px; color: var(--text-secondary); }

        .perf-compare-table { padding: 24px 28px; }
        .compare-title {
          font-size: 16px;
          font-weight: 700;
          font-family: 'Space Grotesk', sans-serif;
          margin-bottom: 16px;
          text-align: center;
        }
        .compare-grid { display: flex; flex-direction: column; }
        .compare-row {
          display: grid;
          grid-template-columns: 2fr 1.5fr 1.5fr;
          gap: 12px;
          padding: 12px 16px;
          align-items: center;
          border-bottom: 1px solid var(--glass-border);
          font-size: 13px;
        }
        .compare-row:last-child { border-bottom: none; }
        .compare-item { font-weight: 600; color: var(--text-secondary); }
        .compare-sub { text-align: center; }
        .compare-perf { text-align: center; font-weight: 700; color: var(--accent-primary); }

        .perf-plans-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
        }
        .perf-plan-card {
          padding: 28px 24px;
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 16px;
          transition: transform 0.2s;
        }
        .perf-plan-card:hover { transform: translateY(-3px); }
        .perf-plan-card.featured {
          border: 2px solid var(--accent-primary);
          box-shadow: var(--gold-glow);
        }
        .perf-badge {
          position: absolute;
          top: -12px;
          right: 20px;
          padding: 4px 14px;
          background: var(--accent-gradient);
          color: #fff;
          font-size: 11px;
          font-weight: 700;
          border-radius: 20px;
        }
        .perf-plan-head h3 { font-size: 20px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; margin-bottom: 4px; }
        .perf-plan-head p { font-size: 12.5px; color: var(--text-muted); }
        .perf-plan-price { display: flex; align-items: baseline; gap: 4px; }
        .pp-currency { font-size: 18px; font-weight: 700; color: var(--text-secondary); }
        .pp-value { font-size: 42px; font-weight: 900; font-family: 'Space Grotesk', sans-serif; line-height: 1; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .pp-period { font-size: 13px; color: var(--text-muted); margin-left: 4px; }
        .perf-plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
        .perf-plan-features li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-secondary); }
        .perf-plan-features li svg { color: var(--success); margin-top: 2px; flex-shrink: 0; }
        .perf-plan-btn {
          margin-top: auto;
          padding: 12px 20px;
          border-radius: 10px;
          border: 1px solid var(--glass-border);
          background: transparent;
          color: var(--text-primary);
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          font-family: inherit;
          transition: all 0.2s;
        }
        .perf-plan-btn:hover { border-color: var(--accent-primary); }
        .perf-plan-btn.primary {
          background: var(--accent-gradient);
          color: #fff;
          border: none;
          box-shadow: var(--gold-glow);
        }
        .perf-plan-btn.primary:hover { transform: translateY(-1px); }

        @media (max-width: 900px) {
          .perf-plans-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </div>
  );
}

function MemberUsageStats() {
  const { lang } = useApp();
  const c = getThemeColors();

  const rolePieOption = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'item', backgroundColor: c.card, borderColor: c.border, textStyle: { color: c.textPrimary, fontSize: 11 } },
    legend: { orient: 'vertical', right: 10, top: 'center', textStyle: { color: c.textSecondary, fontSize: 11 }, itemWidth: 10, itemHeight: 10 },
    series: [{
      type: 'pie', radius: ['45%','70%'], center: ['35%','50%'],
      itemStyle: { borderRadius: 6, borderColor: c.card, borderWidth: 2 },
      label: { show: false },
      data: [
        { value: 320, name: 'Customer Agent', itemStyle: { color: '#10B981' } },
        { value: 280, name: 'Marketing', itemStyle: { color: '#F59E0B' } },
        { value: 240, name: 'Creative', itemStyle: { color: '#EC4899' } },
        { value: 180, name: 'Product Manager', itemStyle: { color: '#3B82F6' } },
        { value: 150, name: 'Analyst', itemStyle: { color: '#8B5CF6' } },
        { value: 120, name: 'Supply Chain', itemStyle: { color: '#06B6D4' } },
        { value: 100, name: 'CFO', itemStyle: { color: c.accentPrimary } },
        { value: 80, name: 'Researcher', itemStyle: { color: '#64748B' } },
      ]
    }]
  }), []);

  const moduleTrendOption = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', backgroundColor: c.card, borderColor: c.border, textStyle: { color: c.textPrimary, fontSize: 11 } },
    legend: { data: ['Customer','Marketing','Creative','Analyst'], textStyle: { color: c.textMuted, fontSize: 10 }, top: 0 },
    grid: { left: '3%', right: '3%', top: 30, bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: ['W1','W2','W3','W4','W5','W6','W7','W8'], axisLine: { lineStyle: { color: c.gridLine } }, axisLabel: { color: c.textMuted, fontSize: 10 }, axisTick: { show: false } },
    yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: c.gridLine, type: 'dashed' } }, axisLabel: { color: c.textMuted, fontSize: 10 } },
    series: [
      { name: 'Customer', type: 'line', smooth: true, data: [30, 38, 42, 38, 45, 48, 52, 55], lineStyle: { color: '#10B981', width: 2 }, itemStyle: { color: '#10B981' }, symbol: 'none', areaStyle: { color: '#10B98110' } },
      { name: 'Marketing', type: 'line', smooth: true, data: [28, 32, 36, 34, 40, 42, 45, 48], lineStyle: { color: '#F59E0B', width: 2 }, itemStyle: { color: '#F59E0B' }, symbol: 'none' },
      { name: 'Creative', type: 'line', smooth: true, data: [20, 25, 30, 28, 32, 36, 40, 42], lineStyle: { color: '#EC4899', width: 2 }, itemStyle: { color: '#EC4899' }, symbol: 'none' },
      { name: 'Analyst', type: 'line', smooth: true, data: [15, 18, 20, 22, 24, 26, 28, 30], lineStyle: { color: '#8B5CF6', width: 2 }, itemStyle: { color: '#8B5CF6' }, symbol: 'none' },
    ]
  }), []);

  return (
    <div className="mbr-usage-page">
      <div className="mbr-page-head">
        <div>
          <h2>{lang === 'zh' ? 'AI 用量统计' : 'AI Usage Statistics'}</h2>
          <p>{lang === 'zh' ? '按AI角色和模块查看用量明细' : 'View usage details by AI role and module'}</p>
        </div>
        <div className="usage-summary">
          <div className="us-item">
            <span className="us-label">{lang === 'zh' ? '本月用量' : 'This Month'}</span>
            <span className="us-value">1,470</span>
            <span className="us-unit">{lang === 'zh' ? '次调用' : 'calls'}</span>
          </div>
          <div className="us-item">
            <span className="us-label">{lang === 'zh' ? '套餐配额' : 'Plan Quota'}</span>
            <span className="us-value accent">3,000</span>
            <span className="us-unit">{lang === 'zh' ? '次/月' : '/mo'}</span>
          </div>
          <div className="us-item">
            <span className="us-label">{lang === 'zh' ? '已使用' : 'Used'}</span>
            <span className="us-value">49%</span>
            <span className="us-bar"><span className="us-bar-fill" style={{ width: '49%' }}></span></span>
          </div>
        </div>
      </div>

      <div className="usage-charts-grid">
        <div className="glass-card chart-card">
          <div className="chart-card-header">
            <h3>{lang === 'zh' ? 'AI角色用量分布' : 'Usage by AI Role'}</h3>
          </div>
          <EChart option={rolePieOption} style={{ height: 260 }} />
        </div>
        <div className="glass-card chart-card">
          <div className="chart-card-header">
            <h3>{lang === 'zh' ? '各模块用量趋势' : 'Module Usage Trend'}</h3>
          </div>
          <EChart option={moduleTrendOption} style={{ height: 260 }} />
        </div>
      </div>

      <style>{`
        .mbr-usage-page { display: flex; flex-direction: column; gap: 16px; }
        .mbr-page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
        .mbr-page-head h2 { font-size: 22px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; margin-bottom: 4px; }
        .mbr-page-head p { font-size: 13px; color: var(--text-secondary); }

        .usage-summary { display: flex; gap: 24px; }
        .us-item { text-align: right; min-width: 90px; }
        .us-label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 2px; }
        .us-value { font-size: 22px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
        .us-value.accent { color: var(--accent-primary); }
        .us-unit { font-size: 11px; color: var(--text-muted); display: block; }
        .us-bar {
          display: block;
          width: 80px;
          height: 6px;
          background: var(--bg-tertiary);
          border-radius: 3px;
          margin-top: 4px;
          margin-left: auto;
          overflow: hidden;
        }
        .us-bar-fill {
          display: block;
          height: 100%;
          background: var(--accent-gradient);
          border-radius: 3px;
        }

        .usage-charts-grid {
          display: grid;
          grid-template-columns: 1fr 1.5fr;
          gap: 14px;
        }
        .chart-card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
        }
        .chart-card-header h3 {
          font-size: 15px;
          font-weight: 700;
          font-family: 'Space Grotesk', sans-serif;
        }

        @media (max-width: 1100px) {
          .usage-charts-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </div>
  );
}

function MemberTeamPermissions() {
  const { lang } = useApp();

  const teamMembers = [
    { name: 'Jane Doe', role: lang === 'zh' ? '所有者' : 'Owner', email: 'jane@ximi.ai', avatar: 'JD', access: 'all', approval: true },
    { name: 'Mike Chen', role: lang === 'zh' ? '运营经理' : 'Ops Manager', email: 'mike@ximi.ai', avatar: 'MC', access: 'partial', approval: true },
    { name: 'Sara Liu', role: lang === 'zh' ? '营销专员' : 'Marketing Specialist', email: 'sara@ximi.ai', avatar: 'SL', access: 'marketing', approval: false },
    { name: 'Tom Wang', role: lang === 'zh' ? '客服专员' : 'CS Specialist', email: 'tom@ximi.ai', avatar: 'TW', access: 'customer', approval: false },
    { name: 'Amy Zhang', role: lang === 'zh' ? '设计师' : 'Designer', email: 'amy@ximi.ai', avatar: 'AZ', access: 'creative', approval: false },
  ];

  const aiRoles = [
    { key: 'ceo', name: 'CEO' },
    { key: 'analyst', name: 'Analyst' },
    { key: 'marketing', name: 'Marketing' },
    { key: 'creative', name: 'Creative' },
    { key: 'product', name: 'Product' },
    { key: 'customer', name: 'Customer Agent' },
    { key: 'supplyChain', name: 'Supply Chain' },
    { key: 'researcher', name: 'Researcher' },
    { key: 'cfo', name: 'CFO' },
  ];

  return (
    <div className="mbr-team-page">
      <div className="mbr-page-head">
        <div>
          <h2>{lang === 'zh' ? '团队管理' : 'Team Management'}</h2>
          <p>{lang === 'zh' ? '管理团队成员的AI角色权限和审批权限' : 'Manage AI role and approval permissions for team members'}</p>
        </div>
        <button className="team-invite-btn"><Icon name="plus" size={12} /> {lang === 'zh' ? '邀请成员' : 'Invite Member'}</button>
      </div>

      <div className="glass-card chart-card">
        <div className="chart-card-header">
          <h3>{lang === 'zh' ? '团队成员' : 'Team Members'} <span className="team-count">{teamMembers.length}</span></h3>
        </div>

        <div className="team-matrix">
          <div className="tm-header">
            <span className="tm-member-col">{lang === 'zh' ? '成员' : 'Member'}</span>
            {aiRoles.slice(0, 6).map(r => (
              <span key={r.key} className="tm-role-col" title={r.name}>{r.name.split(' ')[0]}</span>
            ))}
            <span className="tm-action-col">{lang === 'zh' ? '审批权' : 'Approval'}</span>
          </div>
          {teamMembers.map((m, i) => (
            <div key={i} className="tm-row">
              <div className="tm-member">
                <div className="tm-avatar">{m.avatar}</div>
                <div className="tm-info">
                  <span className="tm-name">{m.name}</span>
                  <span className="tm-role">{m.role}</span>
                </div>
              </div>
              {aiRoles.slice(0, 6).map(r => {
                let hasAccess = m.access === 'all' || m.access === r.key || m.access === 'partial';
                if (m.access === 'partial' && (r.key === 'ceo' || r.key === 'cfo')) hasAccess = false;
                return (
                  <div key={r.key} className="tm-check">
                    {hasAccess ? (
                      <span className="tm-check-yes"><Icon name="check" size={12} /></span>
                    ) : (
                      <span className="tm-check-no"><Icon name="x" size={12} /></span>
                    )}
                  </div>
                );
              })}
              <div className="tm-action">
                <label className="tm-switch">
                  <input type="checkbox" defaultChecked={m.approval} />
                  <span className="tm-slider"></span>
                </label>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .mbr-team-page { display: flex; flex-direction: column; gap: 16px; }
        .mbr-page-head h2 { font-size: 22px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; margin-bottom: 4px; }
        .mbr-page-head p { font-size: 13px; color: var(--text-secondary); }
        .team-invite-btn {
          display: flex;
          align-items: center;
          gap: 5px;
          padding: 8px 18px;
          border-radius: 8px;
          background: var(--accent-gradient);
          color: #fff;
          border: none;
          font-size: 12.5px;
          font-weight: 600;
          cursor: pointer;
          font-family: inherit;
          box-shadow: var(--gold-glow);
        }
        .team-count {
          margin-left: 8px;
          font-size: 12px;
          font-weight: 600;
          color: var(--text-muted);
          background: var(--bg-tertiary);
          padding: 2px 8px;
          border-radius: 10px;
        }

        .team-matrix { display: flex; flex-direction: column; }
        .tm-header, .tm-row {
          display: grid;
          grid-template-columns: 2fr repeat(6, 1fr) 1fr;
          gap: 8px;
          padding: 12px 14px;
          align-items: center;
        }
        .tm-header {
          font-size: 10.5px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: var(--text-muted);
          background: var(--bg-tertiary);
          border-radius: 8px 8px 0 0;
          text-align: center;
        }
        .tm-header .tm-member-col { text-align: left; }
        .tm-row { border-bottom: 1px solid var(--glass-border); font-size: 12.5px; }
        .tm-row:last-child { border-bottom: none; }
        .tm-member { display: flex; gap: 10px; align-items: center; }
        .tm-avatar {
          width: 36px; height: 36px;
          border-radius: 50%;
          background: var(--accent-gradient);
          color: #fff;
          display: flex; align-items: center; justify-content: center;
          font-size: 12px; font-weight: 700;
          flex-shrink: 0;
        }
        .tm-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
        .tm-name { font-weight: 600; font-size: 13px; }
        .tm-role { font-size: 10.5px; color: var(--text-muted); }
        .tm-check { text-align: center; }
        .tm-check-yes { color: var(--success); display: inline-flex; }
        .tm-check-no { color: var(--text-muted); opacity: 0.3; display: inline-flex; }
        .tm-action { text-align: center; display: flex; justify-content: center; }

        .tm-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
        .tm-switch input { opacity: 0; width: 0; height: 0; }
        .tm-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--glass-border); transition: .3s; border-radius: 20px; }
        .tm-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }
        input:checked + .tm-slider { background: var(--accent-gradient); }
        input:checked + .tm-slider:before { transform: translateX(16px); }
      `}</style>
    </div>
  );
}

function MemberLoyaltyPoints() {
  const { lang } = useApp();
  const c = getThemeColors();

  const pointsTrendOption = useMemo(() => ({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', backgroundColor: c.card, borderColor: c.border, textStyle: { color: c.textPrimary, fontSize: 11 } },
    legend: { data: [lang === 'zh' ? '获得' : 'Earned', lang === 'zh' ? '消耗' : 'Redeemed'], textStyle: { color: c.textMuted, fontSize: 11 }, top: 0 },
    grid: { left: '3%', right: '3%', top: 30, bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'], axisLine: { lineStyle: { color: c.gridLine } }, axisLabel: { color: c.textMuted, fontSize: 10 }, axisTick: { show: false } },
    yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: c.gridLine, type: 'dashed' } }, axisLabel: { color: c.textMuted, fontSize: 10 } },
    series: [
      { name: lang === 'zh' ? '获得' : 'Earned', type: 'line', smooth: true, data: [1200, 1800, 1500, 2200, 2000, 2800], lineStyle: { color: c.accentPrimary, width: 2.5 }, itemStyle: { color: c.accentPrimary }, areaStyle: { color: c.accentPrimary + '15' }, symbol: 'none' },
      { name: lang === 'zh' ? '消耗' : 'Redeemed', type: 'line', smooth: true, data: [400, 600, 800, 500, 1000, 1200], lineStyle: { color: c.success, width: 2 }, itemStyle: { color: c.success }, symbol: 'none' },
    ]
  }), [lang]);

  const pointRecords = [
    { date: '2024-10-22', type: 'earn', source: lang === 'zh' ? '订单消费' : 'Order Purchase', points: '+120', order: '#A8921' },
    { date: '2024-10-20', type: 'earn', source: lang === 'zh' ? '邀请好友奖励' : 'Referral Bonus', points: '+500', order: '—' },
    { date: '2024-10-18', type: 'redeem', source: lang === 'zh' ? '兑换优惠券' : 'Redeem Coupon', points: '-300', order: 'CPN-50' },
    { date: '2024-10-15', type: 'earn', source: lang === 'zh' ? '评价晒单' : 'Review Bonus', points: '+50', order: '#A8765' },
    { date: '2024-10-10', type: 'earn', source: lang === 'zh' ? '生日奖励' : 'Birthday Bonus', points: '+200', order: '—' },
    { date: '2024-10-05', type: 'redeem', source: lang === 'zh' ? '升级会员等级' : 'Tier Upgrade', points: '-1000', order: 'Gold Tier' },
  ];

  return (
    <div className="mbr-loyalty-page">
      <div className="loyalty-overview-card glass-card">
        <div className="loy-tier-badge">
          <Icon name="award" size={16} />
          <span>{lang === 'zh' ? '黄金会员' : 'Gold Member'}</span>
        </div>
        <div className="loy-points-main">
          <span className="lp-label">{lang === 'zh' ? 'XIMI 积分余额' : 'XIMI Points Balance'}</span>
          <span className="lp-value">12,580</span>
          <span className="lp-sub">{lang === 'zh' ? '距铂金会员还需 2,420 积分' : '2,420 points to Platinum'}</span>
        </div>
        <div className="loy-progress">
          <div className="lp-bar"><div className="lp-fill" style={{ width: '68%' }}></div></div>
          <span className="lp-progress-text">68% {lang === 'zh' ? '完成度' : 'complete'}</span>
        </div>
        <div className="loy-benefits">
          {[
            { icon: 'gift', label: lang === 'zh' ? '专属折扣' : 'Exclusive Discount' },
            { icon: 'zap', label: lang === 'zh' ? '优先客服' : 'Priority Support' },
            { icon: 'rocket', label: lang === 'zh' ? 'Beta功能' : 'Beta Access' },
            { icon: 'shoppingBag', label: lang === 'zh' ? '双倍积分' : '2x Points' },
          ].map((b, i) => (
            <div key={i} className="loy-benefit">
              <div className="lb-icon"><Icon name={b.icon} size={12} /></div>
              <span>{b.label}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="loyalty-content-grid">
        <div className="glass-card chart-card">
          <div className="chart-card-header">
            <h3>{lang === 'zh' ? '积分趋势' : 'Points Trend'}</h3>
          </div>
          <EChart option={pointsTrendOption} style={{ height: 240 }} />
        </div>

        <div className="glass-card chart-card">
          <div className="chart-card-header">
            <h3>{lang === 'zh' ? '积分记录' : 'Points History'}</h3>
          </div>
          <div className="points-history">
            {pointRecords.map((r, i) => (
              <div key={i} className="ph-row">
                <div className="ph-left">
                  <div className={`ph-icon ph-${r.type}`}>
                    <Icon name={r.type === 'earn' ? 'arrowDown' : 'arrowUp'} size={12} />
                  </div>
                  <div className="ph-info">
                    <span className="ph-source">{r.source}</span>
                    <span className="ph-date">{r.date} · {r.order}</span>
                  </div>
                </div>
                <span className={`ph-points ph-${r.type}`}>{r.points}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .mbr-loyalty-page { display: flex; flex-direction: column; gap: 16px; }

        .loyalty-overview-card {
          padding: 28px 32px;
          background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
          color: #fff;
          border: none;
          display: flex;
          flex-direction: column;
          gap: 16px;
          position: relative;
          overflow: hidden;
        }
        .loyalty-overview-card::before {
          content: '';
          position: absolute;
          top: -50%;
          right: -20%;
          width: 300px;
          height: 300px;
          background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
          border-radius: 50%;
        }
        .loy-tier-badge {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 14px;
          background: rgba(255,255,255,0.2);
          border-radius: 20px;
          font-size: 12px;
          font-weight: 700;
          width: fit-content;
          backdrop-filter: blur(10px);
        }
        .loy-points-main { display: flex; flex-direction: column; gap: 4px; }
        .lp-label { font-size: 13px; opacity: 0.85; }
        .lp-value { font-size: 48px; font-weight: 900; font-family: 'Space Grotesk', sans-serif; line-height: 1; }
        .lp-sub { font-size: 12px; opacity: 0.8; }
        .loy-progress { display: flex; flex-direction: column; gap: 6px; }
        .lp-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden; }
        .lp-fill { height: 100%; background: #fff; border-radius: 4px; }
        .lp-progress-text { font-size: 11px; opacity: 0.85; }
        .loy-benefits {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
          padding-top: 16px;
          border-top: 1px solid rgba(255,255,255,0.2);
        }
        .loy-benefit { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
        .lb-icon {
          width: 28px; height: 28px;
          border-radius: 7px;
          background: rgba(255,255,255,0.2);
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }

        .loyalty-content-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
        }
        .chart-card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
        }
        .chart-card-header h3 {
          font-size: 15px;
          font-weight: 700;
          font-family: 'Space Grotesk', sans-serif;
        }

        .points-history { display: flex; flex-direction: column; gap: 2px; }
        .ph-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 12px;
          border-radius: 8px;
          transition: background 0.15s;
        }
        .ph-row:hover { background: var(--bg-tertiary); }
        .ph-left { display: flex; align-items: center; gap: 10px; }
        .ph-icon {
          width: 32px; height: 32px;
          border-radius: 8px;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }
        .ph-earn { background: var(--success + '20'); color: var(--success); }
        .ph-redeem { background: var(--warning + '20'); color: var(--warning); }
        .ph-info { display: flex; flex-direction: column; gap: 2px; }
        .ph-source { font-size: 12.5px; font-weight: 600; }
        .ph-date { font-size: 10.5px; color: var(--text-muted); }
        .ph-points { font-size: 14px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
        .ph-points.ph-earn { color: var(--success); }
        .ph-points.ph-redeem { color: var(--warning); }

        @media (max-width: 1100px) {
          .loyalty-content-grid { grid-template-columns: 1fr; }
          .loy-benefits { grid-template-columns: repeat(2, 1fr); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, {
  MemberPerformancePlan,
  MemberUsageStats,
  MemberTeamPermissions,
  MemberLoyaltyPoints,
});