"use client"

import * as React from "react"
import { useQuery, useMutation, gql } from '@apollo/client';
import {
    IconShield,
    IconKey,
    IconCheck,
    IconX,
    IconSettings,
} from "@tabler/icons-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { toast } from "sonner"

const GET_ROLES_WITH_PERMISSIONS = gql`
    query GetRolesWithPermissions {
        roles(pagination: { page: 1, perPage: 100 }) {
            items {
                id
                name
                code
                level
                isActive
                permissions {
                    id
                    name
                    code
                    module
                    action
                    resource
                }
            }
        }
    }
`

const GET_ALL_PERMISSIONS = gql`
    query GetAllPermissions {
        permissions(pagination: { page: 1, perPage: 500 }) {
            items {
                id
                name
                code
                description
                module
                action
                resource
                level
                isActive
            }
        }
    }
`

const ADD_POLICY = gql`
    mutation AddPolicy($roleName: String!, $resource: String!, $action: String!) {
        addPolicy(roleName: $roleName, resource: $resource, action: $action)
    }
`

const REMOVE_POLICY = gql`
    mutation RemovePolicy($roleName: String!, $resource: String!, $action: String!) {
        removePolicy(roleName: $roleName, resource: $resource, action: $action)
    }
`


interface Permission {
    id: string
    name: string
    code: string
    description?: string
    module: string
    action: string
    resource: string
    level: number
    isActive: boolean
}

interface Role {
    id: string
    name: string
    code: string
    level: number
    isActive: boolean
    permissions: Permission[]
}

const getActionColor = (action: string) => {
    switch (action.toLowerCase()) {
        case 'create':
            return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
        case 'read':
            return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300'
        case 'update':
            return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300'
        case 'delete':
            return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
        default:
            return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'
    }
}

