juip-web/src/components/composites/dialogs/editInfoDialog.tsx

import { zodResolver } from "@hookform/resolvers/zod"
import { useEffect, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { updateUserInfo } from "@/api/user"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { FieldError } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export type EditInfoValues = {
  qq: string
  wechat: string
  taobao: string
  email: string
}

const editInfoSchema = z.object({
  qq: z.string(),
  wechat: z.string(),
  taobao: z.string(),
  email: z
    .string()
    .refine(
      v => !v || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v),
      "请输入正确的邮箱",
    ),
})

interface EditInfoDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  initialData?: EditInfoValues
  onSaved?: () => void
}

const DEFAULT_INITIAL_DATA: EditInfoValues = {
  qq: "",
  wechat: "",
  taobao: "",
  email: "",
}

export function EditInfoDialog({
  open,
  onOpenChange,
  initialData = DEFAULT_INITIAL_DATA,
  onSaved,
}: EditInfoDialogProps) {
  const [submitting, setSubmitting] = useState(false)

  const form = useForm<EditInfoValues>({
    resolver: zodResolver(editInfoSchema),
    defaultValues: initialData,
  })

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

  const onSubmit = async (data: EditInfoValues) => {
    setSubmitting(true)
    const res = await updateUserInfo({
      QQ: data.qq,
      Wx: data.wechat,
      TaoBao: data.taobao,
      Email: data.email,
    })
    setSubmitting(false)

    if (!res.success) {
      toast.error(res.message)
      return
    }
    toast.success("保存成功")
    onOpenChange(false)
    onSaved?.()
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[85dvh] overflow-y-auto sm:max-w-120 p-6">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold text-center">
            编辑信息
          </DialogTitle>
        </DialogHeader>

        <form className="space-y-4 mt-2" onSubmit={form.handleSubmit(onSubmit)}>
          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">QQ号</Label>
            <Controller
              name="qq"
              control={form.control}
              render={({ field }) => (
                <Input {...field} className="h-11 bg-gray-50 border-gray-200" />
              )}
            />
          </div>

          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">微信号</Label>
            <Controller
              name="wechat"
              control={form.control}
              render={({ field }) => (
                <Input {...field} className="h-11 bg-gray-50 border-gray-200" />
              )}
            />
          </div>

          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">淘宝会员名</Label>
            <Controller
              name="taobao"
              control={form.control}
              render={({ field }) => (
                <Input {...field} className="h-11 bg-gray-50 border-gray-200" />
              )}
            />
          </div>

          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">邮箱</Label>
            <Controller
              name="email"
              control={form.control}
              render={({ field, fieldState }) => (
                <>
                  <Input
                    {...field}
                    className="h-11 bg-gray-50 border-gray-200"
                  />
                  <FieldError>{fieldState.error?.message}</FieldError>
                </>
              )}
            />
          </div>

          <Button
            type="submit"
            disabled={submitting}
            className="w-full h-11 mt-2 bg-blue-600 hover:bg-blue-700 text-white font-medium"
          >
            {submitting ? "保存中..." : "保存"}
          </Button>
        </form>
      </DialogContent>
    </Dialog>
  )
}