"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { FileText, Calendar, Search, Eye, Download, Trash2 } from "lucide-react"
import Link from "next/link"

// 模擬歷史記錄數據
const mockHistory = [
  {
    id: "1",
    title: "產品介紹簡報",
    type: "PPT",
    score: 82,
    grade: "B+",
    date: "2024-01-15",
    status: "completed",
  },
  {
    id: "2",
    title: "市場分析報告",
    type: "Website",
    score: 76,
    grade: "B",
    date: "2024-01-12",
    status: "completed",
  },
  {
    id: "3",
    title: "產品演示影片",
    type: "Video",
    score: 88,
    grade: "A-",
    date: "2024-01-10",
    status: "completed",
  },
  {
    id: "4",
    title: "技術架構說明",
    type: "PPT",
    score: 0,
    grade: "-",
    date: "2024-01-08",
    status: "processing",
  },
  {
    id: "5",
    title: "用戶體驗設計",
    type: "Website",
    score: 91,
    grade: "A",
    date: "2024-01-05",
    status: "completed",
  },
]

export default function HistoryPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [filterType, setFilterType] = useState("all")
  const [filterStatus, setFilterStatus] = useState("all")

  const filteredHistory = mockHistory.filter((item) => {
    const matchesSearch = item.title.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesType = filterType === "all" || item.type === filterType
    const matchesStatus = filterStatus === "all" || item.status === filterStatus
    return matchesSearch && matchesType && matchesStatus
  })

  const getGradeColor = (grade: string) => {
    if (grade.startsWith("A")) return "bg-green-100 text-green-800"
    if (grade.startsWith("B")) return "bg-blue-100 text-blue-800"
    if (grade.startsWith("C")) return "bg-yellow-100 text-yellow-800"
    return "bg-gray-100 text-gray-800"
  }

  const getTypeIcon = (type: string) => {
    switch (type) {
      case "PPT":
        return <FileText className="h-4 w-4" />
      case "Video":
        return <FileText className="h-4 w-4" />
      case "Website":
        return <FileText className="h-4 w-4" />
      default:
        return <FileText className="h-4 w-4" />
    }
  }

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

      <main className="md:ml-64 p-6">
        <div className="max-w-6xl 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>

          {/* Filters */}
          <Card className="mb-6">
            <CardContent className="pt-6">
              <div className="flex flex-col sm:flex-row gap-4">
                <div className="flex-1">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder="搜尋專案標題..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10"
                    />
                  </div>
                </div>
                <Select value={filterType} onValueChange={setFilterType}>
                  <SelectTrigger className="w-full sm:w-40">
                    <SelectValue placeholder="類型篩選" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">所有類型</SelectItem>
                    <SelectItem value="PPT">PPT</SelectItem>
                    <SelectItem value="Video">影片</SelectItem>
                    <SelectItem value="Website">網站</SelectItem>
                  </SelectContent>
                </Select>
                <Select value={filterStatus} onValueChange={setFilterStatus}>
                  <SelectTrigger className="w-full sm:w-40">
                    <SelectValue placeholder="狀態篩選" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">所有狀態</SelectItem>
                    <SelectItem value="completed">已完成</SelectItem>
                    <SelectItem value="processing">處理中</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

          {/* Statistics */}
          <div className="grid md:grid-cols-4 gap-4 mb-6">
            <Card>
              <CardContent className="pt-6 text-center">
                <div className="text-2xl font-bold text-primary mb-1">{mockHistory.length}</div>
                <div className="text-sm text-muted-foreground">總評審數</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6 text-center">
                <div className="text-2xl font-bold text-green-600 mb-1">
                  {mockHistory.filter((item) => item.status === "completed").length}
                </div>
                <div className="text-sm text-muted-foreground">已完成</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6 text-center">
                <div className="text-2xl font-bold text-blue-600 mb-1">
                  {Math.round(
                    mockHistory.filter((item) => item.score > 0).reduce((sum, item) => sum + item.score, 0) /
                      mockHistory.filter((item) => item.score > 0).length,
                  )}
                </div>
                <div className="text-sm text-muted-foreground">平均分數</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6 text-center">
                <div className="text-2xl font-bold text-yellow-600 mb-1">
                  {mockHistory.filter((item) => item.status === "processing").length}
                </div>
                <div className="text-sm text-muted-foreground">處理中</div>
              </CardContent>
            </Card>
          </div>

          {/* History List */}
          <div className="space-y-4">
            {filteredHistory.map((item) => (
              <Card key={item.id} className="hover:shadow-md transition-shadow">
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-4 flex-1">
                      <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center">
                        {getTypeIcon(item.type)}
                      </div>
                      <div className="flex-1 min-w-0">
                        <h3 className="font-medium truncate">{item.title}</h3>
                        <div className="flex items-center gap-4 mt-1">
                          <div className="flex items-center gap-1 text-sm text-muted-foreground">
                            <Calendar className="h-3 w-3" />
                            {item.date}
                          </div>
                          <Badge variant="outline">{item.type}</Badge>
                          <Badge variant={item.status === "completed" ? "default" : "secondary"}>
                            {item.status === "completed" ? "已完成" : "處理中"}
                          </Badge>
                        </div>
                      </div>
                    </div>

                    <div className="flex items-center gap-4">
                      {item.status === "completed" && (
                        <div className="text-center">
                          <div className="text-2xl font-bold text-primary">{item.score}</div>
                          <Badge className={getGradeColor(item.grade)}>{item.grade}</Badge>
                        </div>
                      )}

                      <div className="flex gap-2">
                        {item.status === "completed" ? (
                          <>
                            <Button asChild variant="outline" size="sm">
                              <Link href={`/results?id=${item.id}`}>
                                <Eye className="h-4 w-4" />
                              </Link>
                            </Button>
                            <Button variant="outline" size="sm">
                              <Download className="h-4 w-4" />
                            </Button>
                          </>
                        ) : (
                          <Button variant="outline" size="sm" disabled>
                            處理中...
                          </Button>
                        )}
                        <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {filteredHistory.length === 0 && (
            <Card>
              <CardContent className="pt-6 text-center py-12">
                <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                <h3 className="font-medium mb-2">沒有找到相關記錄</h3>
                <p className="text-muted-foreground mb-4">嘗試調整搜尋條件或篩選器</p>
                <Button asChild>
                  <Link href="/upload">開始新的評審</Link>
                </Button>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
    </div>
  )
}