"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { TrendingUp } from "lucide-react"

interface DimensionScore {
  percentage: number
  rawScore: number
  maxScore: number
}

interface CreativeAnalysisProps {
  score: number
  dimensionScores: {
    innovation: DimensionScore
    imagination: DimensionScore
    flexibility: DimensionScore
    originality: DimensionScore
  }
  creativityLevel: {
    level: string
    description: string
    suggestion: string
  }
  totalScore?: number
  maxScore?: number
}

export function CreativeAnalysis({ score, dimensionScores, creativityLevel, totalScore, maxScore }: CreativeAnalysisProps) {
  // 計算各維度分數
  const categoryResults = [
    {
      category: 'innovation',
      name: '創新能力',
      score: dimensionScores.innovation.percentage,
      rawScore: dimensionScores.innovation.rawScore,
      maxRawScore: dimensionScores.innovation.maxScore
    },
    {
      category: 'imagination',
      name: '想像力',
      score: dimensionScores.imagination.percentage,
      rawScore: dimensionScores.imagination.rawScore,
      maxRawScore: dimensionScores.imagination.maxScore
    },
    {
      category: 'flexibility',
      name: '靈活性',
      score: dimensionScores.flexibility.percentage,
      rawScore: dimensionScores.flexibility.rawScore,
      maxRawScore: dimensionScores.flexibility.maxScore
    },
    {
      category: 'originality',
      name: '原創性',
      score: dimensionScores.originality.percentage,
      rawScore: dimensionScores.originality.rawScore,
      maxRawScore: dimensionScores.originality.maxScore
    }
  ]

  return (
    <div className="space-y-6">
      {/* 創意能力評估 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <TrendingUp className="w-5 h-5" />
            創意能力評估
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="p-3 md:p-4 bg-muted/50 rounded-lg">
            <h3 className="font-medium mb-2 text-sm md:text-base">創意能力評估</h3>
            <p className="text-xs md:text-sm text-muted-foreground leading-relaxed">
              基於您的測試結果，您在創意思維方面表現為「{creativityLevel.level}」水平。
              {score >= 75 &&
                "您具備出色的創新思維能力，善於從不同角度思考問題，能夠產生獨特的想法和解決方案。"}
              {score >= 50 &&
                score < 75 &&
                "您具有一定的創造性思維潛力，建議多參與創新活動，培養發散性思維。"}
              {score < 50 && "建議您多接觸創新思維訓練，培養好奇心和探索精神，提升創造性解決問題的能力。"}
            </p>
          </div>
        </CardContent>
      </Card>

      {/* 能力維度分析 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <TrendingUp className="w-5 h-5" />
            能力維度分析
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
            {categoryResults.map((category) => (
              <div key={category.category} className="space-y-2 md:space-y-3">
                <div className="flex justify-between items-center">
                  <h3 className="font-medium text-sm md:text-base">{category.name}</h3>
                  <Badge variant="outline" className="text-xs">{category.score}分</Badge>
                </div>
                <Progress value={category.score} className="h-2" />
                <p className="text-xs md:text-sm text-muted-foreground">
                  {category.rawScore} / {category.maxRawScore} 分
                </p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 創意能力分析圖表 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <TrendingUp className="w-5 h-5" />
            創意能力分析圖表
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            {/* 能力維度雷達圖 */}
            <div className="space-y-4">
              <h4 className="font-medium text-sm md:text-base text-center">能力維度雷達圖</h4>
              <div className="flex justify-center">
                <div className="relative w-56 h-56 md:w-72 md:h-72">
                  {/* Radar Chart Background */}
                  <svg viewBox="0 0 200 200" className="w-full h-full">
                    {/* Grid circles */}
                    <circle cx="100" cy="100" r="60" fill="none" stroke="#e5e7eb" strokeWidth="1"/>
                    <circle cx="100" cy="100" r="45" fill="none" stroke="#e5e7eb" strokeWidth="1"/>
                    <circle cx="100" cy="100" r="30" fill="none" stroke="#e5e7eb" strokeWidth="1"/>
                    <circle cx="100" cy="100" r="15" fill="none" stroke="#e5e7eb" strokeWidth="1"/>
                    
                    {/* Grid lines - 4 axes for 4 dimensions */}
                    {[0, 90, 180, 270].map((angle, index) => {
                      const x1 = 100 + 60 * Math.cos((angle - 90) * Math.PI / 180)
                      const y1 = 100 + 60 * Math.sin((angle - 90) * Math.PI / 180)
                      return (
                        <line
                          key={index}
                          x1="100"
                          y1="100"
                          x2={x1}
                          y2={y1}
                          stroke="#e5e7eb"
                          strokeWidth="1"
                        />
                      )
                    })}
                    
                    {/* Data points and area */}
                    {categoryResults.map((category, index) => {
                      const angle = (index * 90 - 90) * Math.PI / 180
                      const radius = (category.score / 100) * 60
                      const x = 100 + radius * Math.cos(angle)
                      const y = 100 + radius * Math.sin(angle)
                      
                      // Calculate label position - more space for text
                      let labelRadius = 75
                      let labelX = 100 + labelRadius * Math.cos(angle)
                      let labelY = 100 + labelRadius * Math.sin(angle)
                      
                      // Special adjustments for imagination and originality
                      if (angle === 0) { // Right - 想像力
                        labelRadius = 70
                        labelX = 100 + labelRadius * Math.cos(angle)
                        labelY = 100 + labelRadius * Math.sin(angle)
                      } else if (angle === 180 * Math.PI / 180) { // Left - 原創性
                        labelRadius = 70
                        labelX = 100 + labelRadius * Math.cos(angle)
                        labelY = 100 + labelRadius * Math.sin(angle)
                      }
                      
                      // Adjust text anchor based on position
                      let textAnchor: "middle" | "start" | "end" = "middle"
                      let dominantBaseline: "middle" | "hanging" | "alphabetic" = "middle"
                      
                      if (angle === -90 * Math.PI / 180) { // Top
                        dominantBaseline = "hanging"
                      } else if (angle === 90 * Math.PI / 180) { // Bottom
                        dominantBaseline = "alphabetic"
                      } else if (angle === 0) { // Right
                        textAnchor = "start"
                      } else if (angle === 180 * Math.PI / 180) { // Left
                        textAnchor = "end"
                      }
                      
                      return (
                        <g key={category.category}>
                          {/* Data point */}
                          <circle
                            cx={x}
                            cy={y}
                            r="4"
                            fill="#3b82f6"
                            stroke="white"
                            strokeWidth="2"
                            className="drop-shadow-sm"
                          />
                          {/* Label - positioned closer to the chart */}
                          <text
                            x={labelX}
                            y={labelY}
                            textAnchor={textAnchor}
                            dominantBaseline={dominantBaseline}
                            className="text-[10px] fill-gray-600 font-medium"
                          >
                            {category.name}
                          </text>
                          {/* Score label - positioned above the data point */}
                          <text
                            x={x}
                            y={y - 12}
                            textAnchor="middle"
                            dominantBaseline="middle"
                            className="text-[10px] fill-blue-600 font-bold"
                            style={{ textShadow: '1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white' }}
                          >
                            {category.score}%
                          </text>
                        </g>
                      )
                    })}
                    
                    {/* Area fill */}
                    <polygon
                      points={categoryResults.map((category, index) => {
                        const angle = (index * 90 - 90) * Math.PI / 180
                        const radius = (category.score / 100) * 60
                        const x = 100 + radius * Math.cos(angle)
                        const y = 100 + radius * Math.sin(angle)
                        return `${x},${y}`
                      }).join(' ')}
                      fill="rgba(59, 130, 246, 0.2)"
                      stroke="#3b82f6"
                      strokeWidth="2"
                    />
                  </svg>
                </div>
              </div>
              
              {/* Legend */}
              <div className="flex justify-center">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
                  {categoryResults.map((category) => (
                    <div key={category.category} className="flex items-center gap-2">
                      <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                      <span className="text-muted-foreground">{category.name}</span>
                    </div>
                  ))}
                </div>
              </div>
              
              {/* Dimension Details */}
              <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                {categoryResults.map((category) => {
                  const getDescription = (categoryName: string) => {
                    switch (categoryName) {
                      case '創新能力':
                        return '善於提出新想法，勇於嘗試不同的解決方案'
                      case '想像力':
                        return '能夠從不同角度思考，具有豐富的創意思維'
                      case '靈活性':
                        return '適應變化能力強，能夠靈活調整思維方式'
                      case '原創性':
                        return '具有獨特的創見，能夠產生原創性想法'
                      default:
                        return ''
                    }
                  }
                  
                  const getLevel = (score: number) => {
                    if (score >= 80) return { text: '優秀', color: 'text-green-600' }
                    if (score >= 60) return { text: '良好', color: 'text-blue-600' }
                    if (score >= 40) return { text: '一般', color: 'text-yellow-600' }
                    return { text: '待提升', color: 'text-red-600' }
                  }
                  
                  const level = getLevel(category.score)
                  
                  return (
                    <div key={category.category} className="p-3 bg-muted/30 rounded-lg">
                      <div className="flex items-center justify-between mb-2">
                        <h5 className="font-medium text-sm">{category.name}</h5>
                        <div className="flex items-center gap-2">
                          <span className="text-sm font-bold text-blue-600">{category.score}%</span>
                          <span className={`text-xs ${level.color}`}>{level.text}</span>
                        </div>
                      </div>
                      <p className="text-xs text-muted-foreground leading-relaxed">
                        {getDescription(category.name)}
                      </p>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}