"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Switch } from "@/components/ui/switch"
import { Users, Settings, Target, MessageSquare, Plus, Edit, Trash2, Shield, Database, Bell } from "lucide-react"

// 用戶介面
interface User {
  id: string
  name: string
  email: string
  role: "executive" | "manager" | "hr"
  avatar_url?: string
  created_at: string
  updated_at: string
}

// 用戶顏色映射
const getUserColor = (id: string) => {
  const colors = ["emerald", "blue", "purple", "orange", "cyan", "pink", "indigo", "yellow"]
  const index = id.charCodeAt(id.length - 1) % colors.length
  return colors[index]
}

const kpiTemplates = [
  { id: 1, name: "營收成長率", category: "財務", defaultWeight: 30, isActive: true, usageCount: 15, color: "emerald" },
  { id: 2, name: "團隊滿意度", category: "團隊", defaultWeight: 25, isActive: true, usageCount: 12, color: "blue" },
  { id: 3, name: "市場佔有率", category: "營運", defaultWeight: 20, isActive: true, usageCount: 8, color: "purple" },
  { id: 4, name: "創新指數", category: "創新", defaultWeight: 25, isActive: false, usageCount: 3, color: "orange" },
  { id: 5, name: "客戶滿意度", category: "營運", defaultWeight: 20, isActive: true, usageCount: 10, color: "cyan" },
  { id: 6, name: "成本控制率", category: "財務", defaultWeight: 15, isActive: true, usageCount: 6, color: "red" },
]

const questionTemplates = [
  { id: 1, question: "您如何評價本季度的整體表現？", type: "評分", category: "績效", isRequired: true, color: "blue" },
  { id: 2, question: "本期間您的主要成就是什麼？", type: "文字", category: "績效", isRequired: true, color: "emerald" },
  {
    id: 3,
    question: "您面臨了哪些挑戰，如何克服？",
    type: "文字",
    category: "挑戰",
    isRequired: false,
    color: "yellow",
  },
  { id: 4, question: "您如何有效領導團隊？", type: "評分", category: "領導力", isRequired: true, color: "purple" },
  { id: 5, question: "下一季度的目標是什麼？", type: "文字", category: "目標", isRequired: true, color: "orange" },
]

const systemSettings = [
  { id: 1, name: "自動提醒", description: "自動發送審查提醒通知", enabled: true, category: "通知" },
  { id: 2, name: "郵件通知", description: "透過郵件發送系統通知", enabled: true, category: "通知" },
  { id: 3, name: "資料備份", description: "每日自動備份系統資料", enabled: true, category: "安全" },
  { id: 4, name: "雙重驗證", description: "要求使用者啟用雙重驗證", enabled: false, category: "安全" },
  { id: 5, name: "審計日誌", description: "記錄所有系統操作日誌", enabled: true, category: "安全" },
]

