"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Slider } from "@/components/ui/slider"
import { Badge } from "@/components/ui/badge"
import { Plus, Trash2, Save, RotateCcw, FileText } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface CriteriaItem {
  id: string
  name: string
  description: string
  weight: number
  maxScore: number
}

const defaultCriteria: CriteriaItem[] = [
  {
    id: "1",
    name: "內容品質",
    description: "內容的準確性、完整性和專業度",
    weight: 25,
    maxScore: 10,
  },
  {
    id: "2",
    name: "視覺設計",
    description: "版面設計、色彩搭配和視覺效果",
    weight: 20,
    maxScore: 10,
  },
  {
    id: "3",
    name: "邏輯結構",
    description: "內容組織的邏輯性和條理性",
    weight: 20,
    maxScore: 10,
  },
  {
    id: "4",
    name: "創新性",
    description: "創意思維和獨特觀點的展現",
    weight: 15,
    maxScore: 10,
  },
  {
    id: "5",
    name: "實用性",
    description: "內容的實際應用價值和可操作性",
    weight: 20,
    maxScore: 10,
  },
]

export default function CriteriaPage() {
  const [criteria, setCriteria] = useState<CriteriaItem[]>(defaultCriteria)
  const [templateName, setTemplateName] = useState("預設評分標準")
  const { toast } = useToast()

  const addCriteria = () => {
    const newCriteria: CriteriaItem = {
      id: Date.now().toString(),
      name: "",
      description: "",
      weight: 10,
      maxScore: 10,
    }
    setCriteria([...criteria, newCriteria])
  }

  const removeCriteria = (id: string) => {
    setCriteria(criteria.filter((item) => item.id !== id))
  }

  const updateCriteria = (id: string, field: keyof CriteriaItem, value: string | number) => {
    setCriteria(criteria.map((item) => (item.id === id ? { ...item, [field]: value } : item)))
  }

  const updateWeight = (id: string, weight: number[]) => {
    updateCriteria(id, "weight", weight[0])
  }

  const totalWeight = criteria.reduce((sum, item) => sum + item.weight, 0)

  const saveCriteria = () => {
    if (totalWeight !== 100) {
      toast({
        title: "權重設定錯誤",
        description: "所有評分項目的權重總和必須等於 100%",
        variant: "destructive",
      })
      return
    }

    if (criteria.some((item) => !item.name.trim())) {
      toast({
        title: "設定不完整",
        description: "請填寫所有評分項目的名稱",
        variant: "destructive",
      })
      return
    }

    // 這裡會連接到後端 API 儲存評分標準
    toast({
      title: "儲存成功",
      description: "評分標準已成功儲存",
    })
  }

  const resetToDefault = () => {
    setCriteria(defaultCriteria)
    setTemplateName("預設評分標準")
    toast({
      title: "已重置",
      description: "評分標準已重置為預設值",
    })
  }

  return (
    <div className="min-h-screen bg-background">
      <Sidebar />

      <main className="md:ml-64 p-6">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="mb-8 pt-8 md:pt-0">
            <h1 className="text-3xl font-bold text-foreground mb-2 font-[var(--font-playfair)]">評分標準設定</h1>
            <p className="text-muted-foreground">自定義評分項目和權重，建立符合您需求的評審標準</p>
          </div>

          {/* Template Name */}
          <Card className="mb-6">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileText className="h-5 w-5" />
                標準模板名稱
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Input
                value={templateName}
                onChange={(e) => setTemplateName(e.target.value)}
                placeholder="輸入評分標準名稱"
                className="max-w-md"
              />
            </CardContent>
          </Card>

          {/* Weight Summary */}
          <Card className="mb-6">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between mb-4">
                <span className="text-sm font-medium">權重總計</span>
                <Badge variant={totalWeight === 100 ? "default" : "destructive"}>{totalWeight}%</Badge>
              </div>
              <div className="w-full bg-muted rounded-full h-2">
                <div
                  className={`h-2 rounded-full transition-all ${totalWeight === 100 ? "bg-primary" : "bg-destructive"}`}
                  style={{ width: `${Math.min(totalWeight, 100)}%` }}
                />
              </div>
              {totalWeight !== 100 && <p className="text-sm text-destructive mt-2">權重總和必須等於 100%</p>}
            </CardContent>
          </Card>

          {/* Criteria List */}
          <div className="space-y-4 mb-6">
            {criteria.map((item, index) => (
              <Card key={item.id}>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-lg">評分項目 {index + 1}</CardTitle>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => removeCriteria(item.id)}
                      className="text-destructive hover:text-destructive"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor={`name-${item.id}`}>項目名稱</Label>
                      <Input
                        id={`name-${item.id}`}
                        value={item.name}
                        onChange={(e) => updateCriteria(item.id, "name", e.target.value)}
                        placeholder="例如：內容品質"
                      />
                    </div>
                    <div>
                      <Label htmlFor={`maxScore-${item.id}`}>滿分</Label>
                      <Input
                        id={`maxScore-${item.id}`}
                        type="number"
                        value={item.maxScore}
                        onChange={(e) => updateCriteria(item.id, "maxScore", Number.parseInt(e.target.value) || 10)}
                        min="1"
                        max="100"
                      />
                    </div>
                  </div>

                  <div>
                    <Label htmlFor={`description-${item.id}`}>評分說明</Label>
                    <Textarea
                      id={`description-${item.id}`}
                      value={item.description}
                      onChange={(e) => updateCriteria(item.id, "description", e.target.value)}
                      placeholder="描述此項目的評分標準和要求"
                      rows={2}
                    />
                  </div>

                  <div>
                    <div className="flex items-center justify-between mb-2">
                      <Label>權重比例</Label>
                      <Badge variant="outline">{item.weight}%</Badge>
                    </div>
                    <Slider
                      value={[item.weight]}
                      onValueChange={(value) => updateWeight(item.id, value)}
                      max={100}
                      min={0}
                      step={5}
                      className="w-full"
                    />
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Add Criteria Button */}
          <Card className="mb-6">
            <CardContent className="pt-6">
              <Button onClick={addCriteria} variant="outline" className="w-full bg-transparent">
                <Plus className="h-4 w-4 mr-2" />
                新增評分項目
              </Button>
            </CardContent>
          </Card>

          {/* Action Buttons */}
          <div className="flex flex-col sm:flex-row gap-4">
            <Button onClick={saveCriteria} className="flex-1">
              <Save className="h-4 w-4 mr-2" />
              儲存評分標準
            </Button>
            <Button onClick={resetToDefault} variant="outline">
              <RotateCcw className="h-4 w-4 mr-2" />
              重置為預設
            </Button>
          </div>

          {/* Preview */}
          <Card className="mt-8">
            <CardHeader>
              <CardTitle>預覽</CardTitle>
              <CardDescription>以下是您設定的評分標準預覽</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {criteria.map((item, index) => (
                  <div key={item.id} className="flex items-center justify-between p-3 bg-muted rounded-lg">
                    <div className="flex-1">
                      <div className="font-medium">{item.name || `評分項目 ${index + 1}`}</div>
                      {item.description && <div className="text-sm text-muted-foreground mt-1">{item.description}</div>}
                    </div>
                    <div className="text-right">
                      <div className="font-medium">權重: {item.weight}%</div>
                      <div className="text-sm text-muted-foreground">滿分: {item.maxScore}</div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  )
}