// 管道收益 - 代理中心（纯静态保底版本，零弹窗零异步）

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

  const levelConfig = [
    { key: 'promoter', name: '普通推广员', rate: 0.15, min_team: 0, saas_allowed: false, desc: '基础三级分销' },
    { key: 'district', name: '区县代理', rate: 0.20, min_team: 20, saas_allowed: false, desc: '区县独家代理' },
    { key: 'city', name: '城市代理', rate: 0.25, min_team: 100, saas_allowed: true, desc: '地级市独家代理' },
    { key: 'province', name: '省级代理', rate: 0.30, min_team: 500, saas_allowed: true, desc: '省级独家授权' },
  ];

  const myLevel = 'district';
  const myLevelInfo = levelConfig.find(l => l.key === myLevel) || levelConfig[0];

  const tabs = [
    { key: 'overview', label: '代理权益' },
    { key: 'sites', label: '我的子站 (2)' },
    { key: 'sub-agents', label: '下级代理 (3)' },
  ];

  const mockSites = [
    { name: '城南生活分站', domain: 'chengnan.jiucun.com', users: 256, orders: 1024, income: 3680.50, status: 'active' },
    { name: '城西商圈分站', domain: 'chengxi.jiucun.com', users: 128, orders: 456, income: 1520.30, status: 'active' },
  ];

  const mockSubAgents = [
    { name: '王建国', level: '区县代理', region: '武侯区', team: 36, income: 2680.00 },
    { name: '李美玲', level: '区县代理', region: '锦江区', team: 28, income: 1950.50 },
    { name: '张涛', level: '区县代理', region: '青羊区', team: 15, income: 860.20 },
  ];

  return (
    <PageWrapper>
      <AppHeader title="代理中心" showBack onBack={goBack} />

      {/* 顶部卡片 */}
      <div style={{
        background: 'linear-gradient(135deg, #F59E0B 0%, #FBBF24 50%, #FCD34D 100%)',
        margin: '-10px -16px 0',
        padding: '20px 20px 24px',
        color: '#fff',
      }}>
        <div style={{ fontSize: 12, opacity: 0.9, marginBottom: 4 }}>我的代理等级</div>
        <div style={{ fontSize: 26, fontWeight: 700, marginBottom: 12 }}>
          {myLevelInfo.name}
        </div>
        <div style={{ display: 'flex', gap: 0 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, opacity: 0.8 }}>团队人数</div>
            <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2 }}>126</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 }}>
              ¥5,860.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 }}>
              {myLevelInfo.rate * 100}%
            </div>
          </div>
        </div>
        <div
          onClick={() => showToast('代理申请功能开发中')}
          style={{
            marginTop: 14,
            height: 36,
            borderRadius: 18,
            background: 'rgba(255,255,255,0.25)',
            border: '1px solid rgba(255,255,255,0.5)',
            color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 13, fontWeight: 600,
            cursor: 'pointer',
          }}
        >升级更高等级代理</div>
      </div>

      {/* Tab */}
      <div style={{
        display: 'flex',
        background: 'var(--bg-card)',
        borderBottom: '1px solid var(--border)',
      }}>
        {tabs.map(t => (
          <div
            key={t.key}
            onClick={() => setActiveTab(t.key)}
            style={{
              flex: 1,
              padding: '12px 0',
              textAlign: 'center',
              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',
            }}
          >{t.label}</div>
        ))}
      </div>

      <div style={{ padding: '12px 16px 24px' }}>
        {/* 代理权益 */}
        {activeTab === 'overview' && (
          <>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 10 }}>
              代理等级 & 权益
            </div>
            {levelConfig.map((lvl, idx) => {
              const isCurrent = lvl.key === myLevel;
              const canSaas = lvl.saas_allowed;
              return (
                <div
                  key={lvl.key}
                  className="card card-shadow"
                  style={{
                    marginBottom: 8,
                    padding: 14,
                    borderLeft: isCurrent ? '3px solid #F59E0B' : '3px solid transparent',
                    opacity: isCurrent ? 1 : 0.85,
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{
                        width: 32, height: 32, borderRadius: 8,
                        background: `linear-gradient(135deg, ${idx === 0 ? '#9CA3AF' : idx === 1 ? '#10B981' : idx === 2 ? '#F59E0B' : '#8B5CF6'}, ${idx === 0 ? '#D1D5DB' : idx === 1 ? '#34D399' : idx === 2 ? '#FBBF24' : '#A78BFA'})`,
                        color: '#fff',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 14,
                      }}>
                        {idx === 0 ? '🌱' : idx === 1 ? '🏘️' : idx === 2 ? '🏙️' : '🗺️'}
                      </div>
                      <div>
                        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
                          {lvl.name}
                          {isCurrent && (
                            <span style={{
                              fontSize: 10, marginLeft: 6,
                              padding: '1px 6px',
                              borderRadius: 4,
                              background: '#F59E0B',
                              color: '#fff',
                              fontWeight: 500,
                            }}>当前</span>
                          )}
                        </div>
                        <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 1 }}>
                          分润 {lvl.rate * 100}% · 团队 {lvl.min_team}+ 人
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style={{
                    marginTop: 8, paddingTop: 8,
                    borderTop: '1px dashed var(--border)',
                    fontSize: 12,
                    color: 'var(--text-secondary)',
                    lineHeight: 1.7,
                  }}>
                    <div>✓ 三级分销佣金（一级15% / 二级8% / 三级5%）</div>
                    <div>✓ 管道内消费全部参与分润</div>
                    {canSaas && <div>✓ 可开通独立 SaaS 子站</div>}
                    {idx >= 2 && <div>✓ 可发展下级代理，享受级差分润</div>}
                    {idx >= 3 && <div>✓ 省级独家授权，最高比例分润</div>}
                  </div>
                </div>
              );
            })}

            <div
              onClick={() => showToast('升级申请功能开发中')}
              style={{
                marginTop: 12,
                height: 44,
                borderRadius: 22,
                background: 'linear-gradient(135deg, #F59E0B, #FBBF24)',
                color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 15, fontWeight: 600,
                cursor: 'pointer',
              }}
            >申请升级代理等级</div>
          </>
        )}

        {/* 我的子站 */}
        {activeTab === 'sites' && (
          <>
            {mockSites.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 }}>暂无SaaS子站</div>
                <div style={{ fontSize: 11 }}>升级到城市代理即可开通 SaaS 子站</div>
              </div>
            ) : (
              mockSites.map((site, idx) => (
                <div
                  key={idx}
                  className="card card-shadow"
                  style={{ marginBottom: 10, padding: 14 }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                    <div style={{
                      width: 40, height: 40, borderRadius: 10,
                      background: 'linear-gradient(135deg, #8B5CF6, #A78BFA)',
                      color: '#fff',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 18,
                      flexShrink: 0,
                    }}>🌐</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
                        {site.name}
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 1 }}>
                        {site.domain}
                      </div>
                    </div>
                    <span style={{
                      fontSize: 10, padding: '2px 6px',
                      borderRadius: 4,
                      background: site.status === 'active' ? 'rgba(16, 185, 129, 0.1)' : 'var(--bg-page)',
                      color: site.status === 'active' ? '#10B981' : 'var(--text-tertiary)',
                    }}>{site.status === 'active' ? '运行中' : '已暂停'}</span>
                  </div>
                  <div style={{
                    display: 'flex',
                    textAlign: 'center',
                    background: 'var(--bg-page)',
                    borderRadius: 8,
                    padding: '10px 0',
                  }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>{site.users}</div>
                      <div style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 2 }}>注册用户</div>
                    </div>
                    <div style={{ flex: 1, borderLeft: '1px solid var(--border)' }}>
                      <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>{site.orders}</div>
                      <div style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 2 }}>订单数</div>
                    </div>
                    <div style={{ flex: 1, borderLeft: '1px solid var(--border)' }}>
                      <div style={{ fontSize: 15, fontWeight: 700, color: '#FF6B3D' }}>¥{site.income.toFixed(0)}</div>
                      <div style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 2 }}>累计分润</div>
                    </div>
                  </div>
                </div>
              ))
            )}
          </>
        )}

        {/* 下级代理 */}
        {activeTab === 'sub-agents' && (
          <>
            {mockSubAgents.length === 0 ? (
              <div style={{ padding: '60px 20px', textAlign: 'center', color: 'var(--text-tertiary)' }}>
                <div style={{ fontSize: 48, marginBottom: 10 }}>🤝</div>
                <div style={{ fontSize: 13 }}>暂无下级代理</div>
              </div>
            ) : (
              mockSubAgents.map((a, idx) => (
                <div
                  key={idx}
                  className="card card-shadow"
                  style={{
                    marginBottom: 8,
                    padding: 12,
                    display: 'flex',
                    alignItems: 'center',
                    gap: 10,
                  }}
                >
                  <div style={{
                    width: 40, height: 40, borderRadius: '50%',
                    background: 'linear-gradient(135deg, #F59E0B, #FBBF24)',
                    color: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, fontWeight: 600,
                    flexShrink: 0,
                  }}>{a.name[0]}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
                      {a.name}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 1 }}>
                      {a.level} · {a.region} · 团队 {a.team} 人
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: '#FF6B3D' }}>
                      ¥{a.income.toFixed(2)}
                    </div>
                    <div style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>累计分润</div>
                  </div>
                </div>
              ))
            )}
          </>
        )}
      </div>
    </PageWrapper>
  );
}

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