export default function AdminPanel() {
  const [activeTab, setActiveTab] = useState("users")
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [dialogType, setDialogType] = useState("")
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [editingUser, setEditingUser] = useState<User | null>(null)
  const [editForm, setEditForm] = useState({
    name: "",
    email: "",
    role: "manager" as "executive" | "manager" | "hr"
  })

  // 載入用戶數據
  useEffect(() => {
    fetchUsers()
  }, [])

  const fetchUsers = async () => {
    try {
      setLoading(true)
      const response = await fetch('/api/users')
      if (!response.ok) {
        throw new Error('載入用戶數據失敗')
      }
      const data = await response.json()
      setUsers(data)
    } catch (err) {
      setError(err instanceof Error ? err.message : '載入用戶數據失敗')
    } finally {
      setLoading(false)
    }
  }

  const handleOpenDialog = (type: string) => {
    setDialogType(type)
    setIsDialogOpen(true)
  }

  const handleEditUser = (user: User) => {
    setEditingUser(user)
    setEditForm({
      name: user.name,
      email: user.email,
      role: user.role
    })
    setDialogType("edit-user")
    setIsDialogOpen(true)
  }

  const handleUpdateUser = async () => {
    if (!editingUser) return

    try {
      const response = await fetch(`/api/users/${editingUser.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(editForm),
      })

      if (!response.ok) {
        throw new Error('更新用戶失敗')
      }

      // 重新載入用戶數據
      await fetchUsers()
      setIsDialogOpen(false)
      setEditingUser(null)
      setEditForm({ name: "", email: "", role: "manager" })
    } catch (err) {
      setError(err instanceof Error ? err.message : '更新用戶失敗')
    }
  }

  const handleDeleteUser = async (userId: string) => {
    if (!confirm('確定要刪除此用戶嗎？此操作無法復原。')) {
      return
    }

    try {
      const response = await fetch(`/api/users/${userId}`, {
        method: 'DELETE',
      })

      if (!response.ok) {
        throw new Error('刪除用戶失敗')
      }

      // 重新載入用戶數據
      await fetchUsers()
    } catch (err) {
      setError(err instanceof Error ? err.message : '刪除用戶失敗')
    }
  }

  const adminStats = {
    totalUsers: users.length,
    activeUsers: users.length, // 所有用戶都視為活躍
    totalKPIs: kpiTemplates.length,
    activeKPIs: kpiTemplates.filter((k) => k.isActive).length,
    totalQuestions: questionTemplates.length,
    requiredQuestions: questionTemplates.filter((q) => q.isRequired).length,
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50 to-pink-50 p-3 sm:p-6">
      <div className="max-w-7xl mx-auto space-y-4 sm:space-y-6">
        {/* Header */}
        <div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
          <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
            <img
              src="data:image/png;base64,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"
              alt="公司 Logo"
              className="h-10 w-auto sm:h-12 md:hidden"
            />
            <div>
              <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                系統管理中心
              </h1>
              <p className="text-sm sm:text-base text-gray-600 mt-1">用戶、模板與系統設定管理</p>
            </div>
          </div>
          <div className="flex space-x-2">
            <Button
              variant="outline"
              className="bg-white/80 backdrop-blur-sm"
              onClick={() => handleOpenDialog("backup")}
            >
              <Database className="h-4 w-4 mr-2" />
              備份資料
            </Button>
            <Button
              className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg"
              onClick={() => handleOpenDialog("user")}
            >
              <Plus className="h-4 w-4 mr-2" />
              新增用戶
            </Button>
          </div>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4">
          <Card className="shadow-lg bg-gradient-to-br from-blue-50 to-cyan-100 border-0">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-blue-700">總用戶</CardTitle>
              <Users className="h-4 w-4 text-blue-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-blue-800">{adminStats.totalUsers}</div>
            </CardContent>
          </Card>
          <Card className="shadow-lg bg-gradient-to-br from-green-50 to-emerald-100 border-0">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-green-700">活躍用戶</CardTitle>
              <Shield className="h-4 w-4 text-green-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-green-800">{adminStats.activeUsers}</div>
            </CardContent>
          </Card>
          <Card className="shadow-lg bg-gradient-to-br from-purple-50 to-violet-100 border-0">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-purple-700">KPI 模板</CardTitle>
              <Target className="h-4 w-4 text-purple-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-purple-800">{adminStats.totalKPIs}</div>
            </CardContent>
          </Card>
          <Card className="shadow-lg bg-gradient-to-br from-orange-50 to-amber-100 border-0">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-orange-700">啟用 KPI</CardTitle>
              <Settings className="h-4 w-4 text-orange-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-orange-800">{adminStats.activeKPIs}</div>
            </CardContent>
          </Card>
          <Card className="shadow-lg bg-gradient-to-br from-pink-50 to-rose-100 border-0">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-pink-700">審查問題</CardTitle>
              <MessageSquare className="h-4 w-4 text-pink-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-pink-800">{adminStats.totalQuestions}</div>
            </CardContent>
          </Card>
          <Card className="shadow-lg bg-gradient-to-br from-indigo-50 to-blue-100 border-0">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-indigo-700">必填問題</CardTitle>
              <Bell className="h-4 w-4 text-indigo-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-indigo-800">{adminStats.requiredQuestions}</div>
            </CardContent>
          </Card>
        </div>

        {/* Main Content */}
        <Card className="shadow-lg bg-white/80 backdrop-blur-sm">
          <CardHeader>
            <CardTitle className="text-lg font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
              系統管理
            </CardTitle>
            <CardDescription>管理用戶、模板和系統設定</CardDescription>
          </CardHeader>
          <CardContent>
            <Tabs value={activeTab} onValueChange={setActiveTab}>
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="users">用戶管理</TabsTrigger>
                <TabsTrigger value="kpi-templates">KPI 模板</TabsTrigger>
                <TabsTrigger value="questions">審查問題</TabsTrigger>
                <TabsTrigger value="settings">系統設定</TabsTrigger>
              </TabsList>

              {/* Users Tab */}
              <TabsContent value="users" className="space-y-4">
                <div className="flex justify-between items-center">
                  <h3 className="text-lg font-semibold">用戶管理</h3>
                  <Button onClick={() => handleOpenDialog("user")}>
                    <Plus className="h-4 w-4 mr-2" />
                    新增用戶
                  </Button>
                </div>
                
                {error && (
                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
                    {error}
                  </div>
                )}

                {loading ? (
                  <div className="text-center py-8">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto"></div>
                    <p className="mt-2 text-gray-600">載入用戶數據中...</p>
                  </div>
                ) : (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>用戶</TableHead>
                        <TableHead>角色</TableHead>
                        <TableHead>建立時間</TableHead>
                        <TableHead>操作</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {users.map((user) => {
                        const userColor = getUserColor(user.id)
                        return (
                          <TableRow key={user.id}>
                            <TableCell>
                              <div className="flex items-center space-x-3">
                                <Avatar className="h-8 w-8">
                                  <AvatarFallback
                                    className={`bg-gradient-to-br ${
                                      userColor === "emerald"
                                        ? "from-emerald-400 to-green-500"
                                        : userColor === "blue"
                                          ? "from-blue-400 to-cyan-500"
                                          : userColor === "purple"
                                            ? "from-purple-400 to-violet-500"
                                            : userColor === "orange"
                                              ? "from-orange-400 to-amber-500"
                                            : userColor === "cyan"
                                              ? "from-cyan-400 to-teal-500"
                                            : userColor === "pink"
                                              ? "from-pink-400 to-rose-500"
                                            : userColor === "indigo"
                                              ? "from-indigo-400 to-blue-500"
                                            : "from-yellow-400 to-amber-500"
                                    } text-white`}
                                  >
                                    {user.name.charAt(0)}
                                  </AvatarFallback>
                                </Avatar>
                                <div>
                                  <div className="font-medium">{user.name}</div>
                                  <div className="text-sm text-gray-500">{user.email}</div>
                                </div>
                              </div>
                            </TableCell>
                            <TableCell>
                              <Badge variant={user.role === "executive" ? "default" : "secondary"}>
                                {user.role === "executive" ? "高階主管" : user.role === "manager" ? "經理" : "HR"}
                              </Badge>
                            </TableCell>
                            <TableCell className="text-sm text-gray-500">
                              {new Date(user.created_at).toLocaleDateString('zh-TW')}
                            </TableCell>
                            <TableCell>
                              <div className="flex items-center space-x-2">
                                <Button 
                                  variant="ghost" 
                                  size="sm"
                                  onClick={() => handleEditUser(user)}
                                >
                                  <Edit className="h-4 w-4" />
                                </Button>
                                <Button 
                                  variant="ghost" 
                                  size="sm" 
                                  className="text-red-500"
                                  onClick={() => handleDeleteUser(user.id)}
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </div>
                            </TableCell>
                          </TableRow>
                        )
                      })}
                    </TableBody>
                  </Table>
                )}
              </TabsContent>

              {/* KPI Templates Tab */}
              <TabsContent value="kpi-templates" className="space-y-4">
                <div className="flex justify-between items-center">
                  <h3 className="text-lg font-semibold">KPI 模板管理</h3>
                  <Button onClick={() => handleOpenDialog("kpi")}>
                    <Plus className="h-4 w-4 mr-2" />
                    新增模板
                  </Button>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {kpiTemplates.map((template) => (
                    <Card
                      key={template.id}
                      className={`shadow-md hover:shadow-lg transition-shadow ${
                        template.color === "emerald"
                          ? "bg-gradient-to-br from-emerald-50 to-green-100"
                          : template.color === "blue"
                            ? "bg-gradient-to-br from-blue-50 to-cyan-100"
                            : template.color === "purple"
                              ? "bg-gradient-to-br from-purple-50 to-violet-100"
                              : template.color === "orange"
                                ? "bg-gradient-to-br from-orange-50 to-amber-100"
                                : template.color === "cyan"
                                  ? "bg-gradient-to-br from-cyan-50 to-teal-100"
                                  : "bg-gradient-to-br from-red-50 to-pink-100"
                      }`}
                    >
                      <CardHeader className="pb-3">
                        <div className="flex items-center justify-between">
                          <CardTitle className="text-base">{template.name}</CardTitle>
                          <Badge variant={template.isActive ? "default" : "secondary"}>
                            {template.isActive ? "啟用" : "停用"}
                          </Badge>
                        </div>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div className="flex justify-between text-sm">
                          <span className="text-gray-600">類別:</span>
                          <span className="font-medium">{template.category}</span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-gray-600">預設權重:</span>
                          <span className="font-medium">{template.defaultWeight}%</span>
                        </div>
                        <div className="flex justify-between text-sm">
                          <span className="text-gray-600">使用次數:</span>
                          <span className="font-medium">{template.usageCount}</span>
                        </div>
                        <div className="flex justify-between pt-2 border-t">
                          <Button variant="ghost" size="sm">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="sm" className="text-red-500">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </TabsContent>

              {/* Questions Tab */}
              <TabsContent value="questions" className="space-y-4">
                <div className="flex justify-between items-center">
                  <h3 className="text-lg font-semibold">審查問題管理</h3>
                  <Button onClick={() => handleOpenDialog("question")}>
                    <Plus className="h-4 w-4 mr-2" />
                    新增問題
                  </Button>
                </div>
                <div className="space-y-3">
                  {questionTemplates.map((question) => (
                    <Card key={question.id} className="shadow-md">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <div className="flex items-center space-x-2 mb-2">
                              <Badge
                                variant="outline"
                                className={`${
                                  question.color === "blue"
                                    ? "border-blue-300 text-blue-700 bg-blue-50"
                                    : question.color === "emerald"
                                      ? "border-emerald-300 text-emerald-700 bg-emerald-50"
                                      : question.color === "yellow"
                                        ? "border-yellow-300 text-yellow-700 bg-yellow-50"
                                        : question.color === "purple"
                                          ? "border-purple-300 text-purple-700 bg-purple-50"
                                          : "border-orange-300 text-orange-700 bg-orange-50"
                                }`}
                              >
                                {question.category}
                              </Badge>
                              <Badge variant={question.type === "評分" ? "default" : "secondary"}>
                                {question.type}
                              </Badge>
                              {question.isRequired && (
                                <Badge variant="destructive" className="text-xs">
                                  必填
                                </Badge>
                              )}
                            </div>
                            <p className="text-gray-900 font-medium">{question.question}</p>
                          </div>
                          <div className="flex items-center space-x-2 ml-4">
                            <Button variant="ghost" size="sm">
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="sm" className="text-red-500">
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </TabsContent>

              {/* Settings Tab */}
              <TabsContent value="settings" className="space-y-4">
                <h3 className="text-lg font-semibold">系統設定</h3>
                <div className="space-y-4">
                  {systemSettings.map((setting) => (
                    <Card key={setting.id} className="shadow-md">
                      <CardContent className="p-4">
                        <div className="flex items-center justify-between">
                          <div className="flex-1">
                            <div className="flex items-center space-x-2 mb-1">
                              <h4 className="font-medium text-gray-900">{setting.name}</h4>
                              <Badge
                                variant="outline"
                                className={
                                  setting.category === "通知"
                                    ? "border-blue-300 text-blue-700 bg-blue-50"
                                    : "border-red-300 text-red-700 bg-red-50"
                                }
                              >
                                {setting.category}
                              </Badge>
                            </div>
                            <p className="text-sm text-gray-600">{setting.description}</p>
                          </div>
                          <Switch checked={setting.enabled} />
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>

        {/* Dialog for various actions */}
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogContent className="max-w-md">
            <DialogHeader>
              <DialogTitle className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                {dialogType === "user"
                  ? "新增用戶"
                  : dialogType === "edit-user"
                    ? "編輯用戶"
                    : dialogType === "kpi"
                      ? "新增 KPI 模板"
                      : dialogType === "question"
                        ? "新增審查問題"
                        : "備份資料"}
              </DialogTitle>
              <DialogDescription>
                {dialogType === "user"
                  ? "建立新的系統用戶帳號"
                  : dialogType === "edit-user"
                    ? "修改用戶資訊"
                    : dialogType === "kpi"
                      ? "建立新的 KPI 模板"
                      : dialogType === "question"
                        ? "建立新的審查問題"
                        : "備份系統資料到安全位置"}
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4">
              {(dialogType === "user" || dialogType === "edit-user") && (
                <>
                  <div>
                    <Label htmlFor="userName">姓名</Label>
                    <Input 
                      id="userName" 
                      placeholder="輸入用戶姓名"
                      value={editForm.name}
                      onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
                    />
                  </div>
                  <div>
                    <Label htmlFor="userEmail">電子郵件</Label>
                    <Input 
                      id="userEmail" 
                      type="email" 
                      placeholder="輸入電子郵件"
                      value={editForm.email}
                      onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                    />
                  </div>
                  <div>
                    <Label htmlFor="userRole">角色</Label>
                    <Select 
                      value={editForm.role} 
                      onValueChange={(value: "executive" | "manager" | "hr") => 
                        setEditForm({ ...editForm, role: value })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="選擇角色" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="executive">高階主管</SelectItem>
                        <SelectItem value="manager">經理</SelectItem>
                        <SelectItem value="hr">HR</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </>
              )}
              {dialogType === "kpi" && (
                <>
                  <div>
                    <Label htmlFor="kpiName">KPI 名稱</Label>
                    <Input id="kpiName" placeholder="輸入 KPI 名稱" />
                  </div>
                  <div>
                    <Label htmlFor="kpiCategory">類別</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="選擇類別" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="財務">財務</SelectItem>
                        <SelectItem value="團隊">團隊</SelectItem>
                        <SelectItem value="營運">營運</SelectItem>
                        <SelectItem value="創新">創新</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="defaultWeight">預設權重 (%)</Label>
                    <Input id="defaultWeight" type="number" placeholder="0-100" />
                  </div>
                </>
              )}
              {dialogType === "question" && (
                <>
                  <div>
                    <Label htmlFor="questionText">問題內容</Label>
                    <Textarea id="questionText" placeholder="輸入審查問題..." />
                  </div>
                  <div>
                    <Label htmlFor="questionType">問題類型</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="選擇類型" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="評分">評分</SelectItem>
                        <SelectItem value="文字">文字</SelectItem>
                        <SelectItem value="選擇">多選</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="questionCategory">問題類別</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="選擇類別" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="績效">績效</SelectItem>
                        <SelectItem value="領導力">領導力</SelectItem>
                        <SelectItem value="目標">目標</SelectItem>
                        <SelectItem value="挑戰">挑戰</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </>
              )}
              {dialogType === "backup" && (
                <div className="text-center py-4">
                  <Database className="h-12 w-12 mx-auto text-gray-400 mb-4" />
                  <p className="text-gray-600">確定要執行系統資料備份嗎？</p>
                  <p className="text-sm text-gray-500 mt-2">備份過程可能需要幾分鐘時間</p>
                </div>
              )}
            </div>
            <DialogFooter>
              <Button
                type="submit"
                className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white"
                onClick={dialogType === "edit-user" ? handleUpdateUser : undefined}
              >
                {dialogType === "backup" ? "開始備份" : dialogType === "edit-user" ? "更新" : "建立"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}