"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Loader2, Shield } from "lucide-react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// 定义角色类型
export type Role = {
  id: string
  name: string
  description: string
  userCount: number
  createdAt: string
  status: "系统角色" | "自定义角色"
  permissions: Record<string, boolean>
}

// 定义权限组
const permissionGroups = [
  {
    name: "仪表盘",
    permissions: [
      { id: "dashboard.view", label: "仪表盘查看" },
      { id: "dashboard.edit", label: "仪表盘编辑" },
    ],
  },
  {
    name: "用户管理",
    permissions: [
      { id: "users.view", label: "查看用户" },
      { id: "users.create", label: "创建用户" },
      { id: "users.edit", label: "编辑用户" },
      { id: "users.delete", label: "删除用户" },
    ],
  },
  {
    name: "角色权限",
    permissions: [
      { id: "roles.view", label: "查看角色" },
      { id: "roles.create", label: "创建角色" },
      { id: "roles.edit", label: "编辑角色" },
      { id: "roles.delete", label: "删除角色" },
    ],
  },
  {
    name: "AI模型",
    permissions: [
      { id: "ai.view", label: "查看AI模型" },
      { id: "ai.create", label: "创建AI模型" },
      { id: "ai.edit", label: "编辑AI模型" },
      { id: "ai.delete", label: "删除AI模型" },
    ],
  },
  {
    name: "内容管理",
    permissions: [
      { id: "outfits.view", label: "查看服装" },
      { id: "outfits.create", label: "创建服装" },
      { id: "outfits.edit", label: "编辑服装" },
      { id: "outfits.delete", label: "删除服装" },
      { id: "props.view", label: "查看道具" },
      { id: "props.create", label: "创建道具" },
      { id: "props.edit", label: "编辑道具" },
      { id: "props.delete", label: "删除道具" },
      { id: "homeDecor.view", label: "查看家居装饰" },
      { id: "homeDecor.create", label: "创建家居装饰" },
      { id: "homeDecor.edit", label: "编辑家居装饰" },
      { id: "homeDecor.delete", label: "删除家居装饰" },
      { id: "food.view", label: "查看食物" },
      { id: "food.create", label: "创建食物" },
      { id: "food.edit", label: "编辑食物" },
      { id: "food.delete", label: "删除食物" },
      { id: "songs.view", label: "查看歌曲" },
      { id: "songs.create", label: "创建歌曲" },
      { id: "songs.edit", label: "编辑歌曲" },
      { id: "songs.delete", label: "删除歌曲" },
    ],
  },
  {
    name: "系统设置",
    permissions: [
      { id: "settings.view", label: "查看设置" },
      { id: "settings.edit", label: "编辑设置" },
    ],
  },
  {
    name: "好感度系统",
    permissions: [
      { id: "affinity.view", label: "查看好感度系统" },
      { id: "affinity.create", label: "创建好感度规则" },
      { id: "affinity.edit", label: "编辑好感度规则" },
      { id: "affinity.delete", label: "删除好感度规则" },
    ],
  },
]

// 表单验证模式
const formSchema = z.object({
  name: z
    .string()
    .min(2, {
      message: "角色名称至少需要2个字符",
    })
    .max(30, {
      message: "角色名称不能超过30个字符",
    }),
  description: z
    .string()
    .min(5, {
      message: "描述至少需要5个字符",
    })
    .max(200, {
      message: "描述不能超过200个字符",
    }),
  status: z.enum(["系统角色", "自定义角色"]),
  permissions: z.record(z.boolean()).refine(
    (data) => {
      // 至少选择一个权限
      return Object.values(data).some((value) => value === true)
    },
    {
      message: "至少需要选择一个权限",
    },
  ),
})

type RoleDialogProps = {
  open?: boolean
  onOpenChange?: (open: boolean) => void
  onSubmit: (data: z.infer<typeof formSchema>) => Promise<void>
  defaultValues?: Partial<z.infer<typeof formSchema>>
  mode: "add" | "edit"
  trigger?: React.ReactNode
}

