"use client"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { z } from "zod"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { useRouter } from "next/navigation"
import { useEffect, useState, useCallback } from "react"
import { gql, useMutation } from "@apollo/client"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DialogClose, DialogFooter } from "@/components/ui/dialog"
import { IconCircleCheckFilled, IconLoader } from "@tabler/icons-react"

const CREATE_USER = gql`
    mutation CreateUser($username: String!, $email: String!, $role: String!, $password: String!) {
        createUser(input: {
            username: $username
            email: $email
            role: $role
            password: $password
        }) {
            id
        }
    }
`


const schema = z.object({
    username: z.string().min(1, "用户名不能为空"),
    password: z.string().min(1, "密码不能为空"),
    role: z.enum(["ADMIN", "USER"]),
    email: z.email()
})

export default function CreateUserForm({
    className,
    ...props
}: React.ComponentProps<"form">) {
    const router = useRouter();
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [isGenerating, setIsGenerating] = useState(false)

    const [createUser, { loading }] = useMutation(CREATE_USER)

    const form = useForm<z.infer<typeof schema>>({
        resolver: zodResolver(schema),
        defaultValues: {
            username: "",
            email: "",
            password: "",
            role: "USER" as const,
        },
    })

    async function onSubmit(values: z.infer<typeof schema>) {
        try {
            setIsLoading(true);
            setError(null);

            await createUser({
                variables: {
                    username: values.username,
                    password: values.password,
                    role: values.role,
                    email: values.email
                }
            });

            // 重置表单
            form.reset();
            // 重新生成密码
            generateRandomPassword();

        } catch (err) {
            setError(err instanceof Error ? err.message : '创建用户失败，请重试');
        } finally {
            setIsLoading(false);
        }
    }


    // 生成随机密码的函数
    const generateRandomPassword = useCallback(() => {
        setIsGenerating(true)

        // 模拟生成过程
        setTimeout(() => {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*'
            let password = ''

            // 确保包含至少一个大写字母、一个小写字母、一个数字和一个特殊字符
            password += chars[Math.floor(Math.random() * 26)] // 大写字母
            password += chars[26 + Math.floor(Math.random() * 26)] // 小写字母
            password += chars[52 + Math.floor(Math.random() * 10)] // 数字
            password += chars[62 + Math.floor(Math.random() * 8)] // 特殊字符

            // 添加剩余的随机字符，总长度为12
            for (let i = 4; i < 12; i++) {
                password += chars[Math.floor(Math.random() * chars.length)]
            }

            // 打乱密码字符顺序
            password = password.split('').sort(() => Math.random() - 0.5).join('')
            form.setValue('password', password)
            setIsGenerating(false)
            // toast.success('随机密码已生成')
        }, 500)
    }, [form])

    useEffect(() => {
        generateRandomPassword()
    }, [generateRandomPassword])


    return (
        <Form {...form} >
            <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
                {error && (
                    <div className="text-sm text-red-600 bg-red-50 p-3 rounded-md">
                        {error}
                    </div>
                )}
                <div className="grid gap-4">
                    <div className="grid gap-3">
                        <FormField
                            control={form.control}
                            name="username"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>用户名 *</FormLabel>
                                    <FormControl>
                                        <Input id="username" placeholder="请输入用户名" {...field} required />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>

                            )} />
                    </div>

                    <div className="grid gap-3">
                        <FormField
                            control={form.control}
                            name="email"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>邮箱 *</FormLabel>
                                    <FormControl>
                                        <Input id="email" placeholder="请输入邮箱" {...field} required />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )} />
                    </div>

                    <div className="grid gap-3">
                        <FormField
                            control={form.control}
                            name="role"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>角色 *</FormLabel>
                                    <FormControl>
                                        <Select
                                            value={field.value}
                                            onValueChange={(value) => field.onChange(value)}
                                        >
                                            <SelectTrigger id="role" className="w-full">
                                                <SelectValue placeholder="选择用户角色" />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="ADMIN">管理员</SelectItem>
                                                <SelectItem value="USER">普通用户</SelectItem>
                                            </SelectContent>
                                        </Select>
                                    </FormControl>

                                </FormItem>
                            )}
                        />

                    </div>

                    <div className="grid gap-3">

                        <FormField
                            control={form.control}
                            name="password"
                            render={({ field }) => (
                                <FormItem>

                                    <div className="flex items-center justify-between">
                                        <FormLabel>密码 *</FormLabel>
                                        <Button
                                            type="button"
                                            variant="outline"
                                            size="sm"
                                            onClick={generateRandomPassword}
                                            disabled={isGenerating}
                                        >
                                            {isGenerating ? (
                                                <>
                                                    <IconLoader className="mr-2 h-4 w-4 animate-spin" />
                                                    生成中...
                                                </>
                                            ) : (
                                                '重新生成'
                                            )}
                                        </Button>
                                    </div>

                                    <FormControl>
                                        <div className="flex gap-2">

                                            <Input id="password" placeholder="请输入密码" {...field} required />
                                            <Button
                                                type="button"
                                                variant="outline"
                                                size="icon"
                                                onClick={() => {
                                                    navigator.clipboard.writeText(field.value)
                                                    // toast.success('密码已复制到剪贴板')
                                                }}
                                                disabled={!field.value}
                                            >
                                                <IconCircleCheckFilled className="h-4 w-4" />
                                            </Button>
                                        </div>
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                    </div>
                </div>

                <DialogFooter>
                    <DialogClose asChild>
                        <Button type="button" variant="outline">
                            取消
                        </Button>
                    </DialogClose>
                    <Button type="submit" disabled={isLoading}>
                        {isLoading ? (
                            <>
                                <IconLoader className="mr-2 h-4 w-4 animate-spin" />
                                创建中...
                            </>
                        ) : (
                            '创建用户'
                        )}
                    </Button>
                </DialogFooter>
            </form>
        </Form >

    )
}