'use client'

export const runtime = 'edge'

import { useEffect } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { Card, CardContent, CardHeader, CardTitle } from "@/registry/new-york/ui/card"
import { Input } from "@/registry/new-york/ui/input"
import { Button } from "@/registry/new-york/ui/button"
import { useToast } from "@/registry/new-york/hooks/use-toast"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/registry/new-york/ui/tabs"
import { Icons } from "@/components/icons"
import { Textarea } from "@/registry/new-york/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/registry/new-york/ui/select"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/registry/new-york/ui/form"
import { SiteConfigService} from "@/services/siteConfigService"
import type { SiteConfig } from "@/types/site"
import { Toaster } from "@/registry/new-york/ui/toaster"

const formSchema = z.object({
  basic: z.object({
    title: z.string().min(2, {
      message: "标题至少需要2个字符.",
    }),
    description: z.string().min(10, {
      message: "描述至少需要10个字符.",
    }),
    keywords: z.string(),
  }),
  appearance: z.object({
    logo: z.string().regex(/^(https?:\/\/|\/)\S+$/i, {
      message: "请输入有效的URL地址或相对路径",
    }),
    favicon: z.string().regex(/^(https?:\/\/|\/)\S+$/i, {
      message: "请输入有效的URL地址或相对路径",
    }),
    theme: z.enum(['light', 'dark', 'system']),
  }),
  navigation: z.object({
    linkTarget: z.enum(['_blank', '_self']),
  }),
})

export default function SiteSettings() {
  const { toast } = useToast()
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      basic: {
        title: "",
        description: "",
        keywords: "",
      },
      appearance: {
        logo: "",
        favicon: "",
        theme: "system",
      },
      navigation: {
        linkTarget: "_blank",
      },
    },
  })

  useEffect(() => {
    const loadConfig = async () => {
      const siteConfigService = new SiteConfigService();
      const config = await siteConfigService.getSiteConfig();
      if (config) {
        form.reset(config);
      }
    }
    loadConfig()
  }, [])

  async function onSubmit(values: z.infer<typeof formSchema>) {
    try {
      const siteConfigService = new SiteConfigService();
      await siteConfigService.updateSiteConfig(values);
      toast({
        title: "成功",
        description: "站点信息已保存",
      });
    } catch (error) {
      toast({
        title: "错误",
        description: "保存失败",
        variant: "destructive",
      });
    }
  }

  return (
    <>
      <div className="space-y-6">
        <Tabs defaultValue="basic" className="space-y-4">
          <TabsList>
            <TabsTrigger value="basic">基本信息</TabsTrigger>
            <TabsTrigger value="appearance">外观设置</TabsTrigger>
            <TabsTrigger value="navigation">导航设置</TabsTrigger>
          </TabsList>
          <TabsContent value="basic">
            <Card>
              <CardHeader>
                <CardTitle>基本信息</CardTitle>
              </CardHeader>
              <CardContent>
                <Form {...form}>
                  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                    <FormField
                      control={form.control}
                      name="basic.title"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>网站标题</FormLabel>
                          <FormControl>
                            <Input placeholder="输入网站标题" {...field} />
                          </FormControl>
                          <FormDescription>
                            这将显示在浏览器标签页和搜索结果中
                          </FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="basic.description"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>网站描述</FormLabel>
                          <FormControl>
                            <Textarea
                              placeholder="输入网站描述"
                              className="resize-none"
                              {...field}
                            />
                          </FormControl>
                          <FormDescription>
                            这将显示在搜索结果中
                          </FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="basic.keywords"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>关键词</FormLabel>
                          <FormControl>
                            <Input placeholder="输入关键词，用英文逗号分隔" {...field} />
                          </FormControl>
                          <FormDescription>
                            用于搜索引擎优化，多个关键词请用英文逗号分隔
                          </FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <div className="flex justify-start">
                      <Button 
                        type="submit"
                        className="w-[120px]"
                        disabled={form.formState.isSubmitting}
                      >
                        {form.formState.isSubmitting ? (
                          <>
                            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
                            保存中
                          </>
                        ) : (
                          <>
                            <Icons.save className="mr-2 h-4 w-4" />
                            保存更改
                          </>
                        )}
                      </Button>
                    </div>
                  </form>
                </Form>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="appearance">
            <Card>
              <CardHeader>
                <CardTitle>外观设置</CardTitle>
              </CardHeader>
              <CardContent>
                <Form {...form}>
                  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                    <FormField
                      control={form.control}
                      name="appearance.logo"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Logo URL</FormLabel>
                          <FormControl>
                            <Input placeholder="输入Logo图片URL" {...field} />
                          </FormControl>
                          <FormDescription>
                            建议尺寸: 160x64px
                          </FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="appearance.favicon"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Favicon URL</FormLabel>
                          <FormControl>
                            <Input placeholder="输入网站图标URL" {...field} />
                          </FormControl>
                          <FormDescription>
                            建议尺寸: 32x32px
                          </FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <div className="flex justify-start">
                      <Button 
                        type="submit"
                        className="w-[120px]"
                        disabled={form.formState.isSubmitting}
                      >
                        {form.formState.isSubmitting ? (
                          <>
                            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
                            保存中
                          </>
                        ) : (
                          <>
                            <Icons.save className="mr-2 h-4 w-4" />
                            保存更改
                          </>
                        )}
                      </Button>
                    </div>
                  </form>
                </Form>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="navigation">
            <Card>
              <CardHeader>
                <CardTitle>导航设置</CardTitle>
              </CardHeader>
              <CardContent>
                <Form {...form}>
                  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                    <FormField
                      control={form.control}
                      name="navigation.linkTarget"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>链接打开方式</FormLabel>
                          <Select onValueChange={field.onChange} defaultValue={field.value}>
                            <FormControl>
                              <SelectTrigger>
                                <SelectValue placeholder="选择链接打开方式" />
                              </SelectTrigger>
                            </FormControl>
                            <SelectContent>
                              <SelectItem value="_blank">新窗口打开 (_blank)</SelectItem>
                              <SelectItem value="_self">当前窗口打开 (_self)</SelectItem>
                            </SelectContent>
                          </Select>
                          <FormDescription>
                            设置首页中点击网站链接时的打开方式，默认为新窗口打开
                          </FormDescription>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <div className="flex justify-start">
                      <Button 
                        type="submit"
                        className="w-[120px]"
                        disabled={form.formState.isSubmitting}
                      >
                        {form.formState.isSubmitting ? (
                          <>
                            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
                            保存中
                          </>
                        ) : (
                          <>
                            <Icons.save className="mr-2 h-4 w-4" />
                            保存更改
                          </>
                        )}
                      </Button>
                    </div>
                  </form>
                </Form>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
      <Toaster />
    </>
  )
}