// 管道收益 - 我的管道（纯静态保底版本）

function PipeTeamPage() {
  const { navigate, goBack, showToast } = useApp();

  const teamStats = [
    { level: 1, label: '一级好友', count: 12, color: '#10B981' },
    { level: 2, label: '二级好友', count: 38, color: '#0EA5E9' },
    { level: 3, label: '三级好友', count: 76, color: '#8B5CF6' },
  ];

  const mockMembers = [
    { name: '张小明', avatar: '张', level: 1, joinTime: '2024-08-15', commission: 268.50 },
    { name: '李华', avatar: '李', level: 1, joinTime: '2024-08-20', commission: 156.80 },
    { name: '王芳', avatar: '王', level: 1, joinTime: '2024-09-01', commission: 98.20 },
    { name: '陈建国', avatar: '陈', level: 2, joinTime: '2024-07-10', commission: 45.60 },
    { name: '刘美玲', avatar: '刘', level: 2, joinTime: '2024-07-22', commission: 32.40 },
    { name: '赵强', avatar: '赵', level: 3, joinTime: '2024-06-15', commission: 18.90 },
  ];

  const [activeLevel, setActiveLevel] = React.useState(1);

  const filteredList = mockMembers.filter(m => m.level === activeLevel);
  const levelColor = teamStats.find(t => t.level === activeLevel)?.color || '#10B981';

  return (
    <PageWrapper>
      <AppHeader title="我的管道" showBack onBack={goBack} />

      {/* 三级管道总览 */}
      <div style={{
        background: 'linear-gradient(135deg, #10B981 0%, #34D399 100%)',
        margin: '-10px -16px 0',
        padding: '20px 16px 24px',
        color: '#fff',
      }}>
        <div style={{ fontSize: 13, opacity: 0.9, marginBottom: 12 }}>
          管道总人数 <span style={{ fontSize: 20, fontWeight: 700 }}>126</span> 人
        </div>
        <div style={{ display: 'flex', textAlign: 'center' }}>
          {teamStats.map(t => (
            <div
              key={t.level}
              onClick={() => setActiveLevel(t.level)}
              style={{
                flex: 1,
                padding: '10px 0',
                borderRadius: 10,
                cursor: 'pointer',
                background: activeLevel === t.level ? 'rgba(255,255,255,0.25)' : 'transparent',
                transition: 'background 0.2s',
              }}
            >
              <div style={{ fontSize: 20, fontWeight: 700 }}>{t.count}</div>
              <div style={{ fontSize: 11, opacity: 0.9, marginTop: 2 }}>{t.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 管道关系说明 */}
      <div className="card card-shadow" style={{ margin: '-12px 16px 12px', padding: '12px 14px', position: 'relative', zIndex: 2 }}>
        <div style={{ fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.6 }}>
          <span style={{ color: '#10B981', fontWeight: 600 }}>一级 15%</span>：你直接邀请的好友<br/>
          <span style={{ color: '#0EA5E9', fontWeight: 600 }}>二级 8%</span>：好友邀请的好友<br/>
          <span style={{ color: '#8B5CF6', fontWeight: 600 }}>三级 5%</span>：好友的好友邀请的好友
        </div>
      </div>

      {/* 成员列表 */}
      <div style={{ padding: '0 16px 24px' }}>
        <div style={{
          fontSize: 13,
          fontWeight: 600,
          color: 'var(--text-primary)',
          marginBottom: 10,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <span>{teamStats[activeLevel - 1]?.label} ({filteredList.length})</span>
          <span style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-tertiary)' }}>
            累计贡献收益
          </span>
        </div>

        {filteredList.length === 0 ? (
          <div style={{
            padding: '60px 20px',
            textAlign: 'center',
            color: 'var(--text-tertiary)',
          }}>
            <div style={{ fontSize: 48, marginBottom: 10 }}>🌱</div>
            <div style={{ fontSize: 13, marginBottom: 4 }}>还没有{teamStats[activeLevel - 1]?.label}</div>
            <div style={{ fontSize: 11 }}>快去邀请好友加入吧</div>
          </div>
        ) : (
          filteredList.map((item, idx) => (
            <div
              key={idx}
              className="card card-shadow"
              style={{
                marginBottom: 8,
                padding: 12,
                display: 'flex',
                gap: 10,
                alignItems: 'center',
                cursor: 'pointer',
              }}
              onClick={() => showToast('查看成员详情功能开发中')}
            >
              <div style={{
                width: 42, height: 42,
                borderRadius: '50%',
                background: `linear-gradient(135deg, ${levelColor}, ${levelColor}99)`,
                color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 16, fontWeight: 600,
                flexShrink: 0,
              }}>
                {item.avatar}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 2 }}>
                  {item.name}
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>
                  加入于 {item.joinTime}
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{
                  fontSize: 14,
                  fontWeight: 700,
                  color: '#FF6B3D',
                }}>
                  ¥{item.commission.toFixed(2)}
                </div>
                <div style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>累计贡献</div>
              </div>
            </div>
          ))
        )}
      </div>
    </PageWrapper>
  );
}

Object.assign(window, {
  PipeTeamPage,
});