// 管道收益 - 收益明细（纯静态保底版本）

function PipeIncomeDetailPage({ initialTab = 'all' }) {
  const { goBack, pageParams } = useApp();
  const [activeTab, setActiveTab] = React.useState(pageParams?.tab || initialTab || 'all');

  const tabs = [
    { key: 'all', label: '全部' },
    { key: 'platform', label: '平台分佣' },
    { key: 'agent_saas', label: '代理分润' },
    { key: 'third_party', label: '第三方' },
    { key: 'withdraw', label: '提现' },
  ];

  const mockRecords = [
    { id: 1, type: 'platform', amount: 29.90, name: '会员套餐月卡', desc: '平台消费分佣', from: '张小明', level: 1, status: 'settled', time: '2024-09-20 10:32' },
    { id: 2, type: 'platform', amount: 59.80, name: '会员套餐年卡', desc: '平台消费分佣', from: '李华', level: 1, status: 'settled', time: '2024-09-19 15:20' },
    { id: 3, type: 'agent_saas', amount: 200.00, name: 'SaaS子站分润', desc: '下级代理分润', from: '城南分站', level: 2, status: 'settled', time: '2024-09-18 09:00' },
    { id: 4, type: 'third_party', amount: 45.00, name: '某平台会员推广', desc: '第三方项目佣金', from: '直接推广', level: 0, status: 'pending', time: '2024-09-17 20:15' },
    { id: 5, type: 'platform', amount: 12.50, name: '记账模块', desc: '平台消费分佣', from: '王芳', level: 1, status: 'settled', time: '2024-09-16 14:22' },
    { id: 6, type: 'withdraw', amount: -200.00, name: '提现到支付宝', desc: '收益提现', from: '', level: 0, status: 'completed', time: '2024-09-15 11:30' },
    { id: 7, type: 'platform', amount: 8.80, name: '云祭祀', desc: '三级分销佣金', from: '赵强', level: 3, status: 'settled', time: '2024-09-14 16:45' },
    { id: 8, type: 'agent_saas', amount: 80.00, name: '城市代理分润', desc: 'SaaS子站分润', from: '城西分站', level: 2, status: 'pending', time: '2024-09-13 10:00' },
  ];

  const filtered = activeTab === 'all'
    ? mockRecords
    : mockRecords.filter(r => r.type === activeTab);

  const typeIcon = (type) => {
    if (type === 'platform') return '💰';
    if (type === 'agent_saas') return '🏢';
    if (type === 'third_party') return '🚀';
    if (type === 'withdraw') return '💳';
    return '📊';
  };

  const typeGradient = (type) => {
    if (type === 'platform') return 'linear-gradient(135deg, #10B981, #34D399)';
    if (type === 'agent_saas') return 'linear-gradient(135deg, #F59E0B, #FBBF24)';
    if (type === 'third_party') return 'linear-gradient(135deg, #EC4899, #F472B6)';
    if (type === 'withdraw') return 'linear-gradient(135deg, #EF4444, #F87171)';
    return 'linear-gradient(135deg, #8B5CF6, #A78BFA)';
  };

  const statusLabel = (s) => {
    const map = { pending: '待结算', settled: '已结算', completed: '已完成', processing: '处理中' };
    return map[s] || s;
  };

  const statusColor = (s) => {
    if (s === 'pending' || s === 'processing') return '#F59E0B';
    if (s === 'settled' || s === 'completed') return '#10B981';
    return 'var(--text-tertiary)';
  };

  return (
    <PageWrapper>
      <AppHeader title="收益明细" showBack onBack={goBack} />

      {/* Tab 切换 */}
      <div style={{
        display: 'flex',
        background: 'var(--bg-card)',
        borderBottom: '1px solid var(--border)',
        position: 'sticky',
        top: 49,
        zIndex: 10,
        overflowX: 'auto',
        whiteSpace: 'nowrap',
      }}>
        {tabs.map(t => (
          <div
            key={t.key}
            onClick={() => setActiveTab(t.key)}
            style={{
              padding: '12px 14px',
              fontSize: 13,
              color: activeTab === t.key ? 'var(--primary)' : 'var(--text-secondary)',
              fontWeight: activeTab === t.key ? 600 : 400,
              borderBottom: activeTab === t.key ? '2px solid var(--primary)' : '2px solid transparent',
              cursor: 'pointer',
              flexShrink: 0,
            }}
          >
            {t.label}
          </div>
        ))}
      </div>

      <div style={{ padding: '12px 16px 24px' }}>
        {filtered.length === 0 ? (
          <div style={{
            padding: '80px 20px',
            textAlign: 'center',
            color: 'var(--text-tertiary)',
          }}>
            <div style={{ fontSize: 48, marginBottom: 10 }}>📋</div>
            <div style={{ fontSize: 13 }}>暂无收益记录</div>
          </div>
        ) : (
          filtered.map(item => (
            <div
              key={item.id}
              className="card card-shadow"
              style={{
                marginBottom: 8,
                padding: 12,
                display: 'flex',
                gap: 10,
                alignItems: 'center',
              }}
            >
              <div style={{
                width: 38, height: 38,
                borderRadius: '50%',
                background: typeGradient(item.type),
                color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 16,
                flexShrink: 0,
              }}>
                {typeIcon(item.type)}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 13,
                  fontWeight: 600,
                  color: 'var(--text-primary)',
                  marginBottom: 2,
                  display: '-webkit-box',
                  WebkitLineClamp: 1,
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                }}>
                  {item.name}
                </div>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  fontSize: 11,
                  color: 'var(--text-tertiary)',
                }}>
                  <span>{item.desc}</span>
                  {item.from && <span>· {item.from}</span>}
                  {item.level > 0 && <span>第{item.level}级</span>}
                </div>
                <div style={{ fontSize: 10, color: statusColor(item.status), marginTop: 2 }}>
                  {statusLabel(item.status)}
                </div>
              </div>
              <div style={{ textAlign: 'right', flexShrink: 0 }}>
                <div style={{
                  fontSize: 15,
                  fontWeight: 700,
                  color: item.amount < 0 ? '#EF4444' : '#FF6B3D',
                }}>
                  {item.amount < 0 ? '-' : '+'}¥{Math.abs(item.amount).toFixed(2)}
                </div>
                <div style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 2 }}>
                  {item.time.slice(5)}
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </PageWrapper>
  );
}

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