"use client"

import { useState } from "react"
import { useCompetition } from "@/contexts/competition-context"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Slider } from "@/components/ui/slider"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Star, User, Award, MessageSquare, CheckCircle } from "lucide-react"

interface JudgeScoringDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  appId: string
  appName: string
  judgeId: string
}

export function JudgeScoringDialog({ open, onOpenChange, appId, appName, judgeId }: JudgeScoringDialogProps) {
  const { judges, submitJudgeScore, getAppJudgeScores } = useCompetition()

  const judge = judges.find((j) => j.id === judgeId)
  const existingScore = getAppJudgeScores(appId).find((s) => s.judgeId === judgeId)

  const [scores, setScores] = useState({
    innovation: existingScore?.scores.innovation || 8,
    technical: existingScore?.scores.technical || 8,
    usability: existingScore?.scores.usability || 8,
    presentation: existingScore?.scores.presentation || 8,
    impact: existingScore?.scores.impact || 8,
  })

  const [comments, setComments] = useState(existingScore?.comments || "")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

  if (!judge) return null

  const handleScoreChange = (category: keyof typeof scores, value: number[]) => {
    setScores((prev) => ({
      ...prev,
      [category]: value[0],
    }))
  }

  const handleSubmit = async () => {
    if (!comments.trim()) {
      return
    }

    setIsSubmitting(true)

    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1000))

    submitJudgeScore({
      judgeId,
      appId,
      scores,
      comments: comments.trim(),
    })

    setIsSubmitting(false)
    setIsSubmitted(true)

    // Auto close after success
    setTimeout(() => {
      setIsSubmitted(false)
      onOpenChange(false)
    }, 2000)
  }

  const totalScore = Object.values(scores).reduce((sum, score) => sum + score, 0)
  const averageScore = (totalScore / 5).toFixed(1)

  const scoreCategories = [
    {
      key: "innovation" as const,
      name: "創新性",
      description: "技術創新程度和獨特性",
      icon: "💡",
    },
    {
      key: "technical" as const,
      name: "技術性",
      description: "技術實現難度和完成度",
      icon: "⚙️",
    },
    {
      key: "usability" as const,
      name: "實用性",
      description: "實際應用價值和用戶體驗",
      icon: "🎯",
    },
    {
      key: "presentation" as const,
      name: "展示效果",
      description: "介面設計和展示完整性",
      icon: "🎨",
    },
    {
      key: "impact" as const,
      name: "影響力",
      description: "對業務和用戶的潛在影響",
      icon: "🚀",
    },
  ]

  if (isSubmitted) {
    return (
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="sm:max-w-md">
          <div className="flex flex-col items-center space-y-4 py-8">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
              <CheckCircle className="w-8 h-8 text-green-600" />
            </div>
            <div className="text-center">
              <h3 className="text-lg font-semibold text-gray-900 mb-2">評分提交成功！</h3>
              <p className="text-gray-600">您對「{appName}」的評分已成功提交</p>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    )
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <Award className="w-5 h-5 text-purple-600" />
            <span>評審評分</span>
          </DialogTitle>
          <DialogDescription>為「{appName}」進行專業評分</DialogDescription>
        </DialogHeader>

        <div className="space-y-6">
          {/* Judge Info */}
          <Card>
            <CardHeader className="pb-3">
              <div className="flex items-center space-x-3">
                <Avatar>
                  <AvatarImage src={judge.avatar || "/placeholder.svg"} />
                  <AvatarFallback className="bg-purple-100 text-purple-700">{judge.name[0]}</AvatarFallback>
                </Avatar>
                <div>
                  <h4 className="font-semibold">{judge.name}</h4>
                  <p className="text-sm text-gray-600">{judge.title}</p>
                  <div className="flex flex-wrap gap-1 mt-1">
                    {judge.expertise.map((skill) => (
                      <Badge key={skill} variant="secondary" className="text-xs">
                        {skill}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            </CardHeader>
          </Card>

          {/* Scoring Categories */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span>評分項目</span>
                <div className="text-right">
                  <div className="text-2xl font-bold text-purple-600">{averageScore}</div>
                  <div className="text-sm text-gray-500">平均分數</div>
                </div>
              </CardTitle>
              <CardDescription>請根據各項目標準進行評分（1-10分）</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {scoreCategories.map((category) => (
                <div key={category.key} className="space-y-3">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <span className="text-lg">{category.icon}</span>
                      <div>
                        <h4 className="font-medium">{category.name}</h4>
                        <p className="text-sm text-gray-600">{category.description}</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-lg font-bold text-purple-600">{scores[category.key]}</div>
                      <div className="flex">
                        {[...Array(scores[category.key])].map((_, i) => (
                          <Star key={i} className="w-3 h-3 text-yellow-400 fill-current" />
                        ))}
                      </div>
                    </div>
                  </div>
                  <Slider
                    value={[scores[category.key]]}
                    onValueChange={(value) => handleScoreChange(category.key, value)}
                    max={10}
                    min={1}
                    step={1}
                    className="w-full"
                  />
                  <div className="flex justify-between text-xs text-gray-500">
                    <span>1分 (差)</span>
                    <span>5分 (普通)</span>
                    <span>10分 (優秀)</span>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>

          {/* Comments */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <MessageSquare className="w-4 h-4" />
                <span>評審意見</span>
              </CardTitle>
              <CardDescription>請提供詳細的評審意見和建議</CardDescription>
            </CardHeader>
            <CardContent>
              <Textarea
                placeholder="請分享您對此應用的專業評價、優點、改進建議等..."
                value={comments}
                onChange={(e) => setComments(e.target.value)}
                rows={4}
                maxLength={1000}
              />
              <div className="text-xs text-gray-500 mt-2">{comments.length}/1000 字元</div>
            </CardContent>
          </Card>

          {/* Submit */}
          <div className="flex space-x-3">
            <Button
              onClick={handleSubmit}
              disabled={isSubmitting || !comments.trim()}
              className="flex-1 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
            >
              {isSubmitting ? "提交中..." : existingScore ? "更新評分" : "提交評分"}
            </Button>
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              取消
            </Button>
          </div>

          {existingScore && (
            <Alert>
              <User className="h-4 w-4" />
              <AlertDescription>您已經為此應用評分過，提交將更新您的評分。</AlertDescription>
            </Alert>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}