"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { IconShield, IconUsers, IconKey, IconSettings } from "@tabler/icons-react"
import { SiteHeader } from "../site-header"
import { RoleTable } from "./role-table"
import { PermissionTable } from "./permission-table"
import { UserRoleManagement } from "./user-role-management"
import { RolePermissionManagement } from "./role-permission-management"
import { ScrollArea } from "@/components/ui/scroll-area"

export default function PermissionsPage() {
    return (
        <>
            <SiteHeader breadcrumbs={[{ label: "Home", href: "/" }, { label: "权限管理", href: "/admin/permissions" }]} />
            <ScrollArea className="h-full">
                <div className="flex flex-1 flex-col">
                    <div className="@container/main flex flex-1 flex-col gap-2 py-4">
                        <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
                            <div className="px-6">
                                <h1 className="text-2xl font-bold flex items-center gap-2">
                                    <IconShield className="h-6 w-6" />
                                    权限管理中心
                                </h1>
                                <p className="text-muted-foreground mt-1">
                                    管理用户角色和权限，确保系统安全
                                </p>
                            </div>

                            {/* 统计卡片 */}
                            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 px-6">
                                <Card>
                                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                        <CardTitle className="text-sm font-medium">总用户数</CardTitle>
                                        <IconUsers className="h-4 w-4 text-muted-foreground" />
                                    </CardHeader>
                                    <CardContent>
                                        <div className="text-2xl font-bold">1,234</div>
                                        <p className="text-xs text-muted-foreground">+20% 较上月</p>
                                    </CardContent>
                                </Card>
                                <Card>
                                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                        <CardTitle className="text-sm font-medium">活跃角色</CardTitle>
                                        <IconShield className="h-4 w-4 text-muted-foreground" />
                                    </CardHeader>
                                    <CardContent>
                                        <div className="text-2xl font-bold">8</div>
                                        <p className="text-xs text-muted-foreground">5个系统角色</p>
                                    </CardContent>
                                </Card>
                                <Card>
                                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                        <CardTitle className="text-sm font-medium">权限总数</CardTitle>
                                        <IconKey className="h-4 w-4 text-muted-foreground" />
                                    </CardHeader>
                                    <CardContent>
                                        <div className="text-2xl font-bold">45</div>
                                        <p className="text-xs text-muted-foreground">12个模块</p>
                                    </CardContent>
                                </Card>
                                <Card>
                                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                        <CardTitle className="text-sm font-medium">访问日志</CardTitle>
                                        <IconSettings className="h-4 w-4 text-muted-foreground" />
                                    </CardHeader>
                                    <CardContent>
                                        <div className="text-2xl font-bold">2,847</div>
                                        <p className="text-xs text-muted-foreground">今日访问次数</p>
                                    </CardContent>
                                </Card>
                            </div>

                            {/* 主要功能标签页 */}
                            <div className="px-6">
                                <Tabs defaultValue="roles" className="w-full">
                                    <TabsList className="grid w-full grid-cols-4">
                                        <TabsTrigger value="roles" className="flex items-center gap-2">
                                            <IconShield className="h-4 w-4" />
                                            角色管理
                                        </TabsTrigger>
                                        <TabsTrigger value="permissions" className="flex items-center gap-2">
                                            <IconKey className="h-4 w-4" />
                                            权限管理
                                        </TabsTrigger>
                                        <TabsTrigger value="user-roles" className="flex items-center gap-2">
                                            <IconUsers className="h-4 w-4" />
                                            用户角色
                                        </TabsTrigger>
                                        <TabsTrigger value="role-permissions" className="flex items-center gap-2">
                                            <IconSettings className="h-4 w-4" />
                                            角色权限
                                        </TabsTrigger>
                                    </TabsList>

                                    <TabsContent value="roles" className="mt-6">
                                        <RoleTable />
                                    </TabsContent>

                                    <TabsContent value="permissions" className="mt-6">
                                        <PermissionTable />
                                    </TabsContent>

                                    <TabsContent value="user-roles" className="mt-6">
                                        <UserRoleManagement />
                                    </TabsContent>

                                    <TabsContent value="role-permissions" className="mt-6">
                                        <RolePermissionManagement />
                                    </TabsContent>
                                </Tabs>
                            </div>
                        </div>
                    </div>
                </div>
            </ScrollArea>

        </>
    )
}