"use client"

import {useEffect} from "react"
import {useMutation, useQueryClient} from "@tanstack/react-query"
import {zodResolver} from "@hookform/resolvers/zod"
import {useForm} from "react-hook-form"
import {Loader2} from "lucide-react"
import {z} from "zod"
import {toast} from "sonner"

import {Button} from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {Input} from "@/components/ui/input"
import {Label} from "@/components/ui/label"
import {Switch} from "@/components/ui/switch"
import {Textarea} from "@/components/ui/textarea"
import {type PagesProject, PagesService} from "@/lib/services/openflare"

import {projectQueryKey, projectsQueryKey} from "./pages-utils"

const pagesProjectSchema = z
  .object({
    name: z.string().trim().min(1, "请输入项目名称").max(255),
    slug: z.string().trim().max(255).optional().or(z.literal("")),
    description: z.string().trim().max(1000).optional().or(z.literal("")),
    spa_fallback_enabled: z.boolean(),
    spa_fallback_path: z.string().trim(),
    api_proxy_enabled: z.boolean(),
    api_proxy_path: z.string().trim(),
    api_proxy_pass: z.string().trim(),
    api_proxy_rewrite: z.string().trim(),
    root_dir: z.string().trim().max(512).optional().or(z.literal("")),
    entry_file: z.string().trim().min(1, "请输入入口文件").max(512),
  })
  .superRefine((data, ctx) => {
    if (data.spa_fallback_enabled && !data.spa_fallback_path.startsWith("/")) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        path: ["spa_fallback_path"],
        message: "回退路径必须以 / 开头",
      })
    }
    if (data.api_proxy_enabled) {
      if (!data.api_proxy_path.startsWith("/")) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          path: ["api_proxy_path"],
          message: "匹配路径必须以 / 开头",
        })
      }
      if (!/^https?:\/\//i.test(data.api_proxy_pass)) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          path: ["api_proxy_pass"],
          message: "后端地址必须以 http:// 或 https:// 开头",
        })
      }
    }
  })

type PagesProjectFormValues = z.infer<typeof pagesProjectSchema>

function toFormValues(project?: PagesProject | null): PagesProjectFormValues {
  if (!project) {
    return {
      name: "",
      slug: "",
      description: "",
      spa_fallback_enabled: false,
      spa_fallback_path: "/index.html",
      api_proxy_enabled: false,
      api_proxy_path: "",
      api_proxy_pass: "",
      api_proxy_rewrite: "",
      root_dir: "",
      entry_file: "index.html",
    }
  }
  return {
    name: project.name,
    slug: project.slug,
    description: project.description || "",
    spa_fallback_enabled: project.spa_fallback_enabled,
    spa_fallback_path: project.spa_fallback_path,
    api_proxy_enabled: project.api_proxy_enabled || false,
    api_proxy_path: project.api_proxy_path || "",
    api_proxy_pass: project.api_proxy_pass || "",
    api_proxy_rewrite: project.api_proxy_rewrite || "",
    root_dir: project.root_dir || "",
    entry_file: project.entry_file || "index.html",
  }
}

interface ProjectEditorDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  project?: PagesProject | null
}

