OpenFlare/frontend/app/(main)/origins/components/origin-editor-dialog.tsx

"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 {toast} from "sonner"
import {z} from "zod"

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 {Textarea} from "@/components/ui/textarea"
import {type OriginItem, type OriginMutationPayload, OriginService} from "@/lib/services/openflare"

const originSchema = z.object({
  name: z.string().max(255),
  address: z
    .string()
    .trim()
    .min(1, "请输入源站地址")
    .refine(
      (value) => !/[/?#]/.test(value) && !value.includes("://"),
      "源站地址格式不合法",
    ),
  remark: z.string().max(255),
})

type OriginFormValues = z.infer<typeof originSchema>

const originsQueryKey = ["openflare", "origins"] as const

function toFormValues(origin?: OriginItem | null): OriginFormValues {
  if (!origin) return { name: "", address: "", remark: "" }
  return {
    name: origin.name,
    address: origin.address,
    remark: origin.remark || "",
  }
}

function toPayload(values: OriginFormValues): OriginMutationPayload {
  return {
    name: values.name.trim(),
    address: values.address.trim(),
    remark: values.remark.trim(),
  }
}

interface OriginEditorDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  origin?: OriginItem | null
  onSaved?: () => void
}

export function OriginEditorDialog({
  open,
  onOpenChange,
  origin,
  onSaved,
}: OriginEditorDialogProps) {
  const queryClient = useQueryClient()
  const form = useForm<OriginFormValues>({
    resolver: zodResolver(originSchema),
    defaultValues: toFormValues(origin),
  })

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

  const mutation = useMutation({
    mutationFn: async (values: OriginFormValues) => {
      const payload = toPayload(values)
      return origin
        ? OriginService.update(origin.id, payload)
        : OriginService.create(payload)
    },
    onSuccess: async () => {
      toast.success(origin ? "源站已更新" : "源站已创建")
      await queryClient.invalidateQueries({ queryKey: originsQueryKey })
      if (origin) {
        await queryClient.invalidateQueries({
          queryKey: ["openflare", "origins", String(origin.id)],
        })
      }
      onSaved?.()
      onOpenChange(false)
    },
    onError: (error) => {
      toast.error(error instanceof Error ? error.message : "保存失败")
    },
  })

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{origin ? "编辑源站" : "新增源站"}</DialogTitle>
          <DialogDescription>
            源站作为规则里的可复用地址目录，协议和端口仍由规则决定。
          </DialogDescription>
        </DialogHeader>

        <form
          id="origin-editor-form"
          className="space-y-4"
          onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
        >
          <div className="space-y-1.5">
            <Label htmlFor="address">源站地址</Label>
            <Input
              id="address"
              placeholder="origin.internal"
              {...form.register("address")}
            />
            {form.formState.errors.address ? (
              <p className="text-xs text-destructive">
                {form.formState.errors.address.message}
              </p>
            ) : null}
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="name">源站名</Label>
            <Input id="name" placeholder="主站源站" {...form.register("name")} />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="remark">备注</Label>
            <Textarea id="remark" rows={2} {...form.register("remark")} />
          </div>
        </form>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button
            type="submit"
            form="origin-editor-form"
            disabled={mutation.isPending}
          >
            {mutation.isPending ? (
              <>
                <Loader2 className="size-4 animate-spin mr-1" />
                保存中...
              </>
            ) : origin ? (
              "保存修改"
            ) : (
              "新增源站"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}