"use client"

import { useState, useEffect, useRef } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Brain, Lightbulb, BarChart3, Users, Settings, Menu, ChevronDown, Link as LinkIcon, CheckCircle } from "lucide-react"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import Link from "next/link"
import Image from "next/image"
import { useAuth } from "@/lib/hooks/use-auth"
import { useRouter } from "next/navigation"
import { ProtectedRoute } from "@/components/protected-route"

export default function HomePage() {
  const { user, logout } = useAuth()
  const router = useRouter()
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const [testCompletionStatus, setTestCompletionStatus] = useState({
    logic: false,
    creative: false,
    combined: false
  })
  const [isLoadingTests, setIsLoadingTests] = useState(true)
  const dropdownRef = useRef<HTMLDivElement>(null)

  const handleLogout = () => {
    logout()
    router.push("/")
  }

  // 檢查用戶測驗完成狀態
  const checkTestCompletionStatus = async () => {
    if (!user) return

    try {
      setIsLoadingTests(true)
      
      // 檢查邏輯測試
      const logicResponse = await fetch(`/api/test-results/logic?userId=${user.id}`)
      const logicData = await logicResponse.json()
      const hasLogicTest = logicData.success && logicData.data && logicData.data.length > 0

      // 檢查創意測試
      const creativeResponse = await fetch(`/api/test-results/creative?userId=${user.id}`)
      const creativeData = await creativeResponse.json()
      const hasCreativeTest = creativeData.success && creativeData.data && creativeData.data.length > 0

      // 檢查綜合測試
      const combinedResponse = await fetch(`/api/test-results/combined?userId=${user.id}`)
      const combinedData = await combinedResponse.json()
      const hasCombinedTest = combinedData.success && combinedData.data && combinedData.data.length > 0

      setTestCompletionStatus({
        logic: hasLogicTest,
        creative: hasCreativeTest,
        combined: hasCombinedTest
      })
    } catch (error) {
      console.error('Error checking test completion status:', error)
    } finally {
      setIsLoadingTests(false)
    }
  }

  // 檢查測驗完成狀態
  useEffect(() => {
    if (user) {
      checkTestCompletionStatus()
    }
  }, [user])

  // 點擊外部關閉下拉選單
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsDropdownOpen(false)
      }
    }

    if (isDropdownOpen) {
      document.addEventListener('mousedown', handleClickOutside)
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [isDropdownOpen])

  // 調試信息
  console.log("Current user:", user)

  return (
    <ProtectedRoute>
      <div className="min-h-screen bg-background">
        {/* Header */}
        <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
          <div className="container mx-auto px-4 py-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                <Users className="w-6 h-6 text-primary-foreground" />
              </div>
                <div>
                  <h1 className="text-xl font-bold text-foreground">HR 評估系統</h1>
                  <p className="text-sm text-muted-foreground">員工能力測評平台</p>
                </div>
              </div>

              {/* Desktop Navigation */}
              <div className="hidden md:flex items-center gap-6">
                {/* Navigation Links */}
                <div className="flex items-center gap-12">
                  {user?.role === "admin" && (
                    <>
                      <Link 
                        href="/admin/results" 
                        className="text-muted-foreground hover:text-foreground transition-colors"
                      >
                        所有測試結果
                      </Link>
                      <Link 
                        href="/admin/analytics" 
                        className="text-muted-foreground hover:text-foreground transition-colors"
                      >
                        部門分析
                      </Link>
                    </>
                  )}
                </div>
                
                {/* 自定義下拉選單 */}
                <div className="relative" ref={dropdownRef}>
                  <Button 
                    variant="ghost" 
                    className="flex items-center gap-3 hover:bg-accent px-6 py-6 text-foreground rounded-lg group"
                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                  >
                    <div className="text-right">
                      <p className="text-sm font-medium text-foreground group-hover:text-white">{user?.name || '系統管理員'}</p>
                      <p className="text-xs text-muted-foreground group-hover:text-white/80">{user?.department || '人力資源部'}</p>
                    </div>
                    <ChevronDown className={`w-4 h-4 transition-transform group-hover:text-white ${isDropdownOpen ? 'rotate-180' : ''}`} />
                  </Button>
                  
                  {isDropdownOpen && (
                    <div className="absolute right-0 top-full mt-1 w-56 bg-background border border-border rounded-md shadow-lg z-50">
                      <div className="py-1">
                        {user?.role === "admin" && (
                          <>
                            <Link 
                              href="/settings" 
                              className="flex items-center gap-2 px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
                              onClick={() => setIsDropdownOpen(false)}
                            >
                              <Settings className="w-4 h-4" />
                              帳戶設定
                            </Link>
                            <Link 
                              href="/admin/users" 
                              className="flex items-center gap-2 px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
                              onClick={() => setIsDropdownOpen(false)}
                            >
                              <Users className="w-4 h-4" />
                              用戶管理
                            </Link>
                            <Link 
                              href="/admin/questions" 
                              className="flex items-center gap-2 px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
                              onClick={() => setIsDropdownOpen(false)}
                            >
                              <Brain className="w-4 h-4" />
                              題目管理
                            </Link>
                            <Link 
                              href="/admin/test-links" 
                              className="flex items-center gap-2 px-4 py-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground"
                              onClick={() => setIsDropdownOpen(false)}
                            >
                              <LinkIcon className="w-4 h-4" />
                              測驗連結
                            </Link>
                            <div className="border-t border-border my-1"></div>
                          </>
                        )}
                        <button 
                          onClick={() => {
                            handleLogout()
                            setIsDropdownOpen(false)
                          }}
                          className="flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 hover:text-red-700 w-full text-left"
                        >
                          登出
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              </div>

              <div className="md:hidden">
                <Sheet>
                  <SheetTrigger asChild>
                    <Button variant="ghost" size="sm">
                      <Menu className="w-5 h-5" />
                    </Button>
                  </SheetTrigger>
                  <SheetContent>
                    <SheetHeader>
                      <SheetTitle className="text-left">選單</SheetTitle>
                    </SheetHeader>
                    <div className="mt-6 space-y-4 px-4">
                      <div className="pb-4 border-b">
                        <p className="font-medium">{user?.name}</p>
                        <p className="text-sm text-muted-foreground">{user?.department}</p>
                      </div>
                      
                      {/* Navigation Links */}
                      {user?.role === "admin" && (
                        <>
                          <Button asChild variant="ghost" className="w-full justify-start px-4">
                            <Link href="/admin/results" className="flex items-center gap-2">
                              <BarChart3 className="w-4 h-4" />
                              所有測試結果
                            </Link>
                          </Button>
                          <Button asChild variant="ghost" className="w-full justify-start px-4">
                            <Link href="/admin/analytics" className="flex items-center gap-2">
                              <BarChart3 className="w-4 h-4" />
                              部門分析
                            </Link>
                          </Button>
                        </>
                      )}
                      
                      {user?.role === "admin" && (
                        <>
                          <Button asChild variant="ghost" className="w-full justify-start px-4">
                            <Link href="/settings" className="flex items-center gap-2">
                              <Settings className="w-4 h-4" />
                              帳戶設定
                            </Link>
                          </Button>
                          <Button asChild variant="ghost" className="w-full justify-start px-4">
                            <Link href="/admin/users" className="flex items-center gap-2">
                              <Users className="w-4 h-4" />
                              用戶管理
                            </Link>
                          </Button>
                          <Button asChild variant="ghost" className="w-full justify-start px-4">
                            <Link href="/admin/questions" className="flex items-center gap-2">
                              <Brain className="w-4 h-4" />
                              題目管理
                            </Link>
                          </Button>
                          <Button asChild variant="ghost" className="w-full justify-start px-4">
                            <Link href="/admin/test-links" className="flex items-center gap-2">
                              <LinkIcon className="w-4 h-4" />
                              測驗連結
                            </Link>
                          </Button>
                        </>
                      )}
                      <Button onClick={handleLogout} variant="ghost" className="w-full justify-start text-red-600 px-4">
                        登出
                      </Button>
                    </div>
                  </SheetContent>
                </Sheet>
              </div>
            </div>
          </div>
        </header>

        {/* Hero Section */}
        <section className="py-8 md:py-16 px-4 flex items-center">
          <div className="container mx-auto text-center">
            <div className="max-w-2xl mx-auto">
              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 md:mb-6 text-balance">
                歡迎回來，{user?.name}
              </h2>
              <p className="text-lg md:text-xl text-muted-foreground text-pretty leading-relaxed">
                透過科學的邏輯思維測試和創意能力評估，全面了解您的綜合素質
              </p>
            </div>
          </div>
        </section>

        {/* Test Cards / Admin Info Cards */}
        <section className="py-8 md:py-16 px-4">
          <div className="container mx-auto">
            {user?.role === "admin" ? (
              // 管理者看到的介紹卡片
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 max-w-6xl mx-auto">
                {/* 邏輯思維測試介紹 */}
                <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-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-primary/20 transition-colors">
                      <Brain className="w-6 h-6 text-primary" />
                    </div>
                    <CardTitle className="text-lg">邏輯思維測試</CardTitle>
                    <CardDescription>評估邏輯推理、分析判斷和問題解決能力</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-xs text-muted-foreground">題目數量</span>
                        <span className="text-sm font-bold text-primary">10題</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-xs text-muted-foreground">題目類型</span>
                        <span className="text-sm font-bold text-primary">單選題</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-xs text-muted-foreground">預計時間</span>
                        <span className="text-sm font-bold text-primary">15-20分鐘</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                {/* 創意能力測試介紹 */}
                <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-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-accent/20 transition-colors">
                      <Lightbulb className="w-6 h-6 text-accent" />
                    </div>
                    <CardTitle className="text-lg">創意能力測試</CardTitle>
                    <CardDescription>評估創新思維、想像力和創造性解決問題的能力</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-xs text-muted-foreground">題目數量</span>
                        <span className="text-sm font-bold text-accent">20題</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-xs text-muted-foreground">題目類型</span>
                        <span className="text-sm font-bold text-accent">5級量表</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-xs text-muted-foreground">預計時間</span>
                        <span className="text-sm font-bold text-accent">25-30分鐘</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                {/* 綜合測試介紹 */}
                <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 md:col-span-2 lg:col-span-1">
                  <CardHeader className="text-center pb-4">
                    <div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
                      <BarChart3 className="w-6 h-6 text-white" />
                    </div>
                    <CardTitle className="text-lg">綜合測試</CardTitle>
                    <CardDescription>完整的邏輯思維 + 創意能力雙重評估，獲得全面的能力報告</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-xs text-muted-foreground">總題目數</span>
                        <span className="text-sm font-bold text-primary">30題</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-xs text-muted-foreground">預計時間</span>
                        <span className="text-sm font-bold text-accent">45分鐘</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            ) : (
              // 一般用戶看到的測試功能
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 max-w-6xl mx-auto">
                {/* 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-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-primary/20 transition-colors">
                      <Brain className="w-6 h-6 text-primary" />
                    </div>
                    <CardTitle className="text-lg">邏輯思維測試</CardTitle>
                    <CardDescription>評估邏輯推理能力</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    {isLoadingTests ? (
                      <Button disabled className="w-full">
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                        載入中...
                      </Button>
                    ) : testCompletionStatus.logic ? (
                      <Button asChild variant="outline" className="w-full border-green-500 text-green-600 hover:bg-green-50 hover:text-green-700 hover:border-green-600">
                        <Link href="/tests/logic">
                          <CheckCircle className="w-4 h-4 mr-2" />
                          已完成測驗
                        </Link>
                      </Button>
                    ) : (
                      <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-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-accent/20 transition-colors">
                      <Lightbulb className="w-6 h-6 text-accent" />
                    </div>
                    <CardTitle className="text-lg">創意能力測試</CardTitle>
                    <CardDescription>評估創新思維能力</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    {isLoadingTests ? (
                      <Button disabled className="w-full">
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                        載入中...
                      </Button>
                    ) : testCompletionStatus.creative ? (
                      <Button asChild variant="outline" className="w-full border-green-500 text-green-600 hover:bg-green-50 hover:text-green-700 hover:border-green-600">
                        <Link href="/tests/creative">
                          <CheckCircle className="w-4 h-4 mr-2" />
                          已完成測驗
                        </Link>
                      </Button>
                    ) : (
                      <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 md:col-span-2 lg:col-span-1">
                  <CardHeader className="text-center pb-4">
                    <div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
                      <BarChart3 className="w-6 h-6 text-white" />
                    </div>
                    <CardTitle className="text-lg">綜合測試</CardTitle>
                    <CardDescription>完整能力評估</CardDescription>
                  </CardHeader>
                  <CardContent className="text-center">
                    {isLoadingTests ? (
                      <Button disabled size="lg" className="w-full">
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                        載入中...
                      </Button>
                    ) : testCompletionStatus.combined ? (
                      <Button asChild variant="outline" size="lg" className="w-full border-green-500 text-green-600 hover:bg-green-50 hover:text-green-700 hover:border-green-600">
                        <Link href="/tests/combined">
                          <CheckCircle className="w-4 h-4 mr-2" />
                          已完成測驗
                        </Link>
                      </Button>
                    ) : (
                      <Button asChild size="lg" className="w-full">
                        <Link href="/tests/combined">開始測試</Link>
                      </Button>
                    )}
                  </CardContent>
                </Card>
              </div>
            )}
          </div>
        </section>

        {/* Footer */}
        <footer className="border-t bg-muted/30 py-12 px-4 mt-16">
          <div className="container mx-auto">
            <div className="flex flex-col md:flex-row justify-between items-center gap-4">
              {/* 左側內容 */}
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                  <Users className="w-6 h-6 text-primary-foreground" />
                </div>
                <div>
                  <span className="text-lg font-semibold">HR 評估系統</span>
                  <p className="text-muted-foreground text-sm">專業的員工能力測評解決方案，助力企業人才發展</p>
                </div>
              </div>
              
              {/* 右側內容 */}
              <div className="text-sm text-muted-foreground">
                © 2025 HR 評估系統. All rights reserved.
              </div>
            </div>
          </div>
        </footer>
      </div>
    </ProtectedRoute>
  )
}