"use client" import { useState, useEffect } from "react" import { useAuth } from "@/contexts/auth-context" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Heart, ExternalLink, Star, Eye, ThumbsUp, MessageSquare, Brain, ImageIcon, Mic, MessageSquare as MessageSquareIcon, Settings, Zap, TrendingUp, Target, Users, Lightbulb, Search, Database, BarChart3, Camera, Smartphone, Monitor, Globe, FileText, Bot } from "lucide-react" export function FavoritesPage() { const { user } = useAuth() const [sortBy, setSortBy] = useState("favorited") const [filterDepartment, setFilterDepartment] = useState("all") const [favoriteApps, setFavoriteApps] = useState([]) const [isLoading, setIsLoading] = useState(false) const [currentPage, setCurrentPage] = useState(1) const [totalPages, setTotalPages] = useState(1) // 載入收藏列表 const loadFavorites = async (page: number = 1) => { if (!user) return setIsLoading(true) try { const response = await fetch(`/api/user/favorites?userId=${user.id}&page=${page}&limit=12`) const data = await response.json() if (data.success) { setFavoriteApps(data.data.apps) setTotalPages(data.data.pagination.totalPages) setCurrentPage(page) } } catch (error) { console.error('載入收藏列表錯誤:', error) } finally { setIsLoading(false) } } // 初始載入 useEffect(() => { if (user) { loadFavorites() } }, [user]) const handleUseApp = async (app: any) => { try { // Increment view count when using the app if (user) { const response = await fetch(`/api/apps/${app.id}/interactions`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ action: 'view', userId: user.id }) }) if (response.ok) { // 記錄用戶活動 try { const activityResponse = await fetch('/api/user/activity', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ userId: user.id, action: 'view', resourceType: 'app', resourceId: app.id, details: { appName: app.name, timestamp: new Date().toISOString() } }) }) if (activityResponse.ok) { } else { console.error('活動記錄失敗:', activityResponse.status, activityResponse.statusText) } } catch (error) { console.error('記錄活動失敗:', error) } // Reload favorites to update view count await loadFavorites(currentPage) } else { console.error('增加查看次數失敗:', response.status, response.statusText) } } else { } } catch (error) { console.error('增加查看次數失敗:', error) } // Open app in new tab if (app.appUrl) { const url = app.appUrl.startsWith('http') ? app.appUrl : `https://${app.appUrl}` window.open(url, "_blank", "noopener,noreferrer") } else { } } // 圖標映射函數 const getIconComponent = (iconName: string) => { const iconMap: { [key: string]: any } = { 'Bot': Bot, 'Brain': Brain, 'ImageIcon': ImageIcon, 'Mic': Mic, 'MessageSquare': MessageSquareIcon, 'Settings': Settings, 'Zap': Zap, 'TrendingUp': TrendingUp, 'Star': Star, 'Heart': Heart, 'Eye': Eye, 'Target': Target, 'Users': Users, 'Lightbulb': Lightbulb, 'Search': Search, 'Database': Database, 'BarChart3': BarChart3, 'Camera': Camera, 'Smartphone': Smartphone, 'Monitor': Monitor, 'Globe': Globe, 'FileText': FileText, } return iconMap[iconName] || Bot } const getTypeColor = (type: string) => { const colors = { 文字處理: "bg-blue-100 text-blue-800 border-blue-200", 圖像生成: "bg-purple-100 text-purple-800 border-purple-200", 語音辨識: "bg-green-100 text-green-800 border-green-200", 推薦系統: "bg-orange-100 text-orange-800 border-orange-200", 音樂生成: "bg-pink-100 text-pink-800 border-pink-200", 程式開發: "bg-indigo-100 text-indigo-800 border-indigo-200", 影像處理: "bg-cyan-100 text-cyan-800 border-cyan-200", 對話系統: "bg-teal-100 text-teal-800 border-teal-200", 數據分析: "bg-yellow-100 text-yellow-800 border-yellow-200", 設計工具: "bg-rose-100 text-rose-800 border-rose-200", 語音技術: "bg-emerald-100 text-emerald-800 border-emerald-200", 教育工具: "bg-violet-100 text-violet-800 border-violet-200", } return colors[type as keyof typeof colors] || "bg-gray-100 text-gray-800 border-gray-200" } const filteredAndSortedApps = favoriteApps .filter((app) => filterDepartment === "all" || app.department === filterDepartment) .sort((a, b) => { switch (sortBy) { case "name": return a.name.localeCompare(b.name) case "creator": return a.creator.localeCompare(b.creator) case "department": return a.department.localeCompare(b.department) case "favorited": return new Date(b.favoritedAt).getTime() - new Date(a.favoritedAt).getTime() default: return 0 } }) return (
{/* Stats */}
共 {favoriteApps.length} 個收藏
{/* Filter and Sort Controls */}
{/* Loading State */} {isLoading && (

載入收藏列表中...

)} {/* Apps Grid */} {!isLoading && (
{filteredAndSortedApps.map((app) => { const IconComponent = getIconComponent(app.icon || 'Heart') return (

{app.name}

by {app.creator}

{app.description}

{app.type} {app.department}
{/* 統計數據區塊 - 優化佈局 */}
{/* 評分 - 突出顯示 */}
{Number(app.rating).toFixed(1)} 評分
{/* 其他統計數據 - 3列佈局 */}
{app.views} 瀏覽
{app.likes} 按讚
{app.reviewCount} 評論
{/* 使用應用按鈕 */}
) })}
)} {/* Empty State */} {!isLoading && filteredAndSortedApps.length === 0 && (

還沒有收藏任何應用

開始探索並收藏您喜歡的 AI 應用吧!

)} {/* Pagination */} {!isLoading && totalPages > 1 && (
第 {currentPage} 頁,共 {totalPages} 頁
)}
) }