import { useState, useEffect, useCallback } from "react"
import { Plus, Trash2, Shield, ShieldAlert, Key } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { fetchAdmins, createAdmin, deleteAdmin, resetAdminPassword } from "@/lib/api/admin-api"
import { ADMIN_ROLE_LABELS } from "@/lib/constants"
import type { Admin, AdminRole, CreateAdminForm } from "@/types/admin"

const roleIcons = {
  admin: Shield,
  moderator: ShieldAlert,
}

const roleBadgeVariants: Record<AdminRole, "default" | "secondary"> = {
  admin: "default",
  moderator: "secondary",
}

export default function AdminsPage() {
  const [admins, setAdmins] = useState<Admin[]>([])
  const [loading, setLoading] = useState(true)
  const [dialogOpen, setDialogOpen] = useState(false)
  const [deleteOpen, setDeleteOpen] = useState(false)
  const [resetPasswordOpen, setResetPasswordOpen] = useState(false)
  const [selectedAdmin, setSelectedAdmin] = useState<Admin | null>(null)
  const [submitting, setSubmitting] = useState(false)

  // 表单状态
  const [formData, setFormData] = useState<CreateAdminForm>({
    username: "",
    password: "",
    role: "moderator",
  })

  // 重置密码表单
  const [resetPasswordData, setResetPasswordData] = useState({
    newPassword: "",
    confirmPassword: "",
  })

  const loadAdmins = useCallback(async () => {
    setLoading(true)
    try {
      const res = await fetchAdmins()
      setAdmins(res.data)
    } catch {
      setAdmins([])
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    loadAdmins()
  }, [loadAdmins])

  function openCreateDialog() {
    setSelectedAdmin(null)
    setFormData({
      username: "",
      password: "",
      role: "moderator",
    })
    setDialogOpen(true)
  }

  function openDeleteDialog(admin: Admin) {
    setSelectedAdmin(admin)
    setDeleteOpen(true)
  }

  function openResetPasswordDialog(admin: Admin) {
    setSelectedAdmin(admin)
    setResetPasswordData({ newPassword: "", confirmPassword: "" })
    setResetPasswordOpen(true)
  }

  async function handleSubmit() {
    if (!formData.password) {
      return
    }
    setSubmitting(true)
    try {
      await createAdmin(formData)
      setDialogOpen(false)
      await loadAdmins()
    } finally {
      setSubmitting(false)
    }
  }

  async function handleDelete() {
    if (!selectedAdmin) return
    await deleteAdmin(selectedAdmin.id)
    setDeleteOpen(false)
    setSelectedAdmin(null)
    await loadAdmins()
  }

  async function handleResetPassword() {
    if (!selectedAdmin || resetPasswordData.newPassword !== resetPasswordData.confirmPassword) {
      return
    }
    setSubmitting(true)
    try {
      await resetAdminPassword(selectedAdmin.id, resetPasswordData.newPassword)
      setResetPasswordOpen(false)
      // TODO: 显示成功提示
    } finally {
      setSubmitting(false)
    }
  }

  // 获取当前管理员的信息（从 localStorage）
  const currentAdminId = localStorage.getItem("duoqi_admin_current_id")

  return (
    <>
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">管理员管理</h1>
          <p className="text-sm text-muted-foreground">
            管理后台管理员账号和权限
          </p>
        </div>
        <Button onClick={openCreateDialog}>
          <Plus className="size-4 mr-1" />
          新建管理员
        </Button>
      </div>

      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>用户名</TableHead>
              <TableHead>角色</TableHead>
              <TableHead>创建时间</TableHead>
              <TableHead>最后登录</TableHead>
              <TableHead>操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              <TableRow>
                <TableCell colSpan={5} className="h-24 text-center text-muted-foreground">
                  加载中...
                </TableCell>
              </TableRow>
            ) : admins.length === 0 ? (
              <TableRow>
                <TableCell colSpan={5} className="h-24 text-center text-muted-foreground">
                  暂无管理员账号
                </TableCell>
              </TableRow>
            ) : (
              admins.map((admin) => {
                const RoleIcon = roleIcons[admin.role]
                const isCurrentUser = admin.id === currentAdminId
                return (
                  <TableRow key={admin.id}>
                    <TableCell className="font-medium">
                      <div className="flex items-center gap-2">
                        <RoleIcon className="size-4 text-muted-foreground" />
                        {admin.username}
                        {isCurrentUser && (
                          <Badge variant="outline" className="text-xs">当前账号</Badge>
                        )}
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant={roleBadgeVariants[admin.role]}>
                        {ADMIN_ROLE_LABELS[admin.role]}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-sm text-muted-foreground">
                      {new Date(admin.createdAt).toLocaleString("zh-CN")}
                    </TableCell>
                    <TableCell className="text-sm text-muted-foreground">
                      {admin.lastLoginAt
                        ? new Date(admin.lastLoginAt).toLocaleString("zh-CN")
                        : "从未登录"}
                    </TableCell>
                    <TableCell>
                      <div className="flex gap-2">
                        <Button
                          variant="outline"
                          size="icon-xs"
                          onClick={() => openResetPasswordDialog(admin)}
                          title="重置密码"
                        >
                          <Key className="size-3.5" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon-xs"
                          className="text-destructive"
                          onClick={() => openDeleteDialog(admin)}
                          disabled={isCurrentUser}
                          title={isCurrentUser ? "不能删除当前账号" : "删除"}
                        >
                          <Trash2 className="size-3.5" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                )
              })
            )}
          </TableBody>
        </Table>
      </div>

      {/* 创建管理员对话框 */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>新建管理员</DialogTitle>
            <DialogDescription>
              创建新的管理员账号，请妥善保管密码
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div>
              <Label htmlFor="username">用户名</Label>
              <Input
                id="username"
                value={formData.username}
                onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                placeholder="请输入用户名"
              />
            </div>

            <div>
              <Label htmlFor="password">密码</Label>
              <Input
                id="password"
                type="password"
                value={formData.password}
                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                placeholder="请输入密码（至少 6 位）"
              />
            </div>

            <div>
              <Label htmlFor="role">角色</Label>
              <Select
                value={formData.role}
                onValueChange={(val) => setFormData({ ...formData, role: val as AdminRole })}
              >
                <SelectTrigger id="role">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(ADMIN_ROLE_LABELS).map(([value, label]) => (
                    <SelectItem key={value} value={value}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={submitting}>
              取消
            </Button>
            <Button onClick={handleSubmit} disabled={submitting || !formData.username || !formData.password}>
              {submitting ? "创建中..." : "创建"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 删除确认 */}
      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>确认删除</AlertDialogTitle>
            <AlertDialogDescription>
              确定要删除管理员"{selectedAdmin?.username}"吗？此操作不可撤销。
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDelete}
              className="bg-destructive text-white hover:bg-destructive/90"
            >
              删除
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 重置密码对话框 */}
      <Dialog open={resetPasswordOpen} onOpenChange={setResetPasswordOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>重置密码</DialogTitle>
            <DialogDescription>
              为管理员"{selectedAdmin?.username}"设置新密码
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div>
              <Label htmlFor="new-password">新密码</Label>
              <Input
                id="new-password"
                type="password"
                value={resetPasswordData.newPassword}
                onChange={(e) =>
                  setResetPasswordData({ ...resetPasswordData, newPassword: e.target.value })
                }
                placeholder="请输入新密码（至少 6 位）"
              />
            </div>

            <div>
              <Label htmlFor="confirm-password">确认密码</Label>
              <Input
                id="confirm-password"
                type="password"
                value={resetPasswordData.confirmPassword}
                onChange={(e) =>
                  setResetPasswordData({ ...resetPasswordData, confirmPassword: e.target.value })
                }
                placeholder="请再次输入新密码"
              />
              {resetPasswordData.newPassword !== resetPasswordData.confirmPassword && (
                <p className="text-sm text-destructive mt-1">两次输入的密码不一致</p>
              )}
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setResetPasswordOpen(false)} disabled={submitting}>
              取消
            </Button>
            <Button
              onClick={handleResetPassword}
              disabled={submitting || !resetPasswordData.newPassword || resetPasswordData.newPassword !== resetPasswordData.confirmPassword}
            >
              {submitting ? "重置中..." : "确认重置"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}