// 管道收益首页 - 纯静态保底版本（零异步、零弹窗，保证不卡死）

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

  const gridItems = [
    { label: '我的管道', icon: '🌳', color: '#10B981', action: () => navigate('pipe-team') },
    { label: '收益明细', icon: '📊', color: '#8B5CF6', action: () => navigate('pipe-income-detail') },
    { label: '代理中心', icon: '🏢', color: '#F59E0B', action: () => navigate('pipe-agent') },
    { label: '第三方项目', icon: '🚀', color: '#EC4899', action: () => navigate('pipe-third') },
    { label: '管道学院', icon: '📚', color: '#0EA5E9', action: () => navigate('pipe-academy') },
    { label: '提现', icon: '💳', color: '#EF4444', action: () => showToast('提现功能开发中') },
    { label: '收益规则', icon: '📖', color: '#14B8A6', action: () => showToast('收益规则开发中') },
    { label: '邀请海报', icon: '🖼️', color: '#A855F7', action: () => showToast('海报功能开发中') },
  ];

  const copyText = (text, label = '已复制') => {
    if (!text) return;
    try {
      navigator.clipboard.writeText(text);
      showToast(label);
    } catch (e) {
      const ta = document.createElement('textarea');
      ta.value = text;
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
      showToast(label);
    }
  };

  return (
    <PageWrapper>
      <AppHeader
        title="管道收益"
        subtitle="打造多重收入管道"
        showBack
        onBack={goBack}
      />

      {/* 顶部核心数据 - 静态示例 */}
      <div style={{
        background: 'linear-gradient(135deg, #FF6B3D 0%, #FF8A3D 50%, #FFA94D 100%)',
        margin: '-10px -16px 0',
        padding: '20px 20px 30px',
        color: '#fff',
        position: 'relative',
      }}>
        <div style={{ fontSize: 12, opacity: 0.85, marginBottom: 6 }}>累计收益 (元)</div>
        <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: 1 }}>
          ¥ 2,688.50
        </div>
        <div style={{
          display: 'flex',
          marginTop: 16,
          gap: 0,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, opacity: 0.8 }}>今日收益</div>
            <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2 }}>
              ¥68.80
            </div>
          </div>
          <div style={{ flex: 1, borderLeft: '1px solid rgba(255,255,255,0.3)' }}>
            <div style={{ fontSize: 11, opacity: 0.8, paddingLeft: 12 }}>昨日收益</div>
            <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2, paddingLeft: 12 }}>
              ¥126.50
            </div>
          </div>
          <div style={{ flex: 1, borderLeft: '1px solid rgba(255,255,255,0.3)' }}>
            <div style={{ fontSize: 11, opacity: 0.8, paddingLeft: 12 }}>待结算</div>
            <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2, paddingLeft: 12 }}>
              ¥356.00
            </div>
          </div>
        </div>
      </div>

      {/* 可提现 + 已提现 */}
      <div style={{
        display: 'flex',
        margin: '-15px 0 12px',
        position: 'relative',
        zIndex: 2,
      }}>
        <div className="card card-shadow" style={{
          flex: 1,
          marginRight: 6,
          padding: '14px 12px',
          textAlign: 'center',
        }}>
          <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginBottom: 4 }}>可提现余额</div>
          <div style={{ fontSize: 20, fontWeight: 700, color: '#FF6B3D' }}>
            ¥1,280.50
          </div>
          <div
            onClick={() => showToast('提现功能开发中')}
            style={{
              marginTop: 8,
              fontSize: 12,
              color: '#fff',
              background: 'linear-gradient(135deg, #FF6B3D, #FF8A3D)',
              padding: '4px 0',
              borderRadius: 12,
              cursor: 'pointer',
              fontWeight: 500,
            }}
          >立即提现</div>
        </div>
        <div className="card card-shadow" style={{
          flex: 1,
          marginLeft: 6,
          padding: '14px 12px',
          textAlign: 'center',
        }}>
          <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginBottom: 4 }}>已提现金额</div>
          <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)' }}>
            ¥1,052.00
          </div>
          <div
            onClick={() => navigate('pipe-income-detail', { tab: 'withdraw' })}
            style={{
              marginTop: 8,
              fontSize: 12,
              color: 'var(--text-secondary)',
              border: '1px solid var(--border)',
              padding: '4px 0',
              borderRadius: 12,
              cursor: 'pointer',
            }}
          >查看记录</div>
        </div>
      </div>

      {/* 管道人数总览 */}
      <div className="card card-shadow" style={{ marginBottom: 12, padding: '14px 16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>我的管道</div>
          <div
            onClick={() => navigate('pipe-team')}
            style={{ fontSize: 12, color: 'var(--primary)', cursor: 'pointer' }}
          >查看全部 →</div>
        </div>
        <div style={{
          display: 'flex',
          textAlign: 'center',
          background: 'var(--bg-page)',
          borderRadius: 10,
          padding: '12px 0',
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 700, color: '#10B981' }}>12</div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>一级好友</div>
          </div>
          <div style={{ flex: 1, borderLeft: '1px solid var(--border)' }}>
            <div style={{ fontSize: 18, fontWeight: 700, color: '#0EA5E9' }}>38</div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>二级好友</div>
          </div>
          <div style={{ flex: 1, borderLeft: '1px solid var(--border)' }}>
            <div style={{ fontSize: 18, fontWeight: 700, color: '#8B5CF6' }}>76</div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>三级好友</div>
          </div>
          <div style={{ flex: 1, borderLeft: '1px solid var(--border)' }}>
            <div style={{ fontSize: 18, fontWeight: 700, color: '#F59E0B' }}>126</div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>总人数</div>
          </div>
        </div>
      </div>

      {/* 我的邀请码 */}
      <div className="card card-shadow" style={{ marginBottom: 12, padding: '14px 16px' }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 10 }}>
          我的邀请
        </div>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          background: 'var(--bg-page)',
          borderRadius: 10,
          padding: 12,
          marginBottom: 10,
        }}>
          <div style={{
            width: 48, height: 48,
            background: 'linear-gradient(135deg, #FF6B3D, #FFA94D)',
            borderRadius: 10,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff',
            fontSize: 20,
            flexShrink: 0,
          }}>🎫</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginBottom: 2 }}>专属邀请码</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-primary)', letterSpacing: 1 }}>
              ABC888
            </div>
          </div>
          <div
            onClick={() => copyText('ABC888', '邀请码已复制')}
            style={{
              padding: '6px 14px',
              borderRadius: 14,
              background: '#FF6B3D',
              color: '#fff',
              fontSize: 12,
              fontWeight: 500,
              cursor: 'pointer',
              flexShrink: 0,
            }}
          >复制</div>
        </div>
        <div style={{
          display: 'flex',
          gap: 8,
        }}>
          <div
            onClick={() => copyText('https://jiucun.com/invite/ABC888', '邀请链接已复制')}
            style={{
              flex: 1,
              height: 34,
              borderRadius: 17,
              border: '1px solid #FF6B3D',
              color: '#FF6B3D',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 13,
              cursor: 'pointer',
              gap: 4,
            }}
          >🔗 复制链接</div>
          <div
            onClick={() => showToast('海报功能开发中')}
            style={{
              flex: 1,
              height: 34,
              borderRadius: 17,
              background: 'linear-gradient(135deg, #FF6B3D, #FF8A3D)',
              color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 13,
              fontWeight: 500,
              cursor: 'pointer',
              gap: 4,
            }}
          >🖼️ 邀请海报</div>
        </div>
      </div>

      {/* 管道收益精选 - 横向滚动卡片 */}
      <div style={{ marginBottom: 12 }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: 10,
          padding: '0 2px',
        }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
            📚 管道收益精选
          </div>
          <div
            onClick={() => navigate('pipe-academy')}
            style={{ fontSize: 12, color: '#FF6B3D', cursor: 'pointer' }}
          >更多 →</div>
        </div>
        <div style={{
          display: 'flex',
          gap: 10,
          overflowX: 'auto',
          paddingBottom: 4,
          scrollbarWidth: 'none',
          msOverflowStyle: 'none',
        }}>
          {PIPE_ARTICLES.slice(0, 4).map(article => (
            <div
              key={article.id}
              onClick={() => navigate('pipe-article-detail', { id: article.id })}
              style={{
                width: 220,
                flexShrink: 0,
                borderRadius: 12,
                overflow: 'hidden',
                background: 'var(--bg-card)',
                boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
                cursor: 'pointer',
              }}
            >
              {/* 封面 */}
              <div style={{
                height: 90,
                background: `linear-gradient(135deg, ${article.coverColor} 0%, ${article.coverColor}cc 100%)`,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 36,
                color: '#fff',
                position: 'relative',
              }}>
                {article.icon}
                <div style={{
                  position: 'absolute',
                  top: 8,
                  left: 10,
                  padding: '2px 8px',
                  borderRadius: 8,
                  background: 'rgba(255,255,255,0.25)',
                  color: '#fff',
                  fontSize: 10,
                  fontWeight: 500,
                }}>
                  {PIPE_ARTICLE_CATEGORIES.find(c => c.key === article.category)?.label}
                </div>
              </div>
              {/* 内容 */}
              <div style={{ padding: '10px 12px 12px' }}>
                <div style={{
                  fontSize: 13,
                  fontWeight: 600,
                  color: 'var(--text-primary)',
                  lineHeight: 1.4,
                  marginBottom: 6,
                  display: '-webkit-box',
                  WebkitLineClamp: 2,
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                  height: 36,
                }}>
                  {article.title}
                </div>
                <div style={{
                  fontSize: 11,
                  color: 'var(--text-tertiary)',
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                }}>
                  <span>👁 {article.reads.toLocaleString()}</span>
                  <span>·</span>
                  <span>{Math.ceil(article.paragraphs.length * 0.3)} 分钟</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 功能宫格 */}
      <div className="card card-shadow" style={{ marginBottom: 12, padding: '14px 12px' }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 12, paddingLeft: 4 }}>
          功能入口
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 8,
        }}>
          {gridItems.map(item => (
            <div
              key={item.label}
              onClick={item.action}
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                padding: '12px 4px',
                borderRadius: 10,
                cursor: 'pointer',
                transition: 'background 0.2s',
              }}
            >
              <div style={{
                width: 42, height: 42,
                borderRadius: 12,
                background: `linear-gradient(135deg, ${item.color}, ${item.color}99)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 20,
                marginBottom: 6,
              }}>{item.icon}</div>
              <span style={{ fontSize: 12, color: 'var(--text-primary)' }}>{item.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* 提示文案 */}
      <div style={{
        fontSize: 11,
        color: 'var(--text-tertiary)',
        textAlign: 'center',
        padding: '8px 20px 20px',
        lineHeight: 1.6,
      }}>
        管道收益 = 三级分销佣金 + 代理分润 + 第三方项目推广<br/>
        邀请好友加入，享受持续被动收入
      </div>
    </PageWrapper>
  );
}

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