"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
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 { 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 { IconLoader } from "@tabler/icons-react"

const CREATE_BLOG = gql`
    mutation CreateBlog($input: CreateBlogInput!) {
        createBlog(input: $input) {
            id
            title
            slug
            status
        }
    }
`

const schema = z.object({
    title: z.string().min(1, "标题不能为空"),
    slug: z.string().min(1, "链接不能为空"),
    excerpt: z.string().optional(),
    content: z.string().min(1, "内容不能为空"),
    status: z.enum(["draft", "published", "archived"]),
    metaTitle: z.string().optional(),
    metaDescription: z.string().optional(),
    isFeatured: z.boolean().default(false),
    isActive: z.boolean().default(true),
})

export default function CreateBlogForm() {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const [createBlog] = useMutation(CREATE_BLOG)

    const form = useForm<z.infer<typeof schema>>({
        resolver: zodResolver(schema),
        defaultValues: {
            title: "",
            slug: "",
            excerpt: "",
            content: "",
            status: "draft" as const,
            metaTitle: "",
            metaDescription: "",
            isFeatured: false,
            isActive: true,
        },
    })

    // 生成slug
    const generateSlug = useCallback((title: string) => {
        return title
            .toLowerCase()
            .replace(/[^\w\s-]/g, '')  // 移除特殊字符
            .replace(/\s+/g, '-')      // 空格替换为连字符
            .replace(/-+/g, '-')       // 多个连字符合并为一个
            .trim();
    }, []);

    // 监听标题变化自动生成slug
    const watchedTitle = form.watch("title");
    useEffect(() => {
        if (watchedTitle) {
            const slug = generateSlug(watchedTitle);
            form.setValue("slug", slug);
        }
    }, [watchedTitle, generateSlug, form]);

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

            await createBlog({
                variables: {
                    input: {
                        title: values.title,
                        slug: values.slug,
                        content: JSON.stringify(values.content), // Convert to JSON
                        status: values.status,
                        excerpt: values.excerpt || null,
                        metaTitle: values.metaTitle || null,
                        metaDescription: values.metaDescription || null,
                        isFeatured: values.isFeatured,
                        isActive: values.isActive,
                    }
                }
            });

            // 重置表单
            form.reset();

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

    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="title"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>标题 *</FormLabel>
                                    <FormControl>
                                        <Input id="title" placeholder="请输入博客标题" {...field} required />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )} />
                    </div>

                    <div className="grid gap-3">
                        <FormField
                            control={form.control}
                            name="slug"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>链接 *</FormLabel>
                                    <FormControl>
                                        <Input id="slug" placeholder="博客链接地址" {...field} required />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )} />
                    </div>

                    <div className="grid gap-3">
                        <FormField
                            control={form.control}
                            name="excerpt"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>摘要</FormLabel>
                                    <FormControl>
                                        <Textarea 
                                            id="excerpt" 
                                            placeholder="请输入博客摘要（可选）" 
                                            rows={3}
                                            {...field} 
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )} />
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div className="flex flex-col gap-3">
                            <FormField
                                control={form.control}
                                name="status"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>状态 *</FormLabel>
                                        <FormControl>
                                            <Select
                                                value={field.value}
                                                onValueChange={(value) => field.onChange(value)}
                                            >
                                                <SelectTrigger id="status" className="w-full">
                                                    <SelectValue placeholder="选择发布状态" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="draft">草稿</SelectItem>
                                                    <SelectItem value="published">发布</SelectItem>
                                                    <SelectItem value="archived">归档</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </div>

                        <div className="flex flex-col gap-3">
                            <FormField
                                control={form.control}
                                name="metaTitle"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Meta 标题</FormLabel>
                                        <FormControl>
                                            <Input 
                                                id="metaTitle" 
                                                placeholder="SEO 标题（可选）" 
                                                {...field} 
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </div>
                    </div>

                    <div className="grid gap-3">
                        <FormField
                            control={form.control}
                            name="metaDescription"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Meta 描述</FormLabel>
                                    <FormControl>
                                        <Textarea 
                                            id="metaDescription" 
                                            placeholder="SEO 描述（可选）" 
                                            rows={3}
                                            {...field} 
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )} />
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div className="flex flex-col gap-3">
                            <FormField
                                control={form.control}
                                name="isFeatured"
                                render={({ field }) => (
                                    <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                                        <FormControl>
                                            <input 
                                                type="checkbox"
                                                checked={field.value}
                                                onChange={field.onChange}
                                                className="h-4 w-4"
                                            />
                                        </FormControl>
                                        <FormLabel className="text-sm font-normal">推荐文章</FormLabel>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </div>

                        <div className="flex flex-col gap-3">
                            <FormField
                                control={form.control}
                                name="isActive"
                                render={({ field }) => (
                                    <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                                        <FormControl>
                                            <input 
                                                type="checkbox"
                                                checked={field.value}
                                                onChange={field.onChange}
                                                className="h-4 w-4"
                                            />
                                        </FormControl>
                                        <FormLabel className="text-sm font-normal">启用文章</FormLabel>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                        </div>
                    </div>

                    <div className="grid gap-3">
                        <FormField
                            control={form.control}
                            name="content"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>内容 *</FormLabel>
                                    <FormControl>
                                        <Textarea 
                                            id="content" 
                                            placeholder="请输入博客内容（支持 Markdown）" 
                                            rows={12}
                                            {...field} 
                                            required 
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )} />
                    </div>
                </div>

                <DialogFooter>
                    <DialogClose asChild>
                        <Button type="button" variant="outline">
                            取消
                        </Button>
                    </DialogClose>
                    <Button 
                        type="button" 
                        variant="secondary"
                        onClick={() => {
                            form.setValue("status", "draft");
                            form.handleSubmit(onSubmit)();
                        }}
                        disabled={isLoading}
                    >
                        保存草稿
                    </Button>
                    <Button type="submit" disabled={isLoading}>
                        {isLoading ? (
                            <>
                                <IconLoader className="mr-2 h-4 w-4 animate-spin" />
                                创建中...
                            </>
                        ) : (
                            form.watch("status") === "published" ? "发布博客" : "创建博客"
                        )}
                    </Button>
                </DialogFooter>
            </form>
        </Form >
    )
}