"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 } 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)

  // 從 URL 參數獲取邀請資訊
  const invitationToken = searchParams.get("token")
  const invitedEmail = searchParams.get("email")
  const invitedRole = searchParams.get("role") || "user"
  const isInvitedUser = !!(invitationToken && invitedEmail)

  useEffect(() => {
    if (isInvitedUser) {
      setFormData((prev) => ({
        ...prev,
        email: decodeURIComponent(invitedEmail),
      }))
    }
  }, [isInvitedUser, invitedEmail])

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

  const getRoleText = (role: string) => {
    switch (role) {
      case "admin":
        return "管理員"
      case "developer":
        return "開發者"
      case "user":
        return "一般用戶"
      default:
        return role
    }
  }

  const getRoleIcon = (role: string) => {
    switch (role) {
      case "admin":
        return <Shield className="w-4 h-4 text-purple-600" />
      case "developer":
        return <Code className="w-4 h-4 text-green-600" />
      case "user":
        return <User className="w-4 h-4 text-blue-600" />
      default:
        return <User className="w-4 h-4 text-blue-600" />
    }
  }

  const getRoleColor = (role: string) => {
    switch (role) {
      case "admin":
        return "bg-purple-100 text-purple-800 border-purple-200"
      case "developer":
        return "bg-green-100 text-green-800 border-green-200"
      case "user":
        return "bg-blue-100 text-blue-800 border-blue-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

  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 {
      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("註冊過程中發生錯誤，請稍後再試")
    }

    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">註冊成功！</h3>
            <p className="text-gray-600 mb-4">歡迎加入強茂集團 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>
          {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>註冊資訊</CardTitle>
            <CardDescription>
              {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="outline" className={getRoleColor(invitedRole)}>
                            <div className="flex items-center space-x-1">
                              {getRoleIcon(invitedRole)}
                              <span>{getRoleText(invitedRole)}</span>
                            </div>
                          </Badge>
                        </div>
                        <div className="mt-3 pt-3 border-t border-blue-200">
                          <p className="text-xs text-blue-600">{getRoleDescription(invitedRole)}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

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

            <form onSubmit={handleSubmit} className="space-y-4">
              <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}
                    readOnly={isInvitedUser}
                  />
                </div>
                {isInvitedUser && <p className="text-xs text-gray-500">此電子郵件由邀請連結自動填入</p>}
              </div>

              <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="MBU1">MBU1</SelectItem>
                      <SelectItem value="SBU">SBU</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <Separator />

              <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="password"
                    value={formData.password}
                    onChange={(e) => handleInputChange("password", e.target.value)}
                    placeholder="請輸入密碼（至少 6 個字符）"
                    className="pl-10"
                    disabled={isSubmitting}
                  />
                </div>
              </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="password"
                    value={formData.confirmPassword}
                    onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
                    placeholder="請再次輸入密碼"
                    className="pl-10"
                    disabled={isSubmitting}
                  />
                </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" />
                    註冊中...
                  </>
                ) : (
                  "完成註冊"
                )}
              </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 && (
          <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>
              <div className="bg-gray-50 p-3 rounded-lg">
                <p className="text-xs text-gray-600">
                  <strong>注意：</strong>新註冊用戶預設為一般用戶角色。如需其他角色權限，請聯繫管理員進行調整。
                </p>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}