"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 fetchCurrentCompetition = async () => {
    try {
      const response = await fetch('/api/admin/competitions/current')
      const data = await response.json()
      if (data.success) {
        setCurrentCompetition(data.data)
      }
    } catch (error) {
      console.error('獲取當前競賽失敗:', error)
    }
  }

  // 設置當前競賽
  const setCurrentCompetitionInDb = async (competitionId: string) => {
    try {
      const response = await fetch('/api/admin/competitions/current', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ competitionId }),
      })
      const data = await response.json()
      if (data.success) {
        setCurrentCompetition(data.data)
        setSuccess('當前競賽設置成功！')
        setTimeout(() => setSuccess(''), 3000)
      } else {
        setError('設置當前競賽失敗: ' + data.message)
        setTimeout(() => setError(''), 3000)
      }
    } catch (error) {
      console.error('設置當前競賽失敗:', error)
      setError('設置當前競賽失敗')
      setTimeout(() => setError(''), 3000)
    }
  }

  // 取消當前競賽
  const clearCurrentCompetitionInDb = async () => {
    try {
      const response = await fetch('/api/admin/competitions/current', {
        method: 'DELETE',
      })
      const data = await response.json()
      if (data.success) {
        setCurrentCompetition(null)
        setSuccess('當前競賽已取消！')
        setTimeout(() => setSuccess(''), 3000)
      } else {
        setError('取消當前競賽失敗: ' + data.message)
        setTimeout(() => setError(''), 3000)
      }
    } catch (error) {
      console.error('取消當前競賽失敗:', error)
      setError('取消當前競賽失敗')
      setTimeout(() => setError(''), 3000)
    }
  }

  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 || []).map((member: any) => ({
            id: member.user_id || member.id,
            user_id: member.user_id || member.id,
            name: member.name,
            department: member.department,
            role: member.role || '成員'
          })),
          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()
    fetchCurrentCompetition()
    fetchCompetitionStats()
    fetchJudges()
    fetchJudgeStats()
    fetchTeams()
    fetchTeamStats()
    fetchAvailableApps()
  }, [])

  // 當競賽列表載入完成後，載入每個競賽的評分進度
  useEffect(() => {
    if (competitions.length > 0) {
      competitions.forEach(competition => {
        loadScoringProgress(competition.id);
      });
    }
  }, [competitions])

  // 当筛选条件改变时重置分页
  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 }[],
  })

  // 動態獎項類型狀態
  const [competitionAwardTypes, setCompetitionAwardTypes] = useState<any[]>([])
  const [loadingAwardTypes, setLoadingAwardTypes] = useState(false)

  // 動態參賽者狀態
  const [competitionApps, setCompetitionApps] = useState<any[]>([])
  const [competitionTeams, setCompetitionTeams] = useState<any[]>([])
  const [competitionJudges, setCompetitionJudges] = useState<any[]>([])
  const [loadingParticipants, setLoadingParticipants] = useState(false)

  // 文件上傳狀態
  const [uploadingFiles, setUploadingFiles] = useState(false)
  const [uploadProgress, setUploadProgress] = useState<{[key: string]: number}>({})

  // 照片上傳狀態
  const [uploadingPhotos, setUploadingPhotos] = useState(false)
  const [photoUploadProgress, setPhotoUploadProgress] = useState<{[key: string]: number}>({})

  // 日期格式化輔助函式
  const formatDate = (dateString: string | Date): string => {
    if (!dateString) return ''
    
    const date = new Date(dateString)
    if (isNaN(date.getTime())) return ''
    
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    
    return `${year}/${month}/${day}`
  }

  // 文件上傳處理函數
  const handleFileUpload = async (files: FileList) => {
    const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation']
    const maxSize = 10 * 1024 * 1024 // 10MB

    setUploadingFiles(true)
    const newDocuments = [...newAward.documents]

    for (let i = 0; i < files.length; i++) {
      const file = files[i]
      
      // 驗證文件類型
      if (!allowedTypes.includes(file.type)) {
        alert(`文件 ${file.name} 格式不支援，請上傳 PDF、DOC、DOCX、PPTX 格式的文件`)
        continue
      }

      // 驗證文件大小
      if (file.size > maxSize) {
        alert(`文件 ${file.name} 超過 10MB 限制`)
        continue
      }

      const fileId = `doc_${Date.now()}_${i}`
      setUploadProgress(prev => ({ ...prev, [fileId]: 0 }))

      try {
        // 創建 FormData
        const formData = new FormData()
        formData.append('file', file)
        formData.append('awardId', newAward.id || 'temp')

        // 上傳文件
        const response = await fetch('/api/upload/document', {
          method: 'POST',
          body: formData,
        })

        if (!response.ok) {
          throw new Error('文件上傳失敗')
        }

        const result = await response.json()
        
        // 添加文件到列表
        const getFileType = (mimeType: string) => {
          const typeMap: {[key: string]: string} = {
            'application/pdf': 'PDF',
            'application/msword': 'DOC',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'DOCX',
            'application/vnd.ms-powerpoint': 'PPT',
            'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PPTX'
          }
          return typeMap[mimeType] || file.type.split('/')[1].toUpperCase()
        }

        const newDoc = {
          id: fileId,
          name: file.name,
          type: getFileType(file.type),
          size: formatFileSize(file.size),
          uploadDate: new Date().toLocaleDateString('zh-TW'),
          url: result.url,
          originalName: file.name
        }

        newDocuments.push(newDoc)
        setUploadProgress(prev => ({ ...prev, [fileId]: 100 }))

      } catch (error) {
        console.error('文件上傳錯誤:', error)
        alert(`文件 ${file.name} 上傳失敗`)
        setUploadProgress(prev => ({ ...prev, [fileId]: 0 }))
      }
    }

    setNewAward({ ...newAward, documents: newDocuments })
    setUploadingFiles(false)
    setUploadProgress({})
  }

  // 格式化文件大小
  const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return '0 Bytes'
    const k = 1024
    const sizes = ['Bytes', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  // 刪除文件
  const handleRemoveDocument = (docId: string) => {
    setNewAward({
      ...newAward,
      documents: newAward.documents.filter(doc => doc.id !== docId)
    })
  }

  // 照片上傳處理函數
  const handlePhotoUpload = async (files: FileList) => {
    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp']
    const maxSize = 5 * 1024 * 1024 // 5MB

    setUploadingPhotos(true)
    const newPhotos = [...newAward.photos]

    for (let i = 0; i < files.length; i++) {
      const file = files[i]
      
      // 驗證文件類型
      if (!allowedTypes.includes(file.type)) {
        alert(`照片 ${file.name} 格式不支援，請上傳 JPG、PNG、GIF、WEBP 格式的照片`)
        continue
      }

      // 驗證文件大小
      if (file.size > maxSize) {
        alert(`照片 ${file.name} 超過 5MB 限制`)
        continue
      }

      const photoId = `photo_${Date.now()}_${i}`
      setPhotoUploadProgress(prev => ({ ...prev, [photoId]: 0 }))

      try {
        // 創建 FormData
        const formData = new FormData()
        formData.append('file', file)
        formData.append('awardId', newAward.id || 'temp')

        // 上傳照片
        const response = await fetch('/api/upload/photo', {
          method: 'POST',
          body: formData,
        })

        if (!response.ok) {
          throw new Error('照片上傳失敗')
        }

        const result = await response.json()
        
        // 添加照片到列表
        const newPhoto = {
          id: photoId,
          name: file.name,
          url: result.url,
          size: formatFileSize(file.size),
          uploadDate: new Date().toLocaleDateString('zh-TW'),
          caption: '',
          type: file.type.split('/')[1].toUpperCase(),
          originalName: file.name
        }

        newPhotos.push(newPhoto)
        setPhotoUploadProgress(prev => ({ ...prev, [photoId]: 100 }))

      } catch (error) {
        console.error('照片上傳錯誤:', error)
        alert(`照片 ${file.name} 上傳失敗`)
        setPhotoUploadProgress(prev => ({ ...prev, [photoId]: 0 }))
      }
    }

    setNewAward({ ...newAward, photos: newPhotos })
    setUploadingPhotos(false)
    setPhotoUploadProgress({})
  }

  // 刪除照片
  const handleRemovePhoto = (photoId: string) => {
    setNewAward({
      ...newAward,
      photos: newAward.photos.filter(photo => photo.id !== photoId)
    })
  }

  // 載入競賽獎項類型
  const loadCompetitionAwardTypes = async (competitionId: string) => {
    if (!competitionId) {
      setCompetitionAwardTypes([])
      return
    }

    setLoadingAwardTypes(true)
    try {
      const response = await fetch(`/api/admin/competitions/${competitionId}/award-types`)
      const data = await response.json()
      
      if (data.success) {
        setCompetitionAwardTypes(data.data)
        // 如果有獎項類型，預設選擇第一個
        if (data.data.length > 0) {
          setNewAward(prev => ({
            ...prev,
            awardType: 'custom',
            customAwardTypeId: data.data[0].id
          }))
        }
      } else {
        console.error('載入獎項類型失敗:', data.message)
        setCompetitionAwardTypes([])
      }
    } catch (error) {
      console.error('載入獎項類型失敗:', error)
      setCompetitionAwardTypes([])
    } finally {
      setLoadingAwardTypes(false)
    }
  }

  // 載入競賽參賽者和評審
  const loadCompetitionParticipants = async (competitionId: string) => {
    if (!competitionId) {
      setCompetitionApps([])
      setCompetitionTeams([])
      setCompetitionJudges([])
      return
    }

    setLoadingParticipants(true)
    try {
      // 並行載入參賽應用、參賽團隊和評審
      const [appsResponse, teamsResponse, judgesResponse] = await Promise.all([
        fetch(`/api/admin/competitions/${competitionId}/apps`),
        fetch(`/api/admin/competitions/${competitionId}/teams`),
        fetch(`/api/admin/competitions/${competitionId}/judges`)
      ])

      const [appsData, teamsData, judgesData] = await Promise.all([
        appsResponse.json(),
        teamsResponse.json(),
        judgesResponse.json()
      ])

      if (appsData.success) {
        setCompetitionApps(appsData.data)
      } else {
        console.error('載入參賽應用失敗:', appsData.message)
        setCompetitionApps([])
      }

      if (teamsData.success) {
        console.log('✅ 載入參賽團隊成功:', teamsData.data)
        setCompetitionTeams(teamsData.data)
      } else {
        console.error('❌ 載入參賽團隊失敗:', teamsData.message)
        setCompetitionTeams([])
      }

      if (judgesData.success) {
        setCompetitionJudges(judgesData.data)
      } else {
        console.error('載入評審失敗:', judgesData.message)
        setCompetitionJudges([])
      }
    } catch (error) {
      console.error('載入參賽者失敗:', error)
      setCompetitionApps([])
      setCompetitionTeams([])
      setCompetitionJudges([])
    } finally {
      setLoadingParticipants(false)
    }
  }

  // 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 availableApps
      case "team":
        // 總是使用 dbTeams，如果為空則返回空數組
        return dbTeams
      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
    }

    const filtered = participants.filter((participant) => {
      const searchField = competitionType === "team" ? participant.name : participant.name
      const creatorField = competitionType === "team" ? (participant.leader_name || participant.leader) : (participant.creator_name || participant.creator_id || participant.creator)

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

    console.log('🔍 getFilteredParticipants 結果:', { 
      competitionType, 
      filteredLength: filtered.length,
      filtered: filtered.slice(0, 2).map(f => ({
        id: f.id,
        name: f.name,
        leader_name: f.leader_name,
        leader: f.leader,
        member_count: f.member_count,
        submissionDate: f.submissionDate
      }))
    })

    return filtered
  }

  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 = calculateTotalWeight(newCompetition.individualConfig.rules)
          if (Math.abs(individualTotalWeight - 100) > 0.01) {
            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 = calculateTotalWeight(newCompetition.teamConfig.rules)
          if (Math.abs(teamTotalWeight - 100) > 0.01) {
            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 = calculateTotalWeight(newCompetition.rules)
        if (Math.abs(totalWeight - 100) > 0.01) {
          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: any = {
          name: newTeam.name,
          leader_id: leaderId,
          department: newTeam.department,
          contact_email: newTeam.contactEmail,
          description: newTeam.description
        }

        // 只有在成員標籤頁或應用標籤頁時才發送對應的數據
        // 這裡我們總是發送成員和應用數據，因為用戶可能在任何標籤頁點擊更新
        teamData.members = newTeam.members.map(member => ({
          user_id: member.user_id || member.id, // 確保使用正確的 user_id
          role: member.role || 'member'
        }))
        teamData.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.user_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
      user_id: newMember.user_id, // 確保 user_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)

    try {
      // 獲取競賽信息
    const competition = competitions.find((c) => c.id === newAward.competitionId)
      if (!competition) {
        setError("找不到選定的競賽")
        return
      }

      // 根據競賽類型自動設置 participantType
      let actualParticipantType = newAward.participantType
      if (competition.type === "team") {
        actualParticipantType = "team"
      } else if (competition.type === "individual") {
        actualParticipantType = "individual"
      }
      // 如果是 mixed 類型，保持用戶選擇的 participantType

      // 獲取參賽者信息
    let participant: any = null
    let participantName = ""
    let creatorName = ""

      console.log('🔍 查找參賽者調試信息:')
      console.log('competition.type:', competition.type)
      console.log('original participantType:', newAward.participantType)
      console.log('actual participantType:', actualParticipantType)
      console.log('participantId:', newAward.participantId)
      console.log('competitionApps:', competitionApps)
      console.log('competitionTeams:', competitionTeams)

    if (actualParticipantType === "individual") {
        participant = competitionApps.find((app) => app.id === newAward.participantId)
      participantName = participant?.name || ""
        creatorName = participant?.creator_name || participant?.creator || ""
        console.log('找到個人參賽者:', participant)
    } else if (actualParticipantType === "team") {
        participant = competitionTeams.find((team) => team.id === newAward.participantId)
      participantName = participant?.name || ""
        creatorName = participant?.leader_name || participant?.leader || ""
        console.log('找到團隊參賽者:', participant)
        
        // 團體賽需要關聯到對應的應用
        if (participant && participant.app_id) {
          console.log('團隊關聯的應用 ID:', participant.app_id)
          console.log('團隊關聯的應用名稱:', participant.app_name)
        }
      }

      if (!participant) {
        console.error('❌ 找不到參賽者')
        console.log('competitionApps 長度:', competitionApps.length)
        console.log('competitionTeams 長度:', competitionTeams.length)
        setError(`找不到選定的參賽者 (${newAward.participantType}: ${newAward.participantId})`)
        return
      }

      // 根據獎項類型設定圖標
      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 awardData = {
        competition_id: newAward.competitionId,
        app_id: actualParticipantType === "individual" ? newAward.participantId : (participant?.app_id || null),
        team_id: actualParticipantType === "team" ? newAward.participantId : null,
        app_name: actualParticipantType === "individual" ? participantName : (participant?.app_name || null),
        team_name: actualParticipantType === "team" ? participantName : null,
        creator: creatorName,
        award_type: newAward.awardType,
        award_name: newAward.awardName,
        custom_award_type_id: newAward.customAwardTypeId || null,
        score: newAward.score,
        rank: newAward.rank,
        category: newAward.category,
        description: newAward.description,
        judge_comments: newAward.judgeComments,
        application_links: newAward.applicationLinks,
        documents: newAward.documents,
        photos: newAward.photos,
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        icon: icon,
        competition_type: competition.type,
        participant_type: actualParticipantType,
      }
      
      console.log('📝 準備獎項數據:', awardData)

      // 調用 API 創建獎項
      const response = await fetch('/api/admin/awards', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(awardData),
      })

      const result = await response.json()

      if (!response.ok) {
        throw new Error(result.message || '創建獎項失敗')
      }

      // 創建成功，添加到本地列表
      const newAwardItem = {
        id: result.data.id,
        competitionId: newAward.competitionId,
        competitionName: competition.name,
        participantId: newAward.participantId,
        participantType: newAward.participantType,
        participantName: participantName,
        creatorName: creatorName,
        awardType: newAward.awardType,
        awardName: newAward.awardName,
        customAwardTypeId: newAward.customAwardTypeId,
        score: newAward.score,
        rank: newAward.rank,
        category: newAward.category,
        description: newAward.description,
        judgeComments: newAward.judgeComments,
        applicationLinks: newAward.applicationLinks,
        documents: newAward.documents,
        photos: newAward.photos,
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        icon: icon,
        createdAt: new Date().toISOString(),
      }

      addAward(newAwardItem)

      // 重置表單
    setNewAward({
      competitionId: "",
      participantId: "",
      participantType: "individual",
      awardType: "custom",
      awardName: "",
      customAwardTypeId: "",
      description: "",
      score: 0,
      category: "innovation",
      rank: 0,
      applicationLinks: {
        production: "",
        demo: "",
        github: "",
      },
      documents: [],
      judgeComments: "",
      photos: [],
    })

      setShowCreateAward(false)
      setSuccess("獎項創建成功！")
    setTimeout(() => setSuccess(""), 3000)

    } catch (error) {
      console.error('創建獎項失敗:', error)
      setError(error instanceof Error ? error.message : '創建獎項失敗')
    } finally {
      setIsLoading(false)
    }
  }

  const handleViewAward = async (award: any) => {
    setSelectedAward(award)
    setShowAwardDetail(true)
    
    // 載入該競賽的評審團信息
    if (award.competitionId) {
      try {
        console.log('🔍 載入競賽評審團:', award.competitionId);
        const response = await fetch(`/api/admin/competitions/${award.competitionId}/judges`);
        const data = await response.json();
        
        if (data.success) {
          console.log('✅ 獲取到評審團:', data.data.length, '位');
          setCompetitionJudges(data.data);
        } else {
          console.error('❌ 獲取評審團失敗:', data.message);
          setCompetitionJudges([]);
        }
      } catch (error) {
        console.error('❌ 載入評審團失敗:', error);
        setCompetitionJudges([]);
      }
    }
  }

  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 = async (competition: any) => {
    setSelectedCompetition(competition)
    
    // 設定初始參賽者類型
    let participantType = "individual";
    if (competition.type === "mixed") {
      setSelectedParticipantType("individual") // 混合賽預設從個人賽開始
      participantType = "individual";
    } else {
      setSelectedParticipantType(competition.type)
      participantType = competition.type;
    }
    
    // 初始化評分項目
    const initialScores = getInitialScores(competition, participantType)
    
    setManualScoring({
      judgeId: "",
      participantId: "",
      participantType: participantType,
      scores: initialScores,
      comments: "",
    })
    
    // 載入競賽相關數據
    await loadCompetitionDataForScoring(competition)
    
    setShowManualScoring(true)
  }
  
  // 載入競賽相關數據用於評分
  const loadCompetitionDataForScoring = async (competition: any) => {
    try {
      console.log('🔍 開始載入競賽評分數據，競賽ID:', competition.id)
      
      // 載入競賽評審
      const judgesResponse = await fetch(`/api/competitions/${competition.id}/judges`)
      const judgesData = await judgesResponse.json()
      
      console.log('🔍 競賽評審API回應:', judgesData)
      console.log('🔍 檢查條件:')
      console.log('  - judgesData.success:', judgesData.success)
      console.log('  - judgesData.data:', !!judgesData.data)
      console.log('  - judgesData.data.judges:', !!judgesData.data?.judges)
      console.log('  - judgesData.data.judges.length:', judgesData.data?.judges?.length)
      
      if (judgesData.success && judgesData.data && judgesData.data.judges) {
        console.log('✅ 競賽評審載入成功:', judgesData.data.judges.length, '個評審')
        // 更新評審數據到dbJudges（如果需要的話）
        setDbJudges(prev => {
          const existingIds = prev.map(j => j.id)
          const newJudges = judgesData.data.judges.filter((j: any) => !existingIds.includes(j.id))
          return [...prev, ...newJudges]
        })
      } else {
        console.error('❌ 競賽評審載入失敗:', judgesData.message)
        console.error('❌ 詳細錯誤信息:', judgesData.error)
      }

      // 載入競賽參賽者（應用和團隊）
      const [appsResponse, teamsResponse] = await Promise.all([
        fetch(`/api/competitions/${competition.id}/apps`),
        fetch(`/api/competitions/${competition.id}/teams`)
      ])

      const appsData = await appsResponse.json()
      const teamsData = await teamsResponse.json()

      console.log('應用API回應:', appsData)
      console.log('團隊API回應:', teamsData)

      // 更新selectedCompetition以包含載入的數據
      const updatedCompetition = { ...competition }
      
      // 添加評審數據到selectedCompetition
      if (judgesData.success && judgesData.data && judgesData.data.judges) {
        console.log('✅ 競賽評審載入成功，添加到selectedCompetition:', judgesData.data.judges.length, '個評審')
        updatedCompetition.judges = judgesData.data.judges
      } else {
        console.error('❌ 競賽評審載入失敗，設置空數組')
        updatedCompetition.judges = []
      }
      
      if (appsData.success && appsData.data && appsData.data.apps) {
        console.log('✅ 競賽應用載入成功:', appsData.data.apps.length, '個應用')
        updatedCompetition.apps = appsData.data.apps
      } else {
        console.error('❌ 競賽應用載入失敗:', appsData.message)
        updatedCompetition.apps = []
      }

      if (teamsData.success && teamsData.data && teamsData.data.teams) {
        console.log('✅ 競賽團隊載入成功:', teamsData.data.teams.length, '個團隊')
        // 確保團隊數據的唯一性，避免重複的ID
        const uniqueTeams = teamsData.data.teams.filter((team: any, index: number, self: any[]) => 
          self.findIndex(t => t.id === team.id) === index
        )
        updatedCompetition.teams = uniqueTeams
        console.log('🔍 去重後的團隊數量:', uniqueTeams.length)
        
        // 同時更新dbTeams，確保不重複添加
        setDbTeams(prev => {
          const existingIds = prev.map(t => t.id)
          const newTeams = uniqueTeams.filter((t: any) => !existingIds.includes(t.id))
          return [...prev, ...newTeams]
        })
      } else {
        console.error('❌ 競賽團隊載入失敗:', teamsData.message)
        updatedCompetition.teams = []
      }

      // 更新selectedCompetition
      setSelectedCompetition(updatedCompetition)

    } catch (error) {
      console.error('❌ 載入競賽評分數據失敗:', error)
    }
  }
  
  // 獲取初始評分項目的輔助函數
  const getInitialScores = (competition: any, participantType: "individual" | "team") => {
    const initialScores: Record<string, number> = {}
    
    // 獲取實際的評分項目（與顯示邏輯一致）
    let currentRules: any[] = [];
    if (competition?.type === 'mixed') {
      const config = participantType === 'individual' 
        ? competition.individualConfig 
        : competition.teamConfig;
      currentRules = config?.rules || [];
      } else {
      currentRules = competition?.rules || [];
    }
    
    // 如果有自定義規則，使用自定義規則；否則使用預設規則
    const scoringItems = currentRules.length > 0 
      ? currentRules 
      : getDefaultScoringItems(participantType);
    
    scoringItems.forEach(item => {
          initialScores[item.name] = 0
        })
    
    
    return initialScores
  }
  
  // 計算總分（10分制）
  const calculateTotalScore = () => {
    const scores = Object.values(manualScoring.scores);
    return scores.reduce((total, score) => total + (score || 0), 0);
  };

  // 計算100分制總分
  const calculateTotalScore100 = () => {
    const totalScore = calculateTotalScore();
    
    // 獲取實際的評分項目數量
    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'
        );
    
    const maxScore = scoringItems.length * 10;
    return Math.round((totalScore / maxScore) * 100);
  };

  // 計算加權總分（100分制）
  const calculateWeightedTotalScore100 = () => {
    let currentRules: any[] = [];
    
    if (selectedCompetition?.type === 'mixed') {
      const config = selectedParticipantType === 'individual' 
        ? selectedCompetition.individualConfig 
        : selectedCompetition.teamConfig;
      currentRules = config?.rules || [];
      } else {
      currentRules = selectedCompetition?.rules || [];
    }
    
    if (currentRules.length === 0) {
      // 如果沒有自定義規則，使用預設權重（每個項目權重相等）
      return calculateTotalScore100();
    }
    
    // 使用自定義權重計算
    let weightedTotal = 0;
    let totalWeight = 0;
    
    currentRules.forEach((rule: any) => {
      const score = manualScoring.scores[rule.name] || 0;
      const weight = parseFloat(rule.weight) || 0;
      weightedTotal += (score * weight) / 10; // 10分制轉換
      totalWeight += weight;
    });
    
    // 如果權重總和不是100%，按比例調整
    if (totalWeight > 0 && totalWeight !== 100) {
      weightedTotal = (weightedTotal * 100) / totalWeight;
    }
    
    return Math.round(weightedTotal); // 100分制，整數
  };
  
  // 獲取預設評分項目
  const getDefaultScoringItems = (participantType: "individual" | "team") => {
    if (participantType === "team") {
      return [
        { name: 'innovation', description: '創新程度和獨特性' },
        { name: 'technical', description: '技術實現的複雜度和品質' },
        { name: 'usability', description: '實際應用價值和用戶體驗' },
        { name: 'presentation', description: '團隊展示的清晰度和吸引力' },
        { name: 'impact', description: '對行業或社會的潛在影響' }
      ]
    } else {
      return [
        { name: 'innovation', description: '創新程度和獨特性' },
        { name: 'technical', description: '技術實現的複雜度和品質' },
        { name: 'usability', description: '實際應用價值和用戶體驗' },
        { name: 'presentation', description: '展示的清晰度和吸引力' },
        { name: 'impact', 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)
    
    try {
      // 直接使用競賽規則的評分項目，不需要轉換
      // API 會根據 competition_rules 表來驗證和處理評分
      const apiScores = { ...manualScoring.scores };


      // 驗證評分是否有效（1-10分）
      const invalidScores = Object.entries(apiScores).filter(([key, value]) => value < 1 || value > 10);
      if (invalidScores.length > 0) {
        setError(`評分必須在1-10分之間：${invalidScores.map(([key]) => key).join(', ')}`);
        return;
      }

      // 根據參賽者類型確定participantType和實際的APP ID
      let actualAppId = manualScoring.participantId;
      let participantType = 'app'; // 默認為APP評分
      
      // 檢查是否為團隊選擇
      const selectedTeam = selectedCompetition?.teams?.find((team: any) => team.id === manualScoring.participantId);
      if (selectedTeam) {
        // 如果是團隊，使用團隊下的第一個APP進行評分
        if (selectedTeam.apps && selectedTeam.apps.length > 0) {
          actualAppId = selectedTeam.apps[0].id; // 使用團隊下的第一個APP
          participantType = 'app'; // 對APP進行評分
        } else {
          setError("該團隊暫無APP，無法進行評分");
          return;
        }
      } else {
        // 檢查是否為個人APP
        const selectedApp = selectedCompetition?.apps?.find((app: any) => app.id === manualScoring.participantId);
        if (selectedApp) {
          actualAppId = selectedApp.id;
          participantType = 'app';
        }
      }

      const response = await fetch('/api/admin/scoring', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
      judgeId: manualScoring.judgeId,
          participantId: actualAppId, // 使用實際的APP ID
          participantType: participantType,
          scores: apiScores,
      comments: manualScoring.comments.trim(),
          competitionId: selectedCompetition?.id // 添加競賽ID
        })
      })

      const data = await response.json()
      
      if (data.success) {
        const selectedTeam = selectedCompetition?.teams?.find((team: any) => team.id === manualScoring.participantId);
        const successMessage = selectedTeam 
          ? `團隊「${selectedTeam.name}」的APP評分提交成功！`
          : "APP評分提交成功！";
        setSuccess(successMessage)
        
        // 重置表單
    setManualScoring({
      judgeId: "",
      participantId: "",
      participantType: "individual",
      scores: {
        innovation: 0,
        technical: 0,
        usability: 0,
        presentation: 0,
        impact: 0,
      },
      comments: "",
    })

        setShowManualScoring(false)
      } else {
        setError(data.message || "評分提交失敗")
      }
    } catch (err) {
      console.error('評分提交失敗:', err)
      setError("評分提交失敗，請重試")
    } finally {
    setIsLoading(false)
    setTimeout(() => setSuccess(""), 3000)
    }
  }

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

  const handleEditCompetition = (competition: any) => {
    setSelectedCompetitionForAction(competition)
    
    // 調試信息
    console.log('🔍 handleEditCompetition 調試信息:');
    console.log('競賽數據:', competition);
    console.log('startDate:', competition.startDate);
    console.log('endDate:', competition.endDate);
    console.log('start_date:', competition.start_date);
    console.log('end_date:', competition.end_date);
    
    // 將 ISO 日期字符串轉換為 YYYY-MM-DD 格式
    const formatDateForInput = (dateString: string) => {
      if (!dateString) return '';
      try {
        const date = new Date(dateString);
        return date.toISOString().split('T')[0];
      } catch (error) {
        console.error('日期格式轉換錯誤:', error);
        return '';
      }
    };
    
    const startDate = competition.startDate || competition.start_date;
    const endDate = competition.endDate || competition.end_date;
    
    console.log('轉換後的 startDate:', formatDateForInput(startDate));
    console.log('轉換後的 endDate:', formatDateForInput(endDate));
    
    setNewCompetition({
      name: competition.name,
      type: competition.type,
      year: competition.year,
      month: competition.month,
      startDate: formatDateForInput(startDate),
      endDate: formatDateForInput(endDate),
      description: competition.description,
      status: competition.status,
      // 將評審對象數組轉換為 ID 數組
      judges: competition.judges ? competition.judges.map((judge: any) => judge.id) : [],
      // 將團隊對象數組轉換為 ID 數組
      participatingTeams: competition.teams ? competition.teams.map((team: any) => team.id) : [],
      // 將應用對象數組轉換為 ID 數組
      participatingApps: competition.apps ? competition.apps.map((app: any) => app.id) : [],
      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)
    
    try {
      // 調用 API 刪除競賽
      const response = await fetch(`/api/admin/competitions/${selectedCompetitionForAction.id}`, {
        method: 'DELETE',
      })
      
      const data = await response.json()
      
      if (data.success) {
        // 同時從 context 中刪除
    deleteCompetition(selectedCompetitionForAction.id)
    setShowDeleteCompetitionConfirm(false)
    setSelectedCompetitionForAction(null)
    setSuccess("競賽刪除成功！")
        
        // 重新載入競賽列表
        await fetchCompetitions()
      } else {
        setError("競賽刪除失敗: " + data.message)
      }
    } catch (error) {
      console.error('刪除競賽失敗:', error)
      setError("競賽刪除失敗")
    } finally {
    setIsLoading(false)
      setTimeout(() => setError(""), 3000)
    setTimeout(() => setSuccess(""), 3000)
    }
  }

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

    setIsLoading(true)
    
    try {
      // 更新資料庫
      const updatedCompetition = await updateCompetitionInDb(selectedCompetitionForAction.id, {
        status: newStatus,
      })
      
      if (updatedCompetition) {
        // 同時更新 context
    updateCompetition(selectedCompetitionForAction.id, {
      ...selectedCompetitionForAction,
      status: newStatus,
    })

    setShowChangeStatusDialog(false)
    setSelectedCompetitionForAction(null)
    setSuccess("競賽狀態更新成功！")
      } else {
        setError("競賽狀態更新失敗")
      }
    } catch (error) {
      console.error('更新競賽狀態失敗:', error)
      setError("競賽狀態更新失敗")
    } finally {
    setIsLoading(false)
      setTimeout(() => setError(""), 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 getCompetitionTypeColor = (type: string) => {
    switch (type) {
      case "individual":
        return "bg-blue-100 text-blue-800 border-blue-200"
      case "team":
        return "bg-purple-100 text-purple-800 border-purple-200"
      case "mixed":
        return "bg-orange-100 text-orange-800 border-orange-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

  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 [scoringProgress, setScoringProgress] = useState<Record<string, { completed: number; total: number; percentage: number }>>({});

  // 載入評分進度數據
  const loadScoringProgress = async (competitionId: string) => {
    try {
      const response = await fetch(`/api/competitions/scoring-progress?competitionId=${competitionId}`);
      const data = await response.json();
      
      if (data.success) {
        setScoringProgress(prev => ({
          ...prev,
          [competitionId]: data.data
        }));
      }
    } catch (error) {
      console.error('載入評分進度失敗:', error);
    }
  };

  const getScoringProgress = (competitionId: string) => {
    return scoringProgress[competitionId] || { completed: 0, total: 0, percentage: 0 };
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "bg-green-100 text-green-800 border-green-200"
      case "ongoing":
        return "bg-yellow-100 text-yellow-800 border-yellow-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 "ongoing":
      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) => parseInt(award.rank) > 0 && parseInt(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
      const aRank = parseInt(a.rank) || 0
      const bRank = parseInt(b.rank) || 0
      if (aRank !== bRank) {
        if (aRank === 0) return 1
        if (bRank === 0) return -1
        return aRank - bRank
      }
      return 0
    })
  }

  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || (typeof window !== "undefined" ? window.location.origin : 'http://localhost:3000')
  const judgeScoringUrl = `${baseUrl}/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" || c.status === "ongoing").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 className="w-[300px]">競賽名稱</TableHead>
                    <TableHead className="w-[120px]">類型</TableHead>
                    <TableHead className="w-[150px]">時間</TableHead>
                    <TableHead className="w-[100px]">狀態</TableHead>
                    <TableHead className="w-[120px]">參賽項目</TableHead>
                    <TableHead className="w-[150px]">評分進度</TableHead>
                    <TableHead className="w-[80px]">操作</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-12 h-12 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 min-w-[100px]">
                            {getCompetitionTypeIcon(competition.type)}
                            <Badge variant="outline" className={`text-xs px-2 py-1 whitespace-nowrap ${getCompetitionTypeColor(competition.type)}`}>
                              {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>
                          <div className="min-w-[80px]">
                            <Badge variant="outline" className={`text-xs px-2 py-1 whitespace-nowrap ${getStatusColor(competition.status)}`}>
                              {getStatusText(competition.status)}
                            </Badge>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-1 min-w-[100px]">
                            {getCompetitionTypeIcon(competition.type)}
                            <span className="text-sm whitespace-nowrap">{participantCount} 個</span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="space-y-1 min-w-[140px]">
                            <div className="flex items-center space-x-2">
                              <Progress value={scoringProgress.percentage} className="w-16 h-2" />
                              <span className="text-xs text-gray-500 whitespace-nowrap">
                                {scoringProgress.completed}/{scoringProgress.total}
                              </span>
                            </div>
                            <p className="text-xs text-gray-500 whitespace-nowrap">{scoringProgress.percentage}% 完成</p>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex justify-center min-w-[60px]">
                            <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={() => setCurrentCompetitionInDb(competition.id)}>
                                  <Star className="w-4 h-4 mr-2" />
                                  設為當前競賽
                                </DropdownMenuItem>
                              )}

                              {isCurrentCompetition && (
                                <DropdownMenuItem onClick={() => clearCurrentCompetitionInDb()}>
                                  <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>
                          </div>
                        </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="ACBU">ACBU</SelectItem>
                  <SelectItem value="AUBU">AUBU</SelectItem>
                  <SelectItem value="FAB3">FAB3</SelectItem>
                  <SelectItem value="FNBU">FNBU</SelectItem>
                  <SelectItem value="HQBU">HQBU</SelectItem>
                  <SelectItem value="HRBU">HRBU</SelectItem>
                  <SelectItem value="IBU">IBU</SelectItem>
                  <SelectItem value="ITBU">ITBU</SelectItem>
                  <SelectItem value="MBU1">MBU1</SelectItem>
                  <SelectItem value="PBU">PBU</SelectItem>
                  <SelectItem value="SBG">SBG</SelectItem>
                  <SelectItem value="SBU">SBU</SelectItem>
                  <SelectItem value="法務室">法務室</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, index) => (
              <Card key={`${team.id}-${index}`} 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.app_count || 0} 個應用</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="ACBU">ACBU</SelectItem>
                  <SelectItem value="AUBU">AUBU</SelectItem>
                  <SelectItem value="FAB3">FAB3</SelectItem>
                  <SelectItem value="FNBU">FNBU</SelectItem>
                  <SelectItem value="HQBU">HQBU</SelectItem>
                  <SelectItem value="HRBU">HRBU</SelectItem>
                  <SelectItem value="IBU">IBU</SelectItem>
                  <SelectItem value="ITBU">ITBU</SelectItem>
                  <SelectItem value="MBU1">MBU1</SelectItem>
                  <SelectItem value="PBU">PBU</SelectItem>
                  <SelectItem value="SBG">SBG</SelectItem>
                  <SelectItem value="SBU">SBU</SelectItem>
                  <SelectItem value="法務室">法務室</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} />
                      <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) => parseInt(a.rank) > 0 && parseInt(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: any) => (
                <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.award_type === "gold"
                              ? "bg-yellow-100 text-yellow-800"
                              : award.award_type === "silver"
                                ? "bg-gray-100 text-gray-800"
                                : award.award_type === "bronze"
                                  ? "bg-orange-100 text-orange-800"
                                  : award.award_type === "popular"
                                    ? "bg-purple-100 text-purple-800"
                                    : award.award_type === "innovation"
                                      ? "bg-green-100 text-green-800"
                                      : award.award_type === "technical"
                                        ? "bg-indigo-100 text-indigo-800"
                                        : "bg-blue-100 text-blue-800"
                          }`}
                        >
                          {award.award_name}
                        </Badge>
                        <h4 className="font-semibold text-lg pr-8">
                          {award.team_name || award.app_name || "作品"}
                        </h4>
                        <p className="text-sm text-gray-600">by {award.creator}</p>
                        
                        {/* 評分顯示 */}
                        {award.score && parseFloat(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">{parseFloat(award.score).toFixed(1)}</span>
                            </div>
                            <span className="text-xs text-gray-500">評審評分</span>
                          </div>
                        )}

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

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

                      {/* 應用連結摘要 */}
                      {award.application_links && (
                        <div className="space-y-2">
                          <p className="text-xs font-medium text-gray-700">應用連結</p>
                          <div className="flex items-center space-x-2 flex-wrap">
                            {(() => {
                              // 解析 application_links，可能是字符串或對象
                              let links = award.application_links;
                              if (typeof links === 'string') {
                                try {
                                  links = JSON.parse(links);
                                } catch (e) {
                                  links = null;
                                }
                              }
                              
                              const linkItems = [];
                              
                              if (links && links.production) {
                                linkItems.push(
                                  <div key="production" className="flex items-center space-x-1">
                              <div className="w-2 h-2 bg-green-500 rounded-full" title="APP 連結"></div>
                                    <a 
                                      href={links.production} 
                                      target="_blank" 
                                      rel="noopener noreferrer"
                                      className="text-xs text-blue-600 hover:text-blue-800 underline truncate max-w-24"
                                      title={links.production}
                                    >
                                      APP 連結
                                    </a>
                                  </div>
                                );
                              }
                              
                              if (links && links.demo) {
                                linkItems.push(
                                  <div key="demo" className="flex items-center space-x-1">
                              <div className="w-2 h-2 bg-blue-500 rounded-full" title="演示版本"></div>
                                    <a 
                                      href={links.demo} 
                                      target="_blank" 
                                      rel="noopener noreferrer"
                                      className="text-xs text-blue-600 hover:text-blue-800 underline truncate max-w-24"
                                      title={links.demo}
                                    >
                                      演示版本
                                    </a>
                                  </div>
                                );
                              }
                              
                              if (links && links.github) {
                                linkItems.push(
                                  <div key="github" className="flex items-center space-x-1">
                              <div className="w-2 h-2 bg-gray-800 rounded-full" title="源碼倉庫"></div>
                                    <a 
                                      href={links.github} 
                                      target="_blank" 
                                      rel="noopener noreferrer"
                                      className="text-xs text-blue-600 hover:text-blue-800 underline truncate max-w-24"
                                      title={links.github}
                                    >
                                      源碼倉庫
                                    </a>
                                  </div>
                                );
                              }
                              
                              if (linkItems.length === 0) {
                                return <span className="text-xs text-gray-500">無連結</span>;
                              }
                              
                              return linkItems;
                            })()}
                          </div>
                        </div>
                      )}

                      {/* 相關文檔摘要 */}
                      {award.documents && award.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.documents.length} 個文檔
                            </span>
                            <Badge variant="outline" className="text-xs">
                              {award.documents.map((doc: any) => doc.type).join(", ")}
                            </Badge>
                          </div>
                        </div>
                      )}

                      {/* 得獎照片摘要 */}
                      {award.photos && award.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.photos.length} 張照片
                            </span>
                            <div className="flex items-center space-x-1">
                              {award.photos.slice(0, 3).map((photo: any, index: number) => (
                                <div key={index} className="w-4 h-4 bg-gray-100 rounded border overflow-hidden">
                                  {photo.url ? (
                                    <img 
                                      src={photo.url} 
                                      alt={`照片 ${index + 1}`}
                                      className="w-full h-full object-cover"
                                      onError={(e) => {
                                        e.currentTarget.style.display = 'none';
                                        e.currentTarget.nextElementSibling?.classList.remove('hidden');
                                      }}
                                    />
                                  ) : null}
                                  <div className="w-full h-full bg-gray-200 flex items-center justify-center text-xs text-gray-500 hidden">
                                    📷
                                  </div>
                                </div>
                              ))}
                              {award.photos.length > 3 && (
                                <span className="text-xs text-gray-500">+{award.photos.length - 3}</span>
                              )}
                            </div>
                          </div>
                        </div>
                      )}

                      {/* 獎項描述 */}
                      {award.description && (
                        <p className="text-xs text-gray-600 line-clamp-2">
                          {award.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} />
                                <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} />
                                <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} />
                          <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="ACBU">ACBU</SelectItem>
                          <SelectItem value="AUBU">AUBU</SelectItem>
                          <SelectItem value="FAB3">FAB3</SelectItem>
                          <SelectItem value="FNBU">FNBU</SelectItem>
                          <SelectItem value="HQBU">HQBU</SelectItem>
                          <SelectItem value="HRBU">HRBU</SelectItem>
                          <SelectItem value="IBU">IBU</SelectItem>
                          <SelectItem value="ITBU">ITBU</SelectItem>
                          <SelectItem value="MBU1">MBU1</SelectItem>
                          <SelectItem value="PBU">PBU</SelectItem>
                          <SelectItem value="SBG">SBG</SelectItem>
                          <SelectItem value="SBU">SBU</SelectItem>
                          <SelectItem value="法務室">法務室</SelectItem>
                          <SelectItem value="關係企業發展">關係企業發展</SelectItem>
                          <SelectItem value="稽核室">稽核室</SelectItem>
                          <SelectItem value="總經理室">總經理室</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_name || participant.creator_id || participant.creator || '未知'}</p>
                              <p className="text-xs text-gray-500">提交日期：{participant.submissionDate ? new Date(participant.submissionDate).toLocaleDateString('zh-TW', { timeZone: 'Asia/Taipei', year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/-/g, '/') : '未知'}</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="ACBU">ACBU</SelectItem>
                  <SelectItem value="AUBU">AUBU</SelectItem>
                          <SelectItem value="FAB3">FAB3</SelectItem>
                          <SelectItem value="FNBU">FNBU</SelectItem>
                          <SelectItem value="HQBU">HQBU</SelectItem>
                          <SelectItem value="HRBU">HRBU</SelectItem>
                          <SelectItem value="IBU">IBU</SelectItem>
                          <SelectItem value="ITBU">ITBU</SelectItem>
                          <SelectItem value="MBU1">MBU1</SelectItem>
                          <SelectItem value="PBU">PBU</SelectItem>
                          <SelectItem value="SBG">SBG</SelectItem>
                          <SelectItem value="SBU">SBU</SelectItem>
                          <SelectItem value="法務室">法務室</SelectItem>
                          <SelectItem value="關係企業發展">關係企業發展</SelectItem>
                          <SelectItem value="稽核室">稽核室</SelectItem>
                          <SelectItem value="總經理室">總經理室</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">
                      {isLoadingTeams ? (
                        <div className="col-span-2 flex items-center justify-center py-8">
                          <div className="text-center">
                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
                            <p className="text-sm text-gray-600">載入團隊數據中...</p>
                          </div>
                        </div>
                      ) : (
                        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) {
                                  // 檢查是否已經存在，避免重複添加
                                  if (!newCompetition.participatingTeams.includes(participant.id)) {
                                    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_name || participant.leader || '未知'}</span>
                                </div>
                                <div className="flex items-center space-x-1">
                                  <Users className="w-3 h-3" />
                                  <span>{participant.member_count || participant.memberCount || 0}人</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 ? new Date(participant.submissionDate).toLocaleDateString('zh-TW', { timeZone: 'Asia/Taipei', year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/-/g, '/') : '未知'}</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="ACBU">ACBU</SelectItem>
                  <SelectItem value="AUBU">AUBU</SelectItem>
                        <SelectItem value="FAB3">FAB3</SelectItem>
                        <SelectItem value="FNBU">FNBU</SelectItem>
                        <SelectItem value="HQBU">HQBU</SelectItem>
                        <SelectItem value="HRBU">HRBU</SelectItem>
                        <SelectItem value="IBU">IBU</SelectItem>
                        <SelectItem value="ITBU">ITBU</SelectItem>
                        <SelectItem value="MBU1">MBU1</SelectItem>
                        <SelectItem value="PBU">PBU</SelectItem>
                        <SelectItem value="SBG">SBG</SelectItem>
                        <SelectItem value="SBU">SBU</SelectItem>
                        <SelectItem value="法務室">法務室</SelectItem>
                        <SelectItem value="關係企業發展">關係企業發展</SelectItem>
                        <SelectItem value="稽核室">稽核室</SelectItem>
                        <SelectItem value="總經理室">總經理室</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_name || participant.leader || '未知'}</span>
                                  </div>
                                  <div className="flex items-center space-x-1">
                                    <Users className="w-3 h-3" />
                                    <span>{participant.member_count || participant.memberCount || 0}人</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" && (
                              <div className="space-y-1">
                                <p className="text-xs text-gray-600">創作者：{participant.creator_name || participant.creator_id || participant.creator || '未知'}</p>
                                <p className="text-xs text-gray-500">類型：{participant.type || participant.category || '未知'}</p>
                                {participant.description && (
                                  <p className="text-xs text-gray-500 line-clamp-2">{participant.description}</p>
                                )}
                              </div>
                            )}

                            <p className="text-xs text-gray-500">提交日期：{participant.submissionDate ? new Date(participant.submissionDate).toLocaleDateString('zh-TW', { timeZone: 'Asia/Taipei', year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/-/g, '/') : '未知'}</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
                      .filter((team: any, index: number, self: any[]) => 
                        self.findIndex(t => t.id === team.id) === index
                      )
                      .map((team: any, index: number) => (
                      <div key={`${team.id}-${index}`} 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>
                <div className="text-sm text-gray-600">
                  <Badge>{getStatusText(selectedCompetitionForAction.status)}</Badge>
                </div>
              </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>
                    {/* 顯示競賽綁定的評審 */}
                    {(() => {
                      // 使用競賽綁定的評審，而不是所有評審
                      const competitionJudges = selectedCompetition?.judges || [];
                      console.log('🔍 競賽綁定的評審:', competitionJudges);
                      console.log('🔍 selectedCompetition:', selectedCompetition);
                      
                      if (competitionJudges.length === 0) {
                        return (
                          <SelectItem value="" disabled>
                            <span className="text-gray-500">此競賽暫無綁定評審</span>
                        </SelectItem>
                        );
                      }
                      
                      return competitionJudges.map((judge) => (
                        <SelectItem key={judge.id} value={judge.id}>
                          <div className="flex items-center space-x-2">
                            <User className="w-4 h-4 text-blue-600" />
                            <span>{judge.name}</span>
                            <span className="text-xs text-gray-500">({judge.title || judge.expertise})</span>
                          </div>
                        </SelectItem>
                      ));
                    })()}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>
                  {selectedCompetition?.type === 'mixed' 
                    ? (selectedParticipantType === 'individual' ? '選擇個人APP' : '選擇團隊APP')
                    : (selectedCompetition?.type === 'team' ? '選擇團隊APP' : '選擇個人APP')
                  }
                </Label>
                <Select 
                  value={manualScoring.participantId} 
                  onValueChange={(value) => setManualScoring({...manualScoring, participantId: value})}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={
                      selectedCompetition?.type === 'mixed' 
                        ? (selectedParticipantType === 'individual' ? '選擇個人APP' : '選擇團隊APP')
                        : (selectedCompetition?.type === 'team' ? '選擇團隊APP' : '選擇個人APP')
                    } />
                  </SelectTrigger>
                  <SelectContent>
                    {/* 根據競賽類型和選擇的參賽者類型顯示參賽者 */}
                    {(selectedCompetition?.type === 'individual' || 
                      (selectedCompetition?.type === 'mixed' && selectedParticipantType === 'individual')) && 
                      (() => {
                        // 從API載入的應用數據
                        const apps = selectedCompetition?.apps || []
                        return apps.length > 0 ? apps.map((app: any) => (
                          <SelectItem key={app.id} value={app.id}>
                            <div className="flex items-center space-x-2">
                              <User className="w-4 h-4 text-blue-600" />
                              <span>{app.name}</span>
                              <span className="text-xs text-gray-500">({app.creator})</span>
                            </div>
                          </SelectItem>
                        )) : (
                          <SelectItem value="" disabled>
                            <span className="text-gray-500">暫無個人參賽者</span>
                          </SelectItem>
                        )
                      })()
                    }
                    {(selectedCompetition?.type === 'team' || 
                      (selectedCompetition?.type === 'mixed' && selectedParticipantType === 'team')) && 
                      (() => {
                        // 使用selectedCompetition.teams數據，顯示為「團隊名 - APP名」格式
                        const teamsData = selectedCompetition?.teams || []
                        return teamsData.length > 0 ? teamsData
                          .filter((team: any, index: number, self: any[]) => 
                            self.findIndex(t => t.id === team.id) === index
                          )
                          .map((team: any, index: number) => {
                          // 檢查團隊是否有APP
                          const teamApps = team.apps || []
                          if (teamApps.length === 0) {
                            return (
                              <SelectItem key={`${team.id}-${index}`} value={team.id} disabled>
                                <div className="flex items-center space-x-2">
                                  <Users className="w-4 h-4 text-gray-400" />
                                  <span className="text-gray-400">{team.name}</span>
                                  <span className="text-xs text-gray-400">(暫無APP)</span>
                                </div>
                              </SelectItem>
                            )
                          }
                          
                          // 顯示團隊和其第一個APP
                          const firstApp = teamApps[0]
                          return (
                          <SelectItem key={`${team.id}-${index}`} value={team.id}>
                              <div className="flex items-center space-x-2">
                                <Users className="w-4 h-4 text-green-600" />
                                <span>{team.name}</span>
                                <span className="text-gray-400">-</span>
                                <span className="text-blue-600">{firstApp.name}</span>
                              </div>
                          </SelectItem>
                          )
                        }) : (
                          <SelectItem value="" disabled>
                            <span className="text-gray-500">暫無團隊參賽者</span>
                          </SelectItem>
                        )
                      })()
                    }
                  </SelectContent>
                </Select>
              </div>
            </div>
            
            {/* 評分項目 */}
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <Label className="text-lg font-medium">評分項目</Label>
                <div className="flex items-center space-x-4">
                {selectedCompetition?.type === 'mixed' && (
                  <Badge variant="outline" className="text-sm">
                    {selectedParticipantType === 'individual' ? '個人賽評分' : '團體賽評分'}
                  </Badge>
                )}
                  {/* 總分顯示 */}
                  <div className="bg-gray-50 border border-gray-200 rounded-lg px-4 py-3">
                    <div className="flex items-center space-x-3">
                      <div className="text-sm text-gray-600">總分</div>
                      <div className="text-2xl font-bold text-gray-800">
                        {calculateTotalScore()}
                      </div>
                      <div className="text-sm text-gray-500">/ {(() => {
                        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.length * 10;
                      })()}</div>
                    </div>
                    
                    {/* 整體進度條 */}
                    <div className="mt-2">
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div 
                          className="bg-gray-600 h-2 rounded-full transition-all duration-500"
                          style={{ 
                            width: `${calculateTotalScore100()}%` 
                          }}
                        ></div>
                      </div>
                      <div className="text-xs text-gray-500 mt-1">
                        完成度: {calculateTotalScore100()}%
                      </div>
                    </div>
                    
                    {/* 加權總分顯示 */}
                    {(() => {
                      const weightedTotal = calculateWeightedTotalScore100();
                      const simpleTotal = calculateTotalScore100();
                      const hasCustomWeights = selectedCompetition?.rules?.some((rule: any) => rule.weight) || 
                        selectedCompetition?.individualConfig?.rules?.some((rule: any) => rule.weight) ||
                        selectedCompetition?.teamConfig?.rules?.some((rule: any) => rule.weight);
                      
                      if (hasCustomWeights && weightedTotal !== simpleTotal) {
                        return (
                          <div className="text-xs text-gray-600 mt-2 font-medium">
                            加權總分: {weightedTotal}
                          </div>
                        );
                      }
                      return null;
                    })()}
                  </div>
                </div>
              </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 className="flex-1">
                        <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 className="mt-2">
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div 
                              className="bg-gray-500 h-2 rounded-full transition-all duration-300"
                              style={{ 
                                width: `${((manualScoring.scores[item.name] || 0) / 10) * 100}%` 
                              }}
                            ></div>
                      </div>
                        </div>
                      </div>
                      <div className="text-right ml-4">
                        <span className="text-lg font-bold text-gray-800">
                          {manualScoring.scores[item.name] || 0}
                        </span>
                        <span className="text-sm text-gray-500">/ 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-gray-700 text-white border-gray-700'
                              : 'bg-white text-gray-700 border-gray-300 hover:border-gray-500 hover:bg-gray-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="ACBU">ACBU</SelectItem>
                  <SelectItem value="AUBU">AUBU</SelectItem>
                      <SelectItem value="FAB3">FAB3</SelectItem>
                      <SelectItem value="FNBU">FNBU</SelectItem>
                      <SelectItem value="HQBU">HQBU</SelectItem>
                      <SelectItem value="HRBU">HRBU</SelectItem>
                      <SelectItem value="IBU">IBU</SelectItem>
                      <SelectItem value="ITBU">ITBU</SelectItem>
                      <SelectItem value="MBU1">MBU1</SelectItem>
                      <SelectItem value="PBU">PBU</SelectItem>
                      <SelectItem value="SBG">SBG</SelectItem>
                      <SelectItem value="SBU">SBU</SelectItem>
                      <SelectItem value="法務室">法務室</SelectItem>
                      <SelectItem value="關係企業發展">關係企業發展</SelectItem>
                      <SelectItem value="稽核室">稽核室</SelectItem>
                      <SelectItem value="總經理室">總經理室</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="ACBU">ACBU</SelectItem>
                  <SelectItem value="AUBU">AUBU</SelectItem>
                        <SelectItem value="FAB3">FAB3</SelectItem>
                        <SelectItem value="FNBU">FNBU</SelectItem>
                        <SelectItem value="HQBU">HQBU</SelectItem>
                        <SelectItem value="HRBU">HRBU</SelectItem>
                        <SelectItem value="IBU">IBU</SelectItem>
                        <SelectItem value="ITBU">ITBU</SelectItem>
                        <SelectItem value="MBU1">MBU1</SelectItem>
                        <SelectItem value="PBU">PBU</SelectItem>
                        <SelectItem value="SBG">SBG</SelectItem>
                        <SelectItem value="SBU">SBU</SelectItem>
                        <SelectItem value="法務室">法務室</SelectItem>
                        <SelectItem value="關係企業發展">關係企業發展</SelectItem>
                        <SelectItem value="稽核室">稽核室</SelectItem>
                        <SelectItem value="總經理室">總經理室</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.role === '隊長' && (
                            <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 === "" || !["ACBU", "AUBU", "FAB3", "FNBU", "HQBU", "HRBU", "IBU", "ITBU", "MBU1", "PBU", "SBG", "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="ACBU">ACBU</SelectItem>
                  <SelectItem value="AUBU">AUBU</SelectItem>
                  <SelectItem value="FAB3">FAB3</SelectItem>
                  <SelectItem value="FNBU">FNBU</SelectItem>
                  <SelectItem value="HQBU">HQBU</SelectItem>
                  <SelectItem value="HRBU">HRBU</SelectItem>
                  <SelectItem value="IBU">IBU</SelectItem>
                  <SelectItem value="ITBU">ITBU</SelectItem>
                  <SelectItem value="MBU1">MBU1</SelectItem>
                  <SelectItem value="PBU">PBU</SelectItem>
                  <SelectItem value="SBG">SBG</SelectItem>
                  <SelectItem value="SBU">SBU</SelectItem>
                  <SelectItem value="法務室">法務室</SelectItem>
                  <SelectItem value="關係企業發展">關係企業發展</SelectItem>
                  <SelectItem value="稽核室">稽核室</SelectItem>
                  <SelectItem value="總經理室">總經理室</SelectItem>
                  <SelectItem value="custom">其他/自定義...</SelectItem>
                </SelectContent>
              </Select>
              
              {/* 自定義部門輸入框 */}
              {(newJudge.department === "" || !["ACBU", "AUBU", "FAB3", "FNBU", "HQBU", "HRBU", "IBU", "ITBU", "MBU1", "PBU", "SBG", "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) => {
                      const selectedCompetition = competitions.find(c => c.id === value)
                      console.log('🏆 選擇競賽:', selectedCompetition?.name, '類型:', selectedCompetition?.type)
                      
                      // 根據競賽類型自動設置參賽者類型
                      let participantType: "individual" | "team" = "individual"
                      if (selectedCompetition?.type === "team") {
                        participantType = "team"
                        console.log('✅ 設置為團隊參賽')
                      } else if (selectedCompetition?.type === "individual") {
                        participantType = "individual"
                        console.log('✅ 設置為個人參賽')
                      } else if (selectedCompetition?.type === "mixed") {
                        // 混合賽保持當前選擇或預設為個人
                        participantType = newAward.participantType
                        console.log('✅ 混合賽保持當前類型:', participantType)
                      }
                      
                      setNewAward({ 
                        ...newAward, 
                        competitionId: value, 
                        participantId: "",
                        participantType: participantType
                      })
                      // 載入該競賽的獎項類型、參賽者和評審
                      loadCompetitionAwardTypes(value)
                      loadCompetitionParticipants(value)
                    }}
                  >
                    <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.customAwardTypeId ?? newAward.awardType}
                    onValueChange={(value: any) => {
                      // 檢查是否為自定義獎項類型
                      const customAwardType = competitionAwardTypes.find(type => type.id === value)
                      if (customAwardType) {
                        setNewAward({ 
                          ...newAward, 
                          awardType: 'custom',
                          customAwardTypeId: value,
                          awardName: customAwardType.name
                        })
                      } else {
                        setNewAward({ ...newAward, awardType: value, customAwardTypeId: "" })
                      }
                    }}
                    disabled={loadingAwardTypes}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder={loadingAwardTypes ? "載入中..." : "選擇獎項類型"} />
                    </SelectTrigger>
                    <SelectContent>
                      {competitionAwardTypes.length > 0 ? (
                        // 顯示競賽自定義的獎項類型
                        competitionAwardTypes.map((awardType) => (
                          <SelectItem key={awardType.id} value={awardType.id}>
                            <div className="flex items-center space-x-2">
                              <span>{awardType.icon}</span>
                              <span>{awardType.name}</span>
                            </div>
                          </SelectItem>
                        ))
                      ) : (
                        // 如果沒有自定義獎項類型，顯示預設選項
                        <>
                      <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>
                  {competitionAwardTypes.length > 0 && (
                    <p className="text-xs text-gray-500">
                      此競賽有 {competitionAwardTypes.length} 個自定義獎項類型
                    </p>
                  )}
                </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>
                        {formatDate(selectedCompetition.startDate || selectedCompetition.start_date)} ~ {formatDate(selectedCompetition.endDate || selectedCompetition.end_date)}
                      </div>
                      <div><span className="font-medium">評審團：</span>
                        {loadingParticipants ? (
                          <span className="text-gray-500">載入中...</span>
                        ) : (
                          `${competitionJudges.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>
                    )}

                    {/* 根據競賽類型自動設定參賽者類型 */}
                    {selectedCompetition.type === "individual" && newAward.participantType !== "individual" && (
                      <div className="space-y-2">
                        <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
                          <p className="text-sm text-blue-800">
                            <strong>個人競賽：</strong>此競賽僅限個人參賽，將顯示個人參賽應用清單
                          </p>
                        </div>
                      </div>
                    )}

                    {selectedCompetition.type === "team" && newAward.participantType !== "team" && (
                      <div className="space-y-2">
                        <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
                          <p className="text-sm text-green-800">
                            <strong>團體競賽：</strong>此競賽僅限團隊參賽，將顯示團隊參賽清單
                          </p>
                        </div>
                      </div>
                    )}

                    {/* 參賽者選擇 */}
                    <div className="space-y-2">
                      <Label>
                        選擇{(() => {
                          const shouldShowIndividual = selectedCompetition.type === "individual" || 
                                                    (selectedCompetition.type === "mixed" && newAward.participantType === "individual");
                          const shouldShowTeam = selectedCompetition.type === "team" || 
                                               (selectedCompetition.type === "mixed" && newAward.participantType === "team");
                          
                          if (shouldShowIndividual) return "個人參賽者";
                          if (shouldShowTeam) return "團隊參賽者";
                          return "參賽者";
                        })()} <span className="text-red-500">*</span>
                      </Label>
                      <Select
                        value={newAward.participantId}
                        onValueChange={(value) => {
                          // 避免選擇到 disabled 的特殊值
                          if (value !== "loading" && value !== "no-individual-apps" && value !== "no-teams") {
                            console.log('🎯 選擇參賽者:', value, '類型:', newAward.participantType)
                            setNewAward({ ...newAward, participantId: value })
                          }
                        }}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder={(() => {
                            const shouldShowIndividual = selectedCompetition.type === "individual" || 
                                                      (selectedCompetition.type === "mixed" && newAward.participantType === "individual");
                            const shouldShowTeam = selectedCompetition.type === "team" || 
                                                 (selectedCompetition.type === "mixed" && newAward.participantType === "team");
                            
                            if (shouldShowIndividual) return "選擇個人參賽者";
                            if (shouldShowTeam) return "選擇團隊參賽者";
                            return "選擇參賽者";
                          })()} />
                        </SelectTrigger>
                        <SelectContent>
                          {loadingParticipants ? (
                            <SelectItem value="loading" disabled>
                              <div className="flex items-center space-x-2">
                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900"></div>
                                <span>載入中...</span>
                              </div>
                            </SelectItem>
                          ) : (() => {
                            // 根據競賽類型決定顯示的參賽者
                            const shouldShowIndividual = selectedCompetition.type === "individual" || 
                                                      (selectedCompetition.type === "mixed" && newAward.participantType === "individual");
                            const shouldShowTeam = selectedCompetition.type === "team" || 
                                                 (selectedCompetition.type === "mixed" && newAward.participantType === "team");

                            if (shouldShowIndividual) {
                              // 顯示個人參賽應用
                              return competitionApps.length > 0 ? (
                                competitionApps.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_name || app.creator} • {app.department}
                                      </span>
                                </div>
                              </SelectItem>
                            ))
                          ) : (
                                <SelectItem value="no-individual-apps" disabled>
                                  暫無個人參賽應用
                                </SelectItem>
                              );
                            } else if (shouldShowTeam) {
                              // 團體賽：只顯示團隊，不顯示 app
                              return competitionTeams.length > 0 ? (
                                competitionTeams
                                  .filter((team: any, index: number, self: any[]) => 
                                    self.findIndex(t => t.id === team.id) === index
                                  )
                                  .map((team: any, index: number) => (
                              <SelectItem key={`${team.id}-${index}`} value={team.id}>
                                <div className="flex flex-col">
                                  <span className="font-medium">{team.name}</span>
                                    <span className="text-xs text-gray-500">
                                      隊長：{team.leader_name || team.leader || '未知'} • {team.department} • {team.actual_member_count || team.member_count || team.memberCount || 0}人
                                    </span>
                                </div>
                              </SelectItem>
                            ))
                              ) : (
                                <SelectItem value="no-teams" disabled>
                                  暫無團隊參賽
                                </SelectItem>
                              );
                            } else {
                              // 預設情況
                              return (
                                <SelectItem value="no-participants" disabled>
                                  請先選擇競賽類型
                                </SelectItem>
                              );
                            }
                          })()}
                        </SelectContent>
                      </Select>
                    </div>

                    {/* 參賽者資訊預覽 */}
                    {newAward.participantId && (() => {
                      // 根據競賽類型決定顯示的參賽者資訊
                      const shouldShowIndividual = selectedCompetition.type === "individual" || 
                                                (selectedCompetition.type === "mixed" && newAward.participantType === "individual");
                      const shouldShowTeam = selectedCompetition.type === "team" || 
                                           (selectedCompetition.type === "mixed" && newAward.participantType === "team");

                      if (shouldShowIndividual) {
                        const app = competitionApps.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_name || app.creator}</div>
                              <div><span className="font-medium">所屬部門：</span>{app.department}</div>
                              <div><span className="font-medium">應用描述：</span>{app.description || '暫無描述'}</div>
                            </div>
                          </div>
                        )
                      } else if (shouldShowTeam) {
                        const team = competitionTeams.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_name || team.leader}</div>
                              <div><span className="font-medium">所屬部門：</span>{team.department}</div>
                              <div><span className="font-medium">團隊人數：</span>{team.actual_member_count || team.member_count || team.memberCount || 0}人</div>
                              <div><span className="font-medium">聯絡信箱：</span>{team.contact_email || team.contactEmail || '未提供'}</div>
                            </div>
                          </div>
                        )
                      } else {
                        return null
                      }
                    })()}

                    {/* 評審團資訊 */}
                    <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
                      <h4 className="font-medium text-purple-900 mb-2">
                        競賽評審團 ({competitionJudges.length} 位)
                      </h4>
                      {loadingParticipants ? (
                        <div className="flex items-center space-x-2 text-sm text-gray-500">
                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-purple-600"></div>
                          <span>載入評審資訊中...</span>
                        </div>
                      ) : competitionJudges.length > 0 ? (
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                          {competitionJudges.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>
                      ) : (
                        <p className="text-sm text-gray-500">暫無評審資訊</p>
                      )}
                    </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-6">
              <div className="space-y-6">
                {/* 網站預覽區塊 */}
              <div className="space-y-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">APP 應用連結</p>
                  </div>

                  {/* 網站預覽內容 */}
                  {newAward.applicationLinks.production && (
                    <div className="border rounded-lg p-4 bg-gray-50">
                      <div className="flex items-center justify-between mb-3">
                        <h4 className="font-medium text-gray-900">網站預覽</h4>
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={() => window.open(newAward.applicationLinks.production, '_blank')}
                          className="text-blue-600 hover:text-blue-700"
                        >
                          在新分頁開啟
                        </Button>
                      </div>
                      <div className="bg-white border rounded-lg overflow-hidden">
                        <div className="h-96 relative">
                          <iframe
                            src={newAward.applicationLinks.production}
                            className="w-full h-full border-0"
                            title="網站預覽"
                            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
                            loading="lazy"
                            onError={(e) => {
                              console.error('網站預覽載入失敗:', e);
                            }}
                          />
                          <div className="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
                            {newAward.applicationLinks.production}
                          </div>
                        </div>
                      </div>
                    </div>
                  )}
                </div>

                {/* 其他連結區塊 */}
                <div className="space-y-4">
                  <h4 className="font-medium text-gray-900">其他連結</h4>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {/* 演示版本 */}
                  <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>

                  {/* 其他連結預覽 */}
                  {(newAward.applicationLinks.demo || newAward.applicationLinks.github) && (
                    <div className="space-y-3">
                      <h4 className="font-medium text-gray-900">其他連結預覽</h4>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    {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>
              </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>
                  
                  {/* 隱藏的文件輸入 */}
                  <input
                    type="file"
                    id="document-upload"
                    multiple
                    accept=".pdf,.doc,.docx,.ppt,.pptx"
                    onChange={(e) => {
                      if (e.target.files && e.target.files.length > 0) {
                        handleFileUpload(e.target.files)
                      }
                    }}
                    className="hidden"
                  />
                  
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => document.getElementById('document-upload')?.click()}
                    disabled={uploadingFiles}
                  >
                    <Upload className="w-4 h-4 mr-2" />
                    {uploadingFiles ? '上傳中...' : '選擇文檔'}
                  </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 className="flex-1 min-w-0">
                            <p className="font-medium text-gray-900 truncate" title={doc.name}>
                              {doc.name}
                            </p>
                            <div className="flex items-center space-x-2 text-xs text-gray-500 mt-1">
                              <span>大小：{doc.size}</span>
                              <span>•</span>
                              <span>上傳：{doc.uploadDate}</span>
                            </div>
                            
                            {/* 上傳進度條 */}
                            {uploadProgress[doc.id] !== undefined && uploadProgress[doc.id] < 100 && (
                              <div className="mt-2">
                                <div className="w-full bg-gray-200 rounded-full h-2">
                                  <div 
                                    className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                                    style={{ width: `${uploadProgress[doc.id]}%` }}
                                  ></div>
                                </div>
                                <p className="text-xs text-gray-500 mt-1">上傳中... {uploadProgress[doc.id]}%</p>
                              </div>
                            )}
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          {doc.url && (
                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              onClick={() => window.open(doc.url, '_blank')}
                            >
                            <Eye className="w-4 h-4 mr-1" />
                            預覽
                          </Button>
                          )}
                          <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => handleRemoveDocument(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、WEBP 等格式，建議尺寸 1920x1080，單檔最大 5MB</p>
                  
                  {/* 隱藏的照片輸入 */}
                  <input
                    type="file"
                    id="photo-upload"
                    multiple
                    accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
                    onChange={(e) => {
                      if (e.target.files && e.target.files.length > 0) {
                        handlePhotoUpload(e.target.files)
                      }
                    }}
                    className="hidden"
                  />
                  
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => document.getElementById('photo-upload')?.click()}
                    disabled={uploadingPhotos}
                  >
                    <Upload className="w-4 h-4 mr-2" />
                    {uploadingPhotos ? '上傳中...' : '選擇照片'}
                  </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 relative">
                            {photo.url ? (
                              <img 
                                src={photo.url} 
                                alt={photo.name}
                                className="w-full h-full object-cover"
                                onError={(e) => {
                                  (e.target as HTMLImageElement).src = "/placeholder.jpg"
                                }}
                              />
                            ) : (
                            <div className="text-4xl">🖼️</div>
                            )}
                            
                            {/* 上傳進度條 */}
                            {photoUploadProgress[photo.id] !== undefined && photoUploadProgress[photo.id] < 100 && (
                              <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
                                <div className="bg-white rounded-lg p-4 text-center">
                                  <div className="w-32 bg-gray-200 rounded-full h-2 mb-2">
                                    <div 
                                      className="bg-blue-600 h-2 rounded-full transition-all duration-300"
                                      style={{ width: `${photoUploadProgress[photo.id]}%` }}
                                    ></div>
                                  </div>
                                  <p className="text-xs text-gray-600">上傳中... {photoUploadProgress[photo.id]}%</p>
                                </div>
                              </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" title={photo.name}>
                                {photo.name}
                              </span>
                              <div className="flex items-center space-x-1">
                                {photo.url && (
                              <Button
                                    type="button"
                                variant="ghost"
                                size="sm"
                                    onClick={() => window.open(photo.url, '_blank')}
                                    className="h-6 w-6 p-0"
                                  >
                                    <Eye className="w-3 h-3" />
                                  </Button>
                                )}
                                <Button
                                  type="button"
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleRemovePhoto(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>
                            
                            <div className="flex items-center space-x-2 text-xs text-gray-500">
                              <span>{photo.size}</span>
                              <span>•</span>
                              <span>{photo.uploadDate}</span>
                            </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-gray-100 rounded border overflow-hidden">
                          {photo.url ? (
                            <img 
                              src={photo.url} 
                              alt={photo.name}
                              className="w-full h-full object-cover"
                              onError={(e) => {
                                (e.target as HTMLImageElement).src = "/placeholder.jpg"
                              }}
                            />
                          ) : (
                            <div className="w-full h-full flex items-center justify-center text-xs text-gray-500">
                          照片 {index + 1}
                            </div>
                          )}
                        </div>
                      ))}
                      {newAward.photos.length > 4 && (
                        <div className="aspect-video bg-gray-200 rounded border flex items-center justify-center text-xs text-gray-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 as any).app_name || (selectedAward as any).team_name || "團隊作品"} • 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 && parseInt(selectedAward.rank) > 0 && (
                      <Badge variant="outline" className="bg-amber-50 text-amber-700">
                        第 {parseInt(selectedAward.rank)} 名
                      </Badge>
                    )}
                    {selectedAward.score && parseFloat(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">{parseFloat(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">
                        {(() => {
                          // 優先使用從數據庫查詢的 competition_type
                          const competitionType = (selectedAward as any).competition_type;
                          if (competitionType) {
                            return competitionType === "individual" ? "個人賽" : 
                                   competitionType === "team" ? "團體賽" : 
                                   competitionType === "mixed" ? "混合賽" : "未知類型";
                          }
                          
                          // 備用：從 competitions 狀態中查找
                          const competition = competitions.find(c => c.id === selectedAward.competitionId);
                          if (competition) {
                            return competition.type === "individual" ? "個人賽" : 
                                   competition.type === "team" ? "團體賽" : 
                                   competition.type === "mixed" ? "混合賽" : "未知類型";
                          }
                          
                          // 最後備用：使用 selectedAward.competitionType
                          return selectedAward.competitionType === "individual" ? "個人賽" : 
                                 selectedAward.competitionType === "team" ? "團體賽" : 
                                 selectedAward.competitionType === "mixed" ? "混合賽" : "未知類型";
                        })()}
                      </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">
                        {(selectedAward as any).competition_name || 
                         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">
                        {(() => {
                          // 優先使用從 API 載入的 competitionJudges
                          if (competitionJudges && competitionJudges.length > 0) {
                            return (
                              <>
                                {competitionJudges.slice(0, 3).map((judge: any) => (
                                  <Avatar key={judge.id} className="w-6 h-6">
                                    <AvatarFallback className="text-xs bg-orange-100 text-orange-600">
                                      {judge.name?.charAt(0) || 'J'}
                                    </AvatarFallback>
                                  </Avatar>
                                ))}
                                {competitionJudges.length > 3 && (
                                  <span className="text-xs text-gray-500">+{competitionJudges.length - 3}</span>
                                )}
                                <span className="text-xs text-gray-500 ml-2">
                                  ({competitionJudges.length} 位評審)
                                </span>
                              </>
                            )
                          }
                          
                          // 備用：從 competitions 數據中直接獲取評審信息
                          const competition = competitions.find(c => c.id === selectedAward.competitionId);
                          if (competition && competition.judges && competition.judges.length > 0) {
                            return (
                              <>
                                {competition.judges.slice(0, 3).map((judge: any) => (
                                  <Avatar key={judge.id} className="w-6 h-6">
                                    <AvatarFallback className="text-xs bg-orange-100 text-orange-600">
                                      {judge.name?.charAt(0) || 'J'}
                                    </AvatarFallback>
                                  </Avatar>
                                ))}
                                {competition.judges.length > 3 && (
                                  <span className="text-xs text-gray-500">+{competition.judges.length - 3}</span>
                                )}
                                <span className="text-xs text-gray-500 ml-2">
                                  ({competition.judges.length} 位評審)
                                </span>
                              </>
                            )
                          }
                          
                          // 如果都沒有找到評審信息，顯示載入中或無評審
                          return (
                            <span className="text-sm text-gray-500">
                              {loadingParticipants ? "載入中..." : "暫無評審信息"}
                            </span>
                          )
                        })()}
                      </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).application_links && (
                <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">
                    {(() => {
                      // 解析 application_links，可能是字符串或對象
                      let links = (selectedAward as any).application_links;
                      if (typeof links === 'string') {
                        try {
                          links = JSON.parse(links);
                        } catch (e) {
                          links = null;
                        }
                      }
                      
                      const linkItems = [];
                      
                      if (links && links.production) {
                        linkItems.push(
                          <div key="production" 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">APP 連結</span>
                        </div>
                            <a 
                              href={links.production} 
                              target="_blank" 
                              rel="noopener noreferrer"
                              className="text-xs text-green-700 break-all hover:text-green-900 underline"
                            >
                              {links.production}
                            </a>
                      </div>
                        );
                      }
                      
                      if (links && links.demo) {
                        linkItems.push(
                          <div key="demo" 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>
                            <a 
                              href={links.demo} 
                              target="_blank" 
                              rel="noopener noreferrer"
                              className="text-xs text-blue-700 break-all hover:text-blue-900 underline"
                            >
                              {links.demo}
                            </a>
                      </div>
                        );
                      }
                      
                      if (links && links.github) {
                        linkItems.push(
                          <div key="github" 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>
                            <a 
                              href={links.github} 
                              target="_blank" 
                              rel="noopener noreferrer"
                              className="text-xs text-gray-700 break-all hover:text-gray-900 underline"
                            >
                              {links.github}
                            </a>
                      </div>
                        );
                      }
                      
                      if (linkItems.length === 0) {
                        linkItems.push(
                          <div key="no-links" className="p-3 bg-gray-50 border border-gray-200 rounded-lg text-center">
                            <span className="text-sm text-gray-500">無應用連結</span>
                          </div>
                        );
                      }
                      
                      return linkItems;
                    })()}
                  </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 overflow-hidden">
                          {photo.url ? (
                            <img 
                              src={photo.url} 
                              alt={photo.caption || "得獎照片"}
                              className="w-full h-full object-cover"
                              onError={(e) => {
                                e.currentTarget.style.display = 'none';
                                e.currentTarget.nextElementSibling?.classList.remove('hidden');
                              }}
                            />
                          ) : null}
                          <div className="w-full h-full bg-gray-200 flex items-center justify-center text-2xl hidden">
                            🖼️
                          </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>
  )
}