Merge/front/src/components/HomeFeed.jsx

// src/components/HomeFeed.jsx

import React, { useState, useEffect, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { ThumbsUp } from 'lucide-react'
import { fetchPosts, fetchPost } from '../api/posts_wzy'
import { searchAPI } from '../api/search_jwlll'
import { getUserInfo } from '../utils/auth'
import { deepRecommend } from '../api/recommend_rhj'
import postsAPI from '../api/posts_api'
import MediaPreview from './MediaPreview'
import '../style/HomeFeed.css'

const recommendModes = [
  { label: '标签推荐', value: 'tag' },
  { label: '协同过滤推荐', value: 'cf' },
  { label: '深度推荐', value: 'deep' } // 新增
]

const DEFAULT_USER_ID = '3' // 确保数据库有此用户（作为回退值）
const DEFAULT_TAGS = ['美食','影视','穿搭'] // 可根据实际数据库调整

export default function HomeFeed() {
  const navigate = useNavigate()
  
  // 获取当前用户ID，如果未登录则使用默认值
  const getCurrentUserId = () => {
    const userInfo = getUserInfo()
    return userInfo?.id ? String(userInfo.id) : DEFAULT_USER_ID
  }
  
  const [items, setItems] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  // JWLLL 搜索推荐相关状态
  const [search, setSearch] = useState('')
  const [recMode, setRecMode] = useState('tag')
  const [recCFNum, setRecCFNum] = useState(20)
  const [useSearchRecommend, setUseSearchRecommend] = useState(false)
  const [userMap, setUserMap] = useState({})
  
  // 异步加载单个帖子的详细信息
  const loadPostDetails = async (postId, index) => {
    try {
      const d = await fetchPost(postId)
      setItems(prevItems => {
        const newItems = [...prevItems]
        if (newItems[index]) {
          newItems[index] = {
            ...newItems[index],
            media: d.media_urls?.[0] || '',
            content: d.content || '',
            mediaUrls: d.media_urls || [],
            author: `作者 ${d.user_id}`,
            authorId: d.user_id,
            avatar: `http://192.168.5.200:8080/static/profile.webp`,
            detailsLoaded: true
          }
        }
        return newItems
      })
    } catch (error) {
      console.error(`加载帖子 ${postId} 详情失败:`, error)
    }
  }

  // JWLLL搜索推荐内容
  const fetchSearchContent = useCallback(async (keyword = '') => {
    setLoading(true)
    setError(null)
    try {
      const data = await searchAPI.search(keyword, undefined)
      // 先设置基础数据，快速显示
      const basicItems = (data.results || []).map(item => ({
        id: item.id,
        title: item.title,
        author: item.author || '佚名',
        avatar: `https://i.pravatar.cc/40?img=${item.id}`,
        media: item.img || '',
        likes: item.heat || 0,
        content: item.content || '',
        mediaUrls: [],
        detailsLoaded: false
      }))
      setItems(basicItems)
      setLoading(false)
      
      // 异步加载详细信息
      basicItems.forEach((item, index) => {
        loadPostDetails(item.id, index)
      })
    } catch (e) {
      console.error('搜索失败:', e)
      setError('搜索失败')
      setItems([])
      setLoading(false)
    }
  }, [])

  // 标签推荐
  const fetchTagRecommend = useCallback(async (tags) => {
    setLoading(true)
    setError(null)
    try {
      const currentUserId = getCurrentUserId()
      const data = await searchAPI.recommendByTags(currentUserId, tags)
      // 先设置基础数据，快速显示
      const basicItems = (data.recommendations || []).map(item => ({
        id: item.id,
        title: item.title,
        author: item.author || '佚名',
        avatar: `https://i.pravatar.cc/40?img=${item.id}`,
        media: item.img || '',
        likes: item.heat || 0,
        content: item.content || '',
        mediaUrls: [],
        detailsLoaded: false
      }))
      setItems(basicItems)
      setLoading(false)
      
      // 异步加载详细信息
      basicItems.forEach((item, index) => {
        loadPostDetails(item.id, index)
      })
    } catch (e) {
      console.error('标签推荐失败:', e)
      setError('标签推荐失败')
      setItems([])
      setLoading(false)
    }
  }, [])

  // 协同过滤推荐
  const fetchCFRecommend = useCallback(async (topN = recCFNum) => {
    setLoading(true)
    setError(null)
    try {
      const currentUserId = getCurrentUserId()
      const data = await searchAPI.userBasedRecommend(currentUserId, topN)
      // 先设置基础数据，快速显示
      const basicItems = (data.recommendations || []).map(item => ({
        id: item.id,
        title: item.title,
        author: item.author || '佚名',
        avatar: `https://i.pravatar.cc/40?img=${item.id}`,
        media: item.img || '',
        likes: item.heat || 0,
        content: item.content || '',
        mediaUrls: [],
        detailsLoaded: false
      }))
      setItems(basicItems)
      setLoading(false)
      
      // 异步加载详细信息
      basicItems.forEach((item, index) => {
        loadPostDetails(item.id, index)
      })
    } catch (e) {
      console.error('协同过滤推荐失败:', e)
      setError('协同过滤推荐失败')
      setItems([])
      setLoading(false)
    }
  }, [recCFNum])

  // 深度推荐
  const fetchDeepRecommend = useCallback(async (topN = 20) => {
    setLoading(true)
    setError(null)
    try {
      const currentUserId = getCurrentUserId()
      const recs = await deepRecommend(currentUserId, topN)
      // 先设置基础数据，快速显示
      const basicItems = (recs || []).map(item => ({
        id: item.id,
        title: item.title,
        author: item.author || '佚名',
        avatar: `https://i.pravatar.cc/40?img=${item.id}`,
        media: item.img || '',
        likes: item.heat || 0,
        content: item.content || '',
        mediaUrls: [],
        detailsLoaded: false
      }))
      setItems(basicItems)
      setLoading(false)
      
      // 异步加载详细信息
      basicItems.forEach((item, index) => {
        loadPostDetails(item.id, index)
      })
    } catch (e) {
      setError('深度推荐失败')
      setItems([])
      setLoading(false)
    }
  }, [])

  // 获取用户兴趣标签后再推荐
  const fetchUserTagsAndRecommend = useCallback(async () => {
    setLoading(true)
    setError(null)
    let tags = []
    try {
      const currentUserId = getCurrentUserId()
      const data = await searchAPI.getUserTags(currentUserId)
      tags = Array.isArray(data.tags) && data.tags.length > 0 ? data.tags : DEFAULT_TAGS
    } catch {
      tags = DEFAULT_TAGS
    }
    if (recMode === 'tag') {
      await fetchTagRecommend(tags)
    } else if (recMode === 'cf') {
      await fetchCFRecommend()
    } else if (recMode === 'deep') {
      await fetchDeepRecommend()
    }
    setLoading(false)
  }, [recMode, fetchTagRecommend, fetchCFRecommend, fetchDeepRecommend])

  // 拉取所有涉及用户的昵称
  const fetchUserNames = async (userIds) => {
    const map = {}
    await Promise.all(userIds.map(async uid => {
      try {
        const user = await postsAPI.getUser(uid)
        map[uid] = user.username || user.nickname || `用户${uid}`
      } catch {
        map[uid] = `用户${uid}`
      }
    }))
    setUserMap(map)
  }
  useEffect(() => {
    // 原始数据加载函数
    const loadPosts = async () => {
      try {
        const list = await fetchPosts()  // [{id, title, heat, created_at}, …]
        // 先设置基础数据，快速显示
        const basicItems = list.map(p => ({
          id: p.id,
          title: p.title,
          author: '加载中...',
          authorId: null,
          avatar: `http://192.168.5.200:8080/static/profile.webp`,
          media: '',
          likes: p.heat,
          mediaUrls: [],
          detailsLoaded: false
        }))
        setItems(basicItems)
        setLoading(false)
        
        // 异步加载详细信息
        basicItems.forEach((item, index) => {
          loadPostDetails(item.id, index)
        })
        
        // 异步加载用户信息
        setTimeout(async () => {
          const allItems = await Promise.all(
            list.map(async p => {
              try {
                const d = await fetchPost(p.id)
                return { ...p, user_id: d.user_id }
              } catch {
                return p
              }
            })
          )
          const userIds = [...new Set(allItems.map(i => i.user_id).filter(Boolean))]
          fetchUserNames(userIds)
        }, 100)
      } catch (e) {
        setError(e.message)
        setLoading(false)
      }
    }

    // 根据模式选择加载方式
    if (useSearchRecommend) {
      fetchUserTagsAndRecommend()
    } else {
      loadPosts()
    }
  }, [useSearchRecommend, fetchUserTagsAndRecommend])
  useEffect(() => {
    if (useSearchRecommend) {
      fetchUserTagsAndRecommend()
    }
    // eslint-disable-next-line
  }, [recMode, fetchUserTagsAndRecommend])

  // 根据模式选择不同的加载方式
  const handleSearch = e => {
    e.preventDefault()
    if (useSearchRecommend) {
      fetchSearchContent(search)
    } else {
      // 切换到搜索推荐模式
      setUseSearchRecommend(true)
      fetchSearchContent(search)
    }
  }

  const [previewImg, setPreviewImg] = useState(null)

  const handlePostClick = (postId) => {
    navigate(`/post/${postId}`)
  }
  return (
    <div className="home-feed">
      {/* 数据源切换 */}
      <div style={{marginBottom:12, display:'flex', alignItems:'center', gap:16}}>
        <span>数据源：</span>
        <div style={{display:'flex', gap:8}}>          <button
            className={!useSearchRecommend ? 'rec-btn styled active' : 'rec-btn styled'}
            onClick={() => setUseSearchRecommend(false)}
            type="button"
            style={{
              borderRadius: 20,
              padding: '4px 18px',
              border: !useSearchRecommend ? '2px solid #e84c4a' : '1px solid #ccc',
              background: !useSearchRecommend ? '#fff0f0' : '#fff',
              color: !useSearchRecommend ? '#e84c4a' : '#333',
              fontWeight: !useSearchRecommend ? 600 : 400,
              cursor: 'pointer',
              transition: 'all 0.2s',
              outline: 'none',
            }}
          >原始数据</button>          <button
            className={useSearchRecommend ? 'rec-btn styled active' : 'rec-btn styled'}
            onClick={() => setUseSearchRecommend(true)}
            type="button"
            style={{
              borderRadius: 20,
              padding: '4px 18px',
              border: useSearchRecommend ? '2px solid #e84c4a' : '1px solid #ccc',
              background: useSearchRecommend ? '#fff0f0' : '#fff',
              color: useSearchRecommend ? '#e84c4a' : '#333',
              fontWeight: useSearchRecommend ? 600 : 400,
              cursor: 'pointer',
              transition: 'all 0.2s',
              outline: 'none',
            }}
          >智能推荐</button>
        </div>
      </div>      {/* 推荐模式切换，仅在使用智能推荐时显示 */}
      {useSearchRecommend && (
        <div style={{marginBottom:12, display:'flex', alignItems:'center', gap:16}}>
          <span style={{marginRight:8}}>推荐模式：</span>
          <div style={{display:'flex', gap:8}}>
            {recommendModes.map(m => (
              <button
                key={m.value}
                className={recMode===m.value? 'rec-btn styled active':'rec-btn styled'}
                onClick={() => setRecMode(m.value)}
                type="button"
                style={{
                  borderRadius: 20,
                  padding: '4px 18px',
                  border: recMode===m.value ? '2px solid #e84c4a' : '1px solid #ccc',
                  background: recMode===m.value ? '#fff0f0' : '#fff',
                  color: recMode===m.value ? '#e84c4a' : '#333',
                  fontWeight: recMode===m.value ? 600 : 400,
                  cursor: 'pointer',
                  transition: 'all 0.2s',
                  outline: 'none',
                }}
              >{m.label}</button>
            ))}
          </div>
          {/* 协同过滤推荐数量选择 */}
          {recMode === 'cf' && (
            <div style={{display:'flex',alignItems:'center',gap:4}}>
              <span>推荐数量：</span>
              <select value={recCFNum} onChange={e => { setRecCFNum(Number(e.target.value)); fetchCFRecommend(Number(e.target.value)) }} style={{padding:'2px 8px',borderRadius:6,border:'1px solid #ccc'}}>
                {[10, 20, 30, 50].map(n => <option key={n} value={n}>{n}</option>)}
              </select>
            </div>
          )}
        </div>
      )}

      {/* 搜索栏 */}
      <form className="feed-search" onSubmit={handleSearch} style={{marginBottom:16, display:'flex', gap:8, alignItems:'center'}}>
        <input
          type="text"
          className="search-input"
          placeholder="搜索内容/标题/标签"
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
        <button type="submit" className="search-btn">搜索</button>
      </form>      {/* 状态提示 */}
      {loading ? (
        <div className="loading">加载中…</div>
      ) : error ? (
        <div className="error">加载失败：{error}</div>
      ) : (
        /* 瀑布流卡片区 */
        <div className="feed-grid">
          {items.length === 0 ? (
            <div style={{padding:32, color:'#aaa'}}>暂无内容</div>
          ) : (
            items.map(item => (
              <div key={item.id} className="feed-card" onClick={() => handlePostClick(item.id)}>
                {item.media ? (
                  <MediaPreview
                    url={item.media}
                    alt={item.title}
                    className="card-img"
                    onClick={(url) => {
                      // 对于图片，显示预览
                      if (!url.toLowerCase().includes('video') && !url.includes('.mp4') && !url.includes('.webm')) {
                        setPreviewImg(url)
                      }
                    }}
                    style={{ cursor: 'pointer' }}
                  />
                ) : !item.detailsLoaded ? (
                  <div className="card-img-placeholder" style={{
                    height: '200px',
                    background: '#f5f5f5',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: '#999',
                    fontSize: '14px'
                  }}>
                    加载中...
                  </div>
                ) : null}
                <h3 className="card-title">{item.title}</h3>
                {item.content && <div className="card-content">{item.content.slice(0, 60) || ''}</div>}
                <div className="card-footer">
                  <div className="card-author">
                    <img className="avatar" src={item.avatar} alt={userMap[item.authorId] || item.authorId || item.author} />
                    <span className="username">{userMap[item.authorId] || item.author}</span>
                  </div>
                  <div className="card-likes">
                    <ThumbsUp size={16} />
                    <span className="likes-count">{item.likes}</span>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      )}

      {/* 图片预览弹窗 */}
      {previewImg && (
        <div 
          className="img-preview-mask" 
          style={{
            position: 'fixed',
            zIndex: 9999,
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0,0,0,0.7)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }} 
          onClick={() => setPreviewImg(null)}
        >
          <img 
            src={previewImg} 
            alt="大图预览" 
            style={{
              maxWidth: '90vw',
              maxHeight: '90vh',
              borderRadius: 12,
              boxShadow: '0 4px 24px #0008'
            }} 
          />
        </div>
      )}
    </div>
  )
}