// 我的文章列表页
// 我的文章列表页

const { useState, useEffect, useCallback } = React;

function MyArticlesPage() {
  const { navigate, goBack, showToast, api, currentUser } = useApp();
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(true);

  const loadMyArticles = useCallback(async () => {
    setLoading(true);
    try {
      const res = await api.get('/articles');
      const userId = currentUser?.id || 1;
      const my = (res.data || []).filter(a => a.user_id === userId);
      setArticles(my);
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }, [api, currentUser]);

  useEffect(() => {
    loadMyArticles();
  }, [loadMyArticles]);

  const handleArticleClick = (id) => {
    navigate('article-detail', { id });
  };

  const handleWrite = () => {
    if (window.openArticlePublish) window.openArticlePublish();
  };

  return (
    <div className="page-container">
      <AppHeader
        title="我的文章"
        subtitle={`${articles.length} 篇文章`}
        showBack
        onBack={goBack}
        rightContent={
          <span
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              padding: '6px 12px',
              background: 'var(--primary)', color: '#fff',
              borderRadius: 16, fontSize: 12, fontWeight: 600,
              cursor: 'pointer',
            }}
            onClick={handleWrite}
          >
            ＋ 写新文章
          </span>
        }
      />

      <div style={{ padding: '12px 16px' }}>
        {loading ? (
          <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-tertiary)' }}>加载中...</div>
        ) : articles.length === 0 ? (
          <div style={{ padding: '60px 20px', textAlign: 'center' }}>
            <div style={{ fontSize: 48, marginBottom: 16 }}>📝</div>
            <div style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>还没有发布过文章</div>
            <div style={{ color: 'var(--text-tertiary)', fontSize: 12, marginBottom: 20 }}>写下你的第一篇文章，分享你的想法</div>
            <span
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                padding: '8px 20px',
                background: 'var(--primary)', color: '#fff',
                borderRadius: 20, fontSize: 14, fontWeight: 600,
                cursor: 'pointer',
              }}
              onClick={handleWrite}
            >
              ＋ 写新文章
            </span>
          </div>
        ) : (
          <div className="article-list">
            {articles.map(article => (
              <div
                key={article.id}
                className="article-card"
                onClick={() => handleArticleClick(article.id)}
              >
                <div className="article-card-title">{article.title}</div>
                <div className="article-card-desc">{article.content?.slice(0, 60)}...</div>
                <div className="article-card-meta">
                  <span>{article.likes_count || 0} 点赞</span>
                  <span>{article.comments_count || 0} 评论</span>
                  <span>{article.visibility === 'public' ? '公开' : '私密'}</span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <style>{`
        .article-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
        .article-card {
          background: #fff;
          border-radius: 12px;
          padding: 14px 16px;
          cursor: pointer;
          transition: background 0.2s;
        }
        .article-card:active {
          background: #f5f5f5;
        }
        .article-card-title {
          font-size: 15px;
          font-weight: 600;
          color: var(--text-primary);
          margin-bottom: 6px;
          line-height: 1.4;
        }
        .article-card-desc {
          font-size: 13px;
          color: var(--text-secondary);
          line-height: 1.5;
          margin-bottom: 8px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .article-card-meta {
          display: flex;
          gap: 12px;
          font-size: 12px;
          color: var(--text-tertiary);
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { MyArticlesPage });