// 管道学院页面 - 文章分类 + 列表

function PipeAcademyPage() {
  const { navigate, goBack, pageParams } = useApp();
  const [activeCategory, setActiveCategory] = React.useState(pageParams?.category || 'idea');

  const filteredArticles = PIPE_ARTICLES.filter(a => a.category === activeCategory);

  return (
    <PageWrapper>
      <AppHeader title="管道学院" showBack onBack={goBack} subtitle="打造被动收入管道" />

      {/* 顶部 banner */}
      <div style={{
        background: 'linear-gradient(135deg, #FF6B3D 0%, #FF8A3D 50%, #FFA94D 100%)',
        margin: '-10px -16px 0',
        padding: '20px 20px 28px',
        color: '#fff',
      }}>
        <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 6 }}>管道收益研究中心</div>
        <div style={{ fontSize: 12, opacity: 0.9, lineHeight: 1.6 }}>
          从理念到方法，从案例到实操<br/>
          系统学习如何搭建你的被动收入管道
        </div>
        <div style={{
          display: 'flex',
          marginTop: 14,
          gap: 16,
          fontSize: 11,
          opacity: 0.9,
        }}>
          <div>📚 {PIPE_ARTICLES.length} 篇精选文章</div>
          <div>👥 累计阅读 {PIPE_ARTICLES.reduce((s, a) => s + a.reads, 0).toLocaleString()}+</div>
        </div>
      </div>

      {/* 分类 Tab - 横向滚动 */}
      <div style={{
        display: 'flex',
        background: 'var(--bg-card)',
        borderBottom: '1px solid var(--border)',
        position: 'sticky',
        top: 49,
        zIndex: 10,
        overflowX: 'auto',
        whiteSpace: 'nowrap',
      }}>
        {PIPE_ARTICLE_CATEGORIES.map(cat => (
          <div
            key={cat.key}
            onClick={() => setActiveCategory(cat.key)}
            style={{
              padding: '12px 16px',
              fontSize: 13,
              color: activeCategory === cat.key ? '#FF6B3D' : 'var(--text-secondary)',
              fontWeight: activeCategory === cat.key ? 600 : 400,
              borderBottom: activeCategory === cat.key ? '2px solid #FF6B3D' : '2px solid transparent',
              cursor: 'pointer',
              flexShrink: 0,
            }}
          >
            {cat.label}
          </div>
        ))}
      </div>

      {/* 文章列表 */}
      <div style={{ padding: '12px 16px 24px' }}>
        {filteredArticles.length === 0 ? (
          <div style={{ padding: '60px 20px', textAlign: 'center', color: 'var(--text-tertiary)' }}>
            <div style={{ fontSize: 40, marginBottom: 10 }}>📭</div>
            <div style={{ fontSize: 13 }}>该分类暂无文章</div>
          </div>
        ) : (
          filteredArticles.map(article => (
            <div
              key={article.id}
              onClick={() => navigate('pipe-article-detail', { id: article.id })}
              className="card card-shadow"
              style={{
                marginBottom: 10,
                padding: 14,
                cursor: 'pointer',
                display: 'flex',
                gap: 12,
              }}
            >
              <div style={{
                width: 64, height: 64,
                borderRadius: 10,
                background: `linear-gradient(135deg, ${article.coverColor}, ${article.coverColor}99)`,
                color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 28,
                flexShrink: 0,
              }}>{article.icon}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontSize: 14,
                  fontWeight: 600,
                  color: 'var(--text-primary)',
                  marginBottom: 6,
                  lineHeight: 1.4,
                  display: '-webkit-box',
                  WebkitLineClamp: 2,
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                }}>
                  {article.title}
                </div>
                <div style={{
                  fontSize: 12,
                  color: 'var(--text-secondary)',
                  lineHeight: 1.5,
                  display: '-webkit-box',
                  WebkitLineClamp: 2,
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                  marginBottom: 8,
                }}>
                  {article.summary}
                </div>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 10,
                  fontSize: 11,
                  color: 'var(--text-tertiary)',
                }}>
                  <span style={{
                    padding: '1px 8px',
                    borderRadius: 10,
                    background: 'rgba(255, 107, 61, 0.1)',
                    color: '#FF6B3D',
                    fontSize: 10,
                    fontWeight: 500,
                  }}>
                    {PIPE_ARTICLE_CATEGORIES.find(c => c.key === article.category)?.label}
                  </span>
                  <span>👁 {article.reads.toLocaleString()} 阅读</span>
                </div>
              </div>
            </div>
          ))
        )}
      </div>
    </PageWrapper>
  );
}

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