"use client"

import { useState, useEffect } from "react"
import { useCompetition } from "@/contexts/competition-context"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import {
  Target,
  Users,
  Lightbulb,
  Trophy,
  Crown,
  Award,
  Camera,
  ImageIcon,
  ChevronLeft,
  ChevronRight,
  X,
  Star,
  MessageSquare,
  BarChart3,
  ExternalLink,
  Eye,
  Link,
  FileText,
  Download,
} from "lucide-react"
import type { Award as AwardType } from "@/types/competition"

interface AwardDetailDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  award: AwardType
}

export function AwardDetailDialog({ open, onOpenChange, award }: AwardDetailDialogProps) {
  const { competitions, judges, getTeamById, getProposalById } = useCompetition()
  const [activeTab, setActiveTab] = useState("overview")
  const [showPhotoGallery, setShowPhotoGallery] = useState(false)
  const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0)
  const [competitionJudges, setCompetitionJudges] = useState<any[]>([])
  const [judgeScores, setJudgeScores] = useState<any[]>([])
  const [loadingScores, setLoadingScores] = useState(false)

  // 添加調試資訊
  console.log('🏆 AwardDetailDialog 渲染:', { 
    open, 
    award: award ? {
      id: award.id,
      competitionId: award.competitionId,
      awardName: award.awardName,
      hasCompetitionId: !!award.competitionId
    } : null
  });

  const competition = competitions.find((c) => c.id === award.competitionId)

  // 載入競賽評審團資訊
  useEffect(() => {
    console.log('🔍 useEffect 觸發:', { open, competitionId: award.competitionId, awardId: award.id });
    
    if (open && award.competitionId) {
      const loadCompetitionJudges = async (retryCount = 0) => {
        try {
          console.log('🔍 載入競賽評審團:', award.competitionId, '重試次數:', retryCount);
          
          const response = await fetch(`/api/competitions/${award.competitionId}/judges?t=${Date.now()}`, {
            method: 'GET',
            headers: {
              'Cache-Control': 'no-cache, no-store, must-revalidate',
              'Pragma': 'no-cache',
              'Expires': '0'
            }
          });
          
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          
          const data = await response.json();
          console.log('📊 評審團API回應:', data);
          
          if (data.success) {
            console.log('✅ 載入評審團成功:', data.data.judges.length, '位');
            setCompetitionJudges(data.data.judges);
          } else {
            console.error('❌ 載入評審團失敗:', data.message);
            setCompetitionJudges([]);
          }
        } catch (error) {
          console.error('❌ 載入評審團錯誤:', error);
          if (retryCount < 2) {
            console.log('🔄 重試載入評審團...', retryCount + 1);
            setTimeout(() => loadCompetitionJudges(retryCount + 1), 1000);
          } else {
            setCompetitionJudges([]);
          }
        }
      };

      loadCompetitionJudges();
    } else {
      console.log('❌ useEffect 條件不滿足:', {
        open,
        competitionId: award.competitionId,
        hasCompetitionId: !!award.competitionId
      });
    }
  }, [open, award.competitionId]);

  // 載入評分詳情
  useEffect(() => {
    if (open && award.id) {
      const loadJudgeScores = async () => {
        try {
          setLoadingScores(true);
          console.log('🔍 載入評分詳情:', award.id);
          
          const response = await fetch(`/api/awards/${award.id}/scores`);
          const data = await response.json();
          
          if (data.success) {
            console.log('✅ 載入評分詳情成功:', data.data.length, '筆');
            setJudgeScores(data.data);
          } else {
            console.error('❌ 載入評分詳情失敗:', data.message);
            setJudgeScores([]);
          }
        } catch (error) {
          console.error('❌ 載入評分詳情錯誤:', error);
          setJudgeScores([]);
        } finally {
          setLoadingScores(false);
        }
      };

      loadJudgeScores();
    } else {
      setJudgeScores([]);
    }
  }, [open, award.id]);

  // Competition photos - empty for production
  const getCompetitionPhotos = () => {
    return []
  }

  const competitionPhotos = getCompetitionPhotos()

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

  const getCompetitionTypeText = (type: string) => {
    switch (type) {
      case "individual":
        return "個人賽"
      case "team":
        return "團隊賽"
      case "proposal":
        return "提案賽"
      default:
        return "競賽"
    }
  }

  const getCompetitionTypeColor = (type: string) => {
    switch (type) {
      case "individual":
        return "bg-blue-100 text-blue-800 border-blue-200"
      case "team":
        return "bg-green-100 text-green-800 border-green-200"
      case "proposal":
        return "bg-purple-100 text-purple-800 border-purple-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

  const getFileIcon = (type: string) => {
    switch (type.toLowerCase()) {
      case "pdf":
        return <FileText className="w-5 h-5 text-red-500" />
      case "pptx":
      case "ppt":
        return <FileText className="w-5 h-5 text-orange-500" />
      case "docx":
      case "doc":
        return <FileText className="w-5 h-5 text-blue-500" />
      default:
        return <FileText className="w-5 h-5 text-gray-500" />
    }
  }

  const nextPhoto = () => {
    setCurrentPhotoIndex((prev) => {
      // 獲取當前照片數組
      let photos = [];
      if (award.photos) {
        photos = award.photos;
      } else if (award.photos) {
        try {
          photos = typeof award.photos === 'string' 
            ? JSON.parse(award.photos) 
            : award.photos;
        } catch (e) {
          console.warn('解析 photos JSON 失敗:', e);
          photos = [];
        }
      }
      
      if (photos.length === 0) return 0;
      return (prev + 1) % photos.length;
    })
  }

  const prevPhoto = () => {
    setCurrentPhotoIndex((prev) => {
      // 獲取當前照片數組
      let photos = [];
      if (award.photos) {
        photos = award.photos;
      } else if (award.photos) {
        try {
          photos = typeof award.photos === 'string' 
            ? JSON.parse(award.photos) 
            : award.photos;
        } catch (e) {
          console.warn('解析 photos JSON 失敗:', e);
          photos = [];
        }
      }
      
      if (photos.length === 0) return 0;
      return (prev - 1 + photos.length) % photos.length;
    })
  }

  const handlePreview = (report: any) => {
    // Open preview in new window
    window.open(report.previewUrl, "_blank")
  }

  const renderAwardOverview = () => (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex items-center space-x-4">
            <div className="text-6xl">{award.icon}</div>
            <div className="flex-1">
              <CardTitle className="text-2xl">{award.awardName}</CardTitle>
              <CardDescription className="text-lg">
                {award.competitionType === "team" 
                  ? (award.teamName || award.appName || "團隊名稱")
                  : (award.appName || award.proposalTitle || award.teamName)
                }
              </CardDescription>
              <div className="flex items-center space-x-4 mt-2">
                <Badge variant="outline" className={getCompetitionTypeColor(award.competitionType)}>
                  {getCompetitionTypeIcon(award.competitionType)}
                  <span className="ml-1">{getCompetitionTypeText(award.competitionType)}</span>
                </Badge>
                <Badge
                  variant="secondary"
                  className={`${
                    award.awardType === "gold"
                      ? "bg-yellow-100 text-yellow-800 border-yellow-200"
                      : award.awardType === "silver"
                      ? "bg-gray-100 text-gray-800 border-gray-200"
                      : award.awardType === "bronze"
                      ? "bg-orange-100 text-orange-800 border-orange-200"
                      : "bg-purple-100 text-purple-800 border-purple-200"
                  }`}
                >
                  {award.awardName}
                </Badge>
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center p-4 bg-purple-50 rounded-lg">
              <div className="text-3xl font-bold text-purple-600">{award.score}</div>
              <div className="text-sm text-purple-600">評審評分</div>
            </div>
            <div className="text-center p-4 bg-blue-50 rounded-lg">
              <div className="text-3xl font-bold text-blue-600">
                {award.year}年{award.month}月
              </div>
              <div className="text-sm text-blue-600">獲獎時間</div>
            </div>
            <div className="text-center p-4 bg-green-50 rounded-lg">
              <div className="text-3xl font-bold text-green-600">
                {award.competitionType === "team" 
                  ? (award.appName || award.teamName || "應用名稱")
                  : (award.teamName || award.creator || "創作者")
                }
              </div>
              <div className="text-sm text-green-600">
                {award.competitionType === "team" ? "應用名稱" : "創作者"}
              </div>
            </div>
          </div>

          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
            <h4 className="font-semibold text-blue-900 mb-2 flex items-center">
              <Trophy className="w-5 h-5 mr-2" />
              競賽資訊
            </h4>
            <div className="text-blue-800">
              <p className="mb-2">
                <strong>競賽名稱：</strong>
                {award.competitionName || competition?.name || '未知競賽'}
              </p>
              <p className="mb-2">
                <strong>競賽描述：</strong>
                {award.competitionDescription || competition?.description || '暫無描述'}
              </p>
              <p className="mb-2">
                <strong>競賽期間：</strong>
                {award.competitionStartDate && award.competitionEndDate 
                  ? `${new Date(award.competitionStartDate).toLocaleDateString('zh-TW', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '/')} ~ ${new Date(award.competitionEndDate).toLocaleDateString('zh-TW', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '/')}`
                  : competition?.startDate && competition?.endDate
                  ? `${new Date(competition.startDate).toLocaleDateString('zh-TW', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '/')} ~ ${new Date(competition.endDate).toLocaleDateString('zh-TW', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '/')}`
                  : '暫無時間資訊'
                }
              </p>
              <p>
                <strong>評審團：</strong>
                {competitionJudges && competitionJudges.length > 0 ? (
                  <span className="text-green-700">
                    {competitionJudges.length} 位評審
                  </span>
                ) : (
                  <span className="text-gray-500">暫無評審信息</span>
                )}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* App Links Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Link className="w-5 h-5 text-green-500" />
            <span>應用連結</span>
          </CardTitle>
          <CardDescription>相關應用和資源連結</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {(() => {
              // 解析 application_links 資料
              let applicationLinks = null;
              if (award.applicationLinks) {
                applicationLinks = award.applicationLinks;
              } else if (award.application_links) {
                try {
                  applicationLinks = typeof award.application_links === 'string' 
                    ? JSON.parse(award.application_links) 
                    : award.application_links;
                } catch (e) {
                  console.error('解析 application_links 失敗:', e);
                }
              }

              if (!applicationLinks) {
                return (
                  <div className="col-span-full text-center py-8 text-gray-500">
                    <Link className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                    <p>暫無應用連結</p>
                  </div>
                );
              }

              return (
                <>
                  {applicationLinks.production && (
                    <div className="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg">
                      <div className="flex items-center space-x-3">
                        <ExternalLink className="w-5 h-5 text-green-600" />
                        <div>
                          <p className="font-medium text-green-800">正式應用</p>
                          <p className="text-xs text-green-600">APP 連結</p>
                        </div>
                      </div>
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-green-300 text-green-700 hover:bg-green-100 bg-transparent"
                        onClick={() => window.open(applicationLinks.production, "_blank")}
                      >
                        訪問
                      </Button>
                    </div>
                  )}

                  {applicationLinks.demo && (
                    <div className="flex items-center justify-between p-3 bg-blue-50 border border-blue-200 rounded-lg">
                      <div className="flex items-center space-x-3">
                        <Eye className="w-5 h-5 text-blue-600" />
                        <div>
                          <p className="font-medium text-blue-800">演示版本</p>
                          <p className="text-xs text-blue-600">體驗環境</p>
                        </div>
                      </div>
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-blue-300 text-blue-700 hover:bg-blue-100 bg-transparent"
                        onClick={() => window.open(applicationLinks.demo, "_blank")}
                      >
                        體驗
                      </Button>
                    </div>
                  )}

                  {applicationLinks.github && (
                    <div 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">
                        <FileText className="w-5 h-5 text-gray-600" />
                        <div>
                          <p className="font-medium text-gray-800">源碼倉庫</p>
                          <p className="text-xs text-gray-600">GitHub</p>
                        </div>
                      </div>
                      <Button
                        size="sm"
                        variant="outline"
                        className="border-gray-300 text-gray-700 hover:bg-gray-100 bg-transparent"
                        onClick={() => window.open(applicationLinks.github, "_blank")}
                      >
                        查看
                      </Button>
                    </div>
                  )}
                </>
              );
            })()}
          </div>
        </CardContent>
      </Card>

      {/* Reports Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <FileText className="w-5 h-5 text-purple-500" />
            <span>相關報告</span>
          </CardTitle>
          <CardDescription>技術文檔和報告資料（僅供預覽）</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {(() => {
              // 解析 documents 資料
              let documents = [];
              if (award.documents) {
                documents = award.documents;
              } else if (award.documents) {
                try {
                  documents = typeof award.documents === 'string' 
                    ? JSON.parse(award.documents) 
                    : award.documents;
                } catch (e) {
                  console.error('解析 documents 失敗:', e);
                }
              }

              if (!documents || documents.length === 0) {
                return (
                  <div className="text-center py-8 text-gray-500">
                    <FileText className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                    <p>暫無相關文件</p>
                  </div>
                );
              }

              return documents.map((doc, index) => (
                <div
                  key={doc.id || index}
                  className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  <div className="flex items-center space-x-4">
                    {getFileIcon(doc.type)}
                    <div className="flex-1">
                      <h4 className="font-medium text-gray-900">{doc.name || doc.title}</h4>
                      <p className="text-sm text-gray-600">{doc.description}</p>
                      <div className="flex items-center space-x-4 mt-1 text-xs text-gray-500">
                        <span>大小：{doc.size}</span>
                        <span>上傳：{doc.uploadDate || doc.upload_date}</span>
                        <span className="uppercase">{doc.type}</span>
                      </div>
                    </div>
                  </div>
                  <div className="flex items-center space-x-2">
                    {doc.previewUrl && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => window.open(doc.previewUrl, "_blank")}
                        className="text-blue-600 border-blue-300 hover:bg-blue-50"
                      >
                        <Eye className="w-4 h-4 mr-1" />
                        預覽
                      </Button>
                    )}
                    {doc.downloadUrl && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => window.open(doc.downloadUrl, "_blank")}
                        className="text-purple-600 border-purple-300 hover:bg-purple-50"
                      >
                        <Download className="w-4 h-4 mr-1" />
                        下載
                      </Button>
                    )}
                    {doc.url && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => window.open(doc.url, "_blank")}
                        className="text-purple-600 border-purple-300 hover:bg-purple-50"
                      >
                        <Download className="w-4 h-4 mr-1" />
                        下載
                      </Button>
                    )}
                  </div>
                </div>
              ));
            })()}
          </div>
        </CardContent>
      </Card>
    </div>
  )

  const renderJudgePanel = () => {
    // 確保 competitionJudges 是陣列
    const judges = Array.isArray(competitionJudges) ? competitionJudges : [];
    
    if (judges.length === 0) {
      return (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Crown className="w-5 h-5 text-purple-500" />
              <span>評審團</span>
            </CardTitle>
            <CardDescription>本次競賽的專業評審團隊</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-center py-8 text-gray-500">
              <Crown className="w-12 h-12 mx-auto mb-4 text-gray-300" />
              <p>暫無評審信息</p>
            </div>
          </CardContent>
        </Card>
      )
    }

    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Crown className="w-5 h-5 text-purple-500" />
            <span>評審團</span>
          </CardTitle>
          <CardDescription>本次競賽的專業評審團隊</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {judges.map((judge, index) => (
              <div key={judge.id || index} className="text-center">
                <Avatar className="w-16 h-16 mx-auto mb-3">
                  <AvatarImage src={judge.avatar} />
                  <AvatarFallback className="bg-purple-100 text-purple-700 text-lg">
                    {judge.name ? judge.name[0] : 'J'}
                  </AvatarFallback>
                </Avatar>
                <h4 className="font-semibold text-gray-900 mb-1">{judge.name}</h4>
                <p className="text-sm text-gray-600 mb-2">{judge.title}</p>
                <div className="flex flex-wrap justify-center gap-1">
                  {judge.expertise && judge.expertise.map((skill, skillIndex) => (
                    <Badge key={skillIndex} variant="outline" className="text-xs">
                      {skill}
                    </Badge>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    )
  }

  const renderJudgeScores = () => {
    // 確保 judgeScores 是陣列
    const scores = Array.isArray(judgeScores) ? judgeScores : [];
    
    return (
      <div className="space-y-6">
        {/* Overall Statistics */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <BarChart3 className="w-5 h-5 text-blue-500" />
              <span>評分統計</span>
            </CardTitle>
            <CardDescription>評審團整體評分概況</CardDescription>
          </CardHeader>
          <CardContent>
            {loadingScores ? (
              <div className="text-center py-8">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
                <p className="text-gray-600">載入評分資料中...</p>
              </div>
            ) : scores.length === 0 ? (
              <div className="text-center py-8 text-gray-500">
                <BarChart3 className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                <p>暫無評分資料</p>
              </div>
            ) : (
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="text-center p-3 bg-blue-50 rounded-lg">
                  <div className="text-2xl font-bold text-blue-600">
                    {scores.length > 0 ? (scores.reduce((sum, score) => sum + Number(score.overallScore), 0) / scores.length).toFixed(1) : '0.0'}
                  </div>
                  <div className="text-sm text-blue-600">平均分數</div>
                </div>
                <div className="text-center p-3 bg-green-50 rounded-lg">
                  <div className="text-2xl font-bold text-green-600">
                    {scores.length > 0 ? Math.max(...scores.map((s) => Number(s.overallScore))).toFixed(1) : '0.0'}
                  </div>
                  <div className="text-sm text-green-600">最高分數</div>
                </div>
                <div className="text-center p-3 bg-orange-50 rounded-lg">
                  <div className="text-2xl font-bold text-orange-600">
                    {scores.length > 0 ? Math.min(...scores.map((s) => Number(s.overallScore))).toFixed(1) : '0.0'}
                  </div>
                  <div className="text-sm text-orange-600">最低分數</div>
                </div>
                <div className="text-center p-3 bg-purple-50 rounded-lg">
                  <div className="text-2xl font-bold text-purple-600">{scores.length}</div>
                  <div className="text-sm text-purple-600">評審人數</div>
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Individual Judge Scores */}
        {loadingScores ? (
          <div className="text-center py-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">載入評審評分中...</p>
          </div>
        ) : scores.length === 0 ? (
          <div className="text-center py-8 text-gray-500">
            <Users className="w-12 h-12 mx-auto mb-2 text-gray-300" />
            <p>暫無評審評分資料</p>
          </div>
        ) : (
          scores.map((judgeScore, index) => (
          <Card key={judgeScore.judgeId}>
            <CardHeader>
              <div className="flex items-center space-x-4">
                <Avatar className="w-12 h-12">
                  <AvatarImage src={judgeScore.judgeAvatar} />
                  <AvatarFallback className="bg-blue-100 text-blue-700">{judgeScore.judgeName[0]}</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <CardTitle className="text-lg">{judgeScore.judgeName}</CardTitle>
                  <CardDescription>{judgeScore.judgeTitle}</CardDescription>
                </div>
                <div className="text-right">
                  <div className="flex items-center space-x-1">
                    <Star className="w-5 h-5 text-yellow-500" />
                    <span className="text-2xl font-bold text-gray-900">{Number(judgeScore.overallScore).toFixed(1)}</span>
                    <span className="text-gray-500">/100</span>
                  </div>
                  <div className="text-xs text-gray-500 mt-1">評分時間：{new Date(judgeScore.submittedAt).toLocaleDateString('zh-TW', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '/')}</div>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              {/* Criteria Scores */}
              <div className="space-y-4 mb-6">
                <h4 className="font-semibold text-gray-900 flex items-center">
                  <BarChart3 className="w-4 h-4 mr-2" />
                  評分細項
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {judgeScore.criteria.map((criterion, criterionIndex) => (
                    <div key={criterionIndex} className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm font-medium text-gray-700">{criterion.name}</span>
                        <span className="text-sm text-gray-600">
                          {criterion.score}/{criterion.maxScore}
                        </span>
                      </div>
                      <Progress value={(criterion.score / criterion.maxScore) * 100} className="h-2" />
                    </div>
                  ))}
                </div>
              </div>

              {/* Judge Comment */}
              <div className="space-y-3">
                <h4 className="font-semibold text-gray-900 flex items-center">
                  <MessageSquare className="w-4 h-4 mr-2" />
                  評審評語
                </h4>
                <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
                  <p className="text-gray-700 leading-relaxed">{judgeScore.comment}</p>
                </div>
              </div>
            </CardContent>
          </Card>
          ))
        )}
      </div>
    )
  }

  const renderCompetitionPhotos = () => {
    // 解析 photos 資料
    let photos = [];
    if (award.photos) {
      photos = award.photos;
    } else if (award.photos) {
      try {
        photos = typeof award.photos === 'string' 
          ? JSON.parse(award.photos) 
          : award.photos;
      } catch (e) {
        console.error('解析 photos 失敗:', e);
      }
    }

    console.log('🖼️ 競賽照片資料:', {
      hasPhotos: !!photos,
      photosType: typeof photos,
      photosLength: photos?.length,
      photosData: photos
    });

    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Camera className="w-5 h-5 text-blue-500" />
            <span>競賽照片</span>
          </CardTitle>
          <CardDescription>競賽活動精彩瞬間</CardDescription>
        </CardHeader>
        <CardContent>
          {!photos || !Array.isArray(photos) || photos.length === 0 ? (
            <div className="text-center py-8 text-gray-500">
              <ImageIcon className="w-12 h-12 mx-auto mb-4 text-gray-300" />
              <p>暫無競賽照片</p>
            </div>
          ) : (
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
              {photos.map((photo: any, index: number) => {
                console.log('📸 處理照片:', { index, photo });
                return (
                  <div key={photo.id || photo.url || index} className="space-y-2">
                    <div className="aspect-video bg-gray-100 rounded-lg border overflow-hidden cursor-pointer hover:shadow-md transition-shadow"
                         onClick={() => {
                           setCurrentPhotoIndex(index);
                           setShowPhotoGallery(true);
                         }}>
                      {photo.url ? (
                        <img 
                          src={photo.url} 
                          alt={photo.caption || photo.name || "競賽照片"}
                          className="w-full h-full object-cover"
                          onError={(e) => {
                            console.log('❌ 圖片載入失敗:', photo.url);
                            e.currentTarget.style.display = 'none';
                            e.currentTarget.nextElementSibling?.classList.remove('hidden');
                          }}
                          onLoad={() => {
                            console.log('✅ 圖片載入成功:', photo.url);
                          }}
                        />
                      ) : (
                        <div className="w-full h-full bg-gray-200 flex items-center justify-center text-2xl">
                          🖼️
                        </div>
                      )}
                      <div className="w-full h-full bg-gray-200 flex items-center justify-center text-2xl hidden">
                        🖼️
                      </div>
                    </div>
                    {(photo.caption || photo.name) && (
                      <p className="text-xs text-gray-600 text-center line-clamp-2">
                        {photo.caption || photo.name}
                      </p>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>
    );
  }

  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-2xl flex items-center space-x-2">
              <Award className="w-6 h-6 text-purple-500" />
              <span>得獎作品詳情</span>
            </DialogTitle>
            <DialogDescription>
              {award.competitionName} - {award.awardName}
            </DialogDescription>
          </DialogHeader>
          <div className="mt-6">
            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="overview">獎項概覽</TabsTrigger>
                <TabsTrigger value="photos">競賽照片</TabsTrigger>
                <TabsTrigger value="judges">評審團</TabsTrigger>
                <TabsTrigger value="scores">評分詳情</TabsTrigger>
              </TabsList>

              <TabsContent value="overview" className="space-y-6">
                {renderAwardOverview()}
              </TabsContent>

              <TabsContent value="photos" className="space-y-6">
                {renderCompetitionPhotos()}
              </TabsContent>

              <TabsContent value="judges" className="space-y-6">
                {renderJudgePanel()}
              </TabsContent>

              <TabsContent value="scores" className="space-y-6">
                {renderJudgeScores()}
              </TabsContent>
            </Tabs>
          </div>
        </DialogContent>
      </Dialog>

      {/* Photo Gallery Modal */}
      {showPhotoGallery && (() => {
        // 解析 photos 資料
        let photos = [];
        if (award.photos) {
          photos = award.photos;
        } else if (award.photos) {
          try {
            photos = typeof award.photos === 'string' 
              ? JSON.parse(award.photos) 
              : award.photos;
          } catch (e) {
            console.error('解析 photos 失敗:', e);
          }
        }

        if (!photos || !Array.isArray(photos) || photos.length === 0) {
          return null;
        }

        const currentPhoto = photos[isNaN(currentPhotoIndex) ? 0 : currentPhotoIndex];

        return (
          <Dialog open={showPhotoGallery} onOpenChange={setShowPhotoGallery}>
            <DialogContent className="max-w-4xl max-h-[90vh] p-0">
              <DialogHeader className="sr-only">
                <DialogTitle>照片畫廊</DialogTitle>
              </DialogHeader>
              <div className="relative">
                {/* Close Button */}
                <Button
                  variant="ghost"
                  size="sm"
                  className="absolute top-4 right-4 z-10 bg-black/50 text-white hover:bg-black/70"
                  onClick={() => setShowPhotoGallery(false)}
                >
                  <X className="w-4 h-4" />
                </Button>

                {/* Main Photo */}
                <div className="relative aspect-video bg-black">
                  {currentPhoto?.url ? (
                    <img
                      src={currentPhoto.url}
                      alt={currentPhoto.caption || currentPhoto.name || "競賽照片"}
                      className="w-full h-full object-contain"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center text-white text-6xl">
                      🖼️
                    </div>
                  )}

                  {/* Navigation Arrows */}
                  {photos.length > 1 && (
                    <>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 text-white hover:bg-black/70"
                        onClick={prevPhoto}
                      >
                        <ChevronLeft className="w-4 h-4" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 text-white hover:bg-black/70"
                        onClick={nextPhoto}
                      >
                        <ChevronRight className="w-4 h-4" />
                      </Button>
                    </>
                  )}

                  {/* Photo Counter */}
                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm">
                    {isNaN(currentPhotoIndex) ? 1 : currentPhotoIndex + 1} / {photos.length}
                  </div>
                </div>

                {/* Photo Caption */}
                {(currentPhoto?.caption || currentPhoto?.name) && (
                  <div className="p-4 bg-white border-t">
                    <p className="text-center text-gray-700">
                      {currentPhoto.caption || currentPhoto.name}
                    </p>
                  </div>
                )}

                {/* Thumbnail Strip */}
                {photos.length > 1 && (
                  <div className="p-4 bg-gray-50 border-t">
                    <div className="flex space-x-2 overflow-x-auto">
                      {photos.map((photo: any, index: number) => (
                        <button
                          key={photo.id || photo.url || index}
                          className={`flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 ${
                            index === currentPhotoIndex 
                              ? 'border-blue-500' 
                              : 'border-gray-200 hover:border-gray-300'
                          }`}
                          onClick={() => setCurrentPhotoIndex(index)}
                        >
                          {photo.url ? (
                            <img
                              src={photo.url}
                              alt={photo.caption || photo.name || "競賽照片"}
                              className="w-full h-full object-cover"
                            />
                          ) : (
                            <div className="w-full h-full bg-gray-200 flex items-center justify-center text-lg">
                              🖼️
                            </div>
                          )}
                        </button>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </DialogContent>
          </Dialog>
        );
      })()}
    </>
  )
}