"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Separator } from "@/components/ui/separator"
import { Brain, User, Mail, Building, Lock, Loader2, CheckCircle, AlertTriangle, Shield, Code, Eye, EyeOff } from "lucide-react"

export default function RegisterPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { register, isLoading } = useAuth()

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
    department: "",
  })
  const [error, setError] = useState("")
  const [success, setSuccess] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)

  // 從 URL 參數獲取邀請資訊
  const invitationToken = searchParams.get("token")
  const invitedEmail = searchParams.get("email")
  const invitedRole = searchParams.get("role") || "user"
  const mode = searchParams.get("mode") // "reset" 表示密碼重設模式
  const invitedName = searchParams.get("name")
  const invitedDepartment = searchParams.get("department")
  const isInvitedUser = !!(invitationToken && invitedEmail)
  const isResetMode = mode === "reset"
  
  // 在重設模式下，使用從資料庫獲取的正確角色
  const displayRole = isResetMode ? invitedRole : invitedRole

  useEffect(() => {
    if (isInvitedUser) {
      setFormData((prev) => ({
        ...prev,
        email: decodeURIComponent(invitedEmail),
        name: isResetMode && invitedName ? decodeURIComponent(invitedName) : prev.name,
        department: isResetMode && invitedDepartment ? decodeURIComponent(invitedDepartment) : prev.department,
      }))
    }
  }, [isInvitedUser, invitedEmail, isResetMode, invitedName, invitedDepartment])

  const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
    setError("")
  }

  const getRoleDescription = (role: string) => {
    switch (role) {
      case "admin":
        return "可以訪問管理後台，管理用戶和審核應用"
      case "developer":
        return "可以提交 AI 應用申請，參與平台建設"
      case "user":
        return "可以瀏覽和收藏應用，參與評價互動"
      default:
        return ""
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setIsSubmitting(true)

    // 表單驗證
    if (!formData.name || !formData.email || !formData.password || !formData.department) {
      setError("請填寫所有必填欄位")
      setIsSubmitting(false)
      return
    }

    if (formData.password !== formData.confirmPassword) {
      setError("密碼確認不一致")
      setIsSubmitting(false)
      return
    }

    if (formData.password.length < 6) {
      setError("密碼長度至少需要 6 個字符")
      setIsSubmitting(false)
      return
    }

    try {
      if (isResetMode) {
        // 密碼重設模式
        const response = await fetch('/api/auth/reset-password', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            token: invitationToken,
            password: formData.password
          }),
        })

        const data = await response.json()

        if (data.success) {
          setSuccess("密碼重設成功！正在跳轉...")
          setTimeout(() => {
            router.push("/")
          }, 2000)
        } else {
          setError(data.error || "密碼重設失敗")
        }
      } else {
        // 正常註冊模式
        const success = await register({
          name: formData.name,
          email: formData.email,
          password: formData.password,
          department: formData.department,
        })

        if (success) {
          setSuccess("註冊成功！正在跳轉...")
          setTimeout(() => {
            router.push("/")
          }, 2000)
        } else {
          setError("註冊失敗，請檢查資料或聯繫管理員")
        }
      }
    } catch (err) {
      setError(isResetMode ? "密碼重設過程中發生錯誤，請稍後再試" : "註冊過程中發生錯誤，請稍後再試")
    }

    setIsSubmitting(false)
  }

  if (success) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 flex items-center justify-center p-4">
        <Card className="w-full max-w-md">
          <CardContent className="text-center py-8">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <CheckCircle className="w-8 h-8 text-green-600" />
            </div>
            <h3 className="text-xl font-semibold text-gray-900 mb-2">
              {isResetMode ? "密碼重設成功！" : "註冊成功！"}
            </h3>
            <p className="text-gray-600 mb-4">
              {isResetMode ? "您的密碼已成功重設" : "歡迎加入強茂集團 AI 展示平台"}
            </p>
            <p className="text-sm text-gray-500">正在跳轉到首頁...</p>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="flex items-center justify-center space-x-2 mb-4">
            <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
              <Brain className="w-6 h-6 text-white" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-gray-900">強茂集團 AI 展示平台</h1>
            </div>
          </div>
          {isResetMode ? (
            <div>
              <h2 className="text-xl font-semibold text-gray-900 mb-2">重設密碼</h2>
              <p className="text-gray-600">請設定您的新密碼</p>
            </div>
          ) : isInvitedUser ? (
            <div>
              <h2 className="text-xl font-semibold text-gray-900 mb-2">完成註冊</h2>
              <p className="text-gray-600">您已受邀加入平台，請完成以下資訊</p>
            </div>
          ) : (
            <div>
              <h2 className="text-xl font-semibold text-gray-900 mb-2">建立帳戶</h2>
              <p className="text-gray-600">加入強茂集團 AI 展示平台</p>
            </div>
          )}
        </div>

        <Card>
          <CardHeader>
            <CardTitle>{isResetMode ? "密碼重設" : "註冊資訊"}</CardTitle>
            <CardDescription>
              {isResetMode 
                ? "請設定您的新密碼" 
                : isInvitedUser 
                  ? "請填寫您的個人資訊完成註冊" 
                  : "請填寫以下資訊建立您的帳戶"
              }
            </CardDescription>
          </CardHeader>
          <CardContent>
            {/* Invitation Info */}
            {isInvitedUser && (
              <div className="mb-6">
                <div className="bg-blue-50 rounded-lg p-4">
                  <div className="flex items-start space-x-3">
                    <CheckCircle className="w-5 h-5 text-blue-600 mt-0.5" />
                    <div className="flex-1">
                      <h4 className="font-medium text-blue-900 mb-2">邀請資訊</h4>
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-blue-700">電子郵件：</span>
                          <span className="text-sm font-medium text-blue-900">{invitedEmail}</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-sm text-blue-700">角色：</span>
                          <Badge variant="secondary" className="text-xs">
                            {displayRole === "admin" && (
                              <><Shield className="w-3 h-3 mr-1" />管理員</>
                            )}
                            {displayRole === "developer" && (
                              <><Code className="w-3 h-3 mr-1" />開發者</>
                            )}
                            {displayRole === "user" && (
                              <><User className="w-3 h-3 mr-1" />一般用戶</>
                            )}
                          </Badge>
                        </div>
                        <div className="text-xs text-blue-600 mt-2">
                          {getRoleDescription(displayRole)}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {error && (
              <Alert variant="destructive" className="mb-4">
                <AlertTriangle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            <form onSubmit={handleSubmit} className="space-y-4">
              {!isResetMode && (
                <div className="space-y-2">
                  <Label htmlFor="name">姓名 *</Label>
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                    <Input
                      id="name"
                      type="text"
                      value={formData.name}
                      onChange={(e) => handleInputChange("name", e.target.value)}
                      placeholder="請輸入您的姓名"
                      className="pl-10"
                      disabled={isSubmitting}
                    />
                  </div>
                </div>
              )}

              <div className="space-y-2">
                <Label htmlFor="email">電子郵件 *</Label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => handleInputChange("email", e.target.value)}
                    placeholder="請輸入電子郵件"
                    className="pl-10"
                    disabled={isSubmitting || isInvitedUser || isResetMode}
                    readOnly={isInvitedUser || isResetMode}
                  />
                </div>
                {(isInvitedUser || isResetMode) && <p className="text-xs text-gray-500">此電子郵件由連結自動填入</p>}
              </div>

              {!isResetMode && (
                <div className="space-y-2">
                  <Label htmlFor="department">部門 *</Label>
                  <div className="relative">
                    <Building className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4 z-10" />
                    <Select
                      value={formData.department}
                      onValueChange={(value) => handleInputChange("department", value)}
                      disabled={isSubmitting}
                    >
                      <SelectTrigger className="pl-10">
                        <SelectValue placeholder="請選擇您的部門" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="HQBU">HQBU</SelectItem>
                        <SelectItem value="ITBU">ITBU</SelectItem>
                        <SelectItem value="RDBU">RDBU</SelectItem>
                        <SelectItem value="MDBU">MDBU</SelectItem>
                        <SelectItem value="PGBU">PGBU</SelectItem>
                        <SelectItem value="SGBU">SGBU</SelectItem>
                        <SelectItem value="TGBU">TGBU</SelectItem>
                        <SelectItem value="WGBU">WGBU</SelectItem>
                        <SelectItem value="Other">其他</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              )}

              <div className="space-y-2">
                <Label htmlFor="password">密碼 *</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    value={formData.password}
                    onChange={(e) => handleInputChange("password", e.target.value)}
                    placeholder={isResetMode ? "請輸入新密碼" : "請輸入密碼"}
                    className="pl-10 pr-10"
                    disabled={isSubmitting}
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                    disabled={isSubmitting}
                  >
                    {showPassword ? (
                      <EyeOff className="w-4 h-4" />
                    ) : (
                      <Eye className="w-4 h-4" />
                    )}
                  </button>
                </div>
                <p className="text-xs text-gray-500">密碼長度至少需要 6 個字符</p>
              </div>

              <div className="space-y-2">
                <Label htmlFor="confirmPassword">確認密碼 *</Label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                  <Input
                    id="confirmPassword"
                    type={showConfirmPassword ? "text" : "password"}
                    value={formData.confirmPassword}
                    onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
                    placeholder="請再次輸入密碼"
                    className="pl-10 pr-10"
                    disabled={isSubmitting}
                  />
                  <button
                    type="button"
                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                    disabled={isSubmitting}
                  >
                    {showConfirmPassword ? (
                      <EyeOff className="w-4 h-4" />
                    ) : (
                      <Eye className="w-4 h-4" />
                    )}
                  </button>
                </div>
              </div>

              <Button
                type="submit"
                className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
                disabled={isSubmitting || isLoading}
              >
                {isSubmitting || isLoading ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    {isResetMode ? "重設中..." : "註冊中..."}
                  </>
                ) : (
                  isResetMode ? "重設密碼" : "完成註冊"
                )}
              </Button>
            </form>

            <div className="mt-6 text-center">
              <p className="text-sm text-gray-600">
                已有帳戶？{" "}
                <Button
                  variant="link"
                  className="p-0 h-auto font-normal text-blue-600 hover:text-blue-700"
                  onClick={() => router.push("/")}
                >
                  返回首頁登入
                </Button>
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Role Information */}
        {!isInvitedUser && !isResetMode && (
          <Card className="mt-6">
            <CardHeader>
              <CardTitle className="text-lg">角色說明</CardTitle>
              <CardDescription>了解不同角色的權限和功能</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-3">
                <div className="flex items-start space-x-3 p-3 bg-blue-50 rounded-lg">
                  <User className="w-5 h-5 text-blue-600 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-blue-900">一般用戶</h4>
                    <p className="text-sm text-blue-700">可以瀏覽和收藏應用，參與評價互動</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3 p-3 bg-green-50 rounded-lg">
                  <Code className="w-5 h-5 text-green-600 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-green-900">開發者</h4>
                    <p className="text-sm text-green-700">可以提交 AI 應用申請，參與平台建設</p>
                  </div>
                </div>
                <div className="flex items-start space-x-3 p-3 bg-purple-50 rounded-lg">
                  <Shield className="w-5 h-5 text-purple-600 mt-0.5" />
                  <div>
                    <h4 className="font-medium text-purple-900">管理員</h4>
                    <p className="text-sm text-purple-700">可以訪問管理後台，管理用戶和審核應用</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}