"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 [questionCounts, setQuestionCounts] = useState({
    logic: 0,
    creative: 0,
    total: 0
  })
  const dropdownRef = useRef<HTMLDivElement>(null)

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

  // 獲取題目數量
  const fetchQuestionCounts = async () => {
    try {
      // 獲取邏輯題目數量
      const logicResponse = await fetch('/api/logic-questions')
      const logicData = await logicResponse.json()
      const logicCount = logicData.success ? logicData.count || logicData.questions?.length || 0 : 0

      // 獲取創意題目數量
      const creativeResponse = await fetch('/api/creative-questions')
      const creativeData = await creativeResponse.json()
      const creativeCount = creativeData.success ? creativeData.questions?.length || 0 : 0

      setQuestionCounts({
        logic: logicCount,
        creative: creativeCount,
        total: logicCount + creativeCount
      })
    } catch (error) {
      console.error('Error fetching question counts:', error)
    }
  }

  // 檢查用戶測驗完成狀態
  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(() => {
    fetchQuestionCounts()
    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="flex justify-center mb-8">
                <div className="w-full max-w-2xl">
                  {/* 綜合測試介紹 */}
                  <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">
                    <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 shadow-lg">
                        <BarChart3 className="w-6 h-6 text-white" />
                      </div>
                      <CardTitle className="text-xl mb-2">綜合測試</CardTitle>
                      <CardDescription className="text-sm mb-3">
                        綜合測試包含邏輯思維和創意能力，附有完整分析報告，<br />
                        全卷設定作答時間 30 分鐘。
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="text-center">
                      <div className="flex justify-center gap-6">
                        <div className="flex flex-col items-center">
                          <span className="text-xs text-muted-foreground mb-1">總題目數</span>
                          <span className="text-lg font-bold text-primary">{questionCounts.total}題</span>
                        </div>
                        <div className="flex flex-col items-center">
                          <span className="text-xs text-muted-foreground mb-1">預計時間</span>
                          <span className="text-lg font-bold text-accent">30分鐘</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            ) : (
              // 一般用戶看到的測試功能
              <div className="flex justify-center mb-8">
                <div className="w-full max-w-2xl">
                  {/* 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">
                    <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 shadow-lg">
                        <BarChart3 className="w-6 h-6 text-white" />
                      </div>
                      <CardTitle className="text-xl mb-2">綜合測試</CardTitle>
                      <CardDescription className="text-sm mb-3">
                        全卷設定作答時間 30 分鐘，<br />
                        請誠實反映您平常的思考方式與感受，不需刻意迎合特定答案。
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="text-center">
                      <div className="flex justify-center gap-6">
                        <div className="flex flex-col items-center">
                          <span className="text-xs text-muted-foreground mb-1">總題目數</span>
                          <span className="text-lg font-bold text-primary">{questionCounts.total}題</span>
                        </div>
                        <div className="flex flex-col items-center">
                          <span className="text-xs text-muted-foreground mb-1">預計時間</span>
                          <span className="text-lg font-bold text-accent">30分鐘</span>
                        </div>
                      </div>
                      <div className="mt-6">
                        {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>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </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>
  )
}