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

import { zodResolver } from "@hookform/resolvers/zod"
import { Eye, EyeOff } from "lucide-react"
import { useEffect, useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
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 = {
  username: string
  taobao: string
  password: string
  email: string
  wechat: string
  qq: string
}

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

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

const DEFAULT_INITIAL_DATA: EditInfoValues = {
  username: "191****1234",
  taobao: "191****1234",
  password: "********",
  email: "123456123@qq.com",
  wechat: "",
  qq: "",
}

export function EditInfoDialog({
  open,
  onOpenChange,
  initialData = DEFAULT_INITIAL_DATA,
  onSave,
}: EditInfoDialogProps) {
  const [showPassword, setShowPassword] = useState(false)

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

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

  const onSubmit = (data: EditInfoValues) => {
    onSave?.(data)
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="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">用户名</Label>
            <Controller
              name="username"
              control={form.control}
              render={({ field, fieldState }) => (
                <>
                  <Input
                    {...field}
                    className="h-11 bg-gray-50 border-gray-200"
                  />
                  <FieldError>{fieldState.error?.message}</FieldError>
                </>
              )}
            />
          </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="password"
              control={form.control}
              render={({ field, fieldState }) => (
                <>
                  <div className="relative">
                    <Input
                      {...field}
                      type={showPassword ? "text" : "password"}
                      className="h-11 bg-gray-50 border-gray-200 pr-10"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                    >
                      {showPassword ? (
                        <EyeOff className="h-4 w-4" />
                      ) : (
                        <Eye className="h-4 w-4" />
                      )}
                    </button>
                  </div>
                  <FieldError>{fieldState.error?.message}</FieldError>
                </>
              )}
            />
          </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>

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

          <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}
                  placeholder="请输入"
                  className="h-11 bg-gray-50 border-gray-200"
                />
              )}
            />
          </div>

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