export function ProjectEditorDialog({
  open,
  onOpenChange,
  project,
}: ProjectEditorDialogProps) {
  const queryClient = useQueryClient()
  const form = useForm<PagesProjectFormValues>({
    resolver: zodResolver(pagesProjectSchema),
    defaultValues: toFormValues(project),
  })

  useEffect(() => {
    if (open) form.reset(toFormValues(project))
  }, [form, project, open])

  const mutation = useMutation({
    mutationFn: async (values: PagesProjectFormValues) => {
      const payload = {
        name: values.name.trim(),
        slug: values.slug?.trim() || "",
        description: values.description?.trim() || "",
        enabled: project ? project.enabled : true,
        spa_fallback_enabled: values.spa_fallback_enabled,
        spa_fallback_path: values.spa_fallback_enabled
          ? values.spa_fallback_path.trim()
          : project?.spa_fallback_path || "/index.html",
        api_proxy_enabled: values.api_proxy_enabled,
        api_proxy_path: values.api_proxy_enabled ? values.api_proxy_path.trim() : "",
        api_proxy_pass: values.api_proxy_enabled ? values.api_proxy_pass.trim() : "",
        api_proxy_rewrite: values.api_proxy_enabled
          ? values.api_proxy_rewrite.trim()
          : "",
        root_dir: values.root_dir?.trim() || "",
        entry_file: values.entry_file.trim(),
      }
      return project
        ? PagesService.updateProject(project.id, payload)
        : PagesService.createProject(payload)
    },
    onSuccess: async () => {
      toast.success(project ? "项目已更新" : "项目已创建")
      await queryClient.invalidateQueries({ queryKey: projectsQueryKey })
      if (project) {
        await queryClient.invalidateQueries({
          queryKey: projectQueryKey(project.id),
        })
      }
      onOpenChange(false)
    },
    onError: (error) => {
      toast.error(error instanceof Error ? error.message : "保存失败")
    },
  })

  const spaEnabled = form.watch("spa_fallback_enabled")
  const apiEnabled = form.watch("api_proxy_enabled")

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{project ? "编辑 Pages 项目" : "新建 Pages 项目"}</DialogTitle>
          <DialogDescription>
            配置静态站点托管参数，上传部署包后在代理规则中选择 Pages 上游。
          </DialogDescription>
        </DialogHeader>

        <form
          id="pages-project-form"
          className="space-y-4"
          onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
        >
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-1.5">
              <Label htmlFor="name">项目名称</Label>
              <Input id="name" {...form.register("name")} />
              {form.formState.errors.name ? (
                <p className="text-xs text-destructive">{form.formState.errors.name.message}</p>
              ) : null}
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="slug">项目标识</Label>
              <Input id="slug" placeholder="留空自动生成" {...form.register("slug")} />
            </div>
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="description">描述</Label>
            <Textarea id="description" rows={2} {...form.register("description")} />
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-1.5">
              <Label htmlFor="entry_file">入口文件</Label>
              <Input id="entry_file" {...form.register("entry_file")} />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="root_dir">根目录</Label>
              <Input id="root_dir" placeholder="可选" {...form.register("root_dir")} />
            </div>
          </div>

          <div className="flex items-center justify-between rounded-lg border border-dashed px-4 py-3">
            <div>
              <p className="text-sm font-medium">SPA fallback</p>
              <p className="text-xs text-muted-foreground">未命中静态文件时回退到指定路径</p>
            </div>
            <Switch
              checked={spaEnabled}
              onCheckedChange={(checked) =>
                form.setValue("spa_fallback_enabled", checked)
              }
            />
          </div>
          {spaEnabled ? (
            <div className="space-y-1.5">
              <Label htmlFor="spa_fallback_path">回退路径</Label>
              <Input id="spa_fallback_path" {...form.register("spa_fallback_path")} />
            </div>
          ) : null}

          <div className="flex items-center justify-between rounded-lg border border-dashed px-4 py-3">
            <div>
              <p className="text-sm font-medium">API 反向代理</p>
              <p className="text-xs text-muted-foreground">为静态站点附加 API 反代规则</p>
            </div>
            <Switch
              checked={apiEnabled}
              onCheckedChange={(checked) =>
                form.setValue("api_proxy_enabled", checked)
              }
            />
          </div>
          {apiEnabled ? (
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-1.5">
                <Label htmlFor="api_proxy_path">匹配路径</Label>
                <Input id="api_proxy_path" {...form.register("api_proxy_path")} />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="api_proxy_pass">后端地址</Label>
                <Input id="api_proxy_pass" {...form.register("api_proxy_pass")} />
              </div>
              <div className="space-y-1.5 md:col-span-2">
                <Label htmlFor="api_proxy_rewrite">重写规则</Label>
                <Input id="api_proxy_rewrite" {...form.register("api_proxy_rewrite")} />
              </div>
            </div>
          ) : null}
        </form>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button type="submit" form="pages-project-form" disabled={mutation.isPending}>
            {mutation.isPending ? (
              <>
                <Loader2 className="size-4 animate-spin mr-1" />
                保存中...
              </>
            ) : project ? (
              "保存修改"
            ) : (
              "创建项目"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}