"use client"

import React, { useState, useEffect } from "react"
import { useCompetition } from "@/contexts/competition-context"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Separator } from "@/components/ui/separator"
import { Progress } from "@/components/ui/progress"
import { Checkbox } from "@/components/ui/checkbox"
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"
import {
  Trophy,
  Plus,
  Award,
  MoreHorizontal,
  Edit,
  Play,
  CheckCircle,
  AlertTriangle,
  Crown,
  UserPlus,
  Loader2,
  Star,
  StarOff,
  Users,
  Settings,
  ClipboardList,
  Link,
  UserCheck,
  UserX,
  Upload,
  Filter,
  User,
  Mail,
  Trash2,
  Eye,
  Search,
  X,
} from "lucide-react"
import type { CompetitionRule, CompetitionAwardType } from "@/types/competition"
import { ScoringManagement } from "./scoring-management"

// Competition data - empty for production
const mockIndividualApps: any[] = []

// Teams data - empty for production
const initialTeams: any[] = []

export function CompetitionManagement() {
  const {
    competitions,
    currentCompetition,
    setCurrentCompetition,
    addCompetition,
    updateCompetition,
    deleteCompetition,
    judges,
    addJudge,
    updateJudge,
    deleteJudge,
    awards,
    addAward,
    getAppDetailedScores,
    judgeScores,
    getAppJudgeScores,
    submitJudgeScore,
  } = useCompetition()

  // Teams state - managed locally for now
  const [teams, setTeams] = useState(initialTeams)

  // 資料庫整合狀態
  const [dbCompetitions, setDbCompetitions] = useState<any[]>([])
  const [isLoadingDb, setIsLoadingDb] = useState(false)
  const [dbStats, setDbStats] = useState<any>(null)
  
  // 評審資料庫整合狀態
  const [dbJudges, setDbJudges] = useState<any[]>([])
  const [isLoadingJudges, setIsLoadingJudges] = useState(false)
  const [judgeStats, setJudgeStats] = useState<any>(null)
  
  // 團隊資料庫整合狀態
  const [dbTeams, setDbTeams] = useState<any[]>([])
  const [isLoadingTeams, setIsLoadingTeams] = useState(false)
  const [teamStats, setTeamStats] = useState<any>(null)
  
  // 可用應用狀態
  const [availableApps, setAvailableApps] = useState<any[]>([])
  const [isLoadingApps, setIsLoadingApps] = useState(false)
  
  // 可用用戶狀態
  const [availableUsers, setAvailableUsers] = useState<any[]>([])
  const [isLoadingUsers, setIsLoadingUsers] = useState(false)

  const [showCreateCompetition, setShowCreateCompetition] = useState(false)
  const [showAddJudge, setShowAddJudge] = useState(false)
  const [showCreateAward, setShowCreateAward] = useState(false)
  const [showScoringManagement, setShowScoringManagement] = useState(false)
  const [showJudgeLinks, setShowJudgeLinks] = useState(false)
  const [showManualScoring, setShowManualScoring] = useState(false)
  const [showCreateTeam, setShowCreateTeam] = useState(false)

  const [showTeamDetail, setShowTeamDetail] = useState(false)
  const [showDeleteTeamConfirm, setShowDeleteTeamConfirm] = useState(false)
  const [selectedCompetition, setSelectedCompetition] = useState<any>(null)
  const [selectedTeam, setSelectedTeam] = useState<any>(null)
  const [teamToDelete, setTeamToDelete] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [success, setSuccess] = useState("")
  const [error, setError] = useState("")

  const [showCompetitionDetail, setShowCompetitionDetail] = useState(false)

  const [showDeleteCompetitionConfirm, setShowDeleteCompetitionConfirm] = useState(false)
  const [showChangeStatusDialog, setShowChangeStatusDialog] = useState(false)
  const [selectedCompetitionForAction, setSelectedCompetitionForAction] = useState<any>(null)
  const [newStatus, setNewStatus] = useState("")

  // 奖项搜索和筛选状态
  const [awardSearchQuery, setAwardSearchQuery] = useState("")
  const [awardYearFilter, setAwardYearFilter] = useState("all")

  // 資料庫 API 調用函數
  const fetchCompetitions = async () => {
    setIsLoadingDb(true)
    try {
      const response = await fetch('/api/admin/competitions')
      const data = await response.json()
      if (data.success) {
        setDbCompetitions(data.data)
      } else {
        setError('獲取競賽列表失敗: ' + data.message)
      }
    } catch (error) {
      console.error('獲取競賽列表失敗:', error)
      setError('獲取競賽列表失敗')
    } finally {
      setIsLoadingDb(false)
    }
  }

  const fetchCompetitionStats = async () => {
    try {
      const response = await fetch('/api/admin/competitions/stats')
      const data = await response.json()
      if (data.success) {
        setDbStats(data.data)
      }
    } catch (error) {
      console.error('獲取競賽統計失敗:', error)
    }
  }

  const createCompetitionInDb = async (competitionData: any) => {
    try {
      const response = await fetch('/api/admin/competitions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(competitionData)
      })
      const data = await response.json()
      if (data.success) {
        setSuccess('競賽創建成功！')
        await fetchCompetitions() // 重新獲取列表
        await fetchCompetitionStats() // 重新獲取統計
        return data.data
      } else {
        setError('創建競賽失敗: ' + data.message)
        return null
      }
    } catch (error) {
      console.error('創建競賽失敗:', error)
      setError('創建競賽失敗')
      return null
    }
  }

  const updateCompetitionInDb = async (id: string, updates: any) => {
    try {
      const response = await fetch(`/api/admin/competitions/${id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(updates)
      })
      const data = await response.json()
      if (data.success) {
        setSuccess('競賽更新成功！')
        await fetchCompetitions() // 重新獲取列表
        await fetchCompetitionStats() // 重新獲取統計
        return data.data
      } else {
        setError('更新競賽失敗: ' + data.message)
        return null
      }
    } catch (error) {
      console.error('更新競賽失敗:', error)
      setError('更新競賽失敗')
      return null
    }
  }

  const deleteCompetitionInDb = async (id: string) => {
    try {
      const response = await fetch(`/api/admin/competitions/${id}`, {
        method: 'DELETE'
      })
      const data = await response.json()
      if (data.success) {
        setSuccess('競賽刪除成功！')
        await fetchCompetitions() // 重新獲取列表
        await fetchCompetitionStats() // 重新獲取統計
        return true
      } else {
        setError('刪除競賽失敗: ' + data.message)
        return false
      }
    } catch (error) {
      console.error('刪除競賽失敗:', error)
      setError('刪除競賽失敗')
      return false
    }
  }

  // 評審資料庫 API 調用函數
  const fetchJudges = async () => {
    setIsLoadingJudges(true)
    try {
      // 添加時間戳避免緩存
      const response = await fetch(`/api/admin/judges?t=${Date.now()}`, {
        cache: 'no-store',
        headers: {
          'Cache-Control': 'no-cache'
        }
      })
      const data = await response.json()
      console.log('🔍 fetchJudges 響應:', data)
      if (data.success) {
        console.log('📊 獲取到的評審數據:', data.data)
        setDbJudges(data.data)
      } else {
        setError('獲取評審列表失敗: ' + data.message)
      }
    } catch (error) {
      console.error('獲取評審列表失敗:', error)
      setError('獲取評審列表失敗')
    } finally {
      setIsLoadingJudges(false)
    }
  }

  const fetchJudgeStats = async () => {
    try {
      const response = await fetch('/api/admin/judges/stats')
      const data = await response.json()
      console.log('評審統計 API 響應:', data)
      if (data.success) {
        setJudgeStats(data.data)
        console.log('評審統計設置成功:', data.data)
      } else {
        console.error('評審統計 API 失敗:', data.message)
      }
    } catch (error) {
      console.error('獲取評審統計失敗:', error)
    }
  }

  // 團隊資料庫 API 調用函數
  const fetchTeams = async () => {
    setIsLoadingTeams(true)
    try {
      // 添加時間戳避免緩存
      const response = await fetch(`/api/admin/teams?t=${Date.now()}`, {
        cache: 'no-store',
        headers: {
          'Cache-Control': 'no-cache'
        }
      })
      const data = await response.json()
      console.log('🔍 fetchTeams 響應:', data)
      if (data.success) {
        console.log('📊 獲取到的團隊數據:', data.data)
        setDbTeams(data.data)
      } else {
        setError('獲取團隊列表失敗: ' + data.message)
      }
    } catch (error) {
      console.error('獲取團隊列表失敗:', error)
      setError('獲取團隊列表失敗')
    } finally {
      setIsLoadingTeams(false)
    }
  }

  const fetchTeamStats = async () => {
    try {
      const response = await fetch('/api/admin/teams/stats')
      const data = await response.json()
      console.log('團隊統計 API 響應:', data)
      if (data.success) {
        setTeamStats(data.data)
        console.log('團隊統計設置成功:', data.data)
      }
    } catch (error) {
      console.error('獲取團隊統計失敗:', error)
    }
  }

  const createTeamInDb = async (teamData: any) => {
    try {
      const response = await fetch('/api/admin/teams', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(teamData)
      })
      const data = await response.json()
      if (data.success) {
        setSuccess('團隊創建成功！')
        await fetchTeams() // 重新獲取列表
        await fetchTeamStats() // 重新獲取統計
        return data.data
      } else {
        setError('創建團隊失敗: ' + data.message)
        return null
      }
    } catch (error) {
      console.error('創建團隊失敗:', error)
      setError('創建團隊失敗')
      return null
    }
  }

  const updateTeamInDb = async (teamId: string, updates: any) => {
    try {
      const response = await fetch(`/api/admin/teams/${teamId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(updates)
      })
      const data = await response.json()
      if (data.success) {
        setSuccess('團隊更新成功！')
        await fetchTeams() // 重新獲取列表
        await fetchTeamStats() // 重新獲取統計
        return true // 返回 true 表示成功
      } else {
        setError('更新團隊失敗: ' + data.message)
        return false
      }
    } catch (error) {
      console.error('更新團隊失敗:', error)
      setError('更新團隊失敗')
      return false
    }
  }

  const deleteTeamInDb = async (teamId: string, hard: boolean = false, skipRefresh: boolean = false) => {
    try {
      const response = await fetch(`/api/admin/teams/${teamId}?hard=${hard}`, {
        method: 'DELETE'
      })
      const data = await response.json()
      if (data.success) {
        setSuccess(data.message || '團隊刪除成功！')
        if (!skipRefresh) {
          await fetchTeams() // 重新獲取列表
          await fetchTeamStats() // 重新獲取統計
        }
        return true
      } else {
        setError('刪除團隊失敗: ' + data.message)
        return false
      }
    } catch (error) {
      console.error('刪除團隊失敗:', error)
      setError('刪除團隊失敗')
      return false
    }
  }

  // 獲取可用應用列表
  const fetchAvailableApps = async (teamId?: string) => {
    console.log('🔍 開始獲取可用應用列表, teamId:', teamId)
    setIsLoadingApps(true)
    try {
      const url = teamId 
        ? `/api/admin/apps/available?teamId=${teamId}`
        : '/api/admin/apps/available'
      
      console.log('📡 請求 URL:', url)
      const response = await fetch(url)
      const data = await response.json()
      
      console.log('📊 應用 API 響應:', data)
      
      if (data.success) {
        console.log('✅ 應用數據設置成功:', data.data.length, '個應用')
        setAvailableApps(data.data)
        return data.data // 返回數據
      } else {
        console.error('❌ 獲取應用列表失敗:', data.message)
        setError('獲取可用應用列表失敗: ' + data.message)
        return []
      }
    } catch (error) {
      console.error('❌ 獲取可用應用列表失敗:', error)
      setError('獲取可用應用列表失敗')
      return []
    } finally {
      setIsLoadingApps(false)
    }
  }

  // 獲取可用用戶列表
  const fetchAvailableUsers = async () => {
    console.log('🔍 開始獲取可用用戶列表')
    setIsLoadingUsers(true)
    try {
      const response = await fetch('/api/admin/users/available')
      const data = await response.json()
      
      console.log('📊 用戶 API 響應:', data)
      
      if (data.success) {
        console.log('✅ 用戶數據設置成功:', data.data.length, '個用戶')
        setAvailableUsers(data.data)
        return data.data // 返回數據
      } else {
        console.error('❌ 獲取用戶列表失敗:', data.message)
        setError('獲取可用用戶列表失敗: ' + data.message)
        return []
      }
    } catch (error) {
      console.error('❌ 獲取可用用戶列表失敗:', error)
      setError('獲取可用用戶列表失敗')
      return []
    } finally {
      setIsLoadingUsers(false)
    }
  }

  // 獲取完整團隊信息
  const fetchTeamDetails = async (teamId: string) => {
    try {
      const response = await fetch(`/api/admin/teams/${teamId}`)
      const data = await response.json()
      
      if (data.success) {
        return data.data
      } else {
        setError('獲取團隊詳情失敗: ' + data.message)
        return null
      }
    } catch (error) {
      console.error('獲取團隊詳情失敗:', error)
      setError('獲取團隊詳情失敗')
      return null
    }
  }

  // 編輯團隊
  const handleEditTeam = async (team: any) => {
    try {
      console.log('🔍 開始編輯團隊:', team.id)
      
      // 先加載用戶和應用數據
      const users = await fetchAvailableUsers()
      const apps = await fetchAvailableApps(team.id)
      
      console.log('📊 實際載入的用戶數據:', users.length)
      console.log('📊 實際載入的應用數據:', apps.length)
      
      // 獲取完整的團隊信息
      const teamDetails = await fetchTeamDetails(team.id)
      console.log('📋 團隊詳情:', teamDetails)
      
      if (teamDetails) {
        // 填充表單數據
        const teamData = {
          name: teamDetails.name,
          leader: teamDetails.leader_name || '',
          leader_id: teamDetails.leader_id || '',
          department: teamDetails.department,
          contactEmail: teamDetails.contact_email || '',
          leaderPhone: teamDetails.leader_phone || '',
          description: teamDetails.description || '',
          members: teamDetails.members || [],
          apps: teamDetails.apps ? teamDetails.apps.map((app: any) => app.id || app) : [],
          submittedAppCount: teamDetails.apps?.length || 0,
        }
        
        console.log('📝 填充的表單數據:', teamData)
        setNewTeam(teamData)
        setSelectedTeam(teamDetails)
        setShowCreateTeam(true)
      }
    } catch (error) {
      console.error('編輯團隊失敗:', error)
      setError('編輯團隊失敗')
    }
  }

  // 刪除團隊
  const handleDeleteTeam = async (team: any) => {
    setTeamToDelete(team)
    setShowDeleteTeamConfirm(true)
  }

  // 確認刪除團隊
  const confirmDeleteTeam = async () => {
    if (!teamToDelete) return
    
    setIsLoading(true)
    try {
      const success = await deleteTeamInDb(teamToDelete.id)
      if (success) {
        setSuccess("團隊刪除成功！")
        setShowDeleteTeamConfirm(false)
        setTeamToDelete(null)
        // 重新獲取團隊列表
        await fetchTeams()
        await fetchTeamStats()
      }
    } catch (error) {
      console.error('刪除團隊失敗:', error)
      setError('刪除團隊失敗')
    } finally {
      setIsLoading(false)
    }
  }

  const createJudgeInDb = async (judgeData: any) => {
    try {
      const response = await fetch('/api/admin/judges', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(judgeData)
      })
      const data = await response.json()
      if (data.success) {
        setSuccess('評審創建成功！')
        await fetchJudges() // 重新獲取列表
        await fetchJudgeStats() // 重新獲取統計
        return data.data
      } else {
        setError('創建評審失敗: ' + data.message)
        return null
      }
    } catch (error) {
      console.error('創建評審失敗:', error)
      setError('創建評審失敗')
      return null
    }
  }

  const updateJudgeInDb = async (id: string, updates: any) => {
    try {
      const response = await fetch(`/api/admin/judges/${id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(updates)
      })
      const data = await response.json()
      if (data.success) {
        setSuccess('評審更新成功！')
        await fetchJudges() // 重新獲取列表
        await fetchJudgeStats() // 重新獲取統計
        return true // 返回 true 表示成功
      } else {
        setError('更新評審失敗: ' + data.message)
        return false
      }
    } catch (error) {
      console.error('更新評審失敗:', error)
      setError('更新評審失敗')
      return false
    }
  }

  const deleteJudgeInDb = async (id: string, hardDelete: boolean = false, skipRefresh: boolean = false) => {
    try {
      const url = hardDelete ? `/api/admin/judges/${id}?hard=true` : `/api/admin/judges/${id}`
      const response = await fetch(url, {
        method: 'DELETE'
      })
      const data = await response.json()
      if (data.success) {
        setSuccess(data.message || '評審刪除成功！')
        if (!skipRefresh) {
          await fetchJudges() // 重新獲取列表
          await fetchJudgeStats() // 重新獲取統計
        }
        return true
      } else {
        setError('刪除評審失敗: ' + data.message)
        return false
      }
    } catch (error) {
      console.error('刪除評審失敗:', error)
      setError('刪除評審失敗')
      return false
    }
  }
  const [awardMonthFilter, setAwardMonthFilter] = useState("all")
  const [awardTypeFilter, setAwardTypeFilter] = useState("all")
  const [awardCompetitionTypeFilter, setAwardCompetitionTypeFilter] = useState("all")

  // 組件載入時獲取資料
  useEffect(() => {
    fetchCompetitions()
    fetchCompetitionStats()
    fetchJudges()
    fetchJudgeStats()
    fetchTeams()
    fetchTeamStats()
  }, [])

  // 当筛选条件改变时重置分页
  const resetAwardPagination = () => {
    setAwardCurrentPage(1)
  }

  // Manual scoring states
  const [manualScoring, setManualScoring] = useState({
    judgeId: "",
    participantId: "",
    participantType: "individual" as "individual" | "team",
    scores: {} as Record<string, number>,
    comments: "",
  })
  
  // 混合賽的參賽者類型選擇
  const [selectedParticipantType, setSelectedParticipantType] = useState<"individual" | "team">("individual")

  // Form states - Updated for mixed competition support
  const [newCompetition, setNewCompetition] = useState({
    name: "",
    type: "individual" as "individual" | "team" | "mixed",
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    startDate: "",
    endDate: "",
    description: "",
    status: "upcoming" as const,
    // For individual and team competitions
    judges: [] as string[],
    participatingApps: [] as string[],
    participatingTeams: [] as string[],
    evaluationFocus: "",
    rules: [] as CompetitionRule[],
    awardTypes: [] as CompetitionAwardType[],
    // For mixed competitions - separate configurations
    individualConfig: {
      judges: [] as string[],
      rules: [] as CompetitionRule[],
      awardTypes: [] as CompetitionAwardType[],
      evaluationFocus: "",
    },
    teamConfig: {
      judges: [] as string[],
      rules: [] as CompetitionRule[],
      awardTypes: [] as CompetitionAwardType[],
      evaluationFocus: "",
    },
  })

  const [newJudge, setNewJudge] = useState({
    name: "",
    title: "",
    department: "",
    expertise: "",
  })

  const [newAward, setNewAward] = useState({
    competitionId: "",
    participantId: "",
    participantType: "individual" as "individual" | "team",
    awardType: "custom" as const,
    awardName: "",
    customAwardTypeId: "",
    description: "",
    score: 0,
    category: "innovation" as const,
    rank: 0,
    applicationLinks: {
      production: "",
      demo: "",
      github: "",
    },
    documents: [] as { id: string; name: string; type: string; size: string; uploadDate: string; url: string }[],
    judgeComments: "",
    photos: [] as { id: string; name: string; url: string; caption: string; uploadDate: string; size: string }[],
  })

  // Team form states
  const [newTeam, setNewTeam] = useState({
    name: "",
    leader: "",
    leader_id: "", // 添加隊長 ID
    department: "HQBU",
    contactEmail: "",
    leaderPhone: "",
    description: "",
    members: [] as Array<{ id: string; name: string; department: string; role: string }>,
    apps: [] as string[], // 改為存儲應用 ID
    submittedAppCount: 0,
  })

  const [newMember, setNewMember] = useState({
    name: "",
    user_id: "", // 添加用戶 ID
    department: "HQBU",
    role: "成員",
  })

  const [newApp, setNewApp] = useState({
    name: "",
    link: "",
  })

  const [createError, setCreateError] = useState("")

  // Participant selection states - separate for mixed competitions
  const [participantSearchTerm, setParticipantSearchTerm] = useState("")
  const [departmentFilter, setDepartmentFilter] = useState<string>("all")
  const [individualParticipantSearchTerm, setIndividualParticipantSearchTerm] = useState("")
  const [teamParticipantSearchTerm, setTeamParticipantSearchTerm] = useState("")
  const [individualDepartmentFilter, setIndividualDepartmentFilter] = useState<string>("all")
  const [teamDepartmentFilter, setTeamDepartmentFilter] = useState<string>("all")

  // Get participants based on competition type
  const [selectedJudge, setSelectedJudge] = useState<any>(null)
  const [showJudgeDetail, setShowJudgeDetail] = useState(false)

  const [showDeleteJudgeConfirm, setShowDeleteJudgeConfirm] = useState(false)
  const [showDisableJudgeConfirm, setShowDisableJudgeConfirm] = useState(false)

  // 獎項相關狀態
  const [showAwardDetail, setShowAwardDetail] = useState(false)
  const [selectedAward, setSelectedAward] = useState<any>(null)
  const [showDeleteAwardConfirm, setShowDeleteAwardConfirm] = useState(false)
  const [awardToDelete, setAwardToDelete] = useState<any>(null)
  
  // 評審分頁和篩選狀態
  const [judgeCurrentPage, setJudgeCurrentPage] = useState(1)
  const [judgeSearchTerm, setJudgeSearchTerm] = useState("")
  const [judgeDepartmentFilter, setJudgeDepartmentFilter] = useState<string>("all")
  const [judgeExpertiseFilter, setJudgeExpertiseFilter] = useState<string>("all")
  const [judgeStatusFilter, setJudgeStatusFilter] = useState<string>("all")
  const judgesPerPage = 6

  // 團隊分頁和篩選狀態
  const [teamCurrentPage, setTeamCurrentPage] = useState(1)
  const [teamSearchTerm, setTeamSearchTerm] = useState("")
  const teamsPerPage = 6

  // 獎項分頁狀態
  const [awardCurrentPage, setAwardCurrentPage] = useState(1)
  const awardsPerPage = 6

  // Get participants based on competition type
  const getParticipants = (competitionType: string) => {
    switch (competitionType) {
      case "individual":
        return mockIndividualApps
      case "team":
        return dbTeams.length > 0 ? dbTeams : teams
      default:
        return []
    }
  }

  // Filter participants - updated for mixed competitions
  const getFilteredParticipants = (competitionType: string) => {
    const participants = getParticipants(competitionType)
    let searchTerm = participantSearchTerm
    let departmentFilterValue = departmentFilter

    // Use separate search terms for mixed competitions
    if (newCompetition.type === "mixed") {
      searchTerm = competitionType === "individual" ? individualParticipantSearchTerm : teamParticipantSearchTerm
      departmentFilterValue = competitionType === "individual" ? individualDepartmentFilter : teamDepartmentFilter
    }

    return participants.filter((participant) => {
      const searchField = competitionType === "team" ? participant.name : participant.name
      const creatorField = competitionType === "team" ? participant.leader : participant.creator

      const matchesSearch =
        searchField.toLowerCase().includes(searchTerm.toLowerCase()) ||
        creatorField.toLowerCase().includes(searchTerm.toLowerCase())
      const matchesDepartment = departmentFilterValue === "all" || participant.department === departmentFilterValue
      return matchesSearch && matchesDepartment
    })
  }

  const resetForm = () => {
    setNewCompetition({
      name: "",
      type: "individual",
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      startDate: "",
      endDate: "",
      description: "",
      status: "upcoming",
      judges: [],
      participatingApps: [],
      participatingTeams: [],
      evaluationFocus: "",
      rules: [],
      awardTypes: [],
      individualConfig: {
        judges: [],
        rules: [],
        awardTypes: [],
        evaluationFocus: "",
      },
      teamConfig: {
        judges: [],
        rules: [],
        awardTypes: [],
        evaluationFocus: "",
      },
    })
    // Reset search terms
    setParticipantSearchTerm("")
    setDepartmentFilter("all")
    setIndividualParticipantSearchTerm("")
    setTeamParticipantSearchTerm("")
    setIndividualDepartmentFilter("all")
    setTeamDepartmentFilter("all")
  }

  const resetTeamForm = () => {
    setNewTeam({
      name: "",
      leader: "",
      department: "HQBU",
      contactEmail: "",
      leaderPhone: "",
      description: "",
      members: [],
      apps: [],
      submittedAppCount: 0,
    })
    setNewMember({
      name: "",
      department: "HQBU",
      role: "成員",
    })
    setNewApp({
      name: "",
      link: "",
    })
  }

  const handleCreateCompetition = async () => {
    setCreateError("")

    if (!newCompetition.name || !newCompetition.startDate || !newCompetition.endDate) {
      setCreateError("請填寫所有必填欄位")
      return
    }

    // Validation for mixed competitions
    if (newCompetition.type === "mixed") {
      if (newCompetition.individualConfig.judges.length === 0 && newCompetition.teamConfig.judges.length === 0) {
        setCreateError("混合賽至少需要為個人賽或團體賽選擇評審")
        return
      }

      // Check if at least one competition type has participants
      const hasParticipants =
        newCompetition.participatingApps.length > 0 || newCompetition.participatingTeams.length > 0
      if (!hasParticipants) {
        setCreateError("請至少選擇一個個人賽應用或團隊賽團隊")
        return
      }

      // Validate individual rules if there are individual participants and judges
      if (newCompetition.participatingApps.length > 0 && newCompetition.individualConfig.judges.length > 0) {
        if (newCompetition.individualConfig.rules.length > 0) {
          const individualTotalWeight = newCompetition.individualConfig.rules.reduce(
            (sum, rule) => sum + rule.weight,
            0,
          )
          if (individualTotalWeight !== 100) {
            setCreateError("個人賽評比標準權重總和必須為 100%")
            return
          }
        }
      }

      // Validate team rules if there are team participants and judges
      if (newCompetition.participatingTeams.length > 0 && newCompetition.teamConfig.judges.length > 0) {
        if (newCompetition.teamConfig.rules.length > 0) {
          const teamTotalWeight = newCompetition.teamConfig.rules.reduce((sum, rule) => sum + rule.weight, 0)
          if (teamTotalWeight !== 100) {
            setCreateError("團體賽評比標準權重總和必須為 100%")
            return
          }
        }
      }
    } else {
      // Validation for single type competitions
      if (newCompetition.judges.length === 0) {
        setCreateError("請至少選擇一位評審")
        return
      }

      const hasParticipants =
        (newCompetition.type === "individual" && newCompetition.participatingApps.length > 0) ||
        (newCompetition.type === "team" && newCompetition.participatingTeams.length > 0)

      if (!hasParticipants) {
        setCreateError("請至少選擇一個參賽項目")
        return
      }

      if (newCompetition.rules.length > 0) {
        const totalWeight = newCompetition.rules.reduce((sum, rule) => sum + rule.weight, 0)
        if (totalWeight !== 100) {
          setCreateError("評比標準權重總和必須為 100%")
          return
        }

        const hasEmptyRule = newCompetition.rules.some((rule) => !rule.name.trim() || !rule.description.trim())
        if (hasEmptyRule) {
          setCreateError("請填寫所有評比標準的名稱和描述")
          return
        }
      }

      if (newCompetition.awardTypes.length > 0) {
        const hasEmptyAwardType = newCompetition.awardTypes.some(
          (awardType) => !awardType.name.trim() || !awardType.description.trim(),
        )
        if (hasEmptyAwardType) {
          setCreateError("請填寫所有獎項類型的名稱和描述")
          return
        }
      }
    }

    setIsLoading(true)

    try {
    if (selectedCompetitionForAction) {
      // 編輯模式 - 更新現有競賽
        const updates = {
          name: newCompetition.name,
          year: newCompetition.year,
          month: newCompetition.month,
          startDate: newCompetition.startDate,
          endDate: newCompetition.endDate,
          status: newCompetition.status,
          description: newCompetition.description,
          type: newCompetition.type,
          evaluationFocus: newCompetition.evaluationFocus,
          maxTeamSize: newCompetition.maxTeamSize || null,
          // 關聯數據
          judges: newCompetition.judges || [],
          teams: newCompetition.participatingTeams || [],
          awardTypes: newCompetition.awardTypes || [],
          rules: newCompetition.rules || []
        }
        
        const updatedCompetition = await updateCompetitionInDb(selectedCompetitionForAction.id, updates)
        if (updatedCompetition) {
          // 同時更新 context
      updateCompetition(selectedCompetitionForAction.id, newCompetition)
        }
    } else {
        // 創建模式 - 新增競賽到資料庫
        const competitionData = {
          name: newCompetition.name,
          year: newCompetition.year,
          month: newCompetition.month,
          startDate: newCompetition.startDate,
          endDate: newCompetition.endDate,
          status: newCompetition.status,
          description: newCompetition.description,
          type: newCompetition.type,
          evaluationFocus: newCompetition.evaluationFocus,
          maxTeamSize: newCompetition.maxTeamSize || null,
          isActive: true,
          // 關聯數據
          judges: newCompetition.judges || [],
          teams: newCompetition.participatingTeams || [],
          awardTypes: newCompetition.awardTypes || [],
          rules: newCompetition.rules || []
        }

        const createdCompetition = await createCompetitionInDb(competitionData)
        
        if (createdCompetition) {
          // 同時添加到 context（保持向後兼容）
      const competitionWithId = {
        ...newCompetition,
            id: createdCompetition.id,
            createdAt: createdCompetition.created_at,
      }
      addCompetition(competitionWithId)
        }
      }
    } catch (error) {
      console.error("處理競賽失敗:", error)
      setCreateError("處理競賽時發生錯誤")
    }

    setShowCreateCompetition(false)
    setSelectedCompetitionForAction(null)
    setCreateError("")
    resetForm()
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
  }

  const handleCreateTeam = async () => {
    setCreateError("")

    if (!newTeam.name || !newTeam.leader || !newTeam.contactEmail) {
      setCreateError("請填寫團隊名稱、隊長和聯絡信箱")
      return
    }

    if (newTeam.members.length === 0) {
      setCreateError("請至少添加一名團隊成員")
      return
    }

    // Check if leader is in members list
    const leaderInMembers = newTeam.members.some((member) => member.name === newTeam.leader)
    if (!leaderInMembers) {
      setCreateError("隊長必須在團隊成員列表中")
      return
    }

    setIsLoading(true)

    try {
    if (selectedTeam) {
      // 編輯模式 - 更新現有團隊
        // 使用選擇的隊長 ID，如果沒有選擇則保持原有的隊長 ID
        const leaderId = newTeam.leader_id || (selectedTeam as any).leader_id || '0b844fb6-1a63-4e0c-a15a-416e9b0ec8c7'
        
        const teamData = {
          name: newTeam.name,
          leader_id: leaderId,
          department: newTeam.department,
          contact_email: newTeam.contactEmail,
          description: newTeam.description,
          members: newTeam.members.map(member => ({
            user_id: member.id, // 現在 member.id 就是 user_id
            role: member.role || 'member'
          })),
          apps: newTeam.apps // 添加應用 ID 列表
        }

        const success = await updateTeamInDb(selectedTeam.id, teamData)
        if (success) {
      setSuccess("團隊更新成功！")
        }
    } else {
      // 創建模式 - 新增團隊
        // 使用選擇的隊長 ID，如果沒有選擇則使用預設的用戶 ID
        const leaderId = newTeam.leader_id || '0b844fb6-1a63-4e0c-a15a-416e9b0ec8c7'
        
        const teamData = {
          name: newTeam.name,
          leader_id: leaderId,
          department: newTeam.department,
          contact_email: newTeam.contactEmail,
          description: newTeam.description,
          members: newTeam.members.map(member => ({
            user_id: member.id, // 現在 member.id 就是 user_id
            role: member.role || 'member'
          })),
          apps: newTeam.apps // 添加應用 ID 列表
        }

        const createdTeam = await createTeamInDb(teamData)
        if (createdTeam) {
      setSuccess("團隊創建成功！")
        }
      }
    } catch (error) {
      console.error("處理團隊失敗:", error)
      setCreateError("處理團隊時發生錯誤")
    }

    setShowCreateTeam(false)
    setSelectedTeam(null)
    resetTeamForm()
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
  }





  const handleConfirmDeleteTeam = async () => {
    if (!teamToDelete) return

    setIsLoading(true)
    try {
      const success = await deleteTeamInDb(teamToDelete.id, true) // 硬刪除
      if (success) {
    setShowDeleteTeamConfirm(false)
    setTeamToDelete(null)
    setSuccess("團隊刪除成功！")
      } else {
        setError("刪除團隊失敗")
      }
    } catch (error) {
      console.error('刪除團隊失敗:', error)
      setError('刪除團隊失敗')
    } finally {
    setIsLoading(false)
    }
  }

  const handleAddMember = () => {
    if (!newMember.user_id || !newMember.name.trim()) {
      setCreateError("請選擇成員")
      return
    }

    // 檢查是否已經添加過這個成員
    if (newTeam.members.some(member => member.id === newMember.user_id)) {
      setCreateError("該成員已經在團隊中")
      return
    }

    const member = {
      id: newMember.user_id, // 使用用戶 ID
      name: newMember.name,
      department: newMember.department,
      role: newMember.role,
    }

    setNewTeam({
      ...newTeam,
      members: [...newTeam.members, member],
    })

    setNewMember({
      name: "",
      user_id: "",
      department: "HQBU",
      role: "成員",
    })
    setCreateError("")
  }

  const handleRemoveMember = (memberId: string) => {
    setNewTeam({
      ...newTeam,
      members: newTeam.members.filter((m) => m.id !== memberId),
    })
  }

  const handleAddApp = (appId: string) => {
    if (newTeam.apps.includes(appId)) {
      setCreateError("此應用已經加入團隊")
      return
    }

    setNewTeam({
      ...newTeam,
      apps: [...newTeam.apps, appId],
    })
    setCreateError("")
  }

  const handleRemoveApp = (appId: string) => {
    setNewTeam({
      ...newTeam,
      apps: newTeam.apps.filter(id => id !== appId),
    })
  }

  const handleAddJudge = async () => {
    setError("")

    if (!newJudge.name || !newJudge.title || !newJudge.department) {
      setError("請填寫所有必填欄位")
      return
    }

    setIsLoading(true)

    try {
      const expertiseArray = newJudge.expertise
        .split(",")
        .map((s) => s.trim())
        .filter(Boolean)

    if (selectedJudge) {
      // 編輯模式 - 更新現有評審
        const updates = {
          name: newJudge.name,
          title: newJudge.title,
          department: newJudge.department,
          expertise: expertiseArray,
          avatar: newJudge.avatar || null,
          isActive: true
        }
        
        const updatedJudge = await updateJudgeInDb(selectedJudge.id, updates)
        if (updatedJudge) {
          // 同時更新 context
      updateJudge(selectedJudge.id, {
        ...newJudge,
            expertise: expertiseArray,
      })
        }
    } else {
        // 新增模式 - 新增評審到資料庫
        const judgeData = {
          name: newJudge.name,
          title: newJudge.title,
          department: newJudge.department,
          expertise: expertiseArray,
          avatar: newJudge.avatar || null,
          isActive: true
        }

        const createdJudge = await createJudgeInDb(judgeData)
        
        if (createdJudge) {
          // 同時添加到 context（保持向後兼容）
    addJudge({
      ...newJudge,
            expertise: expertiseArray,
          })
          
          // 重新獲取評審列表和統計
          await fetchJudges()
          await fetchJudgeStats()
        }
      }
    } catch (error) {
      console.error("處理評審失敗:", error)
      setError("處理評審時發生錯誤")
    }

    setShowAddJudge(false)
    setSelectedJudge(null)
    setNewJudge({
      name: "",
      title: "",
      department: "",
      expertise: "",
    })
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
  }

  const handleEditJudge = (judge: any) => {
    setSelectedJudge(judge)
    setNewJudge({
      name: judge.name,
      title: judge.title,
      department: judge.department,
      expertise: judge.expertise.join(", "),
    })
    setShowAddJudge(true) // 使用新增評審對話框
  }

  const handleDisableJudge = (judge: any) => {
    setSelectedJudge(judge)
    setShowDisableJudgeConfirm(true)
  }

  const handleEnableJudge = async (judge: any) => {
    setIsLoading(true)
    try {
      const success = await updateJudgeInDb(judge.id, { is_active: true })
      if (success) {
        setSuccess('評審已啟用！')
        // 不需要再次調用 fetchJudges 和 fetchJudgeStats，因為 updateJudgeInDb 已經調用了
      } else {
        setError('啟用評審失敗')
      }
    } catch (error) {
      console.error('啟用評審失敗:', error)
      setError('啟用評審失敗')
    } finally {
      setIsLoading(false)
    }
  }

  const handleDeleteJudge = (judge: any) => {
    setSelectedJudge(judge)
    setShowDeleteJudgeConfirm(true)
  }



  const confirmDisableJudge = async () => {
    if (!selectedJudge) return

    setIsLoading(true)
    
    try {
      const success = await updateJudgeInDb(selectedJudge.id, { is_active: false })
      if (success) {
        setShowDisableJudgeConfirm(false)
        setSelectedJudge(null)
        setSuccess('評審已停用！')
        // 不需要再次調用 fetchJudges 和 fetchJudgeStats，因為 updateJudgeInDb 已經調用了
      } else {
        setError('停用評審失敗')
      }
    } catch (error) {
      console.error('停用評審失敗:', error)
      setError('停用評審失敗')
    } finally {
      setIsLoading(false)
    }
  }

  const confirmDeleteJudge = async () => {
    if (!selectedJudge) return

    const judgeId = selectedJudge.id // 保存 ID，避免後續變為 null
    const judgeName = selectedJudge.name // 保存名稱，避免後續變為 null
    setIsLoading(true)

    try {
      const success = await deleteJudgeInDb(judgeId, true, true) // 直接硬刪除，跳過內部刷新
      if (success) {
    setShowDeleteJudgeConfirm(false)
    setSelectedJudge(null)
        
        // 立即從 context 中移除（如果存在）
        console.log('🗑️ 調用 deleteJudge 移除評審:', judgeId)
        console.log('🗑️ 評審名稱:', judgeName)
        console.log('🗑️ 當前 context 中的評審:', judges.map(j => ({ id: j.id, name: j.name })))
        
        // 根據名稱匹配 context 中的評審，因為 ID 可能不匹配
        const contextJudge = judges.find(j => j.name === judgeName)
        if (contextJudge) {
          console.log('🗑️ 找到匹配的 context 評審:', contextJudge)
          deleteJudge(contextJudge.id)
        } else {
          console.log('🗑️ 沒有找到匹配的 context 評審，嘗試使用原始 ID')
          deleteJudge(judgeId)
        }
        
        // 強制從 dbJudges 中移除，確保立即更新
        setDbJudges(prev => {
          console.log('🗑️ 從 dbJudges 中移除評審:', judgeId)
          console.log('🗑️ 移除前的評審列表:', prev.map(j => ({ id: j.id, name: j.name, is_active: j.is_active })))
          const filtered = prev.filter(judge => judge.id !== judgeId)
          console.log('🗑️ 移除後的評審列表:', filtered.map(j => ({ id: j.id, name: j.name, is_active: j.is_active })))
          return filtered
        })
        
        // 等待一個微任務，確保 context 狀態更新完成
        await new Promise(resolve => setTimeout(resolve, 0))
        
        // 確保列表和統計數據立即更新
        console.log('🔄 調用 fetchJudges 重新獲取數據')
        await fetchJudges()
        await fetchJudgeStats()
        
        // 再次檢查 context 狀態
        console.log('🔍 刪除後檢查 context 狀態')
      }
    } catch (error) {
      console.error('刪除評審失敗:', error)
      setError('刪除評審失敗')
    } finally {
    setIsLoading(false)
    }
  }

  const handleCreateAward = async () => {
    setError("")

    if (!newAward.competitionId || !newAward.participantId || !newAward.awardName) {
      setError("請填寫所有必填欄位")
      return
    }

    setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 1000))

    const competition = competitions.find((c) => c.id === newAward.competitionId)
    let participant: any = null
    let participantName = ""
    let creatorName = ""

    // Get participant based on type
    if (newAward.participantType === "individual") {
      // 示例個人應用數據
      const mockIndividualApps = [
        { id: "app1", name: "智能客服系統", creator: "張小明", department: "ITBU" },
        { id: "app2", name: "數據分析平台", creator: "李美華", department: "研發部" },
      ]
      participant = mockIndividualApps.find((a) => a.id === newAward.participantId)
      participantName = participant?.name || ""
      creatorName = participant?.creator || ""
    } else if (newAward.participantType === "team") {
      participant = (dbTeams.length > 0 ? dbTeams : teams).find((t) => t.id === newAward.participantId)
      participantName = participant?.name || ""
      creatorName = participant?.leader || ""
    }

    if (competition && participant) {
      // 根據獎項類型設定圖標
      let icon = "🏆"
      switch (newAward.awardType) {
        case "gold": icon = "🥇"; break;
        case "silver": icon = "🥈"; break;
        case "bronze": icon = "🥉"; break;
        case "popular": icon = "👥"; break;
        case "innovation": icon = "💡"; break;
        case "technical": icon = "⚙️"; break;
        default: icon = "🏆"; break;
      }

      const award = {
        id: `award_${Date.now()}`,
        competitionId: newAward.competitionId,
        appId: newAward.participantType === "individual" ? newAward.participantId : undefined,
        teamId: newAward.participantType === "team" ? newAward.participantId : undefined,
        appName: newAward.participantType === "individual" ? participantName : undefined,
        creator: creatorName,
        awardType: newAward.awardType,
        awardName: newAward.awardName,
        score: newAward.score,
        year: competition.year,
        month: competition.month,
        icon,
        rank: newAward.rank,
        category: newAward.category,
        competitionType: newAward.participantType,
        description: newAward.description,
        judgeComments: newAward.judgeComments,
        applicationLinks: newAward.applicationLinks,
        documents: newAward.documents,
        photos: newAward.photos,
      }

      addAward(award)
    }

    setShowCreateAward(false)
    setNewAward({
      competitionId: "",
      participantId: "",
      participantType: "individual",
      awardType: "custom",
      awardName: "",
      customAwardTypeId: "",
      description: "",
      score: 0,
      category: "innovation",
      rank: 0,
      applicationLinks: {
        production: "",
        demo: "",
        github: "",
      },
      documents: [],
      judgeComments: "",
      photos: [],
    })
    setSuccess(selectedAward ? "獎項更新成功！" : "獎項創建成功！")
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
  }

  const handleViewAward = (award: any) => {
    setSelectedAward(award)
    setShowAwardDetail(true)
  }

  const handleEditAward = (award: any) => {
    setSelectedAward(award)
    setNewAward({
      competitionId: award.competitionId,
      participantId: award.appId || award.teamId || "",
      participantType: award.competitionType,
      awardType: award.awardType,
      awardName: award.awardName,
      customAwardTypeId: award.customAwardTypeId || "",
      description: (award as any).description || "",
      score: award.score,
      category: award.category,
      rank: award.rank,
      applicationLinks: (award as any).applicationLinks || {
        production: "",
        demo: "",
        github: "",
      },
      documents: (award as any).documents || [],
      judgeComments: (award as any).judgeComments || "",
      photos: (award as any).photos || [],
    })
    setShowCreateAward(true)
  }

  const handleDeleteAward = (award: any) => {
    setAwardToDelete(award)
    setShowDeleteAwardConfirm(true)
  }

  const confirmDeleteAward = async () => {
    if (!awardToDelete) return

    setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 500))

    // 這裡應該調用 context 中的刪除函數
    // deleteAward(awardToDelete.id)
    
    setShowDeleteAwardConfirm(false)
    setAwardToDelete(null)
    setSuccess("獎項刪除成功！")
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
  }

  const handleManualScoring = (competition: any) => {
    setSelectedCompetition(competition)
    
    // 設定初始參賽者類型
    if (competition.type === "mixed") {
      setSelectedParticipantType("individual") // 混合賽預設從個人賽開始
    } else {
      setSelectedParticipantType(competition.type)
    }
    
    // 初始化評分項目
    const initialScores = getInitialScores(competition, competition.type === "mixed" ? "individual" : competition.type)
    
    setManualScoring({
      judgeId: "",
      participantId: "",
      participantType: competition.type || "individual",
      scores: initialScores,
      comments: "",
    })
    setShowManualScoring(true)
  }
  
  // 獲取初始評分項目的輔助函數
  const getInitialScores = (competition: any, participantType: "individual" | "team") => {
    const initialScores: Record<string, number> = {}
    
    if (competition.type === "mixed") {
      // 混合賽：根據參賽者類型選擇對應的評分規則
      const config = participantType === "individual" ? competition.individualConfig : competition.teamConfig
      if (config && config.rules && config.rules.length > 0) {
        config.rules.forEach((rule: any) => {
          initialScores[rule.name] = 0
        })
      } else {
        // 預設評分項目
        getDefaultScoringItems(participantType).forEach(item => {
          initialScores[item.name] = 0
        })
      }
    } else {
      // 單一類型競賽
      if (competition.rules && competition.rules.length > 0) {
        competition.rules.forEach((rule: any) => {
          initialScores[rule.name] = 0
        })
      } else {
        // 預設評分項目
        getDefaultScoringItems(participantType).forEach(item => {
          initialScores[item.name] = 0
        })
      }
    }
    
    return initialScores
  }
  
  // 獲取預設評分項目
  const getDefaultScoringItems = (participantType: "individual" | "team") => {
    if (participantType === "team") {
      return [
        { name: '團隊合作', description: '團隊協作和溝通能力' },
        { name: '創新性', description: '創新程度和獨特性' },
        { name: '技術性', description: '技術實現的複雜度和品質' },
        { name: '實用性', description: '實際應用價值和用戶體驗' },
        { name: '展示效果', description: '團隊展示的清晰度和吸引力' }
      ]
    } else {
      return [
        { name: '創新性', description: '創新程度和獨特性' },
        { name: '技術性', description: '技術實現的複雜度和品質' },
        { name: '實用性', description: '實際應用價值和用戶體驗' },
        { name: '展示效果', description: '展示的清晰度和吸引力' },
        { name: '影響力', description: '對行業或社會的潛在影響' }
      ]
    }
  }
  
  // 處理參賽者類型變更（僅針對混合賽）
  const handleParticipantTypeChange = (newType: "individual" | "team") => {
    setSelectedParticipantType(newType)
    
    // 重新初始化評分項目
    const newScores = getInitialScores(selectedCompetition, newType)
    setManualScoring({
      ...manualScoring,
      participantId: "", // 清空選擇的參賽者
      scores: newScores,
    })
  }

  const handleSubmitManualScore = async () => {
    setError("")

    if (!manualScoring.judgeId || !manualScoring.participantId) {
      setError("請選擇評審和參賽項目")
      return
    }

    const hasAllScores = Object.values(manualScoring.scores).every((score) => score > 0)
    if (!hasAllScores) {
      setError("請為所有評分項目打分")
      return
    }

    if (!manualScoring.comments.trim()) {
      setError("請填寫評審意見")
      return
    }

    setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 1000))

    submitJudgeScore({
      judgeId: manualScoring.judgeId,
      appId: manualScoring.participantId, // Using appId field for all participant types
      scores: manualScoring.scores,
      comments: manualScoring.comments.trim(),
    })

    setManualScoring({
      judgeId: "",
      participantId: "",
      participantType: "individual",
      scores: {
        innovation: 0,
        technical: 0,
        usability: 0,
        presentation: 0,
        impact: 0,
      },
      comments: "",
    })

    setSuccess("評分提交成功！")
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
  }

  const handleViewCompetition = (competition: any) => {
    setSelectedCompetitionForAction(competition)
    setShowCompetitionDetail(true)
  }

  const handleEditCompetition = (competition: any) => {
    setSelectedCompetitionForAction(competition)
    setNewCompetition({
      name: competition.name,
      type: competition.type,
      year: competition.year,
      month: competition.month,
      startDate: competition.startDate,
      endDate: competition.endDate,
      description: competition.description,
      status: competition.status,
      judges: competition.judges || [],
      participatingApps: competition.participatingApps || [],
      participatingTeams: competition.participatingTeams || [],
      evaluationFocus: competition.evaluationFocus || "",
      rules: competition.rules || [],
      awardTypes: competition.awardTypes || [],
      individualConfig: competition.individualConfig || {
        judges: [],
        rules: [],
        awardTypes: [],
        evaluationFocus: "",
      },
      teamConfig: competition.teamConfig || {
        judges: [],
        rules: [],
        awardTypes: [],
        evaluationFocus: "",
      },
    })
    setShowCreateCompetition(true) // 使用創建競賽對話框
  }

  const handleDeleteCompetition = (competition: any) => {
    setSelectedCompetitionForAction(competition)
    setShowDeleteCompetitionConfirm(true)
  }

  const handleChangeStatus = (competition: any) => {
    setSelectedCompetitionForAction(competition)
    setNewStatus(competition.status)
    setShowChangeStatusDialog(true)
  }



  const confirmDeleteCompetition = async () => {
    if (!selectedCompetitionForAction) return

    setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 500))

    deleteCompetition(selectedCompetitionForAction.id)
    setShowDeleteCompetitionConfirm(false)
    setSelectedCompetitionForAction(null)
    setSuccess("競賽刪除成功！")
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
  }

  const handleUpdateStatus = async () => {
    if (!selectedCompetitionForAction) return

    setIsLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 500))

    updateCompetition(selectedCompetitionForAction.id, {
      ...selectedCompetitionForAction,
      status: newStatus,
    })

    setShowChangeStatusDialog(false)
    setSelectedCompetitionForAction(null)
    setSuccess("競賽狀態更新成功！")
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
  }

  const getCompetitionTypeIcon = (type: string) => {
    switch (type) {
      case "individual":
        return <User className="w-4 h-4" />
      case "team":
        return <Users className="w-4 h-4" />
      case "mixed":
        return <Trophy className="w-4 h-4" />
      default:
        return <Trophy className="w-4 h-4" />
    }
  }

  const getScoreLabelText = (key: string) => {
    switch (key) {
      case "innovation":
        return "創新性"
      case "technical":
        return "技術性"
      case "usability":
        return "實用性"
      case "presentation":
        return "展示性"
      case "impact":
        return "影響力"
      default:
        return key
    }
  }

  const getCompetitionTypeText = (type: string) => {
    switch (type) {
      case "individual":
        return "個人賽"
      case "team":
        return "團體賽"
      case "mixed":
        return "混合賽"
      default:
        return "未知類型"
    }
  }

  // 格式化時間顯示
  const formatDateRange = (startDate: string, endDate: string) => {
    try {
      const start = new Date(startDate)
      const end = new Date(endDate)
      
      const formatDate = (date: Date) => {
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
      }
      
      return `${formatDate(start)} ~ ${formatDate(end)}`
    } catch (error) {
      return `${startDate} ~ ${endDate}`
    }
  }

  // 計算權重百分比
  const calculateWeightPercentage = (weight: any) => {
    const weightNum = parseFloat(weight) || 0;
    // 如果權重已經是百分比格式（大於1），直接使用
    if (weightNum > 1) {
      return weightNum;
    }
    // 如果權重是小數格式（0-1），轉換為百分比
    return weightNum * 100;
  }

  // 計算總權重
  const calculateTotalWeight = (rules: any[]) => {
    return rules.reduce((sum, rule) => {
      return sum + calculateWeightPercentage(rule.weight);
    }, 0);
  }

  const getParticipantCount = (competition: any) => {
    // 如果是從資料庫載入的競賽，使用 teams 屬性
    if (competition.teams && Array.isArray(competition.teams)) {
      return competition.teams.length
    }
    
    // 如果是本地競賽數據，使用原來的邏輯
    switch (competition.type) {
      case "individual":
        return competition.participatingApps?.length || 0
      case "team":
        return competition.participatingTeams?.length || 0
      case "mixed":
        return (competition.participatingApps?.length || 0) + (competition.participatingTeams?.length || 0)
      default:
        return 0
    }
  }

  const getScoringProgress = (competitionId: string) => {
    const competition = competitions.find((c) => c.id === competitionId)
    if (!competition) return { completed: 0, total: 0, percentage: 0 }

    const participantCount = getParticipantCount(competition)
    const totalExpected = competition.judges.length * participantCount
    const completed = judgeScores.filter((score) => {
      const individualParticipants = competition.participatingApps || []
      const teamParticipants = competition.participatingTeams || []
      const allParticipants = [...individualParticipants, ...teamParticipants]
      return allParticipants.includes(score.appId) && competition.judges.includes(score.judgeId)
    }).length

    return {
      completed,
      total: totalExpected,
      percentage: totalExpected > 0 ? Math.round((completed / totalExpected) * 100) : 0,
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "bg-green-100 text-green-800 border-green-200"
      case "active":
        return "bg-blue-100 text-blue-800 border-blue-200"
      case "judging":
        return "bg-orange-100 text-orange-800 border-orange-200"
      case "upcoming":
        return "bg-gray-100 text-gray-800 border-gray-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

  const getStatusText = (status: string) => {
    switch (status) {
      case "completed":
        return "已完成"
      case "active":
        return "進行中"
      case "judging":
        return "評審中"
      case "upcoming":
        return "即將開始"
      default:
        return status
    }
  }

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    setSuccess("連結已複製到剪貼簿！")
    setTimeout(() => setSuccess(""), 3000)
  }

  // 获取筛选后的奖项
  const getFilteredAwards = () => {
    let filteredAwards = [...awards]

    // 搜索功能 - 按应用名称、创作者或奖项名称搜索
    if (awardSearchQuery.trim()) {
      const query = awardSearchQuery.toLowerCase().trim()
      filteredAwards = filteredAwards.filter((award) => {
        return (
          award.appName?.toLowerCase().includes(query) ||
          award.creator?.toLowerCase().includes(query) ||
          award.awardName?.toLowerCase().includes(query)
        )
      })
    }

    // 年份筛选
    if (awardYearFilter !== "all") {
      filteredAwards = filteredAwards.filter((award) => award.year === Number.parseInt(awardYearFilter))
    }

    // 月份筛选
    if (awardMonthFilter !== "all") {
      filteredAwards = filteredAwards.filter((award) => award.month === Number.parseInt(awardMonthFilter))
    }

    // 奖项类型筛选
    if (awardTypeFilter !== "all") {
      if (awardTypeFilter === "ranking") {
        filteredAwards = filteredAwards.filter((award) => award.rank > 0 && award.rank <= 3)
      } else if (awardTypeFilter === "popular") {
        filteredAwards = filteredAwards.filter((award) => award.awardType === "popular")
      } else {
        filteredAwards = filteredAwards.filter((award) => award.awardType === awardTypeFilter)
      }
    }

    // 竞赛类型筛选
    if (awardCompetitionTypeFilter !== "all") {
      filteredAwards = filteredAwards.filter((award) => award.competitionType === awardCompetitionTypeFilter)
    }

    return filteredAwards.sort((a, b) => {
      // 按年份、月份、排名排序
      if (a.year !== b.year) return b.year - a.year
      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 judgeScoringUrl = typeof window !== "undefined" ? `${window.location.origin}/judge-scoring` : "/judge-scoring"

  // Filter out proposal competitions from display
  const displayCompetitions = competitions.filter((competition) => competition.type !== "proposal")

  return (
    <div className="space-y-6">
      {/* Success/Error Messages */}
      {success && (
        <Alert className="border-green-200 bg-green-50">
          <CheckCircle className="h-4 w-4 text-green-600" />
          <AlertDescription className="text-green-800">{success}</AlertDescription>
        </Alert>
      )}

      {error && (
        <Alert variant="destructive">
          <AlertTriangle className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">競賽管理</h1>
          <p className="text-gray-600">管理個人賽、團體賽、混合賽競賽活動</p>
          {currentCompetition && (
            <div className="flex items-center mt-2 text-sm text-purple-600">
              <Star className="w-4 h-4 mr-1" />
              當前競賽：{currentCompetition.name} ({getCompetitionTypeText(currentCompetition.type)})
            </div>
          )}
        </div>
        <div className="flex space-x-3">
          <Button
            onClick={() => setShowCreateCompetition(true)}
            className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
          >
            <Plus className="w-4 h-4 mr-2" />
            創建競賽
          </Button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">總競賽數</p>
                <p className="text-2xl font-bold">
                  {isLoadingDb ? (
                    <Loader2 className="w-6 h-6 animate-spin" />
                  ) : (
                    dbStats?.total || displayCompetitions.length
                  )}
                </p>
              </div>
              <Trophy className="w-8 h-8 text-purple-600" />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">進行中</p>
                <p className="text-2xl font-bold">
                  {isLoadingDb ? (
                    <Loader2 className="w-6 h-6 animate-spin" />
                  ) : (
                    dbStats?.active || displayCompetitions.filter((c) => c.status === "active").length
                  )}
                </p>
              </div>
              <Play className="w-8 h-8 text-blue-600" />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">評審團</p>
                <p className="text-2xl font-bold">{judgeStats?.totalJudges || dbJudges.length || judges.length}</p>
              </div>
              <Crown className="w-8 h-8 text-yellow-600" />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">已頒獎項</p>
                <p className="text-2xl font-bold">{awards.length}</p>
              </div>
              <Award className="w-8 h-8 text-orange-600" />
            </div>
          </CardContent>
        </Card>
      </div>

      <Tabs defaultValue="competitions" className="w-full">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="competitions">競賽列表</TabsTrigger>
          <TabsTrigger value="teams">團隊管理</TabsTrigger>
          <TabsTrigger value="judges">評審管理</TabsTrigger>
          <TabsTrigger value="scoring">評分管理</TabsTrigger>
          <TabsTrigger value="awards">獎項管理</TabsTrigger>
        </TabsList>

        <TabsContent value="competitions" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>競賽列表</CardTitle>
              <CardDescription>管理所有競賽活動</CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>競賽名稱</TableHead>
                    <TableHead>類型</TableHead>
                    <TableHead>時間</TableHead>
                    <TableHead>狀態</TableHead>
                    <TableHead>參賽項目</TableHead>
                    <TableHead>評分進度</TableHead>
                    <TableHead>操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {isLoadingDb ? (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center py-8">
                        <Loader2 className="w-6 h-6 animate-spin mx-auto mb-2" />
                        <p className="text-gray-500">載入競賽列表中...</p>
                      </TableCell>
                    </TableRow>
                  ) : (dbCompetitions.length > 0 ? dbCompetitions : displayCompetitions).length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center py-8">
                        <Trophy className="w-12 h-12 text-gray-300 mx-auto mb-4" />
                        <p className="text-gray-500">尚無競賽資料</p>
                        <p className="text-sm text-gray-400">點擊「創建競賽」按鈕開始建立第一個競賽</p>
                      </TableCell>
                    </TableRow>
                  ) : (dbCompetitions.length > 0 ? dbCompetitions : displayCompetitions).map((competition) => {
                    const isCurrentCompetition = currentCompetition?.id === competition.id
                    const scoringProgress = getScoringProgress(competition.id)
                    const participantCount = getParticipantCount(competition)

                    return (
                      <TableRow key={competition.id} className={isCurrentCompetition ? "bg-purple-50" : ""}>
                        <TableCell>
                          <div className="flex items-center space-x-2">
                            {isCurrentCompetition && <Star className="w-4 h-4 text-purple-600 fill-current" />}
                            <div>
                              <p className="font-medium">{competition.name}</p>
                              <p className="text-sm text-gray-500">{competition.description}</p>
                            </div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-2">
                            {getCompetitionTypeIcon(competition.type)}
                            <Badge variant="outline" className="text-xs">
                              {getCompetitionTypeText(competition.type)}
                            </Badge>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="text-sm">
                            <p>
                              {competition.year}年{competition.month}月
                            </p>
                            <p className="text-gray-500">
                              {formatDateRange(
                                competition.start_date || competition.startDate, 
                                competition.end_date || competition.endDate
                              )}
                            </p>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className={getStatusColor(competition.status)}>
                            {getStatusText(competition.status)}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-1">
                            {getCompetitionTypeIcon(competition.type)}
                            <span>{participantCount} 個</span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="space-y-1">
                            <div className="flex items-center space-x-2">
                              <Progress value={scoringProgress.percentage} className="w-16 h-2" />
                              <span className="text-xs text-gray-500">
                                {scoringProgress.completed}/{scoringProgress.total}
                              </span>
                            </div>
                            <p className="text-xs text-gray-500">{scoringProgress.percentage}% 完成</p>
                          </div>
                        </TableCell>
                        <TableCell>
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="sm" disabled={isLoading}>
                                <MoreHorizontal className="w-4 h-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem onClick={() => handleViewCompetition(competition)}>
                                <Eye className="w-4 h-4 mr-2" />
                                查看詳情
                              </DropdownMenuItem>

                              <DropdownMenuItem onClick={() => handleEditCompetition(competition)}>
                                <Edit className="w-4 h-4 mr-2" />
                                編輯競賽
                              </DropdownMenuItem>

                              <DropdownMenuItem onClick={() => handleChangeStatus(competition)}>
                                <Settings className="w-4 h-4 mr-2" />
                                修改狀態
                              </DropdownMenuItem>

                              <DropdownMenuItem onClick={() => handleManualScoring(competition)}>
                                <ClipboardList className="w-4 h-4 mr-2" />
                                手動評分
                              </DropdownMenuItem>

                              {!isCurrentCompetition && (
                                <DropdownMenuItem onClick={() => setCurrentCompetition(competition)}>
                                  <Star className="w-4 h-4 mr-2" />
                                  設為當前競賽
                                </DropdownMenuItem>
                              )}

                              {isCurrentCompetition && (
                                <DropdownMenuItem onClick={() => setCurrentCompetition(null)}>
                                  <StarOff className="w-4 h-4 mr-2" />
                                  取消當前競賽
                                </DropdownMenuItem>
                              )}

                              <DropdownMenuItem
                                onClick={() => handleDeleteCompetition(competition)}
                                className="text-red-600 focus:text-red-600"
                              >
                                <Trash2 className="w-4 h-4 mr-2" />
                                刪除競賽
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </TableCell>
                      </TableRow>
                    )
                  })}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="teams" className="space-y-4">
          <div className="flex justify-between items-center">
            <h3 className="text-lg font-semibold">團隊管理</h3>
            <Button
              onClick={() => {
                setShowCreateTeam(true)
                fetchAvailableApps()
                fetchAvailableUsers()
              }}
              className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700"
            >
              <Plus className="w-4 h-4 mr-2" />
              創建團隊
            </Button>
          </div>

          {/* 搜索和篩選區域 */}
          <div className="bg-gray-50 p-4 rounded-lg space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* 搜索框 */}
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <Input
                  placeholder="搜索團隊名稱、隊長姓名..."
                  value={teamSearchTerm}
                  onChange={(e) => {
                    setTeamSearchTerm(e.target.value)
                    setTeamCurrentPage(1) // 重置到第一頁
                  }}
                  className="pl-10"
                />
              </div>

              {/* 部門篩選 */}
              <Select value={teamDepartmentFilter} onValueChange={(value) => {
                setTeamDepartmentFilter(value)
                setTeamCurrentPage(1)
              }}>
                <SelectTrigger>
                  <SelectValue placeholder="部門篩選" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有部門</SelectItem>
                  <SelectItem value="HQBU">HQBU</SelectItem>
                  <SelectItem value="ITBU">ITBU</SelectItem>
                  <SelectItem value="MBU1">MBU1</SelectItem>
                  <SelectItem value="MBU2">MBU2</SelectItem>
                  <SelectItem value="SBU">SBU</SelectItem>
                  <SelectItem value="研發部">研發部</SelectItem>
                  <SelectItem value="產品部">產品部</SelectItem>
                  <SelectItem value="技術部">技術部</SelectItem>
                  <SelectItem value="其他">其他</SelectItem>
                </SelectContent>
              </Select>

              {/* 清除篩選按鈕 */}
              <Button 
                variant="outline" 
                onClick={() => {
                  setTeamSearchTerm("")
                  setTeamDepartmentFilter("all")
                  setTeamCurrentPage(1)
                }}
                className="flex items-center space-x-2"
              >
                <Filter className="w-4 h-4" />
                <span>清除篩選</span>
              </Button>
            </div>

            {/* 結果統計 */}
            <div className="text-sm text-gray-600">
              共找到 {(() => {
                const filtered = dbTeams.filter(team => {
                  const matchesSearch = teamSearchTerm === "" || 
                    team.name.toLowerCase().includes(teamSearchTerm.toLowerCase()) ||
                    (team.leader_name && team.leader_name.toLowerCase().includes(teamSearchTerm.toLowerCase()))

                  const matchesDepartment = teamDepartmentFilter === "all" ||
                    (teamDepartmentFilter === "其他" 
                      ? !["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "研發部", "產品部", "技術部"].includes(team.department)
                      : team.department === teamDepartmentFilter)

                  return matchesSearch && matchesDepartment
                })
                return filtered.length
              })()} 個團隊
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 min-h-[400px]" style={{ gridAutoRows: 'max-content' }}>
            {(() => {
              // 篩選邏輯
              const filtered = dbTeams.filter(team => {
                const matchesSearch = teamSearchTerm === "" || 
                  team.name.toLowerCase().includes(teamSearchTerm.toLowerCase()) ||
                  (team.leader_name && team.leader_name.toLowerCase().includes(teamSearchTerm.toLowerCase()))

                const matchesDepartment = teamDepartmentFilter === "all" ||
                  (teamDepartmentFilter === "其他" 
                    ? !["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "研發部", "產品部", "技術部"].includes(team.department)
                    : team.department === teamDepartmentFilter)

                return matchesSearch && matchesDepartment
              })

              // 分頁邏輯
              const startIndex = (teamCurrentPage - 1) * teamsPerPage
              const endIndex = startIndex + teamsPerPage
              const paginatedTeams = filtered.slice(startIndex, endIndex)

              // 如果沒有找到任何團隊
              if (filtered.length === 0) {
                return (
                  <div className="col-span-full flex flex-col items-center justify-center py-12 text-gray-500 min-h-[300px]">
                    <Users className="w-12 h-12 mb-4 text-gray-300" />
                    <p className="text-lg font-medium mb-2">沒有找到團隊</p>
                    <p className="text-sm">
                      {teamSearchTerm || teamDepartmentFilter !== "all"
                        ? "請調整搜索條件或篩選條件" 
                        : "點擊「創建團隊」按鈕來添加第一個團隊"}
                    </p>
                  </div>
                )
              }

              return paginatedTeams.map((team) => (
              <Card key={team.id} className="relative h-fit">
                <CardContent className="p-4">
                  <div className="space-y-3">
                    <div className="flex items-start justify-between">
                      <div>
                        <h4 className="font-semibold text-lg">{team.name}</h4>
                        <div className="flex items-center space-x-2 text-sm text-gray-600">
                          <User className="w-3 h-3" />
                          <span>隊長：{team.leader_name || team.leader}</span>
                        </div>
                      </div>
                      <Badge variant="outline" className="text-xs">
                        {team.department}
                      </Badge>
                    </div>

                    <div className="space-y-2 text-sm">
                      <div className="flex items-center space-x-2 text-gray-600">
                        <Mail className="w-3 h-3" />
                        <span>{team.contact_email}</span>
                      </div>
                      <div className="flex items-center space-x-2 text-gray-600">
                        <Users className="w-3 h-3" />
                        <span>{team.member_count || 0} 名成員</span>
                      </div>
                      <div className="flex items-center space-x-2 text-gray-600">
                        <Trophy className="w-3 h-3" />
                        <span>{team.submittedAppCount} 個應用</span>
                      </div>
                    </div>

                    <p className="text-sm text-gray-500 line-clamp-2">{team.description}</p>

                    <div className="flex justify-end space-x-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={async () => {
                          const teamDetails = await fetchTeamDetails(team.id)
                          if (teamDetails) {
                            setSelectedTeam(teamDetails)
                          setShowTeamDetail(true)
                          }
                        }}
                      >
                        <Eye className="w-3 h-3 mr-1" />
                        查看
                      </Button>
                      <Button variant="outline" size="sm" onClick={() => handleEditTeam(team)}>
                        <Edit className="w-3 h-3 mr-1" />
                        編輯
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleDeleteTeam(team)}
                        className="text-red-600 border-red-300 hover:bg-red-50"
                      >
                        <Trash2 className="w-3 h-3" />
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
              ))
            })()}
          </div>

          {/* 分頁組件 */}
          {(() => {
            const filtered = dbTeams.filter(team => {
              const matchesSearch = teamSearchTerm === "" || 
                team.name.toLowerCase().includes(teamSearchTerm.toLowerCase()) ||
                (team.leader_name && team.leader_name.toLowerCase().includes(teamSearchTerm.toLowerCase()))

              const matchesDepartment = teamDepartmentFilter === "all" ||
                (teamDepartmentFilter === "其他" 
                  ? !["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "研發部", "產品部", "技術部"].includes(team.department)
                  : team.department === teamDepartmentFilter)

              return matchesSearch && matchesDepartment
            })

            const totalPages = Math.ceil(filtered.length / teamsPerPage)

            // 如果當前頁面超出總頁數，重置到第一頁
            if (teamCurrentPage > totalPages && totalPages > 0) {
              setTeamCurrentPage(1)
            }

            if (totalPages <= 1) return null

            return (
              <div className="flex flex-col items-center space-y-4 mt-6">
                <div className="text-sm text-gray-600">
                  第 {teamCurrentPage} 頁，共 {totalPages} 頁
                </div>
                <div className="flex items-center space-x-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setTeamCurrentPage(prev => Math.max(1, prev - 1))}
                    disabled={teamCurrentPage === 1}
                    className="flex items-center space-x-1"
                  >
                    <span>‹</span>
                    <span>上一頁</span>
                  </Button>
                  
                  <div className="flex items-center space-x-1">
                    {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                      let page;
                      if (totalPages <= 5) {
                        page = i + 1;
                      } else if (teamCurrentPage <= 3) {
                        page = i + 1;
                      } else if (teamCurrentPage >= totalPages - 2) {
                        page = totalPages - 4 + i;
                      } else {
                        page = teamCurrentPage - 2 + i;
                      }
                      
                      return (
                        <Button
                          key={page}
                          variant={teamCurrentPage === page ? "default" : "outline"}
                          size="sm"
                          onClick={() => setTeamCurrentPage(page)}
                          className="w-10 h-10 p-0"
                        >
                          {page}
                        </Button>
                      )
                    })}
                  </div>
                  
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setTeamCurrentPage(prev => Math.min(totalPages, prev + 1))}
                    disabled={teamCurrentPage === totalPages}
                    className="flex items-center space-x-1"
                  >
                    <span>下一頁</span>
                    <span>›</span>
                  </Button>
                </div>
              </div>
            )
          })()}
        </TabsContent>

        <TabsContent value="judges" className="space-y-4">
          <div className="flex justify-between items-center">
            <h3 className="text-lg font-semibold">評審管理</h3>
            <Button onClick={() => setShowAddJudge(true)} variant="outline">
              <UserPlus className="w-4 h-4 mr-2" />
              新增評審
            </Button>
          </div>

          {/* 搜索和篩選區域 */}
          <div className="bg-gray-50 p-4 rounded-lg space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
              {/* 搜索框 */}
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <Input
                  placeholder="搜索評審姓名、職稱..."
                  value={judgeSearchTerm}
                  onChange={(e) => {
                    setJudgeSearchTerm(e.target.value)
                    setJudgeCurrentPage(1) // 重置到第一頁
                  }}
                  className="pl-10"
                />
              </div>

              {/* 部門篩選 */}
              <Select value={judgeDepartmentFilter} onValueChange={(value) => {
                setJudgeDepartmentFilter(value)
                setJudgeCurrentPage(1)
              }}>
                <SelectTrigger>
                  <SelectValue placeholder="部門篩選" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有部門</SelectItem>
                  <SelectItem value="HQBU">HQBU</SelectItem>
                  <SelectItem value="ITBU">ITBU</SelectItem>
                  <SelectItem value="MBU1">MBU1</SelectItem>
                  <SelectItem value="MBU2">MBU2</SelectItem>
                  <SelectItem value="SBU">SBU</SelectItem>
                  <SelectItem value="研發部">研發部</SelectItem>
                  <SelectItem value="產品部">產品部</SelectItem>
                  <SelectItem value="技術部">技術部</SelectItem>
                  <SelectItem value="其他">其他</SelectItem>
                </SelectContent>
              </Select>

              {/* 專業領域篩選 */}
              <Select value={judgeExpertiseFilter} onValueChange={(value) => {
                setJudgeExpertiseFilter(value)
                setJudgeCurrentPage(1)
              }}>
                <SelectTrigger>
                  <SelectValue placeholder="專業領域篩選" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有領域</SelectItem>
                  <SelectItem value="機器學習">機器學習</SelectItem>
                  <SelectItem value="深度學習">深度學習</SelectItem>
                  <SelectItem value="自然語言處理">自然語言處理</SelectItem>
                  <SelectItem value="計算機視覺">計算機視覺</SelectItem>
                  <SelectItem value="數據科學">數據科學</SelectItem>
                  <SelectItem value="人工智能">人工智能</SelectItem>
                  <SelectItem value="雲端計算">雲端計算</SelectItem>
                  <SelectItem value="網路安全">網路安全</SelectItem>
                  <SelectItem value="軟體工程">軟體工程</SelectItem>
                  <SelectItem value="用戶體驗">用戶體驗</SelectItem>
                </SelectContent>
              </Select>

              {/* 狀態篩選 */}
              <Select value={judgeStatusFilter} onValueChange={(value) => {
                setJudgeStatusFilter(value)
                setJudgeCurrentPage(1)
              }}>
                <SelectTrigger>
                  <SelectValue placeholder="所有狀態" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有狀態</SelectItem>
                  <SelectItem value="active">已啟用</SelectItem>
                  <SelectItem value="inactive">已停用</SelectItem>
                </SelectContent>
              </Select>

              {/* 清除篩選按鈕 */}
              <Button 
                variant="outline" 
                onClick={() => {
                  setJudgeSearchTerm("")
                  setJudgeDepartmentFilter("all")
                  setJudgeExpertiseFilter("all")
                  setJudgeStatusFilter("all")
                  setJudgeCurrentPage(1)
                }}
                className="flex items-center space-x-2"
              >
                <Filter className="w-4 h-4" />
                <span>清除篩選</span>
              </Button>
            </div>

            {/* 結果統計 */}
            <div className="text-sm text-gray-600">
              共找到 {isLoadingJudges ? (
                <Loader2 className="w-4 h-4 animate-spin inline" />
              ) : (() => {
                const judgesToShow = dbJudges.length > 0 ? dbJudges : judges;
                const filtered = judgesToShow.filter(judge => {
                  const matchesSearch = judgeSearchTerm === "" || 
                    judge.name.toLowerCase().includes(judgeSearchTerm.toLowerCase()) ||
                    judge.title.toLowerCase().includes(judgeSearchTerm.toLowerCase())

                  const matchesDepartment = judgeDepartmentFilter === "all" ||
                    (judgeDepartmentFilter === "其他" 
                      ? !["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "研發部", "產品部", "技術部"].includes(judge.department)
                      : judge.department === judgeDepartmentFilter)

                  const matchesExpertise = judgeExpertiseFilter === "all" ||
                    judge.expertise.some(exp => exp.includes(judgeExpertiseFilter))

                  const matchesStatus = judgeStatusFilter === "all" ||
                    (judgeStatusFilter === "active" && judge.is_active === true) ||
                    (judgeStatusFilter === "inactive" && judge.is_active === false)

                  return matchesSearch && matchesDepartment && matchesExpertise && matchesStatus
                })
                return filtered.length
              })()} 位評審
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 min-h-[400px]" style={{ gridAutoRows: 'max-content' }}>
            {isLoadingJudges ? (
              <div className="col-span-full flex flex-col items-center justify-center py-12 text-gray-500 min-h-[300px]">
                <Loader2 className="w-8 h-8 animate-spin mb-4" />
                <p className="text-lg font-medium">載入評審列表中...</p>
              </div>
            ) : (() => {
              // 使用資料庫數據或 context 數據
              const judgesToShow = dbJudges.length > 0 ? dbJudges : judges;
              console.log('🔍 評審列表渲染 - dbJudges:', dbJudges.map(j => ({ id: j.id, name: j.name, is_active: j.is_active })))
              console.log('🔍 評審列表渲染 - judges (context):', judges.map(j => ({ id: j.id, name: j.name, is_active: j.is_active })))
              console.log('🔍 評審列表渲染 - judgesToShow:', judgesToShow.map(j => ({ id: j.id, name: j.name, is_active: j.is_active })))
              
              // 篩選邏輯
              const filtered = judgesToShow.filter(judge => {
                const matchesSearch = judgeSearchTerm === "" || 
                  judge.name.toLowerCase().includes(judgeSearchTerm.toLowerCase()) ||
                  judge.title.toLowerCase().includes(judgeSearchTerm.toLowerCase())

                const matchesDepartment = judgeDepartmentFilter === "all" ||
                  (judgeDepartmentFilter === "其他" 
                    ? !["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "研發部", "產品部", "技術部"].includes(judge.department)
                    : judge.department === judgeDepartmentFilter)

                const matchesExpertise = judgeExpertiseFilter === "all" ||
                  judge.expertise.some(exp => exp.includes(judgeExpertiseFilter))

                const matchesStatus = judgeStatusFilter === "all" ||
                  (judgeStatusFilter === "active" && judge.is_active === true) ||
                  (judgeStatusFilter === "inactive" && judge.is_active === false)

                return matchesSearch && matchesDepartment && matchesExpertise && matchesStatus
              })

              // 分頁邏輯
              const startIndex = (judgeCurrentPage - 1) * judgesPerPage
              const endIndex = startIndex + judgesPerPage
              const paginatedJudges = filtered.slice(startIndex, endIndex)

              // 如果沒有找到任何評審
              if (filtered.length === 0) {
                return (
                  <div className="col-span-full flex flex-col items-center justify-center py-12 text-gray-500 min-h-[300px]">
                    <Users className="w-12 h-12 mb-4 text-gray-300" />
                    <p className="text-lg font-medium mb-2">沒有找到評審</p>
                    <p className="text-sm">
                      {judgeSearchTerm || judgeDepartmentFilter !== "all" || judgeExpertiseFilter !== "all" 
                        ? "請調整搜索條件或篩選條件" 
                        : "點擊「新增評審」按鈕來添加第一位評審"}
                    </p>
                  </div>
                )
              }

              return paginatedJudges.map((judge) => (
              <Card key={judge.id} className={`h-fit ${!judge.is_active ? 'opacity-75 border-orange-200 bg-orange-50' : ''}`}>
                <CardContent className="p-4">
                  <div className="flex items-center space-x-3 mb-3">
                    <Avatar>
                      <AvatarImage src={judge.avatar || "/placeholder.svg"} />
                      <AvatarFallback className={`${!judge.is_active ? 'bg-orange-100 text-orange-700' : 'bg-purple-100 text-purple-700'}`}>
                        {judge.name[0]}
                      </AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <div className="flex items-center space-x-2">
                      <h4 className="font-medium">{judge.name}</h4>
                        {judge.is_active === false && (
                          <Badge variant="secondary" className="text-xs bg-orange-100 text-orange-700 border-orange-200">
                            已停用
                          </Badge>
                        )}
                      </div>
                      <p className="text-sm text-gray-600">{judge.title}</p>
                      <p className="text-xs text-gray-500">{judge.department}</p>
                      <p className="text-xs text-blue-600 mt-1">ID: {judge.id}</p>
                    </div>
                  </div>
                  <div className="mb-3">
                    <div className="flex flex-wrap gap-1">
                      {judge.expertise.slice(0, 3).map((skill) => (
                        <Badge key={skill} variant="secondary" className="text-xs">
                          {skill}
                        </Badge>
                      ))}
                      {judge.expertise.length > 3 && (
                        <Badge variant="secondary" className="text-xs">
                          +{judge.expertise.length - 3}
                        </Badge>
                      )}
                    </div>
                  </div>
                  <div className="flex justify-end space-x-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        setSelectedJudge(judge)
                        setShowJudgeDetail(true)
                      }}
                    >
                      <Eye className="w-3 h-3 mr-1" />
                      查看
                    </Button>
                    <Button variant="outline" size="sm" onClick={() => handleEditJudge(judge)}>
                      <Edit className="w-3 h-3 mr-1" />
                      編輯
                    </Button>
                    {judge.is_active !== false ? (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleDisableJudge(judge)}
                        className="text-orange-600 border-orange-300 hover:bg-orange-50"
                      >
                        <UserX className="w-3 h-3 mr-1" />
                        停用
                      </Button>
                    ) : (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleEnableJudge(judge)}
                        className="text-green-600 border-green-300 hover:bg-green-50"
                      >
                        <UserCheck className="w-3 h-3 mr-1" />
                        啟用
                      </Button>
                    )}
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleDeleteJudge(judge)}
                      className="text-red-600 border-red-300 hover:bg-red-50"
                    >
                      <Trash2 className="w-3 h-3 mr-1" />
                      刪除
                    </Button>
                  </div>
                </CardContent>
              </Card>
              ))
            })()}
          </div>

          {/* 分頁組件 */}
          {(() => {
            // 使用與主列表相同的數據源
            const judgesToShow = dbJudges.length > 0 ? dbJudges : judges;
            
            const filtered = judgesToShow.filter(judge => {
              const matchesSearch = judgeSearchTerm === "" || 
                judge.name.toLowerCase().includes(judgeSearchTerm.toLowerCase()) ||
                judge.title.toLowerCase().includes(judgeSearchTerm.toLowerCase())

              const matchesDepartment = judgeDepartmentFilter === "all" ||
                (judgeDepartmentFilter === "其他" 
                  ? !["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "研發部", "產品部", "技術部"].includes(judge.department)
                  : judge.department === judgeDepartmentFilter)

              const matchesExpertise = judgeExpertiseFilter === "all" ||
                judge.expertise.some(exp => exp.includes(judgeExpertiseFilter))

              const matchesStatus = judgeStatusFilter === "all" ||
                (judgeStatusFilter === "active" && judge.is_active === true) ||
                (judgeStatusFilter === "inactive" && judge.is_active === false)

              return matchesSearch && matchesDepartment && matchesExpertise && matchesStatus
            })

            const totalPages = Math.ceil(filtered.length / judgesPerPage)

            // 如果當前頁面超出總頁數，重置到第一頁
            if (judgeCurrentPage > totalPages && totalPages > 0) {
              setJudgeCurrentPage(1)
            }

            if (totalPages <= 1) return null

            return (
              <div className="flex flex-col items-center space-y-4 mt-6">
                <div className="text-sm text-gray-600">
                  第 {judgeCurrentPage} 頁，共 {totalPages} 頁
                </div>
                <div className="flex items-center space-x-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setJudgeCurrentPage(prev => Math.max(1, prev - 1))}
                    disabled={judgeCurrentPage === 1}
                    className="flex items-center space-x-1"
                  >
                    <span>‹</span>
                    <span>上一頁</span>
                  </Button>
                  
                  <div className="flex items-center space-x-1">
                    {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                      let page;
                      if (totalPages <= 5) {
                        page = i + 1;
                      } else if (judgeCurrentPage <= 3) {
                        page = i + 1;
                      } else if (judgeCurrentPage >= totalPages - 2) {
                        page = totalPages - 4 + i;
                      } else {
                        page = judgeCurrentPage - 2 + i;
                      }
                      
                      return (
                        <Button
                          key={page}
                          variant={judgeCurrentPage === page ? "default" : "outline"}
                          size="sm"
                          onClick={() => setJudgeCurrentPage(page)}
                          className="w-10 h-10 p-0"
                        >
                          {page}
                        </Button>
                      )
                    })}
                  </div>
                  
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setJudgeCurrentPage(prev => Math.min(totalPages, prev + 1))}
                    disabled={judgeCurrentPage === totalPages}
                    className="flex items-center space-x-1"
                  >
                    <span>下一頁</span>
                    <span>›</span>
                  </Button>
                </div>
              </div>
            )
          })()}
        </TabsContent>

        <TabsContent value="scoring" className="space-y-4">
          <ScoringManagement />
        </TabsContent>

        <TabsContent value="awards" className="space-y-4">
          <div className="flex justify-between items-center">
            <h3 className="text-lg font-semibold">獎項管理</h3>
            <Button onClick={() => setShowCreateAward(true)} variant="outline">
              <Award className="w-4 h-4 mr-2" />
              創建獎項
            </Button>
          </div>

          {/* 搜索和筛选控件 */}
          {awards.length > 0 && (
            <Card>
              <CardContent className="p-4">
                <div className="space-y-4">
                  {/* 搜索栏 */}
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <Search className="h-4 w-4 text-gray-400" />
                    </div>
                    <Input
                      type="text"
                      placeholder="搜尋應用名稱、創作者或獎項名稱..."
                      value={awardSearchQuery}
                      onChange={(e) => {
                        setAwardSearchQuery(e.target.value)
                        resetAwardPagination()
                      }}
                      className="pl-10 pr-10 w-full md:w-96"
                    />
                    {awardSearchQuery && (
                      <button
                        onClick={() => setAwardSearchQuery("")}
                        className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
                      >
                        <X className="h-4 w-4" />
                      </button>
                    )}
                  </div>

                  {/* 筛选控件 */}
                  <div className="flex flex-wrap gap-4 items-center">
                    <div className="flex items-center space-x-2">
                      <span className="text-sm font-medium text-gray-700">年份：</span>
                      <Select value={awardYearFilter} onValueChange={(value) => {
                        setAwardYearFilter(value)
                        resetAwardPagination()
                      }}>
                        <SelectTrigger className="w-24">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">全部</SelectItem>
                          <SelectItem value="2024">2024年</SelectItem>
                          <SelectItem value="2023">2023年</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="flex items-center space-x-2">
                      <span className="text-sm font-medium text-gray-700">月份：</span>
                      <Select value={awardMonthFilter} onValueChange={(value) => {
                        setAwardMonthFilter(value)
                        resetAwardPagination()
                      }}>
                        <SelectTrigger className="w-24">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">全部</SelectItem>
                          <SelectItem value="1">1月</SelectItem>
                          <SelectItem value="2">2月</SelectItem>
                          <SelectItem value="3">3月</SelectItem>
                          <SelectItem value="4">4月</SelectItem>
                          <SelectItem value="5">5月</SelectItem>
                          <SelectItem value="6">6月</SelectItem>
                          <SelectItem value="7">7月</SelectItem>
                          <SelectItem value="8">8月</SelectItem>
                          <SelectItem value="9">9月</SelectItem>
                          <SelectItem value="10">10月</SelectItem>
                          <SelectItem value="11">11月</SelectItem>
                          <SelectItem value="12">12月</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="flex items-center space-x-2">
                      <span className="text-sm font-medium text-gray-700">獎項類型：</span>
                      <Select value={awardTypeFilter} onValueChange={(value) => {
                        setAwardTypeFilter(value)
                        resetAwardPagination()
                      }}>
                        <SelectTrigger className="w-32">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">全部獎項</SelectItem>
                          <SelectItem value="ranking">前三名</SelectItem>
                          <SelectItem value="popular">人氣獎</SelectItem>
                          <SelectItem value="gold">金牌</SelectItem>
                          <SelectItem value="silver">銀牌</SelectItem>
                          <SelectItem value="bronze">銅牌</SelectItem>
                          <SelectItem value="innovation">創新獎</SelectItem>
                          <SelectItem value="technical">技術獎</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="flex items-center space-x-2">
                      <span className="text-sm font-medium text-gray-700">競賽類型：</span>
                      <Select value={awardCompetitionTypeFilter} onValueChange={(value) => {
                        setAwardCompetitionTypeFilter(value)
                        resetAwardPagination()
                      }}>
                        <SelectTrigger className="w-32">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">全部類型</SelectItem>
                          <SelectItem value="individual">個人賽</SelectItem>
                          <SelectItem value="team">團隊賽</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    {/* 清除筛选按钮 */}
                    {(awardSearchQuery || awardYearFilter !== "all" || awardMonthFilter !== "all" || awardTypeFilter !== "all" || awardCompetitionTypeFilter !== "all") && (
                      <div className="flex items-center">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            setAwardSearchQuery("")
                            setAwardYearFilter("all")
                            setAwardMonthFilter("all")
                            setAwardTypeFilter("all")
                            setAwardCompetitionTypeFilter("all")
                          }}
                          className="text-gray-600 hover:text-gray-800"
                        >
                          <X className="w-4 h-4 mr-1" />
                          清除所有篩選
                        </Button>
                      </div>
                    )}
                  </div>

                  {/* 统计信息 */}
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                    <div className="text-center p-3 bg-blue-50 rounded-lg">
                      <div className="text-lg font-bold text-blue-600">{getFilteredAwards().length}</div>
                      <div className="text-xs text-blue-600">篩選結果</div>
                    </div>
                    <div className="text-center p-3 bg-yellow-50 rounded-lg">
                      <div className="text-lg font-bold text-yellow-600">
                        {getFilteredAwards().filter((a) => a.rank > 0 && a.rank <= 3).length}
                      </div>
                      <div className="text-xs text-yellow-600">前三名獎項</div>
                    </div>
                    <div className="text-center p-3 bg-red-50 rounded-lg">
                      <div className="text-lg font-bold text-red-600">
                        {getFilteredAwards().filter((a) => a.awardType === "popular").length}
                      </div>
                      <div className="text-xs text-red-600">人氣獎項</div>
                    </div>
                    <div className="text-center p-3 bg-green-50 rounded-lg">
                      <div className="text-lg font-bold text-green-600">
                        {new Set(getFilteredAwards().map((a) => `${a.year}-${a.month}`)).size}
                      </div>
                      <div className="text-xs text-green-600">競賽場次</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {awards.length === 0 ? (
            <div className="text-center py-12 text-gray-500">
              <Award className="w-16 h-16 mx-auto mb-4 text-gray-300" />
              <h3 className="text-xl font-semibold text-gray-600 mb-2">尚未頒發任何獎項</h3>
              <p className="text-gray-500 mb-4">為競賽參賽者創建獎項，展示他們的成就</p>
              <Button onClick={() => setShowCreateAward(true)} className="bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700">
                <Award className="w-4 h-4 mr-2" />
                創建首個獎項
              </Button>
            </div>
          ) : (
            <>
              {(() => {
                const filteredAwards = getFilteredAwards()
                
                if (filteredAwards.length === 0) {
                  return (
                    <Card>
                      <CardContent className="text-center py-12">
                        <div className="space-y-4">
                          {awardSearchQuery ? (
                            <Search className="w-16 h-16 text-gray-400 mx-auto" />
                          ) : (
                            <Award className="w-16 h-16 text-gray-400 mx-auto" />
                          )}
                          <div>
                            <h3 className="text-xl font-semibold text-gray-600 mb-2">
                              {awardSearchQuery ? (
                                <>找不到包含「{awardSearchQuery}」的獎項</>
                              ) : (
                                <>暫無符合篩選條件的獎項</>
                              )}
                            </h3>
                            <p className="text-gray-500">
                              {awardSearchQuery
                                ? "嘗試使用其他關鍵字或調整篩選條件"
                                : "請調整篩選條件查看其他獎項"}
                            </p>
                          </div>
                          <div className="flex justify-center gap-2">
                            <Button
                              variant="outline"
                              className="bg-transparent"
                              onClick={() => {
                                setAwardSearchQuery("")
                                setAwardYearFilter("all")
                                setAwardMonthFilter("all")
                                setAwardTypeFilter("all")
                                setAwardCompetitionTypeFilter("all")
                              }}
                            >
                              <X className="w-4 h-4 mr-1" />
                              清除所有篩選
                            </Button>
                            {awardSearchQuery && (
                              <Button
                                variant="outline"
                                className="bg-transparent"
                                onClick={() => setAwardSearchQuery("")}
                              >
                                清除搜尋
                              </Button>
                            )}
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  )
                }

                const startIndex = (awardCurrentPage - 1) * awardsPerPage
                const endIndex = startIndex + awardsPerPage
                const paginatedAwards = filteredAwards.slice(startIndex, endIndex)

                return (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 min-h-[400px]" style={{ gridAutoRows: 'max-content' }}>
                    {paginatedAwards.map((award) => (
                <Card key={award.id} className="relative overflow-hidden hover:shadow-lg transition-shadow">
                  <div className="absolute top-4 right-4 text-2xl">{award.icon}</div>
                  <CardContent className="p-4">
                    <div className="space-y-3">
                      {/* 獎項基本資訊 */}
                      <div className="space-y-2">
                        <Badge
                          variant="secondary"
                          className={`w-fit ${
                            award.awardType === "gold"
                              ? "bg-yellow-100 text-yellow-800"
                              : award.awardType === "silver"
                                ? "bg-gray-100 text-gray-800"
                                : award.awardType === "bronze"
                                  ? "bg-orange-100 text-orange-800"
                                  : award.awardType === "popular"
                                    ? "bg-purple-100 text-purple-800"
                                    : award.awardType === "innovation"
                                      ? "bg-green-100 text-green-800"
                                      : award.awardType === "technical"
                                        ? "bg-indigo-100 text-indigo-800"
                                        : "bg-blue-100 text-blue-800"
                          }`}
                        >
                          {award.awardName}
                        </Badge>
                        <h4 className="font-semibold text-lg pr-8">{award.appName || "團隊作品"}</h4>
                        <p className="text-sm text-gray-600">by {award.creator}</p>
                        
                        {/* 評分顯示 */}
                        {award.score > 0 && (
                          <div className="flex items-center space-x-2">
                            <div className="flex items-center space-x-1">
                              <Star className="w-4 h-4 text-yellow-500 fill-current" />
                              <span className="font-semibold text-orange-600">{award.score.toFixed(1)}</span>
                            </div>
                            <span className="text-xs text-gray-500">評審評分</span>
                          </div>
                        )}

                        {/* 獎項排名 */}
                        {award.rank > 0 && (
                          <Badge variant="outline" className="w-fit">
                            第 {award.rank} 名
                          </Badge>
                        )}
                      </div>

                      {/* 競賽資訊 */}
                      <div className="flex items-center justify-between text-sm">
                        <span className="text-gray-500">
                          {award.year}年{award.month}月
                        </span>
                        <Badge variant="outline" className="text-xs">
                          {getCompetitionTypeText(award.competitionType)}
                        </Badge>
                      </div>

                      {/* 應用連結摘要 */}
                      {(award as any).applicationLinks && (
                        <div className="space-y-2">
                          <p className="text-xs font-medium text-gray-700">應用連結</p>
                          <div className="flex items-center space-x-2">
                            {(award as any).applicationLinks.production && (
                              <div className="w-2 h-2 bg-green-500 rounded-full" title="生產環境"></div>
                            )}
                            {(award as any).applicationLinks.demo && (
                              <div className="w-2 h-2 bg-blue-500 rounded-full" title="演示版本"></div>
                            )}
                            {(award as any).applicationLinks.github && (
                              <div className="w-2 h-2 bg-gray-800 rounded-full" title="源碼倉庫"></div>
                            )}
                          </div>
                        </div>
                      )}

                      {/* 相關文檔摘要 */}
                      {(award as any).documents && (award as any).documents.length > 0 && (
                        <div className="space-y-2">
                          <p className="text-xs font-medium text-gray-700">相關文檔</p>
                          <div className="flex items-center space-x-1">
                            <span className="text-xs text-gray-600">
                              {(award as any).documents.length} 個文檔
                            </span>
                            <Badge variant="outline" className="text-xs">
                              {(award as any).documents.map((doc: any) => doc.type).join(", ")}
                            </Badge>
                          </div>
                        </div>
                      )}

                      {/* 得獎照片摘要 */}
                      {(award as any).photos && (award as any).photos.length > 0 && (
                        <div className="space-y-2">
                          <p className="text-xs font-medium text-gray-700">得獎照片</p>
                          <div className="flex items-center space-x-2">
                            <span className="text-xs text-gray-600">
                              {(award as any).photos.length} 張照片
                            </span>
                            <div className="flex items-center space-x-1">
                              {(award as any).photos.slice(0, 3).map((photo: any, index: number) => (
                                <div key={index} className="w-4 h-4 bg-gray-200 rounded border"></div>
                              ))}
                              {(award as any).photos.length > 3 && (
                                <span className="text-xs text-gray-500">+{(award as any).photos.length - 3}</span>
                              )}
                            </div>
                          </div>
                        </div>
                      )}

                      {/* 獎項描述 */}
                      {(award as any).description && (
                        <p className="text-xs text-gray-600 line-clamp-2">
                          {(award as any).description}
                        </p>
                      )}

                      {/* 操作按鈕 */}
                      <div className="flex items-center justify-between pt-2 border-t">
                        <div className="flex items-center space-x-2">
                          <Badge variant="outline" className="text-xs">
                            {(award as any).category || "innovation"}
                          </Badge>
                        </div>
                        <div className="flex items-center space-x-1">
                                                  <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleViewAward(award)}
                        >
                          <Eye className="w-3 h-3 mr-1" />
                          查看
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleEditAward(award)}
                        >
                          <Edit className="w-3 h-3 mr-1" />
                          編輯
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleDeleteAward(award)}
                          className="text-red-600 border-red-300 hover:bg-red-50"
                        >
                          <Trash2 className="w-3 h-3" />
                        </Button>
                        </div>
                                              </div>
                      </div>
                    </CardContent>
                  </Card>
                  ))}
                  </div>
                )
              })()}

              {/* 分頁組件 */}
              {(() => {
                const filteredAwards = getFilteredAwards()
                const totalPages = Math.ceil(filteredAwards.length / awardsPerPage)

                // 如果當前頁面超出總頁數，重置到第一頁
                if (awardCurrentPage > totalPages && totalPages > 0) {
                  setAwardCurrentPage(1)
                }

                if (totalPages <= 1) return null

                return (
                  <div className="flex flex-col items-center space-y-4 mt-6">
                    <div className="text-sm text-gray-600">
                      第 {awardCurrentPage} 頁，共 {totalPages} 頁 • 篩選結果 {filteredAwards.length} 個獎項
                    </div>
                    <div className="flex items-center space-x-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => setAwardCurrentPage(prev => Math.max(1, prev - 1))}
                        disabled={awardCurrentPage === 1}
                        className="flex items-center space-x-1"
                      >
                        <span>‹</span>
                        <span>上一頁</span>
                      </Button>
                      
                      <div className="flex items-center space-x-1">
                        {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                          let page;
                          if (totalPages <= 5) {
                            page = i + 1;
                          } else if (awardCurrentPage <= 3) {
                            page = i + 1;
                          } else if (awardCurrentPage >= totalPages - 2) {
                            page = totalPages - 4 + i;
                          } else {
                            page = awardCurrentPage - 2 + i;
                          }
                          
                          return (
                            <Button
                              key={page}
                              variant={awardCurrentPage === page ? "default" : "outline"}
                              size="sm"
                              onClick={() => setAwardCurrentPage(page)}
                              className="w-10 h-10 p-0"
                            >
                              {page}
                            </Button>
                          )
                        })}
                      </div>
                      
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => setAwardCurrentPage(prev => Math.min(totalPages, prev + 1))}
                        disabled={awardCurrentPage === totalPages}
                        className="flex items-center space-x-1"
                      >
                        <span>下一頁</span>
                        <span>›</span>
                      </Button>
                    </div>
                  </div>
                )
              })()}
            </>
          )}
        </TabsContent>
      </Tabs>

      {/* Create Competition Dialog - Enhanced for Mixed Competitions */}
      <Dialog
        open={showCreateCompetition}
        onOpenChange={(open) => {
          setShowCreateCompetition(open)
          if (!open) {
            setCreateError("")
            setSelectedCompetitionForAction(null) // 清除編輯狀態
            resetForm() // 重置表單
          }
        }}
      >
        <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{selectedCompetitionForAction ? '編輯競賽' : '創建新競賽'}</DialogTitle>
            <DialogDescription>{selectedCompetitionForAction ? '修改競賽的基本資訊、類型和評比規則' : '設定競賽的基本資訊、類型和評比規則'}</DialogDescription>
          </DialogHeader>

          <div className="space-y-6">
            {createError && (
              <Alert variant="destructive">
                <AlertTriangle className="h-4 w-4" />
                <AlertDescription>{createError}</AlertDescription>
              </Alert>
            )}

            {/* Basic Information */}
            <div className="space-y-4">
              <h3 className="text-lg font-semibold flex items-center">
                <Settings className="w-5 h-5 mr-2" />
                基本資訊
              </h3>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="name">競賽名稱 *</Label>
                  <Input
                    id="name"
                    value={newCompetition.name}
                    onChange={(e) => setNewCompetition({ ...newCompetition, name: e.target.value })}
                    placeholder="輸入競賽名稱"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="type">競賽類型 *</Label>
                  <Select
                    value={newCompetition.type}
                    onValueChange={(value: any) =>
                      setNewCompetition({
                        ...newCompetition,
                        type: value,
                        participatingApps: [],
                        participatingTeams: [],
                      })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="individual">
                        <div className="flex items-center space-x-2">
                          <User className="w-4 h-4" />
                          <span>個人賽</span>
                        </div>
                      </SelectItem>
                      <SelectItem value="team">
                        <div className="flex items-center space-x-2">
                          <Users className="w-4 h-4" />
                          <span>團體賽</span>
                        </div>
                      </SelectItem>
                      <SelectItem value="mixed">
                        <div className="flex items-center space-x-2">
                          <Trophy className="w-4 h-4" />
                          <span>混合賽</span>
                        </div>
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="startDate">開始日期 *</Label>
                  <Input
                    id="startDate"
                    type="date"
                    value={newCompetition.startDate}
                    onChange={(e) => setNewCompetition({ ...newCompetition, startDate: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="endDate">結束日期 *</Label>
                  <Input
                    id="endDate"
                    type="date"
                    value={newCompetition.endDate}
                    onChange={(e) => setNewCompetition({ ...newCompetition, endDate: e.target.value })}
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="description">競賽描述</Label>
                <Textarea
                  id="description"
                  value={newCompetition.description}
                  onChange={(e) => setNewCompetition({ ...newCompetition, description: e.target.value })}
                  placeholder="描述競賽的目標和規則"
                  rows={3}
                />
              </div>
            </div>

            <Separator />

            {/* Mixed Competition Configuration */}
            {newCompetition.type === "mixed" ? (
              <div className="space-y-6">
                <h3 className="text-lg font-semibold flex items-center">
                  <Trophy className="w-5 h-5 mr-2" />
                  混合賽配置
                </h3>

                <Tabs defaultValue="individual" className="w-full">
                  <TabsList className="grid w-full grid-cols-2">
                    <TabsTrigger value="individual" className="flex items-center space-x-2">
                      <User className="w-4 h-4" />
                      <span>個人賽設定</span>
                    </TabsTrigger>
                    <TabsTrigger value="team" className="flex items-center space-x-2">
                      <Users className="w-4 h-4" />
                      <span>團體賽設定</span>
                    </TabsTrigger>
                  </TabsList>

                  {/* Individual Competition Configuration */}
                  <TabsContent value="individual" className="space-y-6">
                    <div className="border rounded-lg p-6 bg-blue-50">
                      <h4 className="text-lg font-semibold mb-4 flex items-center">
                        <User className="w-5 h-5 mr-2 text-blue-600" />
                        個人賽配置
                      </h4>

                      {/* Individual Judge Selection */}
                      <div className="space-y-4 mb-6">
                        <h5 className="font-semibold flex items-center">
                          <UserCheck className="w-4 h-4 mr-2" />
                          個人賽評審選擇
                        </h5>
                        <div className="grid grid-cols-2 gap-4">
                          {(dbJudges.length > 0 ? dbJudges : judges).map((judge) => (
                            <div key={judge.id} className="flex items-center space-x-3 p-3 border rounded-lg bg-white">
                              <Checkbox
                                id={`individual-judge-${judge.id}`}
                                checked={newCompetition.individualConfig.judges.includes(judge.id)}
                                onCheckedChange={(checked) => {
                                  if (checked) {
                                    setNewCompetition({
                                      ...newCompetition,
                                      individualConfig: {
                                        ...newCompetition.individualConfig,
                                        judges: [...newCompetition.individualConfig.judges, judge.id],
                                      },
                                    })
                                  } else {
                                    setNewCompetition({
                                      ...newCompetition,
                                      individualConfig: {
                                        ...newCompetition.individualConfig,
                                        judges: newCompetition.individualConfig.judges.filter((id) => id !== judge.id),
                                      },
                                    })
                                  }
                                }}
                              />
                              <Avatar className="w-8 h-8">
                                <AvatarImage src={judge.avatar || "/placeholder.svg"} />
                                <AvatarFallback className="bg-blue-100 text-blue-700 text-sm">
                                  {judge.name[0]}
                                </AvatarFallback>
                              </Avatar>
                              <div className="flex-1">
                                <p className="font-medium text-sm">{judge.name}</p>
                                <p className="text-xs text-gray-600">{judge.title}</p>
                              </div>
                            </div>
                          ))}
                        </div>
                        {newCompetition.individualConfig.judges.length > 0 && (
                          <p className="text-sm text-blue-600">
                            已選擇 {newCompetition.individualConfig.judges.length} 位個人賽評審
                          </p>
                        )}
                      </div>

                      {/* Individual Evaluation Rules */}
                      <div className="space-y-4 mb-6">
                        <div className="flex justify-between items-center">
                          <h5 className="font-semibold flex items-center">
                            <ClipboardList className="w-4 h-4 mr-2" />
                            個人賽評比標準
                          </h5>
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              const newRule: CompetitionRule = {
                                id: `ir${Date.now()}`,
                                name: "",
                                description: "",
                                weight: 0,
                              }
                              setNewCompetition({
                                ...newCompetition,
                                individualConfig: {
                                  ...newCompetition.individualConfig,
                                  rules: [...newCompetition.individualConfig.rules, newRule],
                                },
                              })
                            }}
                          >
                            <Plus className="w-4 h-4 mr-2" />
                            新增評比項目
                          </Button>
                        </div>

                        {newCompetition.individualConfig.rules.length > 0 && (
                          <div className="space-y-3">
                            {newCompetition.individualConfig.rules.map((rule, index) => (
                              <div
                                key={rule.id}
                                className="grid grid-cols-12 gap-3 items-end p-3 border rounded-lg bg-white"
                              >
                                <div className="col-span-4">
                                  <Label className="text-xs">評比項目名稱</Label>
                                  <Input
                                    value={rule.name || ""}
                                    onChange={(e) => {
                                      const updatedRules = [...newCompetition.individualConfig.rules]
                                      updatedRules[index] = { ...rule, name: e.target.value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        individualConfig: {
                                          ...newCompetition.individualConfig,
                                          rules: updatedRules,
                                        },
                                      })
                                    }}
                                    placeholder="例如：創新性"
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-5">
                                  <Label className="text-xs">描述</Label>
                                  <Input
                                    value={rule.description || ""}
                                    onChange={(e) => {
                                      const updatedRules = [...newCompetition.individualConfig.rules]
                                      updatedRules[index] = { ...rule, description: e.target.value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        individualConfig: {
                                          ...newCompetition.individualConfig,
                                          rules: updatedRules,
                                        },
                                      })
                                    }}
                                    placeholder="例如：技術創新程度和獨特性"
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-2">
                                  <Label className="text-xs">權重 (%)</Label>
                                  <Input
                                    type="number"
                                    min="0"
                                    max="100"
                                    value={rule.weight || 0}
                                    onChange={(e) => {
                                      const updatedRules = [...newCompetition.individualConfig.rules]
                                      updatedRules[index] = { ...rule, weight: Number.parseInt(e.target.value) || 0 }
                                      setNewCompetition({
                                        ...newCompetition,
                                        individualConfig: {
                                          ...newCompetition.individualConfig,
                                          rules: updatedRules,
                                        },
                                      })
                                    }}
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-1">
                                  <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    onClick={() => {
                                      const updatedRules = newCompetition.individualConfig.rules.filter(
                                        (_, i) => i !== index,
                                      )
                                      setNewCompetition({
                                        ...newCompetition,
                                        individualConfig: {
                                          ...newCompetition.individualConfig,
                                          rules: updatedRules,
                                        },
                                      })
                                    }}
                                    className="text-red-600 border-red-300 hover:bg-red-50"
                                  >
                                    <Trash2 className="w-4 h-4" />
                                  </Button>
                                </div>
                              </div>
                            ))}

                            <div className="flex items-center justify-between p-3 bg-blue-100 rounded-lg">
                              <span className="text-sm text-blue-700">
                                個人賽總權重：{calculateTotalWeight(newCompetition.individualConfig.rules).toFixed(2)}%
                              </span>
                              {calculateTotalWeight(newCompetition.individualConfig.rules) !== 100 && <span className="text-sm text-orange-600">⚠️ 權重總和應為 100%</span>}
                            </div>
                          </div>
                        )}
                      </div>

                      {/* Individual Award Types */}
                      <div className="space-y-4">
                        <div className="flex justify-between items-center">
                          <h5 className="font-semibold flex items-center">
                            <Award className="w-4 h-4 mr-2" />
                            個人賽獎項設定
                          </h5>
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              const newAwardType: CompetitionAwardType = {
                                id: `iat${Date.now()}`,
                                name: "",
                                description: "",
                                icon: "🏆",
                                color: "text-yellow-600",
                              }
                              setNewCompetition({
                                ...newCompetition,
                                individualConfig: {
                                  ...newCompetition.individualConfig,
                                  awardTypes: [...newCompetition.individualConfig.awardTypes, newAwardType],
                                },
                              })
                            }}
                          >
                            <Plus className="w-4 h-4 mr-2" />
                            新增獎項類型
                          </Button>
                        </div>

                        {newCompetition.individualConfig.awardTypes.length > 0 && (
                          <div className="space-y-3">
                            {newCompetition.individualConfig.awardTypes.map((awardType, index) => (
                              <div
                                key={awardType.id}
                                className="grid grid-cols-12 gap-3 items-end p-3 border rounded-lg bg-white"
                              >
                                <div className="col-span-1">
                                  <Label className="text-xs">圖示</Label>
                                  <Select
                                    value={awardType.icon || "🏆"}
                                    onValueChange={(value) => {
                                      const updatedAwardTypes = [...newCompetition.individualConfig.awardTypes]
                                      updatedAwardTypes[index] = { ...awardType, icon: value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        individualConfig: {
                                          ...newCompetition.individualConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                  >
                                    <SelectTrigger className="text-sm">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="🏆">🏆</SelectItem>
                                      <SelectItem value="🥇">🥇</SelectItem>
                                      <SelectItem value="🥈">🥈</SelectItem>
                                      <SelectItem value="🥉">🥉</SelectItem>
                                      <SelectItem value="⭐">⭐</SelectItem>
                                      <SelectItem value="💡">💡</SelectItem>
                                      <SelectItem value="⚙️">⚙️</SelectItem>
                                      <SelectItem value="🎯">🎯</SelectItem>
                                      <SelectItem value="❤️">❤️</SelectItem>
                                      <SelectItem value="🧠">🧠</SelectItem>
                                      <SelectItem value="🚀">🚀</SelectItem>
                                    </SelectContent>
                                  </Select>
                                </div>
                                <div className="col-span-3">
                                  <Label className="text-xs">獎項名稱</Label>
                                  <Input
                                    value={awardType.name || ""}
                                    onChange={(e) => {
                                      const updatedAwardTypes = [...newCompetition.individualConfig.awardTypes]
                                      updatedAwardTypes[index] = { ...awardType, name: e.target.value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        individualConfig: {
                                          ...newCompetition.individualConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                    placeholder="例如：最佳創新獎"
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-5">
                                  <Label className="text-xs">獎項描述</Label>
                                  <Input
                                    value={awardType.description || ""}
                                    onChange={(e) => {
                                      const updatedAwardTypes = [...newCompetition.individualConfig.awardTypes]
                                      updatedAwardTypes[index] = { ...awardType, description: e.target.value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        individualConfig: {
                                          ...newCompetition.individualConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                    placeholder="例如：最具創新性的應用"
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-2">
                                  <Label className="text-xs">顏色主題</Label>
                                  <Select
                                    value={awardType.color || "text-yellow-600"}
                                    onValueChange={(value) => {
                                      const updatedAwardTypes = [...newCompetition.individualConfig.awardTypes]
                                      updatedAwardTypes[index] = { ...awardType, color: value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        individualConfig: {
                                          ...newCompetition.individualConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                  >
                                    <SelectTrigger className="text-sm">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="text-yellow-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-yellow-600 rounded-full"></div>
                                          <span>金色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-blue-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-blue-600 rounded-full"></div>
                                          <span>藍色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-green-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-green-600 rounded-full"></div>
                                          <span>綠色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-red-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-red-600 rounded-full"></div>
                                          <span>紅色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-purple-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-purple-600 rounded-full"></div>
                                          <span>紫色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-orange-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-orange-600 rounded-full"></div>
                                          <span>橙色</span>
                                        </div>
                                      </SelectItem>
                                    </SelectContent>
                                  </Select>
                                </div>
                                <div className="col-span-1">
                                  <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    onClick={() => {
                                      const updatedAwardTypes = newCompetition.individualConfig.awardTypes.filter(
                                        (_, i) => i !== index,
                                      )
                                      setNewCompetition({
                                        ...newCompetition,
                                        individualConfig: {
                                          ...newCompetition.individualConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                    className="text-red-600 border-red-300 hover:bg-red-50"
                                  >
                                    <Trash2 className="w-4 h-4" />
                                  </Button>
                                </div>
                              </div>
                            ))}

                            <div className="flex items-center justify-between p-3 bg-blue-100 rounded-lg">
                              <span className="text-sm text-blue-700">
                                已設定 {newCompetition.individualConfig.awardTypes.length} 種個人賽獎項類型
                              </span>
                              <div className="flex space-x-1">
                                {newCompetition.individualConfig.awardTypes.slice(0, 5).map((awardType, index) => (
                                  <span key={index} className="text-lg">
                                    {awardType.icon}
                                  </span>
                                ))}
                                {newCompetition.individualConfig.awardTypes.length > 5 && (
                                  <span className="text-sm text-gray-500">
                                    +{newCompetition.individualConfig.awardTypes.length - 5}
                                  </span>
                                )}
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  </TabsContent>

                  {/* Team Competition Configuration */}
                  <TabsContent value="team" className="space-y-6">
                    <div className="border rounded-lg p-6 bg-green-50">
                      <h4 className="text-lg font-semibold mb-4 flex items-center">
                        <Users className="w-5 h-5 mr-2 text-green-600" />
                        團體賽配置
                      </h4>

                      {/* Team Judge Selection */}
                      <div className="space-y-4 mb-6">
                        <h5 className="font-semibold flex items-center">
                          <UserCheck className="w-4 h-4 mr-2" />
                          團體賽評審選擇
                        </h5>
                        <div className="grid grid-cols-2 gap-4">
                          {(dbJudges.length > 0 ? dbJudges : judges).map((judge) => (
                            <div key={judge.id} className="flex items-center space-x-3 p-3 border rounded-lg bg-white">
                              <Checkbox
                                id={`team-judge-${judge.id}`}
                                checked={newCompetition.teamConfig.judges.includes(judge.id)}
                                onCheckedChange={(checked) => {
                                  if (checked) {
                                    setNewCompetition({
                                      ...newCompetition,
                                      teamConfig: {
                                        ...newCompetition.teamConfig,
                                        judges: [...newCompetition.teamConfig.judges, judge.id],
                                      },
                                    })
                                  } else {
                                    setNewCompetition({
                                      ...newCompetition,
                                      teamConfig: {
                                        ...newCompetition.teamConfig,
                                        judges: newCompetition.teamConfig.judges.filter((id) => id !== judge.id),
                                      },
                                    })
                                  }
                                }}
                              />
                              <Avatar className="w-8 h-8">
                                <AvatarImage src={judge.avatar || "/placeholder.svg"} />
                                <AvatarFallback className="bg-green-100 text-green-700 text-sm">
                                  {judge.name[0]}
                                </AvatarFallback>
                              </Avatar>
                              <div className="flex-1">
                                <p className="font-medium text-sm">{judge.name}</p>
                                <p className="text-xs text-gray-600">{judge.title}</p>
                              </div>
                            </div>
                          ))}
                        </div>
                        {newCompetition.teamConfig.judges.length > 0 && (
                          <p className="text-sm text-green-600">
                            已選擇 {newCompetition.teamConfig.judges.length} 位團體賽評審
                          </p>
                        )}
                      </div>

                      {/* Team Evaluation Rules */}
                      <div className="space-y-4 mb-6">
                        <div className="flex justify-between items-center">
                          <h5 className="font-semibold flex items-center">
                            <ClipboardList className="w-4 h-4 mr-2" />
                            團體賽評比標準
                          </h5>
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              const newRule: CompetitionRule = {
                                id: `tr${Date.now()}`,
                                name: "",
                                description: "",
                                weight: 0,
                              }
                              setNewCompetition({
                                ...newCompetition,
                                teamConfig: {
                                  ...newCompetition.teamConfig,
                                  rules: [...newCompetition.teamConfig.rules, newRule],
                                },
                              })
                            }}
                          >
                            <Plus className="w-4 h-4 mr-2" />
                            新增評比項目
                          </Button>
                        </div>

                        {newCompetition.teamConfig.rules.length > 0 && (
                          <div className="space-y-3">
                            {newCompetition.teamConfig.rules.map((rule, index) => (
                              <div
                                key={rule.id}
                                className="grid grid-cols-12 gap-3 items-end p-3 border rounded-lg bg-white"
                              >
                                <div className="col-span-4">
                                  <Label className="text-xs">評比項目名稱</Label>
                                  <Input
                                    value={rule.name || ""}
                                    onChange={(e) => {
                                      const updatedRules = [...newCompetition.teamConfig.rules]
                                      updatedRules[index] = { ...rule, name: e.target.value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        teamConfig: {
                                          ...newCompetition.teamConfig,
                                          rules: updatedRules,
                                        },
                                      })
                                    }}
                                    placeholder="例如：團隊合作"
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-5">
                                  <Label className="text-xs">描述</Label>
                                  <Input
                                    value={rule.description || ""}
                                    onChange={(e) => {
                                      const updatedRules = [...newCompetition.teamConfig.rules]
                                      updatedRules[index] = { ...rule, description: e.target.value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        teamConfig: {
                                          ...newCompetition.teamConfig,
                                          rules: updatedRules,
                                        },
                                      })
                                    }}
                                    placeholder="例如：團隊協作能力和分工效率"
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-2">
                                  <Label className="text-xs">權重 (%)</Label>
                                  <Input
                                    type="number"
                                    min="0"
                                    max="100"
                                    value={rule.weight || 0}
                                    onChange={(e) => {
                                      const updatedRules = [...newCompetition.teamConfig.rules]
                                      updatedRules[index] = { ...rule, weight: Number.parseInt(e.target.value) || 0 }
                                      setNewCompetition({
                                        ...newCompetition,
                                        teamConfig: {
                                          ...newCompetition.teamConfig,
                                          rules: updatedRules,
                                        },
                                      })
                                    }}
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-1">
                                  <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    onClick={() => {
                                      const updatedRules = newCompetition.teamConfig.rules.filter((_, i) => i !== index)
                                      setNewCompetition({
                                        ...newCompetition,
                                        teamConfig: {
                                          ...newCompetition.teamConfig,
                                          rules: updatedRules,
                                        },
                                      })
                                    }}
                                    className="text-red-600 border-red-300 hover:bg-red-50"
                                  >
                                    <Trash2 className="w-4 h-4" />
                                  </Button>
                                </div>
                              </div>
                            ))}

                            <div className="flex items-center justify-between p-3 bg-green-100 rounded-lg">
                              <span className="text-sm text-green-700">
                                團體賽總權重：{calculateTotalWeight(newCompetition.teamConfig.rules).toFixed(2)}%
                              </span>
                              {calculateTotalWeight(newCompetition.teamConfig.rules) !== 100 && (
                                <span className="text-sm text-orange-600">⚠️ 權重總和應為 100%</span>
                              )}
                            </div>
                          </div>
                        )}
                      </div>

                      {/* Team Award Types */}
                      <div className="space-y-4">
                        <div className="flex justify-between items-center">
                          <h5 className="font-semibold flex items-center">
                            <Award className="w-4 h-4 mr-2" />
                            團體賽獎項設定
                          </h5>
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              const newAwardType: CompetitionAwardType = {
                                id: `tat${Date.now()}`,
                                name: "",
                                description: "",
                                icon: "🏆",
                                color: "text-yellow-600",
                              }
                              setNewCompetition({
                                ...newCompetition,
                                teamConfig: {
                                  ...newCompetition.teamConfig,
                                  awardTypes: [...newCompetition.teamConfig.awardTypes, newAwardType],
                                },
                              })
                            }}
                          >
                            <Plus className="w-4 h-4 mr-2" />
                            新增獎項類型
                          </Button>
                        </div>

                        {newCompetition.teamConfig.awardTypes.length > 0 && (
                          <div className="space-y-3">
                            {newCompetition.teamConfig.awardTypes.map((awardType, index) => (
                              <div
                                key={awardType.id}
                                className="grid grid-cols-12 gap-3 items-end p-3 border rounded-lg bg-white"
                              >
                                <div className="col-span-1">
                                  <Label className="text-xs">圖示</Label>
                                  <Select
                                    value={awardType.icon || "🏆"}
                                    onValueChange={(value) => {
                                      const updatedAwardTypes = [...newCompetition.teamConfig.awardTypes]
                                      updatedAwardTypes[index] = { ...awardType, icon: value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        teamConfig: {
                                          ...newCompetition.teamConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                  >
                                    <SelectTrigger className="text-sm">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="🏆">🏆</SelectItem>
                                      <SelectItem value="🥇">🥇</SelectItem>
                                      <SelectItem value="🥈">🥈</SelectItem>
                                      <SelectItem value="🥉">🥉</SelectItem>
                                      <SelectItem value="⭐">⭐</SelectItem>
                                      <SelectItem value="💡">💡</SelectItem>
                                      <SelectItem value="⚙️">⚙️</SelectItem>
                                      <SelectItem value="🎯">🎯</SelectItem>
                                      <SelectItem value="❤️">❤️</SelectItem>
                                      <SelectItem value="👥">👥</SelectItem>
                                      <SelectItem value="🧠">🧠</SelectItem>
                                      <SelectItem value="🚀">🚀</SelectItem>
                                    </SelectContent>
                                  </Select>
                                </div>
                                <div className="col-span-3">
                                  <Label className="text-xs">獎項名稱</Label>
                                  <Input
                                    value={awardType.name || ""}
                                    onChange={(e) => {
                                      const updatedAwardTypes = [...newCompetition.teamConfig.awardTypes]
                                      updatedAwardTypes[index] = { ...awardType, name: e.target.value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        teamConfig: {
                                          ...newCompetition.teamConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                    placeholder="例如：最佳團隊合作獎"
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-5">
                                  <Label className="text-xs">獎項描述</Label>
                                  <Input
                                    value={awardType.description || ""}
                                    onChange={(e) => {
                                      const updatedAwardTypes = [...newCompetition.teamConfig.awardTypes]
                                      updatedAwardTypes[index] = { ...awardType, description: e.target.value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        teamConfig: {
                                          ...newCompetition.teamConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                    placeholder="例如：團隊協作最佳的團隊"
                                    className="text-sm"
                                  />
                                </div>
                                <div className="col-span-2">
                                  <Label className="text-xs">顏色主題</Label>
                                  <Select
                                    value={awardType.color || "text-yellow-600"}
                                    onValueChange={(value) => {
                                      const updatedAwardTypes = [...newCompetition.teamConfig.awardTypes]
                                      updatedAwardTypes[index] = { ...awardType, color: value }
                                      setNewCompetition({
                                        ...newCompetition,
                                        teamConfig: {
                                          ...newCompetition.teamConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                  >
                                    <SelectTrigger className="text-sm">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="text-yellow-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-yellow-600 rounded-full"></div>
                                          <span>金色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-blue-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-blue-600 rounded-full"></div>
                                          <span>藍色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-green-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-green-600 rounded-full"></div>
                                          <span>綠色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-red-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-red-600 rounded-full"></div>
                                          <span>紅色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-purple-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-purple-600 rounded-full"></div>
                                          <span>紫色</span>
                                        </div>
                                      </SelectItem>
                                      <SelectItem value="text-orange-600">
                                        <div className="flex items-center space-x-2">
                                          <div className="w-3 h-3 bg-orange-600 rounded-full"></div>
                                          <span>橙色</span>
                                        </div>
                                      </SelectItem>
                                    </SelectContent>
                                  </Select>
                                </div>
                                <div className="col-span-1">
                                  <Button
                                    type="button"
                                    variant="outline"
                                    size="sm"
                                    onClick={() => {
                                      const updatedAwardTypes = newCompetition.teamConfig.awardTypes.filter(
                                        (_, i) => i !== index,
                                      )
                                      setNewCompetition({
                                        ...newCompetition,
                                        teamConfig: {
                                          ...newCompetition.teamConfig,
                                          awardTypes: updatedAwardTypes,
                                        },
                                      })
                                    }}
                                    className="text-red-600 border-red-300 hover:bg-red-50"
                                  >
                                    <Trash2 className="w-4 h-4" />
                                  </Button>
                                </div>
                              </div>
                            ))}

                            <div className="flex items-center justify-between p-3 bg-green-100 rounded-lg">
                              <span className="text-sm text-green-700">
                                已設定 {newCompetition.teamConfig.awardTypes.length} 種團體賽獎項類型
                              </span>
                              <div className="flex space-x-1">
                                {newCompetition.teamConfig.awardTypes.slice(0, 5).map((awardType, index) => (
                                  <span key={index} className="text-lg">
                                    {awardType.icon}
                                  </span>
                                ))}
                                {newCompetition.teamConfig.awardTypes.length > 5 && (
                                  <span className="text-sm text-gray-500">
                                    +{newCompetition.teamConfig.awardTypes.length - 5}
                                  </span>
                                )}
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>
              </div>
            ) : (
              // Single Competition Type Configuration
              <>
                {/* Judge Selection */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold flex items-center">
                    <UserCheck className="w-5 h-5 mr-2" />
                    評審選擇 *
                  </h3>
                  <div className="grid grid-cols-2 gap-4">
                    {(dbJudges.length > 0 ? dbJudges : judges).map((judge) => (
                      <div key={judge.id} className="flex items-center space-x-3 p-3 border rounded-lg">
                        <Checkbox
                          id={`judge-${judge.id}`}
                          checked={newCompetition.judges.includes(judge.id)}
                          onCheckedChange={(checked) => {
                            if (checked) {
                              setNewCompetition({
                                ...newCompetition,
                                judges: [...newCompetition.judges, judge.id],
                              })
                            } else {
                              setNewCompetition({
                                ...newCompetition,
                                judges: newCompetition.judges.filter((id) => id !== judge.id),
                              })
                            }
                          }}
                        />
                        <Avatar className="w-8 h-8">
                          <AvatarImage src={judge.avatar || "/placeholder.svg"} />
                          <AvatarFallback className="bg-purple-100 text-purple-700 text-sm">
                            {judge.name[0]}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex-1">
                          <p className="font-medium text-sm">{judge.name}</p>
                          <p className="text-xs text-gray-600">{judge.title}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                  {newCompetition.judges.length > 0 && (
                    <p className="text-sm text-green-600">已選擇 {newCompetition.judges.length} 位評審</p>
                  )}
                </div>

                <Separator />

                {/* Evaluation Rules */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold flex items-center">
                    <ClipboardList className="w-5 h-5 mr-2" />
                    評比標準權重
                  </h3>

                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <p className="text-sm text-gray-600">設定各項評比標準的權重比例</p>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          const newRule: CompetitionRule = {
                            id: `r${Date.now()}`,
                            name: "",
                            description: "",
                            weight: 0,
                          }
                          setNewCompetition({
                            ...newCompetition,
                            rules: [...newCompetition.rules, newRule],
                          })
                        }}
                      >
                        <Plus className="w-4 h-4 mr-2" />
                        新增評比項目
                      </Button>
                    </div>

                    {newCompetition.rules.length > 0 && (
                      <div className="space-y-3">
                        {newCompetition.rules.map((rule, index) => (
                          <div key={rule.id} className="grid grid-cols-12 gap-3 items-end p-3 border rounded-lg">
                            <div className="col-span-4">
                              <Label className="text-xs">評比項目名稱</Label>
                              <Input
                                value={rule.name || ""}
                                onChange={(e) => {
                                  const updatedRules = [...newCompetition.rules]
                                  updatedRules[index] = { ...rule, name: e.target.value }
                                  setNewCompetition({ ...newCompetition, rules: updatedRules })
                                }}
                                placeholder="例如：創新性"
                                className="text-sm"
                              />
                            </div>
                            <div className="col-span-5">
                              <Label className="text-xs">描述</Label>
                              <Input
                                value={rule.description || ""}
                                onChange={(e) => {
                                  const updatedRules = [...newCompetition.rules]
                                  updatedRules[index] = { ...rule, description: e.target.value }
                                  setNewCompetition({ ...newCompetition, rules: updatedRules })
                                }}
                                placeholder="例如：技術創新程度和獨特性"
                                className="text-sm"
                              />
                            </div>
                            <div className="col-span-2">
                              <Label className="text-xs">權重 (%)</Label>
                              <Input
                                type="number"
                                min="0"
                                max="100"
                                value={rule.weight || 0}
                                onChange={(e) => {
                                  const updatedRules = [...newCompetition.rules]
                                  updatedRules[index] = { ...rule, weight: Number.parseInt(e.target.value) || 0 }
                                  setNewCompetition({ ...newCompetition, rules: updatedRules })
                                }}
                                className="text-sm"
                              />
                            </div>
                            <div className="col-span-1">
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                  const updatedRules = newCompetition.rules.filter((_, i) => i !== index)
                                  setNewCompetition({ ...newCompetition, rules: updatedRules })
                                }}
                                className="text-red-600 border-red-300 hover:bg-red-50"
                              >
                                <Trash2 className="w-4 h-4" />
                              </Button>
                            </div>
                          </div>
                        ))}

                        <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                          <span className="text-sm text-blue-700">
                            總權重：{calculateTotalWeight(newCompetition.rules).toFixed(2)}%
                          </span>
                          {calculateTotalWeight(newCompetition.rules) !== 100 && (
                            <span className="text-sm text-orange-600">⚠️ 權重總和應為 100%</span>
                          )}
                        </div>
                      </div>
                    )}

                    {newCompetition.rules.length === 0 && (
                      <div className="text-center py-8 text-gray-500">
                        <ClipboardList className="w-12 h-12 mx-auto mb-2 text-gray-400" />
                        <p>尚未設定評比標準</p>
                        <p className="text-sm">點擊上方按鈕新增評比項目</p>
                      </div>
                    )}
                  </div>
                </div>

                <Separator />

                {/* Award Types */}
                <div className="space-y-4">
                  <h3 className="text-lg font-semibold flex items-center">
                    <Award className="w-5 h-5 mr-2" />
                    獎項設定
                  </h3>

                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <p className="text-sm text-gray-600">設定本次競賽可頒發的獎項類型</p>
                      <Button
                        type="button"
                        variant="outline"
                        size="sm"
                        onClick={() => {
                          const newAwardType: CompetitionAwardType = {
                            id: `at${Date.now()}`,
                            name: "",
                            description: "",
                            icon: "🏆",
                            color: "text-yellow-600",
                          }
                          setNewCompetition({
                            ...newCompetition,
                            awardTypes: [...newCompetition.awardTypes, newAwardType],
                          })
                        }}
                      >
                        <Plus className="w-4 h-4 mr-2" />
                        新增獎項類型
                      </Button>
                    </div>

                    {newCompetition.awardTypes.length > 0 && (
                      <div className="space-y-3">
                        {newCompetition.awardTypes.map((awardType, index) => (
                          <div key={awardType.id} className="grid grid-cols-12 gap-3 items-end p-3 border rounded-lg">
                            <div className="col-span-1">
                              <Label className="text-xs">圖示</Label>
                              <Select
                                value={awardType.icon || "🏆"}
                                onValueChange={(value) => {
                                  const updatedAwardTypes = [...newCompetition.awardTypes]
                                  updatedAwardTypes[index] = { ...awardType, icon: value }
                                  setNewCompetition({ ...newCompetition, awardTypes: updatedAwardTypes })
                                }}
                              >
                                <SelectTrigger className="text-sm">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="🏆">🏆</SelectItem>
                                  <SelectItem value="🥇">🥇</SelectItem>
                                  <SelectItem value="🥈">🥈</SelectItem>
                                  <SelectItem value="🥉">🥉</SelectItem>
                                  <SelectItem value="⭐">⭐</SelectItem>
                                  <SelectItem value="💡">💡</SelectItem>
                                  <SelectItem value="⚙️">⚙️</SelectItem>
                                  <SelectItem value="🎯">🎯</SelectItem>
                                  <SelectItem value="❤️">❤️</SelectItem>
                                  <SelectItem value="👥">👥</SelectItem>
                                  <SelectItem value="🧠">🧠</SelectItem>
                                  <SelectItem value="🚀">🚀</SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div className="col-span-3">
                              <Label className="text-xs">獎項名稱</Label>
                              <Input
                                value={awardType.name || ""}
                                onChange={(e) => {
                                  const updatedAwardTypes = [...newCompetition.awardTypes]
                                  updatedAwardTypes[index] = { ...awardType, name: e.target.value }
                                  setNewCompetition({ ...newCompetition, awardTypes: updatedAwardTypes })
                                }}
                                placeholder="例如：最佳創新獎"
                                className="text-sm"
                              />
                            </div>
                            <div className="col-span-5">
                              <Label className="text-xs">獎項描述</Label>
                              <Input
                                value={awardType.description || ""}
                                onChange={(e) => {
                                  const updatedAwardTypes = [...newCompetition.awardTypes]
                                  updatedAwardTypes[index] = { ...awardType, description: e.target.value }
                                  setNewCompetition({ ...newCompetition, awardTypes: updatedAwardTypes })
                                }}
                                placeholder="例如：最具創新性的應用"
                                className="text-sm"
                              />
                            </div>
                            <div className="col-span-2">
                              <Label className="text-xs">顏色主題</Label>
                              <Select
                                value={awardType.color || "text-yellow-600"}
                                onValueChange={(value) => {
                                  const updatedAwardTypes = [...newCompetition.awardTypes]
                                  updatedAwardTypes[index] = { ...awardType, color: value }
                                  setNewCompetition({ ...newCompetition, awardTypes: updatedAwardTypes })
                                }}
                              >
                                <SelectTrigger className="text-sm">
                                  <SelectValue />
                                </SelectTrigger>
                                <SelectContent>
                                  <SelectItem value="text-yellow-600">
                                    <div className="flex items-center space-x-2">
                                      <div className="w-3 h-3 bg-yellow-600 rounded-full"></div>
                                      <span>金色</span>
                                    </div>
                                  </SelectItem>
                                  <SelectItem value="text-blue-600">
                                    <div className="flex items-center space-x-2">
                                      <div className="w-3 h-3 bg-blue-600 rounded-full"></div>
                                      <span>藍色</span>
                                    </div>
                                  </SelectItem>
                                  <SelectItem value="text-green-600">
                                    <div className="flex items-center space-x-2">
                                      <div className="w-3 h-3 bg-green-600 rounded-full"></div>
                                      <span>綠色</span>
                                    </div>
                                  </SelectItem>
                                  <SelectItem value="text-red-600">
                                    <div className="flex items-center space-x-2">
                                      <div className="w-3 h-3 bg-red-600 rounded-full"></div>
                                      <span>紅色</span>
                                    </div>
                                  </SelectItem>
                                  <SelectItem value="text-purple-600">
                                    <div className="flex items-center space-x-2">
                                      <div className="w-3 h-3 bg-purple-600 rounded-full"></div>
                                      <span>紫色</span>
                                    </div>
                                  </SelectItem>
                                  <SelectItem value="text-orange-600">
                                    <div className="flex items-center space-x-2">
                                      <div className="w-3 h-3 bg-orange-600 rounded-full"></div>
                                      <span>橙色</span>
                                    </div>
                                  </SelectItem>
                                </SelectContent>
                              </Select>
                            </div>
                            <div className="col-span-1">
                              <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={() => {
                                  const updatedAwardTypes = newCompetition.awardTypes.filter((_, i) => i !== index)
                                  setNewCompetition({ ...newCompetition, awardTypes: updatedAwardTypes })
                                }}
                                className="text-red-600 border-red-300 hover:bg-red-50"
                              >
                                <Trash2 className="w-4 h-4" />
                              </Button>
                            </div>
                          </div>
                        ))}

                        <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                          <span className="text-sm text-green-700">
                            已設定 {newCompetition.awardTypes.length} 種獎項類型
                          </span>
                          <div className="flex space-x-1">
                            {newCompetition.awardTypes.slice(0, 5).map((awardType, index) => (
                              <span key={index} className="text-lg">
                                {awardType.icon}
                              </span>
                            ))}
                            {newCompetition.awardTypes.length > 5 && (
                              <span className="text-sm text-gray-500">+{newCompetition.awardTypes.length - 5}</span>
                            )}
                          </div>
                        </div>
                      </div>
                    )}

                    {newCompetition.awardTypes.length === 0 && (
                      <div className="text-center py-8 text-gray-500">
                        <Award className="w-12 h-12 mx-auto mb-2 text-gray-400" />
                        <p>尚未設定獎項類型</p>
                        <p className="text-sm">點擊上方按鈕新增獎項類型</p>
                      </div>
                    )}
                  </div>
                </div>
              </>
            )}

            <Separator />

            {/* Participant Selection */}
            <div className="space-y-4">
              {newCompetition.type === "mixed" ? (
                // Mixed competition - separate sections
                <>
                  <h3 className="text-lg font-semibold flex items-center">
                    <Trophy className="w-5 h-5 mr-2" />
                    <span>混合賽參賽項目選擇 *</span>
                  </h3>

                  {/* Individual Apps Section */}
                  <div className="space-y-4 border rounded-lg p-4 bg-blue-50">
                    <h4 className="font-semibold flex items-center">
                      <User className="w-4 h-4 mr-2" />
                      個人賽應用選擇
                    </h4>

                    <div className="flex gap-4 mb-4">
                      <div className="flex-1">
                        <Input
                          placeholder="搜尋應用名稱或創作者..."
                          value={individualParticipantSearchTerm}
                          onChange={(e) => setIndividualParticipantSearchTerm(e.target.value)}
                          className="max-w-sm"
                        />
                      </div>
                      <Select value={individualDepartmentFilter} onValueChange={setIndividualDepartmentFilter}>
                        <SelectTrigger className="w-40">
                          <SelectValue placeholder="部門篩選" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">所有部門</SelectItem>
                          <SelectItem value="HQBU">HQBU</SelectItem>
                          <SelectItem value="ITBU">ITBU</SelectItem>
                          <SelectItem value="MBU1">MBU1</SelectItem>
                          <SelectItem value="SBU">SBU</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-64 overflow-y-auto border rounded-lg p-4 bg-white">
                      {getFilteredParticipants("individual").map((participant) => {
                        const isSelected = newCompetition.participatingApps.includes(participant.id)
                        return (
                          <div
                            key={participant.id}
                            className="flex items-start space-x-3 p-4 border rounded-lg hover:bg-gray-50 transition-colors"
                          >
                            <Checkbox
                              id={`individual-${participant.id}`}
                              checked={isSelected}
                              onCheckedChange={(checked) => {
                                if (checked) {
                                  setNewCompetition({
                                    ...newCompetition,
                                    participatingApps: [...newCompetition.participatingApps, participant.id],
                                  })
                                } else {
                                  setNewCompetition({
                                    ...newCompetition,
                                    participatingApps: newCompetition.participatingApps.filter(
                                      (id: string) => id !== participant.id,
                                    ),
                                  })
                                }
                              }}
                            />
                            <div className="flex-1 space-y-2">
                              <div className="flex items-center justify-between">
                                <p className="font-medium text-sm">{participant.name}</p>
                                <Badge variant="outline" className="text-xs">
                                  {participant.department}
                                </Badge>
                              </div>
                              <p className="text-xs text-gray-600 mt-1">創作者：{participant.creator}</p>
                              <p className="text-xs text-gray-500">提交日期：{participant.submissionDate}</p>
                            </div>
                          </div>
                        )
                      })}
                    </div>

                    <div className="flex items-center justify-between p-3 bg-blue-100 rounded-lg">
                      <span className="text-sm text-blue-700">
                        已選擇 {newCompetition.participatingApps.length} 個個人賽應用
                      </span>
                    </div>
                  </div>

                  {/* Team Section */}
                  <div className="space-y-4 border rounded-lg p-4 bg-green-50">
                    <h4 className="font-semibold flex items-center">
                      <Users className="w-4 h-4 mr-2" />
                      團體賽團隊選擇
                    </h4>

                    <div className="flex gap-4 mb-4">
                      <div className="flex-1">
                        <Input
                          placeholder="搜尋團隊名稱或隊長..."
                          value={teamParticipantSearchTerm}
                          onChange={(e) => setTeamParticipantSearchTerm(e.target.value)}
                          className="max-w-sm"
                        />
                      </div>
                      <Select value={teamDepartmentFilter} onValueChange={setTeamDepartmentFilter}>
                        <SelectTrigger className="w-40">
                          <SelectValue placeholder="部門篩選" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">所有部門</SelectItem>
                          <SelectItem value="HQBU">HQBU</SelectItem>
                          <SelectItem value="ITBU">ITBU</SelectItem>
                          <SelectItem value="MBU1">MBU1</SelectItem>
                          <SelectItem value="SBU">SBU</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-64 overflow-y-auto border rounded-lg p-4 bg-white">
                      {getFilteredParticipants("team").map((participant) => {
                        const isSelected = newCompetition.participatingTeams.includes(participant.id)
                        return (
                          <div
                            key={participant.id}
                            className="flex items-start space-x-3 p-4 border rounded-lg hover:bg-gray-50 transition-colors"
                          >
                            <Checkbox
                              id={`team-${participant.id}`}
                              checked={isSelected}
                              onCheckedChange={(checked) => {
                                if (checked) {
                                  setNewCompetition({
                                    ...newCompetition,
                                    participatingTeams: [...newCompetition.participatingTeams, participant.id],
                                  })
                                } else {
                                  setNewCompetition({
                                    ...newCompetition,
                                    participatingTeams: newCompetition.participatingTeams.filter(
                                      (id: string) => id !== participant.id,
                                    ),
                                  })
                                }
                              }}
                            />
                            <div className="flex-1 space-y-2">
                              <div className="flex items-center justify-between">
                                <p className="font-medium text-sm">{participant.name}</p>
                                <Badge variant="outline" className="text-xs">
                                  {participant.department}
                                </Badge>
                              </div>
                              <div className="flex items-center space-x-4 text-xs text-gray-600">
                                <div className="flex items-center space-x-1">
                                  <User className="w-3 h-3" />
                                  <span>隊長：{participant.leader}</span>
                                </div>
                                <div className="flex items-center space-x-1">
                                  <Users className="w-3 h-3" />
                                  <span>{participant.memberCount}人</span>
                                </div>
                              </div>
                              {participant.contactEmail && (
                                <div className="flex items-center space-x-1 text-xs text-gray-600">
                                  <Mail className="w-3 h-3" />
                                  <span>{participant.contactEmail}</span>
                                </div>
                              )}
                              {participant.description && (
                                <p className="text-xs text-gray-500 line-clamp-2">{participant.description}</p>
                              )}
                              <p className="text-xs text-gray-500">提交日期：{participant.submissionDate}</p>
                            </div>
                          </div>
                        )
                      })}
                    </div>

                    <div className="flex items-center justify-between p-3 bg-green-100 rounded-lg">
                      <span className="text-sm text-green-700">
                        已選擇 {newCompetition.participatingTeams.length} 個團體賽團隊
                      </span>
                    </div>
                  </div>

                  {/* Mixed Competition Summary */}
                  <div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg border border-purple-200">
                    <span className="text-sm text-purple-700 font-medium">
                      混合賽總計：{newCompetition.participatingApps.length} 個應用 +{" "}
                      {newCompetition.participatingTeams.length} 個團隊
                    </span>
                  </div>
                </>
              ) : (
                // Single competition type - existing logic
                <>
                  <h3 className="text-lg font-semibold flex items-center">
                    {getCompetitionTypeIcon(newCompetition.type)}
                    <span className="ml-2">
                      {newCompetition.type === "individual" && "參賽應用選擇 *"}
                      {newCompetition.type === "team" && "參賽團隊選擇 *"}
                    </span>
                  </h3>

                  {/* Search and Filter */}
                  <div className="flex gap-4 mb-4">
                    <div className="flex-1">
                      <Input
                        placeholder={`搜尋${newCompetition.type === "team" ? "團隊名稱或隊長" : "應用名稱或創作者"}...`}
                        value={participantSearchTerm}
                        onChange={(e) => setParticipantSearchTerm(e.target.value)}
                        className="max-w-sm"
                      />
                    </div>
                    <Select value={departmentFilter} onValueChange={setDepartmentFilter}>
                      <SelectTrigger className="w-40">
                        <SelectValue placeholder="部門篩選" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">所有部門</SelectItem>
                        <SelectItem value="HQBU">HQBU</SelectItem>
                        <SelectItem value="ITBU">ITBU</SelectItem>
                        <SelectItem value="MBU1">MBU1</SelectItem>
                        <SelectItem value="SBU">SBU</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Participant Grid */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-96 overflow-y-auto border rounded-lg p-4">
                    {getFilteredParticipants(newCompetition.type).map((participant) => {
                      const participantField =
                        newCompetition.type === "individual" ? "participatingApps" : "participatingTeams"
                      const isSelected = newCompetition[participantField].includes(participant.id)

                      return (
                        <div
                          key={participant.id}
                          className="flex items-start space-x-3 p-4 border rounded-lg hover:bg-gray-50 transition-colors"
                        >
                          <Checkbox
                            id={`participant-${participant.id}`}
                            checked={isSelected}
                            onCheckedChange={(checked) => {
                              if (checked) {
                                setNewCompetition({
                                  ...newCompetition,
                                  [participantField]: [...newCompetition[participantField], participant.id],
                                })
                              } else {
                                setNewCompetition({
                                  ...newCompetition,
                                  [participantField]: newCompetition[participantField].filter(
                                    (id: string) => id !== participant.id,
                                  ),
                                })
                              }
                            }}
                          />
                          <div className="flex-1 space-y-2">
                            <div className="flex items-center justify-between">
                              <p className="font-medium text-sm">{participant.name}</p>
                              <Badge variant="outline" className="text-xs">
                                {participant.department}
                              </Badge>
                            </div>

                            {/* Team specific information */}
                            {newCompetition.type === "team" && (
                              <div className="space-y-2">
                                <div className="flex items-center space-x-4 text-xs text-gray-600">
                                  <div className="flex items-center space-x-1">
                                    <User className="w-3 h-3" />
                                    <span>隊長：{participant.leader}</span>
                                  </div>
                                  <div className="flex items-center space-x-1">
                                    <Users className="w-3 h-3" />
                                    <span>{participant.memberCount}人</span>
                                  </div>
                                </div>

                                {participant.contactEmail && (
                                  <div className="flex items-center space-x-1 text-xs text-gray-600">
                                    <Mail className="w-3 h-3" />
                                    <span>{participant.contactEmail}</span>
                                  </div>
                                )}

                                {participant.description && (
                                  <p className="text-xs text-gray-500 line-clamp-2">{participant.description}</p>
                                )}

                                {participant.apps && participant.apps.length > 0 && (
                                  <div className="space-y-1">
                                    <p className="text-xs font-medium text-gray-700">提交應用：</p>
                                    <div className="flex flex-wrap gap-1">
                                      {participant.apps.slice(0, 2).map((app: string, index: number) => (
                                        <Badge key={index} variant="secondary" className="text-xs">
                                          {app}
                                        </Badge>
                                      ))}
                                      {participant.apps.length > 2 && (
                                        <Badge variant="secondary" className="text-xs">
                                          +{participant.apps.length - 2}
                                        </Badge>
                                      )}
                                    </div>
                                  </div>
                                )}

                                {participant.members && participant.members.length > 0 && (
                                  <div className="space-y-1">
                                    <p className="text-xs font-medium text-gray-700">團隊成員：</p>
                                    <div className="space-y-1">
                                      {participant.members.slice(0, 3).map((member: any) => (
                                        <div key={member.id} className="flex items-center justify-between text-xs">
                                          <span className="text-gray-600">{member.name}</span>
                                          <div className="flex items-center space-x-2">
                                            <Badge variant="outline" className="text-xs px-1 py-0">
                                              {member.role}
                                            </Badge>
                                            <span className="text-gray-500">{member.department}</span>
                                          </div>
                                        </div>
                                      ))}
                                      {participant.members.length > 3 && (
                                        <p className="text-xs text-gray-500">
                                          還有 {participant.members.length - 3} 位成員...
                                        </p>
                                      )}
                                    </div>
                                  </div>
                                )}
                              </div>
                            )}

                            {/* Individual information */}
                            {newCompetition.type === "individual" && (
                              <p className="text-xs text-gray-600 mt-1">創作者：{participant.creator}</p>
                            )}

                            <p className="text-xs text-gray-500">提交日期：{participant.submissionDate}</p>
                          </div>
                        </div>
                      )
                    })}
                  </div>

                  {/* Selection Summary */}
                  <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                    <span className="text-sm text-blue-700">
                      已選擇{" "}
                      {newCompetition.type === "individual"
                        ? newCompetition.participatingApps.length
                        : newCompetition.participatingTeams.length}{" "}
                      個{newCompetition.type === "team" ? "團隊" : "應用"}
                    </span>
                  </div>
                </>
              )}
            </div>

            <div className="flex justify-end space-x-3">
              <Button variant="outline" onClick={() => setShowCreateCompetition(false)}>
                取消
              </Button>
              <Button onClick={handleCreateCompetition} disabled={isLoading}>
                {isLoading ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    {selectedCompetitionForAction ? '更新中...' : '創建中...'}
                  </>
                ) : (
                  selectedCompetitionForAction ? "更新競賽" : "創建競賽"
                )}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* 查看競賽詳情對話框 */}
      <Dialog open={showCompetitionDetail} onOpenChange={setShowCompetitionDetail}>
        <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>競賽詳情</DialogTitle>
            <DialogDescription>查看競賽的詳細資訊</DialogDescription>
          </DialogHeader>
          {selectedCompetitionForAction && (
            <div className="space-y-6">
              {/* 競賽基本資訊卡片 */}
              <div className="flex items-start space-x-4 p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg border">
                <div className="w-16 h-16 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Trophy className="w-8 h-8 text-white" />
                </div>
                <div className="flex-1 space-y-3">
                  <div>
                    <h3 className="text-xl font-bold text-gray-900">{selectedCompetitionForAction.name}</h3>
                    <p className="text-gray-600 mt-1">{selectedCompetitionForAction.description || '展示最具創新性的 AI 應用，推動企業數位轉型'}</p>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Badge variant={selectedCompetitionForAction.status === 'completed' ? 'default' : selectedCompetitionForAction.status === 'ongoing' ? 'secondary' : 'outline'}>
                      {getStatusText(selectedCompetitionForAction.status)}
                    </Badge>
                    <Badge variant="outline">
                      {getCompetitionTypeText(selectedCompetitionForAction.type)}
                    </Badge>
                    <Badge variant="outline">
                      {getParticipantCount(selectedCompetitionForAction)} 個參賽項目
                    </Badge>
                  </div>
                </div>
              </div>

              {/* 詳細資訊 */}
              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <Label className="text-sm font-medium text-gray-500">競賽ID</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1 font-mono text-sm">{selectedCompetitionForAction.id}</p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium text-gray-500">開始日期</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">
                      {formatDateRange(
                        selectedCompetitionForAction.start_date || selectedCompetitionForAction.startDate, 
                        selectedCompetitionForAction.end_date || selectedCompetitionForAction.endDate
                      ).split(' ~ ')[0]}
                    </p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium text-gray-500">評估重點</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">
                      {selectedCompetitionForAction.evaluation_focus || '未設定'}
                    </p>
                  </div>
                </div>
                <div className="space-y-4">
                  <div>
                    <Label className="text-sm font-medium text-gray-500">競賽年月</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">{selectedCompetitionForAction.year}年{selectedCompetitionForAction.month}月</p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium text-gray-500">結束日期</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">
                      {formatDateRange(
                        selectedCompetitionForAction.start_date || selectedCompetitionForAction.startDate, 
                        selectedCompetitionForAction.end_date || selectedCompetitionForAction.endDate
                      ).split(' ~ ')[1]}
                    </p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium text-gray-500">最大團隊大小</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">
                      {selectedCompetitionForAction.max_team_size ? `${selectedCompetitionForAction.max_team_size} 人` : '無限制'}
                    </p>
                  </div>
                </div>
              </div>

              {/* 評審團隊 */}
              <div className="space-y-4">
                <h4 className="text-lg font-semibold text-gray-900">評審團隊</h4>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  {(selectedCompetitionForAction.judges && selectedCompetitionForAction.judges.length > 0) ? 
                    selectedCompetitionForAction.judges.map((judge: any) => (
                      <div key={judge.id} className="flex items-center space-x-3 p-4 border rounded-lg bg-white">
                        <Avatar className="w-12 h-12">
                          <AvatarFallback className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
                            {judge.name.charAt(0)}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <p className="font-medium text-gray-900">{judge.name}</p>
                          <p className="text-sm text-gray-600">{judge.title || '評審'}</p>
                          <p className="text-xs text-gray-500">{judge.department || ''}</p>
                          {judge.expertise && Array.isArray(judge.expertise) && (
                            <p className="text-xs text-gray-500">{judge.expertise.join(', ')}</p>
                          )}
                        </div>
                      </div>
                    )) : (
                      <div className="col-span-full text-center py-8 text-gray-500">
                        <UserCheck className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                        <p>暫無評審團隊</p>
                      </div>
                    )
                  }
                </div>
              </div>

              {/* 參賽團隊 */}
              <div className="space-y-4">
                <h4 className="text-lg font-semibold text-gray-900">
                  參賽團隊 ({getParticipantCount(selectedCompetitionForAction)})
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {(selectedCompetitionForAction.teams && selectedCompetitionForAction.teams.length > 0) ? 
                    selectedCompetitionForAction.teams.map((team: any) => (
                      <div key={team.id} className="p-4 border rounded-lg bg-white space-y-2">
                        <h5 className="font-medium text-gray-900">{team.name}</h5>
                        <p className="text-sm text-gray-600">隊長：{team.leader_name || team.leader_id || '未知'}</p>
                        <p className="text-sm text-gray-600">部門：{team.department || '未知'}</p>
                        <p className="text-sm text-gray-600">聯絡信箱：{team.contact_email || '未知'}</p>
                        {team.leader_phone && (
                          <p className="text-sm text-gray-600">隊長電話：{team.leader_phone}</p>
                        )}
                        {team.description && (
                          <p className="text-sm text-gray-500">{team.description}</p>
                        )}
                        {team.registered_at && (
                          <p className="text-xs text-gray-400">
                            註冊時間：{new Date(team.registered_at).toLocaleDateString('zh-TW')}
                          </p>
                        )}
                      </div>
                    )) : (
                      <div className="col-span-full text-center py-8 text-gray-500">
                        <Users className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                        <p>暫無參賽團隊</p>
                      </div>
                    )
                  }
                </div>
              </div>

              {/* 獎項類型 */}
              <div className="space-y-4">
                <h4 className="text-lg font-semibold text-gray-900">獎項類型</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {(selectedCompetitionForAction.awardTypes && selectedCompetitionForAction.awardTypes.length > 0) ? 
                    selectedCompetitionForAction.awardTypes.map((awardType: any) => (
                      <div key={awardType.id} className="p-4 border rounded-lg bg-white space-y-2">
                        <div className="flex items-center space-x-2">
                          <span className="text-2xl">{awardType.icon || '🏆'}</span>
                          <h5 className="font-medium text-gray-900">{awardType.name}</h5>
                        </div>
                        <p className="text-sm text-gray-600">{awardType.description || '無描述'}</p>
                        <div className="flex items-center space-x-2">
                          <Badge variant="outline" className={awardType.color || 'text-yellow-600'}>
                            {awardType.color || 'text-yellow-600'}
                          </Badge>
                          <span className="text-xs text-gray-500">排序：{awardType.order_index || 0}</span>
                        </div>
                      </div>
                    )) : (
                      <div className="col-span-full text-center py-8 text-gray-500">
                        <Award className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                        <p>暫無獎項類型</p>
                      </div>
                    )
                  }
                </div>
              </div>

              {/* 評分規則 */}
              <div className="space-y-4">
                <h4 className="text-lg font-semibold text-gray-900">評分規則</h4>
                <div className="space-y-3">
                  {(selectedCompetitionForAction.rules && selectedCompetitionForAction.rules.length > 0) ? 
                    selectedCompetitionForAction.rules.map((rule: any) => (
                      <div key={rule.id} className="p-4 border rounded-lg bg-white">
                        <div className="flex items-center justify-between">
                          <div>
                            <h5 className="font-medium text-gray-900">{rule.name}</h5>
                            <p className="text-sm text-gray-600">{rule.description || '無描述'}</p>
                          </div>
                          <div className="text-right">
                            <Badge variant="outline" className="text-lg font-bold">
                              {Math.round(calculateWeightPercentage(rule.weight))}%
                            </Badge>
                            <p className="text-xs text-gray-500 mt-1">權重</p>
                          </div>
                        </div>
                        <div className="mt-2">
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div 
                              className="bg-blue-600 h-2 rounded-full" 
                              style={{ 
                                width: `${Math.min(calculateWeightPercentage(rule.weight), 100)}%` 
                              }}
                            ></div>
                          </div>
                        </div>
                      </div>
                    )) : (
                      <div className="text-center py-8 text-gray-500">
                        <ClipboardList className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                        <p>暫無評分規則</p>
                      </div>
                    )
                  }
                </div>
              </div>

              <div className="flex justify-end">
                <Button onClick={() => setShowCompetitionDetail(false)}>關閉</Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>


      {/* 刪除競賽確認對話框 */}
      <Dialog open={showDeleteCompetitionConfirm} onOpenChange={setShowDeleteCompetitionConfirm}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>確認刪除</DialogTitle>
            <DialogDescription>此操作將永久刪除競賽，且無法復原。</DialogDescription>
          </DialogHeader>
          {selectedCompetitionForAction && (
            <div className="space-y-4">
              <p className="text-sm text-gray-600">
                您確定要刪除競賽「{selectedCompetitionForAction.name}」嗎？
              </p>
              <div className="flex justify-end space-x-3">
                <Button variant="outline" onClick={() => setShowDeleteCompetitionConfirm(false)}>
                  取消
                </Button>
                <Button 
                  variant="destructive" 
                  onClick={confirmDeleteCompetition}
                  disabled={isLoading}
                >
                  {isLoading ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      刪除中...
                    </>
                  ) : (
                    "確認刪除"
                  )}
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* 修改狀態對話框 */}
      <Dialog open={showChangeStatusDialog} onOpenChange={setShowChangeStatusDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>修改競賽狀態</DialogTitle>
            <DialogDescription>更改競賽的當前狀態</DialogDescription>
          </DialogHeader>
          {selectedCompetitionForAction && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>當前狀態</Label>
                <p className="text-sm text-gray-600">
                  <Badge>{getStatusText(selectedCompetitionForAction.status)}</Badge>
                </p>
              </div>
              <div className="space-y-2">
                <Label htmlFor="status">新狀態</Label>
                <Select value={newStatus} onValueChange={setNewStatus}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="upcoming">即將開始</SelectItem>
                    <SelectItem value="ongoing">進行中</SelectItem>
                    <SelectItem value="completed">已完成</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex justify-end space-x-3">
                <Button variant="outline" onClick={() => setShowChangeStatusDialog(false)}>
                  取消
                </Button>
                <Button onClick={handleUpdateStatus} disabled={isLoading}>
                  {isLoading ? (
                    <>
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                      更新中...
                    </>
                  ) : (
                    "更新狀態"
                  )}
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* 手動評分對話框 */}
      <Dialog open={showManualScoring} onOpenChange={setShowManualScoring}>
        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>手動輸入評分</DialogTitle>
            <DialogDescription>為競賽項目手動輸入評審評分</DialogDescription>
          </DialogHeader>
          <div className="space-y-6">
            {/* 混合賽類型選擇 */}
            {selectedCompetition?.type === 'mixed' && (
              <div className="space-y-3">
                <Label className="text-base font-medium">參賽類型</Label>
                <div className="flex space-x-2">
                  <Button
                    type="button"
                    variant={selectedParticipantType === 'individual' ? 'default' : 'outline'}
                    onClick={() => handleParticipantTypeChange('individual')}
                    className="flex-1"
                  >
                    <User className="w-4 h-4 mr-2" />
                    個人賽
                  </Button>
                  <Button
                    type="button"
                    variant={selectedParticipantType === 'team' ? 'default' : 'outline'}
                    onClick={() => handleParticipantTypeChange('team')}
                    className="flex-1"
                  >
                    <Users className="w-4 h-4 mr-2" />
                    團體賽
                  </Button>
                </div>
              </div>
            )}

            {/* 選擇評審和參賽者 */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>選擇評審</Label>
                <Select 
                  value={manualScoring.judgeId} 
                  onValueChange={(value) => setManualScoring({...manualScoring, judgeId: value})}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="選擇評審" />
                  </SelectTrigger>
                  <SelectContent>
                    {/* 混合賽時根據參賽者類型過濾評審 */}
                    {selectedCompetition?.type === 'mixed' ? (
                      (dbJudges.length > 0 ? dbJudges : judges).filter(judge => {
                        const config = selectedParticipantType === 'individual' 
                          ? selectedCompetition.individualConfig 
                          : selectedCompetition.teamConfig;
                        return config?.judges?.includes(judge.id) || false;
                      }).map((judge) => (
                        <SelectItem key={judge.id} value={judge.id}>
                          {judge.name} - {judge.expertise}
                        </SelectItem>
                      ))
                    ) : (
                      (dbJudges.length > 0 ? dbJudges : judges).filter(judge => selectedCompetition?.judges?.includes(judge.id) || false).map((judge) => (
                        <SelectItem key={judge.id} value={judge.id}>
                          {judge.name} - {judge.expertise}
                        </SelectItem>
                      ))
                    )}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>
                  {selectedCompetition?.type === 'mixed' 
                    ? (selectedParticipantType === 'individual' ? '選擇個人' : '選擇團隊')
                    : (selectedCompetition?.type === 'team' ? '選擇團隊' : '選擇個人')
                  }
                </Label>
                <Select 
                  value={manualScoring.participantId} 
                  onValueChange={(value) => setManualScoring({...manualScoring, participantId: value})}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={
                      selectedCompetition?.type === 'mixed' 
                        ? (selectedParticipantType === 'individual' ? '選擇個人' : '選擇團隊')
                        : (selectedCompetition?.type === 'team' ? '選擇團隊' : '選擇個人')
                    } />
                  </SelectTrigger>
                  <SelectContent>
                    {/* 根據競賽類型和選擇的參賽者類型顯示參賽者 */}
                    {(selectedCompetition?.type === 'individual' || 
                      (selectedCompetition?.type === 'mixed' && selectedParticipantType === 'individual')) && 
                      mockIndividualApps
                        .filter(app => selectedCompetition.participatingApps?.includes(app.id))
                        .map((app) => (
                          <SelectItem key={app.id} value={app.id}>
                            {app.name} - {app.creator}
                          </SelectItem>
                        ))
                    }
                    {(selectedCompetition?.type === 'team' || 
                      (selectedCompetition?.type === 'mixed' && selectedParticipantType === 'team')) && 
                      teams
                        .filter(team => selectedCompetition.participatingTeams?.includes(team.id))
                        .map((team) => (
                          <SelectItem key={team.id} value={team.id}>
                            {team.name} - {team.leader}
                          </SelectItem>
                        ))
                    }
                  </SelectContent>
                </Select>
              </div>
            </div>
            
            {/* 評分項目 */}
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <Label className="text-lg font-medium">評分項目</Label>
                {selectedCompetition?.type === 'mixed' && (
                  <Badge variant="outline" className="text-sm">
                    {selectedParticipantType === 'individual' ? '個人賽評分' : '團體賽評分'}
                  </Badge>
                )}
              </div>
              
              {/* 動態顯示競賽的評分項目 */}
              {(() => {
                let currentRules: any[] = [];
                
                if (selectedCompetition?.type === 'mixed') {
                  // 混合賽：根據當前選擇的參賽者類型獲取評分規則
                  const config = selectedParticipantType === 'individual' 
                    ? selectedCompetition.individualConfig 
                    : selectedCompetition.teamConfig;
                  currentRules = config?.rules || [];
                } else {
                  // 單一類型競賽
                  currentRules = selectedCompetition?.rules || [];
                }
                
                // 如果有自定義規則，使用自定義規則；否則使用預設規則
                const scoringItems = currentRules.length > 0 
                  ? currentRules 
                  : getDefaultScoringItems(
                      selectedCompetition?.type === 'mixed' 
                        ? selectedParticipantType 
                        : selectedCompetition?.type || 'individual'
                    );
                    
                return scoringItems.map((item: any, index: number) => (
                  <div key={index} className="space-y-3">
                    <div className="flex justify-between items-center">
                      <div>
                        <Label className="text-base font-medium">{item.name}</Label>
                        <p className="text-sm text-gray-600 mt-1">{item.description}</p>
                        {item.weight && (
                          <p className="text-xs text-purple-600 mt-1">權重：{item.weight}%</p>
                        )}
                      </div>
                      <div className="text-right">
                        <span className="text-lg font-bold">
                          {manualScoring.scores[item.name] || 0} / 10
                        </span>
                      </div>
                    </div>
                    
                    {/* 評分按鈕 */}
                    <div className="flex flex-wrap gap-2">
                      {Array.from({ length: 10 }, (_, i) => i + 1).map((score) => (
                        <button
                          key={score}
                          type="button"
                          onClick={() => setManualScoring({
                            ...manualScoring,
                            scores: { ...manualScoring.scores, [item.name]: score }
                          })}
                          className={`w-10 h-10 rounded-lg border-2 font-medium transition-all ${
                            (manualScoring.scores[item.name] || 0) === score
                              ? 'bg-blue-600 text-white border-blue-600'
                              : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50'
                          }`}
                        >
                          {score}
                        </button>
                      ))}
                    </div>
                  </div>
                ));
              })()}
            </div>

            {/* 評審意見 */}
            <div className="space-y-2">
              <Label className="text-base font-medium">評審意見 *</Label>
              <Textarea
                value={manualScoring.comments}
                onChange={(e) => setManualScoring({...manualScoring, comments: e.target.value})}
                placeholder="請提供評審意見和建議..."
                rows={4}
                className="resize-none"
              />
            </div>

            {/* 按鈕區 */}
            <div className="flex justify-end space-x-3 pt-4 border-t">
              <Button variant="outline" onClick={() => setShowManualScoring(false)}>
                取消
              </Button>
              <Button 
                onClick={handleSubmitManualScore} 
                disabled={isLoading}
                className="bg-gray-900 hover:bg-gray-800 text-white"
              >
                {isLoading ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    提交中...
                  </>
                ) : (
                  "提交評分"
                )}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* 創建團隊對話框 */}
      <Dialog 
        open={showCreateTeam} 
        onOpenChange={(open) => {
          setShowCreateTeam(open)
          if (!open) {
            setCreateError("")
            setSelectedTeam(null) // 清除編輯狀態
            resetTeamForm()
          }
        }}
      >
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{selectedTeam ? '編輯團隊' : '創建新團隊'}</DialogTitle>
            <DialogDescription>
              {selectedTeam ? '修改團隊的基本資訊、成員和應用' : '建立一個新的競賽團隊，包含完整的團隊資訊'}
            </DialogDescription>
          </DialogHeader>

          <Tabs defaultValue="basic" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="basic">基本資訊</TabsTrigger>
              <TabsTrigger value="members">團隊成員</TabsTrigger>
              <TabsTrigger value="apps">加入應用</TabsTrigger>
            </TabsList>

            {/* 基本資訊標籤頁 */}
            <TabsContent value="basic" className="space-y-6 mt-6">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="team-name">團隊名稱 *</Label>
                  <Input
                    id="team-name"
                    value={newTeam.name}
                    onChange={(e) => setNewTeam({ ...newTeam, name: e.target.value })}
                    placeholder="輸入團隊名稱"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="leader-name">隊長選擇 *</Label>
                  <Select 
                    value={newTeam.leader_id} 
                    onValueChange={(value) => {
                      const selectedUser = availableUsers.find(u => u.id === value);
                      setNewTeam({ 
                        ...newTeam, 
                        leader_id: value,
                        leader: selectedUser?.name || ''
                      });
                    }}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="選擇團隊隊長" />
                    </SelectTrigger>
                    <SelectContent>
                      {availableUsers.length > 0 ? (
                        availableUsers.map((user) => (
                          <SelectItem key={user.id} value={user.id}>
                            <div className="flex flex-col">
                              <span className="font-medium">{user.name}</span>
                              <span className="text-xs text-gray-500">{user.email} • {user.department}</span>
                            </div>
                          </SelectItem>
                        ))
                      ) : (
                        <SelectItem value="loading" disabled>
                          <span className="text-gray-500">載入中...</span>
                        </SelectItem>
                      )}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="department">主要部門</Label>
                  <Select
                    value={newTeam.department}
                    onValueChange={(value) => setNewTeam({ ...newTeam, department: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="HQBU">HQBU</SelectItem>
                      <SelectItem value="ITBU">ITBU</SelectItem>
                      <SelectItem value="MBU1">MBU1</SelectItem>
                      <SelectItem value="SBU">SBU</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="leader-phone">隊長聯絡電話</Label>
                  <Input
                    id="leader-phone"
                    value={newTeam.leaderPhone}
                    onChange={(e) => setNewTeam({ ...newTeam, leaderPhone: e.target.value })}
                    placeholder="0912-345-678"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="contact-email">團隊聯絡信箱 *</Label>
                <Input
                  id="contact-email"
                  type="email"
                  value={newTeam.contactEmail}
                  onChange={(e) => setNewTeam({ ...newTeam, contactEmail: e.target.value })}
                  placeholder="team@company.com"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="team-description">團隊描述</Label>
                <Textarea
                  id="team-description"
                  value={newTeam.description}
                  onChange={(e) => setNewTeam({ ...newTeam, description: e.target.value })}
                  placeholder="描述團隊的專長、目標或特色..."
                  rows={4}
                  className="resize-none"
                />
              </div>
            </TabsContent>

            {/* 團隊成員標籤頁 */}
            <TabsContent value="members" className="space-y-6 mt-6">
              <div className="space-y-4">
                <Label className="text-lg font-medium">新增成員</Label>
                
                <div className="grid grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label>成員選擇</Label>
                    <Select 
                      value={newMember.user_id} 
                      onValueChange={(value) => {
                        const selectedUser = availableUsers.find(u => u.id === value);
                        setNewMember({ 
                          ...newMember, 
                          user_id: value,
                          name: selectedUser?.name || '',
                          department: selectedUser?.department || 'HQBU'
                        });
                      }}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="選擇團隊成員" />
                      </SelectTrigger>
                      <SelectContent>
                        {availableUsers.map((user) => (
                          <SelectItem key={user.id} value={user.id}>
                            <div className="flex flex-col">
                              <span className="font-medium">{user.name}</span>
                              <span className="text-xs text-gray-500">{user.email} • {user.department}</span>
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label>部門</Label>
                    <Select
                      value={newMember.department}
                      onValueChange={(value) => setNewMember({ ...newMember, department: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="HQBU">HQBU</SelectItem>
                        <SelectItem value="ITBU">ITBU</SelectItem>
                        <SelectItem value="MBU1">MBU1</SelectItem>
                        <SelectItem value="SBU">SBU</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label>角色/職責</Label>
                    <Select
                      value={newMember.role}
                      onValueChange={(value) => setNewMember({ ...newMember, role: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="選擇角色" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="隊長">隊長</SelectItem>
                        <SelectItem value="成員">成員</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <Button
                  type="button"
                  onClick={handleAddMember}
                  variant="outline"
                  className="w-full border-2 border-dashed border-gray-300 hover:border-blue-400 hover:bg-blue-50"
                >
                  <UserPlus className="w-4 h-4 mr-2" />
                  新增成員
                </Button>
              </div>

              {/* 成員列表 */}
              {newTeam.members.length > 0 && (
                <div className="space-y-4">
                  <Label className="text-lg font-medium">團隊成員清單</Label>
                  <div className="space-y-3">
                    {newTeam.members.map((member) => (
                      <div key={member.id} className="flex items-center justify-between p-3 border rounded-lg bg-gray-50">
                        <div className="flex items-center space-x-4">
                          <Avatar className="w-10 h-10">
                            <AvatarFallback className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
                              {member.name.charAt(0)}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <p className="font-medium">{member.name}</p>
                            <div className="flex items-center space-x-2 text-sm text-gray-600">
                              <span>{member.department}</span>
                              <span>•</span>
                              <span>{member.role}</span>
                            </div>
                          </div>
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => handleRemoveMember(member.id)}
                          className="text-red-600 hover:text-red-700 hover:bg-red-50"
                        >
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </TabsContent>

            {/* 提交應用標籤頁 */}
            <TabsContent value="apps" className="space-y-6 mt-6">
              <div className="space-y-4">
                <Label className="text-lg font-medium">加入應用</Label>
                
                  <div className="space-y-2">
                  <Label>選擇應用</Label>
                  <Select onValueChange={handleAddApp}>
                    <SelectTrigger>
                      <SelectValue placeholder="選擇要加入團隊的應用" />
                    </SelectTrigger>
                    <SelectContent>
                      {availableApps.length > 0 ? (
                        availableApps.map((app) => (
                          <SelectItem key={app.id} value={app.id}>
                            <div className="flex flex-col">
                              <span className="font-medium">{app.name}</span>
                              <span className="text-xs text-gray-500">{app.category} • {app.type}</span>
                            </div>
                          </SelectItem>
                        ))
                      ) : (
                        <SelectItem value="loading" disabled>
                          <span className="text-gray-500">載入中...</span>
                        </SelectItem>
                      )}
                    </SelectContent>
                  </Select>
                  </div>
                </div>

              {/* 已加入的應用列表 */}
              {newTeam.apps.length > 0 && (
                <div className="space-y-4">
                  <Label className="text-lg font-medium">已加入應用</Label>
                  <div className="space-y-3">
                    {newTeam.apps.map((appId) => {
                      const app = availableApps.find(a => a.id === appId);
                      if (!app) return null;
                      
                      return (
                        <div key={appId} className="flex items-center justify-between p-3 border rounded-lg bg-gray-50">
                        <div className="flex-1">
                            <p className="font-medium">{app.name}</p>
                            <p className="text-sm text-gray-600">{app.description}</p>
                            <div className="flex items-center space-x-2 mt-1">
                              <Badge variant="outline" className="text-xs">{app.category}</Badge>
                              <Badge variant="outline" className="text-xs">{app.type}</Badge>
                            </div>
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                            onClick={() => handleRemoveApp(appId)}
                          className="text-red-600 hover:text-red-700 hover:bg-red-50"
                        >
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </TabsContent>
          </Tabs>

          {/* 錯誤訊息 */}
          {createError && (
            <Alert variant="destructive" className="mt-4">
              <AlertTriangle className="h-4 w-4" />
              <AlertDescription>{createError}</AlertDescription>
            </Alert>
          )}

          {/* 底部按鈕 */}
          <div className="flex justify-end space-x-3 pt-4 border-t mt-6">
            <Button variant="outline" onClick={() => setShowCreateTeam(false)}>
              取消
            </Button>
            <Button 
              onClick={handleCreateTeam} 
              disabled={isLoading}
              className="bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700"
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  {selectedTeam ? '更新中...' : '創建中...'}
                </>
              ) : (
                selectedTeam ? "更新團隊" : "創建團隊"
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* 查看團隊詳情對話框 */}
      <Dialog open={showTeamDetail} onOpenChange={setShowTeamDetail}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>團隊詳情</DialogTitle>
            <DialogDescription>查看團隊的詳細資訊</DialogDescription>
          </DialogHeader>
          {selectedTeam && (
            <div className="space-y-6">
              {/* 團隊基本資訊卡片 */}
              <div className="flex items-start space-x-4 p-4 bg-gradient-to-r from-green-50 to-blue-50 rounded-lg border">
                <div className="w-16 h-16 bg-gradient-to-r from-green-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
                  <Users className="w-8 h-8 text-white" />
                </div>
                <div className="flex-1 space-y-3">
                  <div>
                    <h3 className="text-xl font-bold text-gray-900">{selectedTeam.name}</h3>
                    <p className="text-gray-600 mt-1">{selectedTeam.description || '專注於AI技術創新與應用的團隊'}</p>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Badge variant="outline">
                      {selectedTeam.department}
                    </Badge>
                    <Badge variant="outline">
                      {selectedTeam.members?.length || 0} 名成員
                    </Badge>
                    <Badge variant="outline">
                      {selectedTeam.apps?.length || 0} 個應用
                    </Badge>
                  </div>
                </div>
              </div>

              {/* 詳細資訊 */}
              <div className="grid grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <Label className="text-sm font-medium text-gray-500">團隊ID</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">{selectedTeam.id}</p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium text-gray-500">聯絡信箱</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">{selectedTeam.contact_email || '未提供'}</p>
                  </div>
                </div>
                <div className="space-y-4">
                  <div>
                    <Label className="text-sm font-medium text-gray-500">隊長</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">{selectedTeam.leader_name || '未指定'}</p>
                  </div>
                  <div>
                    <Label className="text-sm font-medium text-gray-500">聯絡電話</Label>
                    <p className="text-lg font-medium text-gray-900 mt-1">{selectedTeam.leader_phone || '未提供'}</p>
                  </div>
                </div>
              </div>

              {/* 團隊成員 */}
              <div className="space-y-4">
                <h4 className="text-lg font-semibold text-gray-900">團隊成員</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {selectedTeam.members?.map((member: any) => (
                    <div key={member.id} className="flex items-center space-x-3 p-3 border rounded-lg bg-white">
                      <Avatar className="w-12 h-12">
                        <AvatarFallback className="bg-gradient-to-r from-green-600 to-blue-600 text-white">
                          {member.name.charAt(0)}
                        </AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <div className="flex items-center space-x-2">
                          <p className="font-medium text-gray-900">{member.name}</p>
                          {member.user_id === selectedTeam.leader_id && (
                            <Badge variant="default" className="text-xs bg-orange-100 text-orange-800">
                              隊長
                            </Badge>
                          )}
                        </div>
                        <p className="text-sm text-gray-600">{member.department} • {member.role}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* 團隊應用 */}
              {selectedTeam.apps && selectedTeam.apps.length > 0 && (
                <div className="space-y-4">
                  <h4 className="text-lg font-semibold text-gray-900">團隊應用</h4>
                  <div className="space-y-3">
                    {selectedTeam.apps.map((app: any, index: number) => (
                      <div key={app.id || index} className="flex items-center justify-between p-4 border rounded-lg bg-white">
                        <div className="flex-1">
                          <h5 className="font-medium text-gray-900">{app.name || app.title}</h5>
                          <p className="text-sm text-gray-600 mt-1">{app.description || '無描述'}</p>
                          {app.url && (
                            <div className="flex items-center space-x-1 mt-2">
                              <Link className="w-3 h-3 text-blue-600" />
                              <a 
                                href={app.url} 
                                target="_blank" 
                                rel="noopener noreferrer"
                                className="text-sm text-blue-600 hover:text-blue-800"
                              >
                                {app.url}
                              </a>
                            </div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              <div className="flex justify-end">
                <Button onClick={() => setShowTeamDetail(false)}>關閉</Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* 刪除團隊確認對話框 */}
      <Dialog open={showDeleteTeamConfirm} onOpenChange={setShowDeleteTeamConfirm}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center space-x-2 text-red-600">
              <AlertTriangle className="w-5 h-5" />
              <span>確認刪除團隊</span>
            </DialogTitle>
            <DialogDescription>
              此操作無法撤銷，請確認是否要刪除此團隊。
            </DialogDescription>
          </DialogHeader>
          
          {teamToDelete && (
            <div className="space-y-4">
              <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
                <div className="flex items-start space-x-3">
                  <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
                    <Users className="w-5 h-5 text-red-600" />
                  </div>
                  <div className="flex-1">
                    <h4 className="font-medium text-red-900">{teamToDelete.name}</h4>
                    <p className="text-sm text-red-700 mt-1">
                      隊長：{teamToDelete.leader} • {teamToDelete.memberCount} 名成員
                    </p>
                    <p className="text-sm text-red-700">
                      {teamToDelete.submittedAppCount} 個提交應用
                    </p>
                  </div>
                </div>
              </div>

              <div className="text-sm text-gray-600 space-y-1">
                <p>⚠️ 刪除團隊將會：</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>永久移除團隊的所有資料</li>
                  <li>移除所有成員記錄</li>
                  <li>移除所有提交的應用</li>
                  <li>無法復原任何相關資訊</li>
                </ul>
              </div>
            </div>
          )}

          <div className="flex justify-end space-x-3 pt-4">
            <Button 
              variant="outline" 
              onClick={() => {
                setShowDeleteTeamConfirm(false)
                setTeamToDelete(null)
              }}
              disabled={isLoading}
            >
              取消
            </Button>
            <Button 
              variant="destructive" 
              onClick={handleConfirmDeleteTeam}
              disabled={isLoading}
              className="bg-red-600 hover:bg-red-700"
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  刪除中...
                </>
              ) : (
                <>
                  <Trash2 className="w-4 h-4 mr-2" />
                  確認刪除
                </>
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* 新增評審對話框 */}
      <Dialog open={showAddJudge} onOpenChange={setShowAddJudge}>
        <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{selectedJudge ? '編輯評審' : '新增評審'}</DialogTitle>
            <DialogDescription>
              {selectedJudge ? '修改評審的基本資訊和專業領域' : '新增專業評審到評審團'}
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4">
            {/* 姓名 */}
            <div className="space-y-2">
              <Label htmlFor="judge-name">
                姓名 <span className="text-red-500">*</span>
              </Label>
              <Input
                id="judge-name"
                value={newJudge.name}
                onChange={(e) => setNewJudge({ ...newJudge, name: e.target.value })}
                placeholder="輸入評審姓名"
              />
            </div>

            {/* 職稱 */}
            <div className="space-y-2">
              <Label htmlFor="judge-title">
                職稱 <span className="text-red-500">*</span>
              </Label>
              <Input
                id="judge-title"
                value={newJudge.title}
                onChange={(e) => setNewJudge({ ...newJudge, title: e.target.value })}
                placeholder="輸入職稱"
              />
            </div>

            {/* 部門 */}
            <div className="space-y-2">
              <Label htmlFor="judge-department">
                部門 <span className="text-red-500">*</span>
              </Label>
              <Select
                value={newJudge.department === "" || !["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "研發部", "產品部", "技術部"].includes(newJudge.department) ? "custom" : newJudge.department}
                onValueChange={(value) => {
                  if (value === "custom") {
                    setNewJudge({ ...newJudge, department: "" })
                  } else {
                    setNewJudge({ ...newJudge, department: value })
                  }
                }}
              >
                <SelectTrigger>
                  <SelectValue placeholder="選擇部門" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="HQBU">HQBU</SelectItem>
                  <SelectItem value="ITBU">ITBU</SelectItem>
                  <SelectItem value="MBU1">MBU1</SelectItem>
                  <SelectItem value="MBU2">MBU2</SelectItem>
                  <SelectItem value="SBU">SBU</SelectItem>
                  <SelectItem value="研發部">研發部</SelectItem>
                  <SelectItem value="產品部">產品部</SelectItem>
                  <SelectItem value="技術部">技術部</SelectItem>
                  <SelectItem value="custom">其他/自定義...</SelectItem>
                </SelectContent>
              </Select>
              
              {/* 自定義部門輸入框 */}
              {(newJudge.department === "" || !["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "研發部", "產品部", "技術部"].includes(newJudge.department)) && (
                <Input
                  value={newJudge.department}
                  onChange={(e) => setNewJudge({ ...newJudge, department: e.target.value })}
                  placeholder="請輸入部門/機構名稱，例如：外部顧問、XX顧問公司"
                  className="mt-2"
                />
              )}
            </div>

            {/* 專業領域 */}
            <div className="space-y-3">
              <Label htmlFor="judge-expertise">專業領域</Label>
              <Input
                id="judge-expertise"
                value={newJudge.expertise}
                onChange={(e) => setNewJudge({ ...newJudge, expertise: e.target.value })}
                placeholder="用逗號分隔，例如：機器學習, 深度學習"
              />
              
              {/* 快速選擇標籤 */}
              <div className="space-y-2">
                <p className="text-sm text-gray-600">快速選擇常用專業領域：</p>
                <div className="flex flex-wrap gap-2">
                  {[
                    "機器學習",
                    "深度學習", 
                    "自然語言處理",
                    "計算機視覺",
                    "數據科學",
                    "人工智能",
                    "雲端計算",
                    "網路安全",
                    "軟體工程",
                    "用戶體驗"
                  ].map((tag) => (
                    <Button
                      key={tag}
                      type="button"
                      variant="outline"
                      size="sm"
                      className="h-7 px-3 text-xs border-gray-300 hover:border-blue-400 hover:bg-blue-50"
                      onClick={() => {
                        const currentExpertise = newJudge.expertise.trim()
                        if (currentExpertise === "") {
                          setNewJudge({ ...newJudge, expertise: tag })
                        } else {
                          // 檢查是否已經包含這個標籤
                          const expertiseList = currentExpertise.split(',').map(item => item.trim())
                          if (!expertiseList.includes(tag)) {
                            setNewJudge({ ...newJudge, expertise: currentExpertise + ", " + tag })
                          }
                        }
                      }}
                    >
                      + {tag}
                    </Button>
                  ))}
                </div>
              </div>
            </div>

            {/* 錯誤訊息 */}
            {error && (
              <Alert className="border-red-200 bg-red-50">
                <AlertTriangle className="h-4 w-4 text-red-600" />
                <AlertDescription className="text-red-600">{error}</AlertDescription>
              </Alert>
            )}
          </div>

          <div className="flex justify-end space-x-3 pt-4">
            <Button 
              variant="outline" 
              onClick={() => {
                setShowAddJudge(false)
                setSelectedJudge(null)
                setNewJudge({
                  name: "",
                  title: "",
                  department: "",
                  expertise: "",
                })
                setError("")
              }}
              disabled={isLoading}
            >
              取消
            </Button>
            <Button 
              onClick={handleAddJudge}
              disabled={isLoading}
              className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  {selectedJudge ? '更新中...' : '新增中...'}
                </>
              ) : (
                <>
                  <UserPlus className="w-4 h-4 mr-2" />
                  {selectedJudge ? '更新評審' : '新增評審'}
                </>
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* 查看評審詳情對話框 */}
      <Dialog open={showJudgeDetail} onOpenChange={setShowJudgeDetail}>
        <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>評審詳情</DialogTitle>
            <DialogDescription>查看評審的詳細資訊</DialogDescription>
          </DialogHeader>
          
          {selectedJudge && (
            <div className="space-y-6">
              {/* 評審基本資訊卡片 */}
              <div className="flex items-start space-x-4 p-4 bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg border">
                <Avatar className="w-16 h-16">
                  <AvatarFallback className="bg-gradient-to-r from-purple-600 to-blue-600 text-white text-lg font-bold">
                    {selectedJudge.name.charAt(0)}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1 space-y-2">
                  <div>
                    <h3 className="text-xl font-bold text-gray-900">{selectedJudge.name}</h3>
                    <p className="text-gray-600 font-medium">{selectedJudge.title}</p>
                  </div>
                  <div className="flex items-center space-x-4 text-sm text-gray-600">
                    <span>{selectedJudge.department}</span>
                    <Badge variant="outline" className="text-xs">
                      ID: {selectedJudge.id}
                    </Badge>
                  </div>
                </div>
              </div>

              {/* 專業領域 */}
              <div className="space-y-3">
                <h4 className="text-lg font-semibold text-gray-900">專業領域</h4>
                <div className="flex flex-wrap gap-2">
                  {selectedJudge.expertise && selectedJudge.expertise.length > 0 ? (
                    selectedJudge.expertise.map((field, index) => (
                      <Badge 
                        key={index} 
                        variant="secondary"
                        className="bg-purple-100 text-purple-800 hover:bg-purple-200"
                      >
                        {field}
                      </Badge>
                    ))
                  ) : (
                    <p className="text-gray-500 text-sm">未設定專業領域</p>
                  )}
                </div>
              </div>

              {/* 統計資訊 */}
              <div className="grid grid-cols-2 gap-4 pt-4 border-t">
                <div className="text-center">
                  <div className="text-sm text-gray-500">評審ID</div>
                  <div className="text-lg font-bold text-gray-900">{selectedJudge.id}</div>
                </div>
                <div className="text-center">
                  <div className="text-sm text-gray-500">專業領域數量</div>
                  <div className="text-lg font-bold text-gray-900">
                    {selectedJudge.expertise ? selectedJudge.expertise.length : 0} 個
                  </div>
                </div>
              </div>

              {/* 底部按鈕 */}
              <div className="flex justify-end space-x-3 pt-4">
                <Button 
                  variant="outline" 
                  onClick={() => setShowJudgeDetail(false)}
                >
                  關閉
                </Button>
                <Button 
                  onClick={() => {
                    setShowJudgeDetail(false)
                    handleEditJudge(selectedJudge)
                  }}
                  className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
                >
                  <Edit className="w-4 h-4 mr-2" />
                  編輯評審
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* 停用評審確認對話框 */}
      <Dialog open={showDisableJudgeConfirm} onOpenChange={setShowDisableJudgeConfirm}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center space-x-2 text-orange-600">
              <UserX className="w-5 h-5" />
              <span>確認停用評審</span>
            </DialogTitle>
            <DialogDescription>
              停用後評審將無法參與新的競賽評分，但資料會保留。
            </DialogDescription>
          </DialogHeader>
          
          {selectedJudge && (
            <div className="space-y-4">
              <div className="p-4 bg-orange-50 border border-orange-200 rounded-lg">
                <div className="flex items-start space-x-3">
                  <Avatar className="w-12 h-12">
                    <AvatarFallback className="bg-orange-100 text-orange-600">
                      {selectedJudge.name.charAt(0)}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <h4 className="font-medium text-orange-900">{selectedJudge.name}</h4>
                    <p className="text-sm text-orange-700 mt-1">
                      職稱：{selectedJudge.title}
                    </p>
                    <p className="text-sm text-orange-700">
                      部門：{selectedJudge.department}
                    </p>
                  </div>
                </div>
              </div>

              <div className="text-sm text-gray-600 space-y-1">
                <p>⚠️ 停用評審將會：</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>評審無法參與新的競賽評分</li>
                  <li>已完成的評分記錄會保留</li>
                  <li>可以隨時重新啟用</li>
                  <li>評審資料不會遺失</li>
                </ul>
              </div>
            </div>
          )}

          <div className="flex justify-end space-x-3 pt-4">
            <Button 
              variant="outline" 
              onClick={() => {
                setShowDisableJudgeConfirm(false)
                setSelectedJudge(null)
              }}
              disabled={isLoading}
            >
              取消
            </Button>
            <Button 
              variant="destructive" 
              onClick={confirmDisableJudge}
              disabled={isLoading}
              className="bg-orange-600 hover:bg-orange-700"
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  停用中...
                </>
              ) : (
                <>
                  <UserX className="w-4 h-4 mr-2" />
                  確認停用
                </>
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* 刪除評審確認對話框 */}
      <Dialog open={showDeleteJudgeConfirm} onOpenChange={setShowDeleteJudgeConfirm}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center space-x-2 text-red-600">
              <AlertTriangle className="w-5 h-5" />
              <span>確認刪除評審</span>
            </DialogTitle>
            <DialogDescription>
              此操作無法撤銷，評審將被永久刪除。
            </DialogDescription>
          </DialogHeader>
          
          {selectedJudge && (
            <div className="space-y-4">
              <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
                <div className="flex items-start space-x-3">
                  <Avatar className="w-12 h-12">
                    <AvatarFallback className="bg-red-100 text-red-600">
                      {selectedJudge.name.charAt(0)}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <h4 className="font-medium text-red-900">{selectedJudge.name}</h4>
                    <p className="text-sm text-red-700 mt-1">
                      職稱：{selectedJudge.title}
                    </p>
                    <p className="text-sm text-red-700">
                      部門：{selectedJudge.department}
                    </p>
                    <p className="text-sm text-red-700">
                      專業領域：{selectedJudge.expertise?.length || 0} 個
                    </p>
                  </div>
                </div>
              </div>

              <div className="text-sm text-gray-600 space-y-1">
                <p>⚠️ 刪除評審將會：</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>永久移除評審的所有資料</li>
                  <li>移除該評審的所有評分記錄</li>
                  <li>從所有競賽中移除此評審</li>
                  <li>無法復原任何相關資訊</li>
                </ul>
              </div>
            </div>
          )}

          <div className="flex justify-end space-x-3 pt-4">
            <Button 
              variant="outline" 
              onClick={() => {
                setShowDeleteJudgeConfirm(false)
                setSelectedJudge(null)
              }}
              disabled={isLoading}
            >
              取消
            </Button>
            <Button 
              variant="destructive" 
              onClick={confirmDeleteJudge}
              disabled={isLoading}
              className="bg-red-600 hover:bg-red-700"
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  刪除中...
                </>
              ) : (
                <>
                  <Trash2 className="w-4 h-4 mr-2" />
                  確認刪除
                </>
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* 創建獎項對話框 */}
      <Dialog open={showCreateAward} onOpenChange={setShowCreateAward}>
        <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center space-x-2">
              <Award className="w-6 h-6 text-orange-600" />
              <span>{selectedAward ? "編輯獎項" : "創建獎項"}</span>
            </DialogTitle>
            <DialogDescription>
              {selectedAward ? "修改獎項資訊，更新相關競賽、團隊和評審資訊" : "為競賽參賽者創建獎項，系統將自動關聯相關競賽、團隊和評審資訊"}
            </DialogDescription>
          </DialogHeader>

          <Tabs defaultValue="basic" className="w-full">
            <TabsList className="grid w-full grid-cols-5">
              <TabsTrigger value="basic">基本資訊</TabsTrigger>
              <TabsTrigger value="participants">參賽者</TabsTrigger>
              <TabsTrigger value="links">應用連結</TabsTrigger>
              <TabsTrigger value="documents">相關文檔</TabsTrigger>
              <TabsTrigger value="photos">得獎照片</TabsTrigger>
            </TabsList>

            {/* 基本資訊 */}
            <TabsContent value="basic" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {/* 競賽選擇 */}
                <div className="space-y-2">
                  <Label htmlFor="award-competition">
                    選擇競賽 <span className="text-red-500">*</span>
                  </Label>
                  <Select
                    value={newAward.competitionId}
                    onValueChange={(value) => {
                      setNewAward({ ...newAward, competitionId: value, participantId: "" })
                    }}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="選擇競賽" />
                    </SelectTrigger>
                    <SelectContent>
                      {competitions.map((competition) => (
                        <SelectItem key={competition.id} value={competition.id}>
                          <div className="flex flex-col">
                            <span className="font-medium">{competition.name}</span>
                            <span className="text-xs text-gray-500">
                              {competition.year}年{competition.month}月 • {competition.type === "individual" ? "個人賽" : competition.type === "team" ? "團體賽" : "混合賽"}
                            </span>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                {/* 獎項名稱 */}
                <div className="space-y-2">
                  <Label htmlFor="award-name">
                    獎項名稱 <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="award-name"
                    value={newAward.awardName}
                    onChange={(e) => setNewAward({ ...newAward, awardName: e.target.value })}
                    placeholder="例如：最佳創新獎、金獎、銀獎"
                  />
                </div>

                {/* 獎項類型 */}
                <div className="space-y-2">
                  <Label>獎項類型</Label>
                  <Select
                    value={newAward.awardType}
                    onValueChange={(value: any) => setNewAward({ ...newAward, awardType: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="gold">🥇 金獎</SelectItem>
                      <SelectItem value="silver">🥈 銀獎</SelectItem>
                      <SelectItem value="bronze">🥉 銅獎</SelectItem>
                      <SelectItem value="popular">👥 人氣獎</SelectItem>
                      <SelectItem value="innovation">💡 創新獎</SelectItem>
                      <SelectItem value="technical">⚙️ 技術獎</SelectItem>
                      <SelectItem value="custom">🏆 自定義獎項</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                {/* 獎項類別 */}
                <div className="space-y-2">
                  <Label>獎項類別</Label>
                  <Select
                    value={newAward.category}
                    onValueChange={(value: any) => setNewAward({ ...newAward, category: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="innovation">創新類</SelectItem>
                      <SelectItem value="technical">技術類</SelectItem>
                      <SelectItem value="practical">實用類</SelectItem>
                      <SelectItem value="popular">人氣類</SelectItem>
                      <SelectItem value="teamwork">團隊合作類</SelectItem>
                      <SelectItem value="solution">解決方案類</SelectItem>
                      <SelectItem value="creativity">創意類</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                {/* 獎項排名 */}
                <div className="space-y-2">
                  <Label>獎項排名</Label>
                  <Select
                    value={newAward.rank.toString()}
                    onValueChange={(value) => setNewAward({ ...newAward, rank: parseInt(value) })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="0">非排名獎項</SelectItem>
                      <SelectItem value="1">第一名</SelectItem>
                      <SelectItem value="2">第二名</SelectItem>
                      <SelectItem value="3">第三名</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                {/* 評分 */}
                <div className="space-y-2">
                  <Label>評審評分</Label>
                  <Input
                    type="number"
                    min="0"
                    max="5"
                    step="0.1"
                    value={newAward.score}
                    onChange={(e) => setNewAward({ ...newAward, score: parseFloat(e.target.value) || 0 })}
                    placeholder="0.0 - 5.0"
                  />
                  <p className="text-xs text-gray-500">滿分5.0分，將顯示在獎項詳情中</p>
                </div>
              </div>

              {/* 獎項描述 */}
              <div className="space-y-2">
                <Label>獎項描述</Label>
                <Textarea
                  value={newAward.description}
                  onChange={(e) => setNewAward({ ...newAward, description: e.target.value })}
                  placeholder="描述此獎項的意義、評選標準或特殊說明..."
                  rows={3}
                />
              </div>

              {/* 評審評語 */}
              <div className="space-y-2">
                <Label>評審評語</Label>
                <Textarea
                  value={newAward.judgeComments}
                  onChange={(e) => setNewAward({ ...newAward, judgeComments: e.target.value })}
                  placeholder="評審團對此作品的整體評語和建議..."
                  rows={3}
                />
              </div>

              {/* 競賽資訊預覽 */}
              {newAward.competitionId && (() => {
                const selectedCompetition = competitions.find(c => c.id === newAward.competitionId)
                if (!selectedCompetition) return null

                return (
                  <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <h4 className="font-medium text-blue-900 mb-2">競賽資訊預覽</h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                      <div><span className="font-medium">競賽名稱：</span>{selectedCompetition.name}</div>
                      <div><span className="font-medium">競賽類型：</span>{selectedCompetition.type === "individual" ? "個人賽" : selectedCompetition.type === "team" ? "團體賽" : "混合賽"}</div>
                      <div><span className="font-medium">競賽期間：</span>{selectedCompetition.startDate} ~ {selectedCompetition.endDate}</div>
                      <div><span className="font-medium">評審團：</span>{judges.filter(j => selectedCompetition.judges?.includes(j.id)).length} 位評審</div>
                    </div>
                  </div>
                )
              })()}
            </TabsContent>

            {/* 參賽者選擇 */}
            <TabsContent value="participants" className="space-y-4">
              {newAward.competitionId ? (() => {
                const selectedCompetition = competitions.find(c => c.id === newAward.competitionId)
                if (!selectedCompetition) return <p className="text-gray-500">請先選擇競賽</p>

                return (
                  <div className="space-y-4">
                    {/* 參賽者類型選擇 */}
                    {selectedCompetition.type === "mixed" && (
                      <div className="space-y-2">
                        <Label>參賽者類型</Label>
                        <div className="flex space-x-2">
                          <Button
                            type="button"
                            variant={newAward.participantType === "individual" ? "default" : "outline"}
                            onClick={() => setNewAward({ ...newAward, participantType: "individual", participantId: "" })}
                          >
                            個人參賽
                          </Button>
                          <Button
                            type="button"
                            variant={newAward.participantType === "team" ? "default" : "outline"}
                            onClick={() => setNewAward({ ...newAward, participantType: "team", participantId: "" })}
                          >
                            團隊參賽
                          </Button>
                        </div>
                      </div>
                    )}

                    {/* 參賽者選擇 */}
                    <div className="space-y-2">
                      <Label>
                        選擇{newAward.participantType === "individual" ? "個人" : "團隊"}參賽者 <span className="text-red-500">*</span>
                      </Label>
                      <Select
                        value={newAward.participantId}
                        onValueChange={(value) => setNewAward({ ...newAward, participantId: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder={`選擇${newAward.participantType === "individual" ? "個人" : "團隊"}參賽者`} />
                        </SelectTrigger>
                        <SelectContent>
                          {newAward.participantType === "individual" ? (
                            // 這裡應該從 mockIndividualApps 獲取，暫時用示例數據
                            [
                              { id: "app1", name: "智能客服系統", creator: "張小明", department: "ITBU" },
                              { id: "app2", name: "數據分析平台", creator: "李美華", department: "研發部" },
                            ].map((app) => (
                              <SelectItem key={app.id} value={app.id}>
                                <div className="flex flex-col">
                                  <span className="font-medium">{app.name}</span>
                                  <span className="text-xs text-gray-500">by {app.creator} • {app.department}</span>
                                </div>
                              </SelectItem>
                            ))
                          ) : (
                            (dbTeams.length > 0 ? dbTeams : teams).map((team) => (
                              <SelectItem key={team.id} value={team.id}>
                                <div className="flex flex-col">
                                  <span className="font-medium">{team.name}</span>
                                  <span className="text-xs text-gray-500">隊長：{team.leader} • {team.department} • {team.memberCount}人</span>
                                </div>
                              </SelectItem>
                            ))
                          )}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* 參賽者資訊預覽 */}
                    {newAward.participantId && (() => {
                      if (newAward.participantType === "individual") {
                        const app = [
                          { id: "app1", name: "智能客服系統", creator: "張小明", department: "ITBU", description: "基於AI的智能客服解決方案" },
                          { id: "app2", name: "數據分析平台", creator: "李美華", department: "研發部", description: "企業級數據分析和視覺化平台" },
                        ].find(a => a.id === newAward.participantId)
                        
                        if (!app) return null

                        return (
                          <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
                            <h4 className="font-medium text-green-900 mb-2">個人參賽者資訊</h4>
                            <div className="space-y-2 text-sm">
                              <div><span className="font-medium">應用名稱：</span>{app.name}</div>
                              <div><span className="font-medium">創作者：</span>{app.creator}</div>
                              <div><span className="font-medium">所屬部門：</span>{app.department}</div>
                              <div><span className="font-medium">應用描述：</span>{app.description}</div>
                            </div>
                          </div>
                        )
                      } else {
                        const team = (dbTeams.length > 0 ? dbTeams : teams).find(t => t.id === newAward.participantId)
                        if (!team) return null

                        return (
                          <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
                            <h4 className="font-medium text-green-900 mb-2">團隊參賽者資訊</h4>
                            <div className="space-y-2 text-sm">
                              <div><span className="font-medium">團隊名稱：</span>{team.name}</div>
                              <div><span className="font-medium">隊長：</span>{team.leader}</div>
                              <div><span className="font-medium">所屬部門：</span>{team.department}</div>
                              <div><span className="font-medium">團隊人數：</span>{team.memberCount}人</div>
                              <div><span className="font-medium">提交應用：</span>{team.submittedAppCount}個</div>
                              <div><span className="font-medium">聯絡信箱：</span>{team.contactEmail}</div>
                            </div>
                          </div>
                        )
                      }
                    })()}

                    {/* 評審團資訊 */}
                    <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
                      <h4 className="font-medium text-purple-900 mb-2">競賽評審團</h4>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                        {(dbJudges.length > 0 ? dbJudges : judges).filter(judge => selectedCompetition.judges?.includes(judge.id)).map((judge) => (
                          <div key={judge.id} className="flex items-center space-x-2 text-sm">
                            <Avatar className="w-6 h-6">
                              <AvatarFallback className="text-xs bg-purple-100 text-purple-600">
                                {judge.name.charAt(0)}
                              </AvatarFallback>
                            </Avatar>
                            <div>
                              <span className="font-medium">{judge.name}</span>
                              <span className="text-gray-500 ml-1">• {judge.department}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                )
              })() : (
                <div className="text-center py-8 text-gray-500">
                  <Trophy className="w-12 h-12 mx-auto mb-4 text-gray-300" />
                  <p>請先在「基本資訊」頁面選擇競賽</p>
                </div>
              )}
            </TabsContent>

            {/* 應用連結 */}
            <TabsContent value="links" className="space-y-4">
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  {/* 正式應用 */}
                  <div className="space-y-2">
                    <Label className="flex items-center space-x-2">
                      <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                      <span>正式應用</span>
                    </Label>
                    <Input
                      value={newAward.applicationLinks.production}
                      onChange={(e) => setNewAward({
                        ...newAward,
                        applicationLinks: { ...newAward.applicationLinks, production: e.target.value }
                      })}
                      placeholder="https://app.example.com"
                    />
                    <p className="text-xs text-gray-500">生產環境應用連結</p>
                  </div>

                  {/* 演示版本 */}
                  <div className="space-y-2">
                    <Label className="flex items-center space-x-2">
                      <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                      <span>演示版本</span>
                    </Label>
                    <Input
                      value={newAward.applicationLinks.demo}
                      onChange={(e) => setNewAward({
                        ...newAward,
                        applicationLinks: { ...newAward.applicationLinks, demo: e.target.value }
                      })}
                      placeholder="https://demo.example.com"
                    />
                    <p className="text-xs text-gray-500">體驗環境連結</p>
                  </div>

                  {/* GitHub */}
                  <div className="space-y-2">
                    <Label className="flex items-center space-x-2">
                      <div className="w-3 h-3 bg-gray-800 rounded-full"></div>
                      <span>源碼倉庫</span>
                    </Label>
                    <Input
                      value={newAward.applicationLinks.github}
                      onChange={(e) => setNewAward({
                        ...newAward,
                        applicationLinks: { ...newAward.applicationLinks, github: e.target.value }
                      })}
                      placeholder="https://github.com/..."
                    />
                    <p className="text-xs text-gray-500">GitHub 或其他代碼倉庫</p>
                  </div>
                </div>

                {/* 連結預覽 */}
                <div className="p-4 bg-gray-50 border border-gray-200 rounded-lg">
                  <h4 className="font-medium text-gray-900 mb-3">應用連結預覽</h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {newAward.applicationLinks.production && (
                      <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
                        <div className="flex items-center space-x-2 mb-2">
                          <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
                            <span className="text-white text-xs">✓</span>
                          </div>
                          <span className="text-sm font-medium">正式應用</span>
                        </div>
                        <p className="text-xs text-gray-600 break-all">{newAward.applicationLinks.production}</p>
                      </div>
                    )}

                    {newAward.applicationLinks.demo && (
                      <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
                        <div className="flex items-center space-x-2 mb-2">
                          <div className="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
                            <span className="text-white text-xs">▶</span>
                          </div>
                          <span className="text-sm font-medium">演示版本</span>
                        </div>
                        <p className="text-xs text-gray-600 break-all">{newAward.applicationLinks.demo}</p>
                      </div>
                    )}

                    {newAward.applicationLinks.github && (
                      <div className="p-3 bg-gray-50 border border-gray-300 rounded-lg">
                        <div className="flex items-center space-x-2 mb-2">
                          <div className="w-4 h-4 bg-gray-800 rounded-full flex items-center justify-center">
                            <span className="text-white text-xs">⚡</span>
                          </div>
                          <span className="text-sm font-medium">源碼倉庫</span>
                        </div>
                        <p className="text-xs text-gray-600 break-all">{newAward.applicationLinks.github}</p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </TabsContent>

            {/* 相關文檔 */}
            <TabsContent value="documents" className="space-y-4">
              <div className="space-y-4">
                {/* 文檔上傳區域 */}
                <div className="p-6 border-2 border-dashed border-gray-300 rounded-lg text-center">
                  <Upload className="w-12 h-12 mx-auto mb-4 text-gray-400" />
                  <h4 className="text-lg font-medium text-gray-900 mb-2">上傳相關文檔</h4>
                  <p className="text-gray-600 mb-4">支持 PDF、DOC、DOCX、PPTX 等格式，單檔最大 10MB</p>
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      // 模擬文檔上傳
                      const newDoc = {
                        id: `doc_${Date.now()}`,
                        name: `示例文檔_${newAward.documents.length + 1}.pdf`,
                        type: "PDF",
                        size: "2.5 MB",
                        uploadDate: new Date().toISOString().split("T")[0],
                        url: "#"
                      }
                      setNewAward({
                        ...newAward,
                        documents: [...newAward.documents, newDoc]
                      })
                    }}
                  >
                    <Upload className="w-4 h-4 mr-2" />
                    選擇文檔
                  </Button>
                </div>

                {/* 已上傳文檔列表 */}
                {newAward.documents.length > 0 && (
                  <div className="space-y-3">
                    <h4 className="font-medium text-gray-900">已上傳文檔</h4>
                    {newAward.documents.map((doc) => (
                      <div key={doc.id} className="flex items-center justify-between p-3 bg-gray-50 border border-gray-200 rounded-lg">
                        <div className="flex items-center space-x-3">
                          <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                            <span className="text-xs font-medium text-red-600">{doc.type}</span>
                          </div>
                          <div>
                            <p className="font-medium text-gray-900">{doc.name}</p>
                            <p className="text-xs text-gray-500">
                              大小：{doc.size} • 上傳：{doc.uploadDate}
                            </p>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Button variant="outline" size="sm">
                            <Eye className="w-4 h-4 mr-1" />
                            預覽
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              setNewAward({
                                ...newAward,
                                documents: newAward.documents.filter(d => d.id !== doc.id)
                              })
                            }}
                            className="text-red-600 border-red-300 hover:bg-red-50"
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}

                {/* 常見文檔類型模板 */}
                <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                  <h4 className="font-medium text-blue-900 mb-3">建議上傳的文檔類型</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
                      <span>技術報告書 (詳細技術實現和架構設計)</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
                      <span>用戶手冊 (操作指南和功能說明)</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
                      <span>演示簡報 (競賽現場使用的簡報資料)</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
                      <span>測試報告 (性能測試和用戶體驗測試結果)</span>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>

            {/* 得獎照片 */}
            <TabsContent value="photos" className="space-y-4">
              <div className="space-y-4">
                {/* 照片上傳區域 */}
                <div className="p-6 border-2 border-dashed border-gray-300 rounded-lg text-center">
                  <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-lg flex items-center justify-center">
                    📸
                  </div>
                  <h4 className="text-lg font-medium text-gray-900 mb-2">上傳得獎照片</h4>
                  <p className="text-gray-600 mb-4">支持 JPG、PNG、GIF 等格式，建議尺寸 1920x1080，單檔最大 5MB</p>
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => {
                      // 模擬照片上傳
                      const newPhoto = {
                        id: `photo_${Date.now()}`,
                        name: `得獎照片_${newAward.photos.length + 1}.jpg`,
                        url: "/placeholder.jpg", // 實際應用中會是真實的圖片URL
                        caption: "",
                        uploadDate: new Date().toISOString().split("T")[0],
                        size: "2.5 MB"
                      }
                      setNewAward({
                        ...newAward,
                        photos: [...newAward.photos, newPhoto]
                      })
                    }}
                  >
                    <Upload className="w-4 h-4 mr-2" />
                    選擇照片
                  </Button>
                </div>

                {/* 已上傳照片預覽 */}
                {newAward.photos.length > 0 && (
                  <div className="space-y-4">
                    <h4 className="font-medium text-gray-900">已上傳照片 ({newAward.photos.length})</h4>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                      {newAward.photos.map((photo) => (
                        <div key={photo.id} className="relative group border border-gray-200 rounded-lg overflow-hidden">
                          {/* 照片預覽 */}
                          <div className="aspect-video bg-gray-100 flex items-center justify-center">
                            <div className="text-4xl">🖼️</div>
                          </div>
                          
                          {/* 照片資訊 */}
                          <div className="p-3 space-y-2">
                            <div className="flex items-center justify-between">
                              <span className="text-sm font-medium text-gray-900 truncate">{photo.name}</span>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => {
                                  setNewAward({
                                    ...newAward,
                                    photos: newAward.photos.filter(p => p.id !== photo.id)
                                  })
                                }}
                                className="text-red-600 hover:bg-red-50 h-6 w-6 p-0"
                              >
                                <Trash2 className="w-3 h-3" />
                              </Button>
                            </div>
                            
                            <div className="text-xs text-gray-500">
                              大小：{photo.size} • {photo.uploadDate}
                            </div>
                            
                            {/* 照片說明 */}
                            <Input
                              placeholder="輸入照片說明..."
                              value={photo.caption}
                              onChange={(e) => {
                                const updatedPhotos = newAward.photos.map(p => 
                                  p.id === photo.id ? { ...p, caption: e.target.value } : p
                                )
                                setNewAward({ ...newAward, photos: updatedPhotos })
                              }}
                              className="text-xs"
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* 照片說明指南 */}
                <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
                  <h4 className="font-medium text-amber-900 mb-3">得獎照片拍攝建議</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm text-amber-800">
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-amber-500 rounded-full"></span>
                      <span>頒獎典禮現場照片</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-amber-500 rounded-full"></span>
                      <span>得獎者與評審合影</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-amber-500 rounded-full"></span>
                      <span>獎盃或證書特寫</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-amber-500 rounded-full"></span>
                      <span>團隊慶祝瞬間</span>
                    </div>
                  </div>
                </div>

                {/* 照片展示效果預覽 */}
                {newAward.photos.length > 0 && (
                  <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <h4 className="font-medium text-blue-900 mb-3">前台展示效果預覽</h4>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                      {newAward.photos.slice(0, 4).map((photo, index) => (
                        <div key={photo.id} className="aspect-video bg-blue-100 rounded border flex items-center justify-center text-xs text-blue-600">
                          照片 {index + 1}
                        </div>
                      ))}
                      {newAward.photos.length > 4 && (
                        <div className="aspect-video bg-blue-100 rounded border flex items-center justify-center text-xs text-blue-600">
                          +{newAward.photos.length - 4}
                        </div>
                      )}
                    </div>
                    <p className="text-xs text-blue-700 mt-2">
                      {newAward.photos.length > 4 
                        ? "前台將顯示前4張照片，用戶可點擊「查看所有照片」查看完整相簿" 
                        : "前台將顯示所有上傳的照片"}
                    </p>
                  </div>
                )}
              </div>
            </TabsContent>
          </Tabs>

          {error && (
            <Alert variant="destructive">
              <AlertTriangle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <div className="flex justify-end space-x-3 pt-4 border-t">
            <Button variant="outline" onClick={() => {
              setShowCreateAward(false)
              setSelectedAward(null)
              setNewAward({
                competitionId: "",
                participantId: "",
                participantType: "individual",
                awardType: "custom",
                awardName: "",
                customAwardTypeId: "",
                description: "",
                score: 0,
                category: "innovation",
                rank: 0,
                applicationLinks: {
                  production: "",
                  demo: "",
                  github: "",
                },
                documents: [],
                judgeComments: "",
                photos: [],
              })
            }} disabled={isLoading}>
              取消
            </Button>
            <Button onClick={handleCreateAward} disabled={isLoading} className="bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700">
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  {selectedAward ? "更新中..." : "創建中..."}
                </>
              ) : (
                <>
                  <Award className="w-4 h-4 mr-2" />
                  {selectedAward ? "更新獎項" : "創建獎項"}
                </>
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* 查看獎項詳情對話框 */}
      <Dialog open={showAwardDetail} onOpenChange={setShowAwardDetail}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center space-x-2">
              <Award className="w-6 h-6 text-orange-600" />
              <span>獎項詳情</span>
            </DialogTitle>
            <DialogDescription>
              查看獎項的完整資訊和相關資料
            </DialogDescription>
          </DialogHeader>

          {selectedAward && (
            <div className="space-y-6">
              {/* 獎項基本資訊卡片 */}
              <div className="flex items-start space-x-4 p-4 bg-gradient-to-r from-orange-50 to-amber-50 rounded-lg border">
                <div className="w-16 h-16 bg-gradient-to-r from-orange-600 to-amber-600 rounded-xl flex items-center justify-center flex-shrink-0 text-2xl">
                  {selectedAward.icon}
                </div>
                <div className="flex-1 space-y-3">
                  <div>
                    <h3 className="text-xl font-bold text-gray-900">{selectedAward.awardName}</h3>
                    <p className="text-gray-600 mt-1">
                      {selectedAward.appName || "團隊作品"} • by {selectedAward.creator}
                    </p>
                  </div>
                  <div className="flex items-center space-x-3">
                    <Badge 
                      variant="secondary"
                      className={`${
                        selectedAward.awardType === "gold"
                          ? "bg-yellow-100 text-yellow-800"
                          : selectedAward.awardType === "silver"
                            ? "bg-gray-100 text-gray-800"
                            : selectedAward.awardType === "bronze"
                              ? "bg-orange-100 text-orange-800"
                              : selectedAward.awardType === "popular"
                                ? "bg-purple-100 text-purple-800"
                                : selectedAward.awardType === "innovation"
                                  ? "bg-green-100 text-green-800"
                                  : selectedAward.awardType === "technical"
                                    ? "bg-indigo-100 text-indigo-800"
                                    : "bg-blue-100 text-blue-800"
                      }`}
                    >
                      {selectedAward.awardType}
                    </Badge>
                    <Badge variant="outline">
                      {(selectedAward as any).category || "innovation"}
                    </Badge>
                    {selectedAward.rank > 0 && (
                      <Badge variant="outline" className="bg-amber-50 text-amber-700">
                        第 {selectedAward.rank} 名
                      </Badge>
                    )}
                    {selectedAward.score > 0 && (
                      <div className="flex items-center space-x-1">
                        <Star className="w-4 h-4 text-yellow-500 fill-current" />
                        <span className="font-semibold text-orange-600">{selectedAward.score.toFixed(1)}</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>

              {/* 基本資訊 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <h4 className="text-lg font-semibold text-gray-900">基本資訊</h4>
                  <div className="space-y-3">
                    <div>
                      <Label className="text-sm font-medium text-gray-700">獎項ID</Label>
                      <p className="text-sm text-gray-900">{selectedAward.id}</p>
                    </div>
                    <div>
                      <Label className="text-sm font-medium text-gray-700">頒獎時間</Label>
                      <p className="text-sm text-gray-900">{selectedAward.year}年{selectedAward.month}月</p>
                    </div>
                    <div>
                      <Label className="text-sm font-medium text-gray-700">競賽類型</Label>
                      <p className="text-sm text-gray-900">
                        {selectedAward.competitionType === "individual" ? "個人賽" : "團體賽"}
                      </p>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="text-lg font-semibold text-gray-900">競賽資訊</h4>
                  <div className="space-y-3">
                    <div>
                      <Label className="text-sm font-medium text-gray-700">競賽名稱</Label>
                      <p className="text-sm text-gray-900">
                        {competitions.find(c => c.id === selectedAward.competitionId)?.name || "未知競賽"}
                      </p>
                    </div>
                    <div>
                      <Label className="text-sm font-medium text-gray-700">評審團</Label>
                      <div className="flex items-center space-x-2 mt-1">
                        {(() => {
                          const competition = competitions.find(c => c.id === selectedAward.competitionId)
                          const competitionJudges = judges.filter(j => competition?.judges?.includes(j.id))
                          return competitionJudges.slice(0, 3).map((judge) => (
                            <Avatar key={judge.id} className="w-6 h-6">
                              <AvatarFallback className="text-xs bg-orange-100 text-orange-600">
                                {judge.name.charAt(0)}
                              </AvatarFallback>
                            </Avatar>
                          ))
                        })()}
                        {(() => {
                          const competition = competitions.find(c => c.id === selectedAward.competitionId)
                          const competitionJudges = judges.filter(j => competition?.judges?.includes(j.id))
                          if (competitionJudges.length > 3) {
                            return <span className="text-xs text-gray-500">+{competitionJudges.length - 3}</span>
                          }
                          return null
                        })()}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* 獎項描述 */}
              {(selectedAward as any).description && (
                <div className="space-y-3">
                  <h4 className="text-lg font-semibold text-gray-900">獎項描述</h4>
                  <p className="text-gray-700 leading-relaxed">{(selectedAward as any).description}</p>
                </div>
              )}

              {/* 評審評語 */}
              {(selectedAward as any).judgeComments && (
                <div className="space-y-3">
                  <h4 className="text-lg font-semibold text-gray-900">評審評語</h4>
                  <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <p className="text-blue-900 leading-relaxed">{(selectedAward as any).judgeComments}</p>
                  </div>
                </div>
              )}

              {/* 應用連結 */}
              {(selectedAward as any).applicationLinks && (
                <div className="space-y-3">
                  <h4 className="text-lg font-semibold text-gray-900">應用連結</h4>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {(selectedAward as any).applicationLinks.production && (
                      <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
                        <div className="flex items-center space-x-2 mb-2">
                          <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                          <span className="text-sm font-medium text-green-900">正式應用</span>
                        </div>
                        <p className="text-xs text-green-700 break-all">
                          {(selectedAward as any).applicationLinks.production}
                        </p>
                      </div>
                    )}
                    {(selectedAward as any).applicationLinks.demo && (
                      <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
                        <div className="flex items-center space-x-2 mb-2">
                          <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                          <span className="text-sm font-medium text-blue-900">演示版本</span>
                        </div>
                        <p className="text-xs text-blue-700 break-all">
                          {(selectedAward as any).applicationLinks.demo}
                        </p>
                      </div>
                    )}
                    {(selectedAward as any).applicationLinks.github && (
                      <div className="p-3 bg-gray-50 border border-gray-300 rounded-lg">
                        <div className="flex items-center space-x-2 mb-2">
                          <div className="w-3 h-3 bg-gray-800 rounded-full"></div>
                          <span className="text-sm font-medium text-gray-900">源碼倉庫</span>
                        </div>
                        <p className="text-xs text-gray-700 break-all">
                          {(selectedAward as any).applicationLinks.github}
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              )}

              {/* 相關文檔 */}
              {(selectedAward as any).documents && (selectedAward as any).documents.length > 0 && (
                <div className="space-y-3">
                  <h4 className="text-lg font-semibold text-gray-900">相關文檔</h4>
                  <div className="space-y-2">
                    {(selectedAward as any).documents.map((doc: any) => (
                      <div key={doc.id} className="flex items-center space-x-3 p-3 bg-gray-50 border border-gray-200 rounded-lg">
                        <div className="w-8 h-8 bg-red-100 rounded flex items-center justify-center">
                          <span className="text-xs font-medium text-red-600">{doc.type}</span>
                        </div>
                        <div className="flex-1">
                          <p className="text-sm font-medium text-gray-900">{doc.name}</p>
                          <p className="text-xs text-gray-500">大小：{doc.size} • {doc.uploadDate}</p>
                        </div>
                        <Button variant="outline" size="sm">
                          <Eye className="w-3 h-3 mr-1" />
                          預覽
                        </Button>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* 得獎照片 */}
              {(selectedAward as any).photos && (selectedAward as any).photos.length > 0 && (
                <div className="space-y-3">
                  <h4 className="text-lg font-semibold text-gray-900">得獎照片</h4>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    {(selectedAward as any).photos.map((photo: any) => (
                      <div key={photo.id} className="space-y-2">
                        <div className="aspect-video bg-gray-100 rounded-lg border flex items-center justify-center">
                          <div className="text-2xl">🖼️</div>
                        </div>
                        {photo.caption && (
                          <p className="text-xs text-gray-600 text-center">{photo.caption}</p>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              )}

              <div className="flex justify-end space-x-3 pt-4 border-t">
                <Button variant="outline" onClick={() => setShowAwardDetail(false)}>
                  關閉
                </Button>
                <Button onClick={() => {
                  setShowAwardDetail(false)
                  handleEditAward(selectedAward)
                }} className="bg-gradient-to-r from-orange-600 to-amber-600 hover:from-orange-700 hover:to-amber-700">
                  <Edit className="w-4 h-4 mr-2" />
                  編輯獎項
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* 刪除獎項確認對話框 */}
      <Dialog open={showDeleteAwardConfirm} onOpenChange={setShowDeleteAwardConfirm}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center space-x-2 text-red-600">
              <AlertTriangle className="w-5 h-5" />
              <span>確認刪除獎項</span>
            </DialogTitle>
            <DialogDescription>
              此操作無法撤銷，請確認是否要刪除此獎項。
            </DialogDescription>
          </DialogHeader>

          {awardToDelete && (
            <div className="space-y-4">
              <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
                <div className="flex items-start space-x-3">
                  <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 text-lg">
                    {awardToDelete.icon}
                  </div>
                  <div className="flex-1">
                    <h4 className="font-medium text-red-900">{awardToDelete.awardName}</h4>
                    <p className="text-sm text-red-700 mt-1">
                      作品：{awardToDelete.appName || "團隊作品"}
                    </p>
                    <p className="text-sm text-red-700">
                      創作者：{awardToDelete.creator}
                    </p>
                    <p className="text-sm text-red-700">
                      頒獎時間：{awardToDelete.year}年{awardToDelete.month}月
                    </p>
                  </div>
                </div>
              </div>

              <div className="text-sm text-gray-600 space-y-1">
                <p>⚠️ 刪除獎項將會：</p>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>永久移除獎項的所有資料</li>
                  <li>移除所有相關的照片和文檔</li>
                  <li>移除獎項的評分記錄</li>
                  <li>從前台展示中移除此獎項</li>
                  <li>無法復原任何相關資訊</li>
                </ul>
              </div>
            </div>
          )}

          <div className="flex justify-end space-x-3 pt-4">
            <Button 
              variant="outline" 
              onClick={() => {
                setShowDeleteAwardConfirm(false)
                setAwardToDelete(null)
              }}
              disabled={isLoading}
            >
              取消
            </Button>
            <Button 
              variant="destructive" 
              onClick={confirmDeleteAward}
              disabled={isLoading}
              className="bg-red-600 hover:bg-red-700"
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  刪除中...
                </>
              ) : (
                <>
                  <Trash2 className="w-4 h-4 mr-2" />
                  確認刪除
                </>
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}