import toast from "react-hot-toast";
import { z } from "zod/v4";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "~/components/custom_ui/form";
import { useZodForm } from "~/lib/zodForm";
import { api } from "~/utils/api";
import Input from "~/components/custom_ui/input";
import { Button, buttonVariants } from "~/components/ui/button";
import { useTranslation } from "~/providers/I18nProvider";
import { useStrongPassword } from "~/hooks/useStrongPassword";
import { cn } from "~/lib/utils";
import { Eye, EyeOff } from "lucide-react";
import { PhoneInput } from "~/components/phone-input";
import { generatePassword } from "~/lib/basicPwGenerator";

export const FormNewUser = ({
  setOpen,
}: {
  setOpen: (status: boolean) => void;
}) => {
  const {
    isVisible,
    getStrengthColor,
    passwordRefine,
    getStrengthTxt,
    strengthScore,
    toggleVisibility,
  } = useStrongPassword();

  const NewUserSchema = z
    .object({
      email: z.email(),
      password: z.string(),
      nome: z.string().nonempty("Inserisci un nome valido"),
      cognome: z.string().nonempty("Inserisci un cognome valido"),
      telefono: z.string().nonempty("Inserisci un numero di telefono"),
    })
    .superRefine(({ password }, refinementContext) => {
      passwordRefine({
        password,
        refinementContext,
        path: "password",
      });
    });
  type NewUserFormValues = z.infer<typeof NewUserSchema>;

  // This can come from your database or API.
  const defaultValues: NewUserFormValues = {
    nome: "",
    cognome: "",
    email: "",
    password: "",
    telefono: "",
  };
  const { locale, t } = useTranslation();

  z.config(z.locales[locale]());

  const form = useZodForm(NewUserSchema, {
    defaultValues: defaultValues,
  });

  const utils = api.useUtils();

  const { mutate } = api.auth.addUserAdmin.useMutation({
    onSuccess: async () => {
      toast.success(t.newUser.accountCreato);
      await utils.users.getUsersWChatInfo.invalidate();
      await utils.stats.adminDashStats.invalidate();
      setOpen(false);
    },
    onError: (error) => {
      toast.error(error.message);
    },
  });
  function onSubmit(fields: NewUserFormValues) {
    mutate({
      nome: fields.nome,
      cognome: fields.cognome,
      email: fields.email,
      password: fields.password,
      telefono: fields.telefono.replace(/\s/g, ""),
    });
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 px-0.5">
        <FormField
          control={form.control}
          name="nome"
          render={({ field }) => (
            <FormItem>
              <div className="flex flex-wrap items-center gap-x-2">
                <FormLabel htmlFor="nome">{t.newUser.nome}</FormLabel>
                <FormMessage />
              </div>
              <FormControl>
                <Input placeholder="" {...field} id="nome" />
              </FormControl>
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="cognome"
          render={({ field }) => (
            <FormItem>
              <div className="flex flex-wrap items-center gap-x-2">
                <FormLabel htmlFor="cognome">{t.newUser.cognome}</FormLabel>
                <FormMessage />
              </div>
              <FormControl>
                <Input placeholder="" {...field} id="cognome" />
              </FormControl>
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <div className="flex flex-wrap items-center gap-x-2">
                <FormLabel htmlFor="email">{t.newUser.email}</FormLabel>{" "}
                <FormMessage />
              </div>
              <FormControl>
                <Input placeholder="esempio@email.com" {...field} id="email" />
              </FormControl>
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <div className="flex flex-col gap-x-2">
                <div className="flex items-center justify-between">
                  <FormLabel htmlFor="password">
                    {t.auth.signup.password}
                  </FormLabel>{" "}
                  <button
                    type="button"
                    className={cn(
                      buttonVariants({
                        variant: "outline",
                        size: "sm",
                      }),
                    )}
                    onClick={async () => {
                      form.setValue("password", generatePassword());
                      await form.trigger("password");
                    }}
                  >
                    genera password
                  </button>
                </div>

                <FormMessage
                  className={cn(
                    "whitespace-pre-wrap",
                    getStrengthTxt(strengthScore),
                  )}
                />
              </div>

              <FormControl>
                <div className="relative">
                  <Input
                    {...field}
                    id="password"
                    className="pe-9"
                    placeholder="Password"
                    type={isVisible ? "text" : "password"}
                    onChange={async (e) => {
                      field.onChange(e);
                      await form.trigger("password");
                    }}
                    aria-invalid={form.getFieldState("password").invalid}
                    aria-describedby="password-strength"
                  />
                  <button
                    className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 absolute end-0 top-1 flex size-9 items-center justify-center rounded-e-lg transition-shadow focus-visible:border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
                    type="button"
                    onClick={toggleVisibility}
                    aria-label={isVisible ? "Hide password" : "Show password"}
                    aria-pressed={isVisible}
                    aria-controls="password"
                  >
                    {isVisible ? (
                      <EyeOff size={16} strokeWidth={2} aria-hidden="true" />
                    ) : (
                      <Eye size={16} strokeWidth={2} aria-hidden="true" />
                    )}
                  </button>
                  <div
                    className="bg-border mt-3 mb-4 h-1 w-full overflow-hidden rounded-full"
                    role="progressbar"
                    aria-valuenow={strengthScore}
                    aria-valuemin={0}
                    aria-valuemax={4}
                    aria-label="Password strength"
                  >
                    <div
                      className={cn(
                        "h-full transition-all duration-500 ease-out",
                        getStrengthColor(strengthScore),
                      )}
                      style={{ width: `${(strengthScore / 4) * 100}%` }}
                    />
                  </div>
                </div>
              </FormControl>
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="telefono"
          render={({ field }) => (
            <FormItem>
              <div className="flex flex-wrap items-center gap-x-2">
                <FormLabel htmlFor="telefono">{t.profile.telefono}</FormLabel>
                <FormMessage />
              </div>

              <FormControl>
                <PhoneInput {...field} id="telefono" />
              </FormControl>
            </FormItem>
          )}
        />

        <Button type="submit">{t.newUser.creaAccount}</Button>
      </form>
    </Form>
  );
};