"use client" import { useState, useEffect } from "react" import { useAuth } from "@/contexts/auth-context" import { useCompetition } from "@/contexts/competition-context" import { Trophy, Award, Medal, Target, Users, Lightbulb, ArrowLeft, Plus, Search, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { PopularityRankings } from "@/components/competition/popularity-rankings" import { CompetitionDetailDialog } from "@/components/competition/competition-detail-dialog" import { AwardDetailDialog } from "@/components/competition/award-detail-dialog" export default function CompetitionPage() { const { user, canAccessAdmin } = useAuth() const { competitions, awards, getAwardsByYear, getCompetitionRankings, currentCompetition, setCurrentCompetition } = useCompetition() const [selectedCompetitionTypeFilter, setSelectedCompetitionTypeFilter] = useState("all") const [selectedMonthFilter, setSelectedMonthFilter] = useState("all") const [selectedAwardCategory, setSelectedAwardCategory] = useState("all") const [selectedYear, setSelectedYear] = useState(2024) const [searchQuery, setSearchQuery] = useState("") const [showCompetitionDetail, setShowCompetitionDetail] = useState(false) const [selectedRanking, setSelectedRanking] = useState(null) const [selectedCompetitionType, setSelectedCompetitionType] = useState<"individual" | "team" | "proposal">( "individual", ) const [showAwardDetail, setShowAwardDetail] = useState(false) const [selectedAward, setSelectedAward] = useState(null) const getCompetitionTypeIcon = (type: string) => { switch (type) { case "individual": return case "team": return case "proposal": return case "mixed": return default: return } } const getCompetitionTypeText = (type: string) => { switch (type) { case "individual": return "個人賽" case "team": return "團隊賽" case "proposal": return "提案賽" case "mixed": return "混合賽" default: return "競賽" } } const getCompetitionTypeColor = (type: string) => { switch (type) { case "individual": return "bg-blue-100 text-blue-800 border-blue-200" case "team": return "bg-green-100 text-green-800 border-green-200" case "proposal": return "bg-purple-100 text-purple-800 border-purple-200" case "mixed": return "bg-gradient-to-r from-blue-100 via-green-100 to-purple-100 text-gray-800 border-gray-200" default: return "bg-gray-100 text-gray-800 border-gray-200" } } const handleShowCompetitionDetail = (ranking: any, type: "individual" | "team" | "proposal") => { setSelectedRanking(ranking) setSelectedCompetitionType(type) setShowCompetitionDetail(true) } const handleShowAwardDetail = (award: any) => { setSelectedAward(award) setShowAwardDetail(true) } const getFilteredAwards = () => { let filteredAwards = getAwardsByYear(selectedYear) // 搜索功能 - 按应用名称、创作者或奖项名称搜索 if (searchQuery.trim()) { const query = searchQuery.toLowerCase().trim() filteredAwards = filteredAwards.filter((award) => { return ( award.appName?.toLowerCase().includes(query) || award.creator?.toLowerCase().includes(query) || award.awardName?.toLowerCase().includes(query) ) }) } if (selectedCompetitionTypeFilter !== "all") { filteredAwards = filteredAwards.filter((award) => award.competitionType === selectedCompetitionTypeFilter) } if (selectedMonthFilter !== "all") { filteredAwards = filteredAwards.filter((award) => award.month === Number.parseInt(selectedMonthFilter)) } if (selectedAwardCategory !== "all") { if (selectedAwardCategory === "ranking") { filteredAwards = filteredAwards.filter((award) => award.rank > 0 && award.rank <= 3) } else if (selectedAwardCategory === "popular") { filteredAwards = filteredAwards.filter((award) => award.awardType === "popular") } else { filteredAwards = filteredAwards.filter((award) => award.category === selectedAwardCategory) } } return filteredAwards.sort((a, b) => { // Sort by month first, then by rank if (a.month !== b.month) return b.month - a.month if (a.rank !== b.rank) { if (a.rank === 0) return 1 if (b.rank === 0) return -1 return a.rank - b.rank } return 0 }) } const filteredAwards = getFilteredAwards() return (
{/* Header */}
強茂集團 AI 展示平台

競賽專區

COMPETITION CENTER

{/* Hero Section */}

AI 創新競賽

展示最優秀的 AI 應用作品,見證創新技術的競技與榮耀

競賽排行 得獎作品
{/* Enhanced Filter Section */}
得獎作品展示

展示 {selectedYear} 年度各項競賽的得獎作品

{searchQuery && (
搜尋關鍵字:「{searchQuery}」
)}
{/* Search and Filter Controls */}
{/* Search Bar */}
setSearchQuery(e.target.value)} className="pl-10 pr-10 w-full md:w-96" /> {searchQuery && ( )}
{/* Filter Controls */}
競賽類型:
月份:
獎項類型:
{/* Clear Filters Button */} {(searchQuery || selectedCompetitionTypeFilter !== "all" || selectedMonthFilter !== "all" || selectedAwardCategory !== "all") && (
)}
{/* Statistics */}
{filteredAwards.length}
總獎項數
{filteredAwards.filter((a) => a.rank > 0 && a.rank <= 3).length}
前三名獎項
{filteredAwards.filter((a) => a.awardType === "popular").length}
人氣獎項
{new Set(filteredAwards.map((a) => `${a.year}-${a.month}`)).size}
競賽場次
{/* Awards Grid with Enhanced Display */} {filteredAwards.length > 0 ? (
{/* Group awards by month */} {Array.from(new Set(filteredAwards.map((award) => award.month))) .sort((a, b) => b - a) .map((month) => { const monthAwards = filteredAwards.filter((award) => award.month === month) const competition = competitions.find((c) => c.month === month && c.year === selectedYear) return (

{selectedYear}年{month}月競賽得獎作品

{competition && ( {getCompetitionTypeIcon(competition.type)} {getCompetitionTypeText(competition.type)} )} {monthAwards.length} 個獎項
{monthAwards.map((award) => ( handleShowAwardDetail(award)} > {/* Rank Badge */} {award.rank > 0 && award.rank <= 3 && (
{award.rank}
)}
{award.icon}
{award.awardName} {getCompetitionTypeIcon(award.competitionType)} {getCompetitionTypeText(award.competitionType)}
{award.appName || award.proposalTitle || award.teamName}

by {award.creator}

{award.year}年{award.month}月
{award.competitionType === "proposal" ? "評審評分" : award.awardType === "popular" ? award.competitionType === "team" ? "人氣指數" : "收藏數" : "評審評分"} {award.awardType === "popular" && award.competitionType === "team" ? `${award.score}` : award.awardType === "popular" ? `${award.score}` : award.score}
))}
) })}
) : (
{searchQuery ? ( ) : ( )}

{searchQuery ? ( <>找不到包含「{searchQuery}」的得獎作品 ) : ( <> {selectedYear}年{selectedMonthFilter !== "all" ? `${selectedMonthFilter}月` : ""} 暫無符合條件的得獎作品 )}

{searchQuery ? "嘗試使用其他關鍵字或調整篩選條件" : "請調整篩選條件查看其他得獎作品"}

{searchQuery && ( )}
)}
{/* Competition Detail Dialog */} {selectedRanking && ( )} {/* Award Detail Dialog */} {selectedAward && ( )}
) }