'use client'

import React, { useState } from 'react'
import { trpc } from '@/lib/trpc'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Badge } from '@/components/ui/badge'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import {
  AdvancedSelect,
  SelectPopover,
  SelectTrigger,
  SelectContent,
  SelectInput,
  SelectItemList,
  SelectedBadges
} from '@/components/common/advanced-select'
import { Settings, Edit, Trash2, Save, X, Plus, Check } from 'lucide-react'
import { toast } from 'sonner'

interface RoleData {
  id: number
  name: string
  userCount: number
  permissions: Array<{ id: number; name: string }>
}

interface EditingRole {
  id: number | null
  name: string
  permissionIds: number[]
}

export function RoleManagementDialog() {
  const [isOpen, setIsOpen] = useState(false)
  const [editingRole, setEditingRole] = useState<EditingRole | null>(null)
  const [isAddingNew, setIsAddingNew] = useState(false)
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState<number | null>(null)
  const utils = trpc.useUtils()

  // 获取角色列表和权限列表
  const { data: roles = [], refetch: refetchRoles } = trpc.users.getRolesWithStats.useQuery(undefined, {
    enabled: isOpen
  })
  const { data: permissions = [] } = trpc.users.getPermissions.useQuery(undefined, {
    enabled: isOpen
  })

  // 创建角色
  const createRoleMutation = trpc.users.createRole.useMutation({
    onSuccess: () => {
      toast.success('角色创建成功')
      refetchRoles()
      utils.users.getRoles.invalidate()
      setIsAddingNew(false)
      setEditingRole(null)
    },
    onError: (error) => {
      toast.error(error.message || '创建角色失败')
    }
  })

  // 更新角色
  const updateRoleMutation = trpc.users.updateRole.useMutation({
    onSuccess: () => {
      toast.success('角色更新成功')
      refetchRoles()
      utils.users.getRoles.invalidate()
      setEditingRole(null)
    },
    onError: (error) => {
      toast.error(error.message || '更新角色失败')
    }
  })

  // 删除角色
  const deleteRoleMutation = trpc.users.deleteRole.useMutation({
    onSuccess: () => {
      toast.success('角色删除成功')
      refetchRoles()
      utils.users.getRoles.invalidate()
      setDeleteConfirmOpen(null)
    },
    onError: (error) => {
      toast.error(error.message || '删除角色失败')
    }
  })

  // 开始编辑角色
  const handleEditRole = (role: RoleData) => {
    setEditingRole({
      id: role.id,
      name: role.name,
      permissionIds: role.permissions.map(p => p.id)
    })
    setIsAddingNew(false)
  }

  // 开始新增角色
  const handleAddNewRole = () => {
    setEditingRole({
      id: null,
      name: '',
      permissionIds: []
    })
    setIsAddingNew(true)
  }

  // 取消编辑
  const handleCancelEdit = () => {
    setEditingRole(null)
    setIsAddingNew(false)
  }

  // 保存角色
  const handleSaveRole = () => {
    if (!editingRole) return

    if (!editingRole.name.trim()) {
      toast.error('角色名称不能为空')
      return
    }

    if (editingRole.id === null) {
      // 新增角色
      createRoleMutation.mutate({
        name: editingRole.name.trim(),
        permissionIds: editingRole.permissionIds
      })
    } else {
      // 更新角色
      updateRoleMutation.mutate({
        id: editingRole.id,
        name: editingRole.name.trim(),
        permissionIds: editingRole.permissionIds
      })
    }
  }

  // 删除角色
  const handleDeleteRole = (roleId: number) => {
    deleteRoleMutation.mutate({ id: roleId })
  }

  // 处理权限选择变化
  const handlePermissionChange = (permissionIds: string | undefined | string[]) => {
    if (!editingRole) return

    const ids = Array.isArray(permissionIds) ? permissionIds : []
    setEditingRole(prev => {
      if (!prev) return prev
      return { ...prev, permissionIds: ids.map(Number) }
    })
  }

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" className="flex items-center gap-2">
          <Settings className="h-4 w-4" />
          角色管理
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-5xl sm:max-w-5xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>角色管理</DialogTitle>
          <DialogDescription>
            管理系统中的角色和权限分配
          </DialogDescription>
        </DialogHeader>
        
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-16">ID</TableHead>
              <TableHead className="w-48">角色名称</TableHead>
              <TableHead className="w-24">用户数量</TableHead>
              <TableHead className="w-96">权限</TableHead>
              <TableHead className="w-32">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {roles.map((role) => (
              <TableRow key={role.id}>
                <TableCell>{role.id}</TableCell>
                <TableCell>
                  {editingRole?.id === role.id ? (
                    <Input
                      value={editingRole.name}
                      onChange={(e) =>
                        setEditingRole(prev => prev ? { ...prev, name: e.target.value } : null)
                      }
                      placeholder="输入角色名称"
                      className="w-full"
                    />
                  ) : (
                    role.name
                  )}
                </TableCell>
                <TableCell>{role.userCount}</TableCell>
                <TableCell>
                  {editingRole?.id === role.id ? (
                    <AdvancedSelect
                      options={permissions.map(p => ({ ...p, id: p.id.toString() }))}
                      value={editingRole.permissionIds.map(String)}
                      onChange={handlePermissionChange}
                      multiple={{ enable: true, limit: 1 }}
                    >
                      <SelectPopover>
                        <SelectTrigger placeholder="选择权限">
                          <SelectedBadges maxDisplay={2} />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectInput placeholder="搜索权限..." />
                          <SelectItemList />
                        </SelectContent>
                      </SelectPopover>
                    </AdvancedSelect>
                  ) : (
                    <div className="flex flex-wrap gap-1 max-w-xs">
                      {role.permissions.map((perm) => (
                        <Badge key={perm.id} variant="outline" className="text-xs">
                          {perm.name}
                        </Badge>
                      ))}
                    </div>
                  )}
                </TableCell>
                <TableCell>
                  {editingRole?.id === role.id ? (
                    <div className="flex items-center gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={handleSaveRole}
                        disabled={updateRoleMutation.isPending}
                        className="text-green-600 hover:text-green-700 hover:bg-green-50 p-2"
                      >
                        <Save className="h-3 w-3" />
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={handleCancelEdit}
                        className="text-red-600 hover:text-red-700 hover:bg-red-50 p-2"
                      >
                        <X className="h-3 w-3" />
                      </Button>
                    </div>
                  ) : (
                    <div className="flex items-center gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleEditRole(role)}
                        disabled={editingRole !== null || isAddingNew}
                        className="p-2"
                      >
                        <Edit className="h-3 w-3" />
                      </Button>
                      {role.userCount === 0 && (
                        <Popover
                          open={deleteConfirmOpen === role.id}
                          onOpenChange={(open) => setDeleteConfirmOpen(open ? role.id : null)}
                        >
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              size="sm"
                              disabled={deleteRoleMutation.isPending}
                              className="text-red-600 hover:text-red-700 hover:bg-red-50 p-2"
                            >
                              <Trash2 className="h-3 w-3" />
                            </Button>
                          </PopoverTrigger>
                          <PopoverContent className="w-80">
                            <div className="space-y-4">
                              <div className="space-y-2">
                                <h4 className="font-medium leading-none">确认删除</h4>
                                <p className="text-sm text-muted-foreground">
                                  确定要删除角色 &quot;{role.name}&quot; 吗？
                                </p>
                              </div>
                              <div className="flex justify-end gap-2">
                                <Button
                                  variant="outline"
                                  size="sm"
                                  onClick={() => setDeleteConfirmOpen(null)}
                                >
                                  取消
                                </Button>
                                <Button
                                  variant="destructive"
                                  size="sm"
                                  onClick={() => handleDeleteRole(role.id)}
                                  disabled={deleteRoleMutation.isPending}
                                >
                                  确认删除
                                </Button>
                              </div>
                            </div>
                          </PopoverContent>
                        </Popover>
                      )}
                    </div>
                  )}
                </TableCell>
              </TableRow>
            ))}
            
            {/* 新增角色行 */}
            <TableRow>
              {isAddingNew && editingRole ? (
                <>
                  <TableCell>
                    <Plus className="h-4 w-4 text-gray-400" />
                  </TableCell>
                  <TableCell>
                    <Input
                      value={editingRole.name}
                      onChange={(e) =>
                        setEditingRole(prev => prev ? { ...prev, name: e.target.value } : null)
                      }
                      placeholder="输入角色名称"
                      className="w-full"
                    />
                  </TableCell>
                  <TableCell>0</TableCell>
                  <TableCell>
                    <AdvancedSelect
                      options={permissions.map(p => ({ ...p, id: p.id.toString() }))}
                      value={editingRole.permissionIds.map(String)}
                      onChange={handlePermissionChange}
                      multiple={{ enable: true }}
                    >
                      <SelectPopover>
                        <SelectTrigger placeholder="选择权限">
                          <SelectedBadges maxDisplay={2} />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectInput placeholder="搜索权限..." />
                          <SelectItemList />
                        </SelectContent>
                      </SelectPopover>
                    </AdvancedSelect>
                  </TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={handleSaveRole}
                        disabled={createRoleMutation.isPending}
                        className="bg-green-600 hover:bg-green-700 text-white p-2"
                      >
                        <Check className="h-3 w-3" />
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={handleCancelEdit}
                        className="text-red-600 hover:text-red-700 hover:bg-red-50 p-2"
                      >
                        <X className="h-3 w-3" />
                      </Button>
                    </div>
                  </TableCell>
                </>
              ) : (
                <>
                  <TableCell>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={handleAddNewRole}
                      disabled={editingRole !== null}
                      className="p-2 hover:bg-gray-100"
                    >
                      <Plus className="h-4 w-4 text-gray-600" />
                    </Button>
                  </TableCell>
                  <TableCell className="text-gray-400">点击+新增角色</TableCell>
                  <TableCell>-</TableCell>
                  <TableCell>-</TableCell>
                  <TableCell>-</TableCell>
                </>
              )}
            </TableRow>
          </TableBody>
        </Table>
      </DialogContent>
    </Dialog>
  )
}