function PermissionMatrix({ roles, permissions, onPermissionChange }: {
    roles: Role[]
    permissions: Permission[]
    onPermissionChange: () => void
}) {
    const [addPolicy] = useMutation(ADD_POLICY)
    const [removePolicy] = useMutation(REMOVE_POLICY)
    const [selectedModule, setSelectedModule] = React.useState("")

    const modules = Array.from(new Set(permissions.map(p => p.module)))
    const filteredPermissions = selectedModule 
        ? permissions.filter(p => p.module === selectedModule)
        : permissions

    const handlePermissionToggle = async (roleId: string, permissionId: string, hasPermission: boolean) => {
        const role = roles.find(r => r.id === roleId)
        const permission = permissions.find(p => p.id === permissionId)
        
        if (!role || !permission) return
        
        try {
            if (hasPermission) {
                await removePolicy({
                    variables: { 
                        roleName: role.code, 
                        resource: permission.resource, 
                        action: permission.action 
                    }
                })
                toast.success("权限移除成功")
            } else {
                await addPolicy({
                    variables: { 
                        roleName: role.code, 
                        resource: permission.resource, 
                        action: permission.action 
                    }
                })
                toast.success("权限分配成功")
            }
            onPermissionChange()
        } catch (error) {
            toast.error("操作失败")
        }
    }

    const hasPermission = (role: Role, permissionId: string) => {
        return role.permissions.some(p => p.id === permissionId)
    }

    return (
        <Card>
            <CardHeader>
                <CardTitle>权限矩阵</CardTitle>
                <CardDescription>
                    查看和管理角色与权限的对应关系
                </CardDescription>
            </CardHeader>
            <CardContent>
                <div className="space-y-4">
                    <div className="flex items-center gap-4">
                        <Select value={selectedModule || "all"} onValueChange={(value) => setSelectedModule(value === "all" ? "" : value)}>
                            <SelectTrigger className="w-[200px]">
                                <SelectValue placeholder="筛选模块" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">全部模块</SelectItem>
                                {modules.map((module) => (
                                    <SelectItem key={module} value={module}>
                                        {module}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        <Badge variant="outline">
                            共 {filteredPermissions.length} 个权限
                        </Badge>
                    </div>

                    <div className="rounded-md border overflow-auto">
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead className="w-[300px] sticky left-0 bg-background">权限</TableHead>
                                    {roles.filter(r => r.isActive).map((role) => (
                                        <TableHead key={role.id} className="text-center min-w-[120px]">
                                            <div className="space-y-1">
                                                <div className="font-medium">{role.name}</div>
                                                <Badge variant="outline" className="text-xs">
                                                    Level {role.level}
                                                </Badge>
                                            </div>
                                        </TableHead>
                                    ))}
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {filteredPermissions.map((permission) => (
                                    <TableRow key={permission.id}>
                                        <TableCell className="sticky left-0 bg-background">
                                            <div className="space-y-1">
                                                <div className="font-medium">{permission.name}</div>
                                                <div className="text-sm text-muted-foreground">{permission.code}</div>
                                                <div className="flex items-center gap-1">
                                                    <Badge variant="outline" className="text-xs">
                                                        {permission.module}
                                                    </Badge>
                                                    <Badge className={`${getActionColor(permission.action)} border-0 text-xs`}>
                                                        {permission.action}
                                                    </Badge>
                                                </div>
                                            </div>
                                        </TableCell>
                                        {roles.filter(r => r.isActive).map((role) => {
                                            const roleHasPermission = hasPermission(role, permission.id)
                                            const canModify = permission.level <= role.level
                                            
                                            return (
                                                <TableCell key={role.id} className="text-center">
                                                    <Button
                                                        variant="ghost"
                                                        size="sm"
                                                        className={`h-8 w-8 p-0 ${
                                                            roleHasPermission 
                                                                ? "text-green-600 hover:text-green-700" 
                                                                : "text-muted-foreground hover:text-foreground"
                                                        }`}
                                                        disabled={!canModify}
                                                        onClick={() => handlePermissionToggle(
                                                            role.id, 
                                                            permission.id, 
                                                            roleHasPermission
                                                        )}
                                                    >
                                                        {roleHasPermission ? (
                                                            <IconCheck className="h-4 w-4" />
                                                        ) : (
                                                            <IconX className="h-4 w-4" />
                                                        )}
                                                    </Button>
                                                </TableCell>
                                            )
                                        })}
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </div>
                </div>
            </CardContent>
        </Card>
    )
}

function RolePermissionEditor({ role, allPermissions, onSave }: {
    role: Role
    allPermissions: Permission[]
    onSave: () => void
}) {
    const [open, setOpen] = React.useState(false)
    const [selectedPermissions, setSelectedPermissions] = React.useState<string[]>(
        role.permissions.map(p => p.id)
    )
    const [searchTerm, setSearchTerm] = React.useState("")
    const [moduleFilter, setModuleFilter] = React.useState("")
    const [loading, setLoading] = React.useState(false)

    const filteredPermissions = allPermissions.filter(permission => {
        const matchesSearch = permission.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                             permission.code.toLowerCase().includes(searchTerm.toLowerCase())
        const matchesModule = !moduleFilter || permission.module === moduleFilter
        return matchesSearch && matchesModule && permission.isActive
    })

    const modules = Array.from(new Set(allPermissions.map(p => p.module)))

    const handlePermissionToggle = (permissionId: string) => {
        setSelectedPermissions(prev =>
            prev.includes(permissionId)
                ? prev.filter(id => id !== permissionId)
                : [...prev, permissionId]
        )
    }

    const handleSelectAll = () => {
        const allIds = filteredPermissions.map(p => p.id)
        setSelectedPermissions(prev => {
            const hasAll = allIds.every(id => prev.includes(id))
            if (hasAll) {
                return prev.filter(id => !allIds.includes(id))
            } else {
                return Array.from(new Set([...prev, ...allIds]))
            }
        })
    }

    const handleSave = async () => {
        toast.info("批量保存功能正在开发中，请使用权限矩阵进行单个权限操作")
        setOpen(false)
    }

    React.useEffect(() => {
        if (open) {
            setSelectedPermissions(role.permissions.map(p => p.id))
        }
    }, [open, role.permissions])

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button variant="outline" size="sm">
                    <IconSettings className="mr-2 h-4 w-4" />
                    编辑权限
                </Button>
            </DialogTrigger>
            <DialogContent className="max-w-4xl max-h-[80vh]">
                <DialogHeader>
                    <DialogTitle>
                        编辑角色权限 - {role.name}
                    </DialogTitle>
                    <DialogDescription>
                        为角色 "{role.name}" 配置权限。选中的权限将被分配给该角色。
                    </DialogDescription>
                </DialogHeader>
                
                <div className="space-y-4">
                    <div className="flex items-center gap-4">
                        <Input
                            placeholder="搜索权限..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            className="flex-1"
                        />
                        <Select value={moduleFilter || "all"} onValueChange={(value) => setModuleFilter(value === "all" ? "" : value)}>
                            <SelectTrigger className="w-[160px]">
                                <SelectValue placeholder="筛选模块" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">全部模块</SelectItem>
                                {modules.map((module) => (
                                    <SelectItem key={module} value={module}>
                                        {module}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        <Button variant="outline" onClick={handleSelectAll}>
                            {filteredPermissions.every(p => selectedPermissions.includes(p.id)) ? "取消全选" : "全选"}
                        </Button>
                    </div>

                    <div className="flex items-center justify-between text-sm text-muted-foreground">
                        <span>已选择 {selectedPermissions.length} 个权限</span>
                        <span>共 {filteredPermissions.length} 个权限</span>
                    </div>

                    <div className="border rounded-md max-h-96 overflow-auto">
                        <div className="space-y-0">
                            {filteredPermissions.map((permission) => (
                                <div
                                    key={permission.id}
                                    className="flex items-center space-x-3 p-3 border-b last:border-b-0 hover:bg-muted/50"
                                >
                                    <Checkbox
                                        checked={selectedPermissions.includes(permission.id)}
                                        onCheckedChange={() => handlePermissionToggle(permission.id)}
                                    />
                                    <div className="flex-1 space-y-1">
                                        <div className="flex items-center gap-2">
                                            <span className="font-medium">{permission.name}</span>
                                            <Badge variant="outline" className="text-xs">
                                                {permission.module}
                                            </Badge>
                                            <Badge className={`${getActionColor(permission.action)} border-0 text-xs`}>
                                                {permission.action}
                                            </Badge>
                                        </div>
                                        <div className="text-sm text-muted-foreground">
                                            {permission.code} - {permission.description || "无描述"}
                                        </div>
                                    </div>
                                    <div className="text-sm text-muted-foreground">
                                        Level {permission.level}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                <DialogFooter>
                    <Button variant="outline" onClick={() => setOpen(false)}>
                        取消
                    </Button>
                    <Button onClick={handleSave} disabled={loading}>
                        {loading ? "保存中..." : "保存权限"}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}

export function RolePermissionManagement() {
    const [selectedRole, setSelectedRole] = React.useState("")

    const { data: rolesData, loading: rolesLoading, refetch: refetchRoles } = useQuery(GET_ROLES_WITH_PERMISSIONS, {
        fetchPolicy: 'cache-and-network'
    })

    const { data: permissionsData, loading: permissionsLoading } = useQuery(GET_ALL_PERMISSIONS, {
        fetchPolicy: 'cache-and-network'
    })

    const roles = rolesData?.roles?.items || []
    const permissions = permissionsData?.permissions?.items || []

    const activeRoles = roles.filter(r => r.isActive)
    const currentRole = selectedRole ? roles.find(r => r.id === selectedRole) : null

    return (
        <div className="space-y-6">
            {/* 角色概览卡片 */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {activeRoles.map((role) => (
                    <Card 
                        key={role.id} 
                        className={`cursor-pointer transition-colors ${
                            selectedRole === role.id ? 'ring-2 ring-primary' : 'hover:bg-muted/50'
                        }`}
                        onClick={() => setSelectedRole(selectedRole === role.id ? "" : role.id)}
                    >
                        <CardHeader className="pb-3">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2">
                                    <IconShield className="h-5 w-5 text-primary" />
                                    <CardTitle className="text-base">{role.name}</CardTitle>
                                </div>
                                <Badge variant="outline">
                                    Level {role.level}
                                </Badge>
                            </div>
                            <CardDescription>{role.code}</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="flex items-center justify-between">
                                <div className="text-sm text-muted-foreground">
                                    权限数: {role.permissions.length}
                                </div>
                                <RolePermissionEditor
                                    role={role}
                                    allPermissions={permissions}
                                    onSave={refetchRoles}
                                />
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>

            {/* 选中角色的权限详情 */}
            {currentRole && (
                <Card>
                    <CardHeader>
                        <CardTitle>
                            {currentRole.name} 的权限详情
                        </CardTitle>
                        <CardDescription>
                            查看角色 "{currentRole.name}" 当前拥有的所有权限
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        {currentRole.permissions.length === 0 ? (
                            <div className="text-center py-8">
                                <IconKey className="mx-auto h-12 w-12 text-muted-foreground" />
                                <h3 className="mt-2 text-sm font-semibold">暂无权限</h3>
                                <p className="mt-1 text-sm text-muted-foreground">
                                    该角色尚未分配任何权限。
                                </p>
                                <div className="mt-4">
                                    <RolePermissionEditor
                                        role={currentRole}
                                        allPermissions={permissions}
                                        onSave={refetchRoles}
                                    />
                                </div>
                            </div>
                        ) : (
                            <div className="space-y-4">
                                <div className="flex items-center justify-between">
                                    <div className="text-sm text-muted-foreground">
                                        共 {currentRole.permissions.length} 个权限
                                    </div>
                                    <RolePermissionEditor
                                        role={currentRole}
                                        allPermissions={permissions}
                                        onSave={refetchRoles}
                                    />
                                </div>
                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                                    {currentRole.permissions.map((permission) => (
                                        <Card key={permission.id} className="p-3">
                                            <div className="space-y-2">
                                                <div className="flex items-center gap-2">
                                                    <IconKey className="h-4 w-4 text-primary" />
                                                    <span className="font-medium text-sm">{permission.name}</span>
                                                </div>
                                                <div className="text-xs text-muted-foreground">
                                                    {permission.code}
                                                </div>
                                                <div className="flex items-center gap-1">
                                                    <Badge variant="outline" className="text-xs">
                                                        {permission.module}
                                                    </Badge>
                                                    <Badge className={`${getActionColor(permission.action)} border-0 text-xs`}>
                                                        {permission.action}
                                                    </Badge>
                                                </div>
                                            </div>
                                        </Card>
                                    ))}
                                </div>
                            </div>
                        )}
                    </CardContent>
                </Card>
            )}

            {/* 权限矩阵 */}
            {!rolesLoading && !permissionsLoading && (
                <PermissionMatrix
                    roles={roles}
                    permissions={permissions}
                    onPermissionChange={refetchRoles}
                />
            )}
        </div>
    )
}