"use client";

import { FormSkeleton } from "@/components/ui/form-skeleton";
import type {
  DashboardUserItem,
  DashboardUserLanguage,
  DashboardUserRole,
  UserUpsertFormValues,
} from "@/components/dashboard/users/users-types";
import { createUser, updateUser, useUser } from "@/lib/api/dashboard/users-api";
import { createUserUpsertSchema } from "@/components/dashboard/users/user-upsert-schema";
import { USER_UPSERT_FORM_ID } from "@/components/dashboard/users/user-upsert-constants";
import { UserUpsertFormView } from "@/components/dashboard/users/user-upsert-form-view";
import { useLocale } from "next-intl";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import { useTranslations } from "next-intl";
import { zodResolver } from "@hookform/resolvers/zod";

const ROLE_NAME_MAP: Record<number, DashboardUserRole> = {
  1: "admin",
  2: "editor",
  3: "support",
  4: "viewer",
};

interface UserUpsertFormProps {
  mode: "create" | "edit";
  initialData?: DashboardUserItem | null;
  id?: number | string;
}

export function UserUpsertForm({ mode, initialData, id }: UserUpsertFormProps) {
  const locale = useLocale();
  const isRtl = locale === "ar";
  const router = useRouter();
  const tValidation = useTranslations("dashboard.users.form.validation");
  const tErrors = useTranslations("dashboard.users.form.errors");
  const [isReady, setIsReady] = useState(mode === "create");

  const schema = createUserUpsertSchema({
    required: tValidation("required"),
    emailInvalid: tValidation("emailInvalid"),
    passwordMin: tValidation("passwordMin", { min: 8 }),
    confirmPasswordMismatch: tValidation("confirmPasswordMismatch"),
    genderRequired: tValidation("genderRequired"),
    dateOfBirthRequired: tValidation("dateOfBirthRequired"),
    mobileRequired: tValidation("mobileRequired"),
    countryCodeRequired: tValidation("countryCodeRequired"),
  });

  const { user } = useUser(id);

  const form = useForm<UserUpsertFormValues>({
    resolver: zodResolver(schema),
    defaultValues: {
      username: "",
      first_name: "",
      last_name: "",
      gender: "male",
      date_of_birth: "",
      language: (isRtl ? "ar" : "en") as DashboardUserLanguage,
      role: "viewer",
      is_active: true,
      email: "",
      mobile_number: "",
      mobile_country_code: "",
      password: "",
      confirmPassword: "",
    },
    mode: "onBlur",
  });

  useEffect(() => {
    if (mode === "edit") {
      const source = user || initialData;
      if (source) {
        const roleId = source.role_id as number;
        const role = ROLE_NAME_MAP[roleId] || "viewer";

        form.reset({
          username: source.username,
          first_name: source.first_name,
          last_name: source.last_name,
          gender: source.gender,
          date_of_birth: source.date_of_birth || "",
          language: source.language,
          role,
          is_active: source.is_active,
          email: source.email,
          mobile_number: source.mobile_number,
          mobile_country_code: source.mobile_country_code,
          password: "",
          confirmPassword: "",
        });
        // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: re-render after form.reset() so Radix Select mounts with the correct initial value
        setIsReady(true);
      }
    } else if (mode === "create") {
      setIsReady(true);
    }
  }, [mode, user, initialData, form]);

  const onSubmit = async (values: UserUpsertFormValues) => {
    try {
      if (mode === "create") {
        await createUser(values);
      } else if (id) {
        await updateUser(id, values);
      }
      router.push("/dashboard/users");
    } catch {
      toast.error(tErrors("submit"));
    }
  };

  if (!isReady) {
    return (
      <section className="rounded-2xl border border-border bg-card p-6">
        <FormSkeleton rows={4} />
      </section>
    );
  }

  return (
    <UserUpsertFormView
      form={form}
      formId={USER_UPSERT_FORM_ID}
      mode={mode}
      onSubmit={onSubmit}
    />
  );
}