import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@buildingai/ui/components/ui/form";
import { Input, PasswordInput } from "@buildingai/ui/components/ui/input";
import { cn } from "@buildingai/ui/lib/utils";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

const formSchema = z
  .object({
    username: z.string().min(2, {
      message: "用户名至少需要2个字符",
    }),
    password: z.string().min(6, {
      message: "密码至少需要6个字符",
    }),
    confirmPassword: z.string().min(6, {
      message: "确认密码至少需要6个字符",
    }),
    email: z.email({ message: "请输入有效的邮箱地址" }).optional().or(z.literal("")),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "两次输入的密码不一致",
    path: ["confirmPassword"],
  });

export type AdminAccountFormValues = z.infer<typeof formSchema>;

interface AdminAccountFormProps {
  step: number;
  defaultValues?: Partial<AdminAccountFormValues>;
  onChange?: (values: AdminAccountFormValues, isValid: boolean) => void;
}

const AdminAccountForm = ({ step, defaultValues, onChange }: AdminAccountFormProps) => {
  const [isVisible, setIsVisible] = useState(false);

  const form = useForm<AdminAccountFormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      password: "",
      confirmPassword: "",
      email: "",
      ...defaultValues,
    },
    mode: "onChange",
  });

  // Handle fade-in effect when step becomes 1
  useEffect(() => {
    if (step === 1) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  }, [step]);

  useEffect(() => {
    const subscription = form.watch(async (_value, { name }) => {
      if (!name) return;
      await form.trigger(name);
      const isValid = form.formState.isValid;
      const values = form.getValues();
      onChange?.(values, isValid);
    });
    return () => subscription.unsubscribe();
  }, [form, onChange]);

  return (
    <div
      className={cn(
        "flex h-full flex-col items-center justify-center transition-all delay-500 duration-1000 ease-in-out",
        {
          "translate-y-4 opacity-0": !isVisible,
          "translate-y-0 opacity-100": isVisible,
          hidden: step !== 1,
        },
      )}
    >
      <Form {...form}>
        <form className="h-fit w-xs space-y-6">
          <h1 className="text-xl font-bold">创建管理员账号</h1>
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel required>用户名</FormLabel>
                <FormControl>
                  <Input placeholder="请填写用户名" required {...field} autoComplete="off" />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel required>密码</FormLabel>
                <FormControl>
                  <PasswordInput
                    required
                    placeholder="请填写密码"
                    type="password"
                    autoComplete="off"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="confirmPassword"
            render={({ field }) => (
              <FormItem>
                <FormLabel required>确认密码</FormLabel>
                <FormControl>
                  <PasswordInput
                    required
                    placeholder="请再次填写密码"
                    autoComplete="off"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>邮箱</FormLabel>
                <FormControl>
                  <Input placeholder="请填写邮箱" {...field} autoComplete="off" />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>
    </div>
  );
};

export default AdminAccountForm;
