// 管道收益 - 第三方项目推广（纯静态保底版本，零弹窗零异步）

function PipeThirdPage() {
  const { goBack, showToast } = useApp();
  const [activeTab, setActiveTab] = React.useState('market');

  const marketProjects = [
    { id: 1, title: '某平台会员推广', category: '生活服务', joinCount: 2568, commission: '30%', icon: '🚀', desc: '国内知名生活服务平台，会员体系完善，用户粘性高，推广转化效果好，佣金比例优厚。' },
    { id: 2, title: '在线教育课程', category: '知识付费', joinCount: 1892, commission: '25%', icon: '📚', desc: '精选在线课程，涵盖职场、英语、编程等多个领域，质量有保障，用户复购率高。' },
    { id: 3, title: '健身会员卡', category: '本地生活', joinCount: 1056, commission: '40元/单', icon: '💪', desc: '连锁健身品牌，全国门店通用，新用户首月优惠活动进行中，推广奖励丰厚。' },
    { id: 4, title: '金融理财', category: '金融服务', joinCount: 834, commission: '50元/单', icon: '💰', desc: '正规持牌金融机构，新用户注册送体验金，首投奖励更高，适合推广给有理财需求的用户。' },
  ];

  const myProjects = [
    { id: 101, title: '某平台会员推广', is_platform: true, commission: '30%', orders: 28, income: 1260.50, link: 'https://example.com/promo/abc123' },
    { id: 102, title: '我的淘宝客项目', is_platform: false, commission: '15%', orders: 56, income: 890.30, link: 'https://taobao.com/shop/xxx' },
  ];

  const copyText = (text, label = '已复制') => {
    try {
      navigator.clipboard.writeText(text);
      showToast(label);
    } catch (e) {
      showToast(label);
    }
  };

  return (
    <PageWrapper>
      <AppHeader title="第三方项目" showBack onBack={goBack} />

      {/* Tab */}
      <div style={{
        display: 'flex',
        background: 'var(--bg-card)',
        borderBottom: '1px solid var(--border)',
      }}>
        <div
          onClick={() => setActiveTab('market')}
          style={{
            flex: 1,
            padding: '12px 0',
            textAlign: 'center',
            fontSize: 13,
            color: activeTab === 'market' ? 'var(--primary)' : 'var(--text-secondary)',
            fontWeight: activeTab === 'market' ? 600 : 400,
            borderBottom: activeTab === 'market' ? '2px solid var(--primary)' : '2px solid transparent',
            cursor: 'pointer',
          }}
        >项目市场</div>
        <div
          onClick={() => setActiveTab('my')}
          style={{
            flex: 1,
            padding: '12px 0',
            textAlign: 'center',
            fontSize: 13,
            color: activeTab === 'my' ? 'var(--primary)' : 'var(--text-secondary)',
            fontWeight: activeTab === 'my' ? 600 : 400,
            borderBottom: activeTab === 'my' ? '2px solid var(--primary)' : '2px solid transparent',
            cursor: 'pointer',
          }}
        >
          我推广的 ({myProjects.length})
        </div>
      </div>

      <div style={{ padding: '12px 16px 24px' }}>
        {/* 项目市场 */}
        {activeTab === 'market' && (
          <>
            <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 10, paddingLeft: 2 }}>
              平台合作的第三方项目，加入即可推广赚佣金
            </div>
            {marketProjects.map(p => (
              <div
                key={p.id}
                className="card card-shadow"
                style={{ marginBottom: 10, padding: 14 }}
              >
                <div style={{ display: 'flex', gap: 12, marginBottom: 10 }}>
                  <div style={{
                    width: 48, height: 48,
                    borderRadius: 12,
                    background: 'linear-gradient(135deg, #EC4899, #F472B6)',
                    color: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 24,
                    flexShrink: 0,
                  }}>{p.icon}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 2 }}>
                      {p.title}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginBottom: 4 }}>
                      {p.category} · {p.joinCount} 人参与
                    </div>
                    <div style={{ fontSize: 12, color: '#EC4899', fontWeight: 600 }}>
                      佣金 {p.commission}
                    </div>
                  </div>
                </div>
                <div style={{
                  fontSize: 12,
                  color: 'var(--text-secondary)',
                  lineHeight: 1.6,
                  marginBottom: 12,
                  display: '-webkit-box',
                  WebkitLineClamp: 2,
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                }}>{p.desc}</div>
                <div
                  onClick={() => showToast('加入推广功能开发中')}
                  style={{
                    height: 36,
                    borderRadius: 18,
                    background: 'linear-gradient(135deg, #EC4899, #F472B6)',
                    color: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 13,
                    fontWeight: 600,
                    cursor: 'pointer',
                  }}
                >
                  立即加入推广
                </div>
              </div>
            ))}
          </>
        )}

        {/* 我推广的 */}
        {activeTab === 'my' && (
          <>
            <div
              onClick={() => showToast('添加项目功能开发中')}
              style={{
                marginBottom: 12,
                height: 44,
                borderRadius: 10,
                border: '1px dashed #EC4899',
                color: '#EC4899',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 500,
                cursor: 'pointer',
                gap: 6,
              }}
            >
              <span style={{ fontSize: 16 }}>+</span>
              添加自定义推广项目
            </div>

            {myProjects.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 }}>暂无推广项目</div>
                <div style={{ fontSize: 11 }}>从项目市场加入或添加自定义项目</div>
              </div>
            ) : (
              myProjects.map(p => (
                <div
                  key={p.id}
                  className="card card-shadow"
                  style={{ marginBottom: 10, padding: 14 }}
                >
                  <div style={{ display: 'flex', gap: 10, marginBottom: 10 }}>
                    <div style={{
                      width: 42, height: 42,
                      borderRadius: 10,
                      background: p.is_platform
                        ? 'linear-gradient(135deg, #EC4899, #F472B6)'
                        : 'linear-gradient(135deg, #8B5CF6, #A78BFA)',
                      color: '#fff',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 18,
                      flexShrink: 0,
                    }}>{p.is_platform ? '🚀' : '📦'}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 2 }}>
                        {p.title}
                        <span style={{
                          fontSize: 10, marginLeft: 6,
                          padding: '1px 5px', borderRadius: 3,
                          background: p.is_platform ? 'rgba(236,72,153,0.1)' : 'rgba(139,92,246,0.1)',
                          color: p.is_platform ? '#EC4899' : '#8B5CF6',
                          fontWeight: 500,
                          verticalAlign: 'middle',
                        }}>{p.is_platform ? '平台' : '自定义'}</span>
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>
                        佣金 {p.commission} · {p.orders} 单
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 15, fontWeight: 700, color: '#FF6B3D' }}>
                        ¥{p.income.toFixed(2)}
                      </div>
                      <div style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>累计收益</div>
                    </div>
                  </div>

                  {/* 推广链接 */}
                  <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 8,
                    background: 'var(--bg-page)',
                    borderRadius: 8,
                    padding: '8px 10px',
                    marginBottom: 8,
                  }}>
                    <span style={{
                      fontSize: 11,
                      color: 'var(--text-tertiary)',
                      flexShrink: 0,
                    }}>推广链接：</span>
                    <span style={{
                      flex: 1,
                      fontSize: 11,
                      color: 'var(--text-secondary)',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }}>{p.link}</span>
                    <span
                      onClick={() => copyText(p.link, '链接已复制')}
                      style={{
                        fontSize: 11,
                        color: 'var(--primary)',
                        flexShrink: 0,
                        cursor: 'pointer',
                        padding: '2px 8px',
                        borderRadius: 4,
                        background: 'rgba(22,93,255,0.08)',
                      }}
                    >复制</span>
                  </div>

                  <div style={{ display: 'flex', gap: 8 }}>
                    <div
                      onClick={() => showToast('登记佣金功能开发中')}
                      style={{
                        flex: 1, height: 32,
                        borderRadius: 16,
                        border: '1px solid #EC4899',
                        color: '#EC4899',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 12,
                        cursor: 'pointer',
                      }}
                    >登记佣金</div>
                    <div
                      onClick={() => copyText(p.link, '链接已复制')}
                      style={{
                        flex: 1, height: 32,
                        borderRadius: 16,
                        background: 'linear-gradient(135deg, #EC4899, #F472B6)',
                        color: '#fff',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 12, fontWeight: 500,
                        cursor: 'pointer',
                      }}
                    >复制链接</div>
                  </div>
                </div>
              ))
            )}
          </>
        )}
      </div>
    </PageWrapper>
  );
}

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