import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Brain, Lightbulb, BarChart3, ArrowLeft } from "lucide-react"
import Link from "next/link"

export default function TestsPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="sm" asChild>
              <Link href="/">
                <ArrowLeft className="w-4 h-4 mr-2" />
                <span className="hidden sm:inline">返回首頁</span>
              </Link>
            </Button>
            <div>
              <h1 className="text-xl font-bold text-foreground">測試中心</h1>
              <p className="text-sm text-muted-foreground">選擇您要進行的測試類型</p>
            </div>
          </div>
        </div>
      </header>

      <div className="container mx-auto px-4 py-12">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-foreground mb-4">選擇測試類型</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              我們提供三種不同的測試模式，您可以根據需要選擇單項測試或綜合評估
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Logic Test */}
            <Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-primary/20">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/20 transition-colors">
                  <Brain className="w-8 h-8 text-primary" />
                </div>
                <CardTitle className="text-2xl">邏輯思維測試</CardTitle>
                <CardDescription className="text-base">評估邏輯推理、分析判斷和問題解決能力</CardDescription>
              </CardHeader>
              <CardContent className="text-center">
                <div className="space-y-3 mb-6">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">題目數量</span>
                    <span className="font-medium">10 題</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">題目類型</span>
                    <span className="font-medium">單選題</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">預計時間</span>
                    <span className="font-medium">15-20 分鐘</span>
                  </div>
                </div>
                <Button asChild className="w-full">
                  <Link href="/tests/logic">開始測試</Link>
                </Button>
              </CardContent>
            </Card>

            {/* Creative Test */}
            <Card className="group hover:shadow-lg transition-all duration-300 border-2 hover:border-accent/20">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-accent/20 transition-colors">
                  <Lightbulb className="w-8 h-8 text-accent" />
                </div>
                <CardTitle className="text-2xl">創意能力測試</CardTitle>
                <CardDescription className="text-base">評估創新思維、想像力和創造性解決問題的能力</CardDescription>
              </CardHeader>
              <CardContent className="text-center">
                <div className="space-y-3 mb-6">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">題目數量</span>
                    <span className="font-medium">20 題</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">題目類型</span>
                    <span className="font-medium">5級量表</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">預計時間</span>
                    <span className="font-medium">25-30 分鐘</span>
                  </div>
                </div>
                <Button
                  asChild
                  variant="outline"
                  className="w-full border-accent text-accent hover:bg-accent hover:text-accent-foreground bg-transparent"
                >
                  <Link href="/tests/creative">開始測試</Link>
                </Button>
              </CardContent>
            </Card>

            {/* Combined Test */}
            <Card className="group hover:shadow-lg transition-all duration-300 border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-accent/5 lg:col-span-1">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                  <BarChart3 className="w-8 h-8 text-white" />
                </div>
                <CardTitle className="text-2xl">綜合能力測試</CardTitle>
                <CardDescription className="text-base">完整的邏輯思維 + 創意能力雙重評估</CardDescription>
              </CardHeader>
              <CardContent className="text-center">
                <div className="space-y-3 mb-6">
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">題目數量</span>
                    <span className="font-medium">30 題</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">測試內容</span>
                    <span className="font-medium">邏輯 + 創意</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-muted-foreground">預計時間</span>
                    <span className="font-medium">40-45 分鐘</span>
                  </div>
                </div>
                <Button asChild size="lg" className="w-full text-lg">
                  <Link href="/tests/combined">開始綜合測試</Link>
                </Button>
              </CardContent>
            </Card>
          </div>

          {/* Additional Info */}
          <div className="mt-12 text-center">
            <Card className="max-w-2xl mx-auto">
              <CardContent className="p-6">
                <h3 className="text-lg font-semibold mb-3">測試說明</h3>
                <div className="text-sm text-muted-foreground space-y-2 text-left">
                  <p>• 所有測試都有時間限制，請合理安排答題時間</p>
                  <p>• 邏輯題和創意題不會混合出現，會分別進行</p>
                  <p>• 綜合測試將先進行邏輯題，再進行創意題</p>
                  <p>• 測試結果會自動保存，您可以隨時查看歷史成績</p>
                  <p>• 建議在安靜的環境中完成測試，以獲得最佳結果</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}