import * as React from "react"
import { ShieldCheck, UserCog, Users } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

type UserStatus = "enabled" | "disabled"

type UserRecord = {
  id: string
  name: string
  account: string
  role: "业务/市场负责人" | "内容运营专员" | "项目与运维负责人"
  status: UserStatus
  lastLogin: string
}

type PermissionKey =
  | "dashboard.view"
  | "source.sync"
  | "content.edit"
  | "content.approve"
  | "content.publish"
  | "leads.manage"
  | "settings.manage"
  | "users.manage"

type RolePermission = {
  roleName: "业务/市场负责人" | "内容运营专员" | "项目与运维负责人"
  permissions: PermissionKey[]
}

const INITIAL_USERS: UserRecord[] = [
  {
    id: "u1",
    name: "陈经理",
    account: "market.chen",
    role: "业务/市场负责人",
    status: "enabled",
    lastLogin: "2026-04-12 09:18",
  },
  {
    id: "u2",
    name: "刘运营",
    account: "content.liu",
    role: "内容运营专员",
    status: "enabled",
    lastLogin: "2026-04-12 08:42",
  },
  {
    id: "u3",
    name: "王运维",
    account: "ops.wang",
    role: "项目与运维负责人",
    status: "enabled",
    lastLogin: "2026-04-11 20:05",
  },
  {
    id: "u4",
    name: "赵测试",
    account: "qa.zhao",
    role: "内容运营专员",
    status: "disabled",
    lastLogin: "2026-04-01 11:20",
  },
]

const PERMISSION_LABEL: Record<PermissionKey, string> = {
  "dashboard.view": "查看仪表盘",
  "source.sync": "车型同步",
  "content.edit": "内容编辑",
  "content.approve": "内容审核",
  "content.publish": "内容发布",
  "leads.manage": "潜客管理",
  "settings.manage": "系统设置",
  "users.manage": "用户与权限管理",
}

const INITIAL_ROLE_PERMISSIONS: RolePermission[] = [
  {
    roleName: "业务/市场负责人",
    permissions: [
      "dashboard.view",
      "content.approve",
      "content.publish",
      "leads.manage",
    ],
  },
  {
    roleName: "内容运营专员",
    permissions: [
      "dashboard.view",
      "source.sync",
      "content.edit",
      "content.publish",
      "leads.manage",
    ],
  },
  {
    roleName: "项目与运维负责人",
    permissions: [
      "dashboard.view",
      "source.sync",
      "settings.manage",
      "users.manage",
    ],
  },
]

const PERMISSION_COLUMNS: PermissionKey[] = [
  "dashboard.view",
  "source.sync",
  "content.edit",
  "content.approve",
  "content.publish",
  "leads.manage",
  "settings.manage",
  "users.manage",
]

export function UserAccessManagement() {
  const [query, setQuery] = React.useState("")
  const [users, setUsers] = React.useState<UserRecord[]>(INITIAL_USERS)
  const [rolePermissions, setRolePermissions] = React.useState<RolePermission[]>(INITIAL_ROLE_PERMISSIONS)

  const filteredUsers = users.filter((user) => {
    const key = `${user.name} ${user.account} ${user.role}`.toLowerCase()
    return key.includes(query.toLowerCase())
  })

  const toggleUserStatus = (id: string) => {
    setUsers((prev) =>
      prev.map((user) =>
        user.id === id
          ? { ...user, status: user.status === "enabled" ? "disabled" : "enabled" }
          : user
      )
    )
  }

  const togglePermission = (roleName: RolePermission["roleName"], permission: PermissionKey) => {
    setRolePermissions((prev) =>
      prev.map((role) => {
        if (role.roleName !== roleName) return role
        const has = role.permissions.includes(permission)
        return {
          ...role,
          permissions: has
            ? role.permissions.filter((item) => item !== permission)
            : [...role.permissions, permission],
        }
      })
    )
  }

  return (
    <div className="flex flex-col gap-6 p-8">
      <div className="flex items-center justify-between">
        <div className="flex flex-col gap-1">
          <h1 className="text-3xl font-bold tracking-tight">用户与权限管理</h1>
          <p className="text-muted-foreground">集中维护账号状态、角色定义与权限边界。</p>
        </div>
        <Button className="bg-audi-black hover:bg-audi-dark-gray text-white px-6">新增用户</Button>
      </div>

      <Card className="border-none shadow-sm bg-white">
        <CardHeader>
          <div className="flex items-center justify-between gap-3">
            <div>
              <CardTitle className="text-lg font-bold">用户管理</CardTitle>
              <CardDescription>管理账号启用状态与角色归属。</CardDescription>
            </div>
            <div className="w-full max-w-xs">
              <Input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="搜索姓名、账号或角色..."
              />
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent border-b border-gray-100">
                <TableHead className="font-bold text-audi-black">姓名</TableHead>
                <TableHead className="font-bold text-audi-black">账号</TableHead>
                <TableHead className="font-bold text-audi-black">角色</TableHead>
                <TableHead className="font-bold text-audi-black">状态</TableHead>
                <TableHead className="font-bold text-audi-black">最近登录</TableHead>
                <TableHead className="text-right font-bold text-audi-black">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredUsers.map((user) => (
                <TableRow key={user.id} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
                  <TableCell className="font-medium">{user.name}</TableCell>
                  <TableCell className="text-muted-foreground">{user.account}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{user.role}</Badge>
                  </TableCell>
                  <TableCell>
                    <Badge
                      variant="outline"
                      className={
                        user.status === "enabled"
                          ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                          : "bg-zinc-100 text-zinc-700 border-zinc-200"
                      }
                    >
                      {user.status === "enabled" ? "启用" : "停用"}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground">{user.lastLogin}</TableCell>
                  <TableCell className="text-right">
                    <div className="inline-flex gap-2">
                      <Button size="sm" variant="outline">
                        编辑角色
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => toggleUserStatus(user.id)}>
                        {user.status === "enabled" ? "停用" : "启用"}
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Card className="border-none shadow-sm bg-white">
        <CardHeader>
          <CardTitle className="text-lg font-bold">角色与权限管理</CardTitle>
          <CardDescription>按角色授予菜单、操作与审批权限（原型可直接勾选）。</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-3 flex items-center gap-2 text-sm text-muted-foreground">
            <Users className="h-4 w-4" />角色
            <UserCog className="h-4 w-4 ml-4" />权限
            <ShieldCheck className="h-4 w-4 ml-4 text-audi-red" />权限边界
          </div>
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent border-b border-gray-100">
                <TableHead className="font-bold text-audi-black">角色</TableHead>
                {PERMISSION_COLUMNS.map((permission) => (
                  <TableHead key={permission} className="font-bold text-audi-black text-xs">
                    {PERMISSION_LABEL[permission]}
                  </TableHead>
                ))}
              </TableRow>
            </TableHeader>
            <TableBody>
              {rolePermissions.map((role) => (
                <TableRow key={role.roleName} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
                  <TableCell className="font-medium">{role.roleName}</TableCell>
                  {PERMISSION_COLUMNS.map((permission) => {
                    const checked = role.permissions.includes(permission)
                    return (
                      <TableCell key={`${role.roleName}-${permission}`}>
                        <input
                          type="checkbox"
                          checked={checked}
                          onChange={() => togglePermission(role.roleName, permission)}
                        />
                      </TableCell>
                    )
                  })}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}