export function RoleDialog({ open, onOpenChange, onSubmit, defaultValues, mode, trigger }: RoleDialogProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [dialogOpen, setDialogOpen] = useState(open || false)

  // 初始化所有权限为false
  const initialPermissions: Record<string, boolean> = {}
  permissionGroups.forEach((group) => {
    group.permissions.forEach((permission) => {
      initialPermissions[permission.id] = false
    })
  })

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      description: "",
      status: "自定义角色",
      permissions: initialPermissions,
      ...defaultValues,
    },
  })

  // 当defaultValues改变时重置表单
  useEffect(() => {
    if (defaultValues) {
      form.reset({
        name: defaultValues.name || "",
        description: defaultValues.description || "",
        status: defaultValues.status || "自定义角色",
        permissions: {
          ...initialPermissions,
          ...defaultValues.permissions,
        },
      })
    }
  }, [defaultValues, form])

  // 同步内部状态和外部状态
  useEffect(() => {
    if (open !== undefined) {
      setDialogOpen(open)
    }
  }, [open])

  const handleOpenChange = (newOpen: boolean) => {
    setDialogOpen(newOpen)
    if (onOpenChange) {
      onOpenChange(newOpen)
    }

    // 如果对话框关闭，重置表单
    if (!newOpen) {
      form.reset()
    }
  }

  const handleSubmit = async (data: z.infer<typeof formSchema>) => {
    setIsSubmitting(true)
    try {
      await onSubmit(data)
      handleOpenChange(false)
    } catch (error) {
      console.error("提交失败:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

  // 全选/取消全选某个组的所有权限
  const toggleGroupPermissions = (groupName: string, value: boolean) => {
    const group = permissionGroups.find((g) => g.name === groupName)
    if (!group) return

    const updatedPermissions = { ...form.getValues().permissions }
    group.permissions.forEach((permission) => {
      updatedPermissions[permission.id] = value
    })

    form.setValue("permissions", updatedPermissions, { shouldValidate: true })
  }

  // 检查一个组是否所有权限都被选中
  const isGroupAllChecked = (groupName: string) => {
    const group = permissionGroups.find((g) => g.name === groupName)
    if (!group) return false

    const permissions = form.getValues().permissions
    return group.permissions.every((permission) => permissions[permission.id])
  }

  // 检查一个组是否有部分权限被选中
  const isGroupPartiallyChecked = (groupName: string) => {
    const group = permissionGroups.find((g) => g.name === groupName)
    if (!group) return false

    const permissions = form.getValues().permissions
    const checkedCount = group.permissions.filter((permission) => permissions[permission.id]).length

    return checkedCount > 0 && checkedCount < group.permissions.length
  }

  return (
    <Dialog open={dialogOpen} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        {trigger || (
          <Button className="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 transition-all duration-300 shadow-md hover:shadow-lg">
            <Shield className="mr-2 h-4 w-4" />
            添加角色
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold flex items-center">
            <Shield className="mr-2 h-5 w-5 text-purple-600" />
            <span className="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
              {mode === "add" ? "添加角色" : "编辑角色"}
            </span>
          </DialogTitle>
          <DialogDescription>
            {mode === "add" ? "创建新的系统角色并分配权限" : "修改角色信息和权限设置"}
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
            <Tabs defaultValue="basic" className="w-full">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="basic">基本信息</TabsTrigger>
                <TabsTrigger value="permissions">权限设置</TabsTrigger>
              </TabsList>
              <TabsContent value="basic" className="space-y-4 pt-4">
                <FormField
                  control={form.control}
                  name="name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>角色名称</FormLabel>
                      <FormControl>
                        <Input placeholder="输入角色名称" {...field} />
                      </FormControl>
                      <FormDescription>角色名称将显示在系统中，请使用简洁明了的名称</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="description"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>角色描述</FormLabel>
                      <FormControl>
                        <Textarea placeholder="输入角色描述" className="resize-none" {...field} />
                      </FormControl>
                      <FormDescription>详细描述该角色的职责和权限范围</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="status"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>角色类型</FormLabel>
                      <div className="flex items-center space-x-4">
                        <FormControl>
                          <div className="flex items-center space-x-2">
                            <input
                              type="radio"
                              id="system-role"
                              value="系统角色"
                              checked={field.value === "系统角色"}
                              onChange={() => field.onChange("系统角色")}
                              className="h-4 w-4 text-purple-600 focus:ring-purple-500"
                            />
                            <label htmlFor="system-role" className="text-sm font-medium">
                              系统角色
                            </label>
                          </div>
                        </FormControl>
                        <FormControl>
                          <div className="flex items-center space-x-2">
                            <input
                              type="radio"
                              id="custom-role"
                              value="自定义角色"
                              checked={field.value === "自定义角色"}
                              onChange={() => field.onChange("自定义角色")}
                              className="h-4 w-4 text-purple-600 focus:ring-purple-500"
                            />
                            <label htmlFor="custom-role" className="text-sm font-medium">
                              自定义角色
                            </label>
                          </div>
                        </FormControl>
                      </div>
                      <FormDescription>系统角色不可删除，自定义角色可以随时修改或删除</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </TabsContent>
              <TabsContent value="permissions" className="pt-4">
                <div className="space-y-6">
                  {permissionGroups.map((group) => (
                    <div key={group.name} className="border rounded-lg p-4">
                      <div className="flex items-center mb-3">
                        <Checkbox
                          id={`group-${group.name}`}
                          checked={isGroupAllChecked(group.name)}
                          onCheckedChange={(checked) => {
                            toggleGroupPermissions(group.name, checked === true)
                          }}
                          className={isGroupPartiallyChecked(group.name) ? "bg-purple-300" : ""}
                        />
                        <label htmlFor={`group-${group.name}`} className="ml-2 text-sm font-medium text-purple-800">
                          {group.name}
                        </label>
                      </div>
                      <div className="grid grid-cols-2 gap-3 ml-6">
                        {group.permissions.map((permission) => (
                          <FormField
                            key={permission.id}
                            control={form.control}
                            name={`permissions.${permission.id}`}
                            render={({ field }) => (
                              <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                                <FormControl>
                                  <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                                </FormControl>
                                <div className="space-y-1 leading-none">
                                  <FormLabel className="text-sm font-normal">{permission.label}</FormLabel>
                                </div>
                              </FormItem>
                            )}
                          />
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </TabsContent>
            </Tabs>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => handleOpenChange(false)} disabled={isSubmitting}>
                取消
              </Button>
              <Button
                type="submit"
                disabled={isSubmitting}
                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
              >
                {isSubmitting ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    提交中...
                  </>
                ) : (
                  <>{mode === "add" ? "创建角色" : "保存修改"}</>
                )}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}