"use client";
import React, { useMemo, useCallback } from "react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { UserPlus } from "lucide-react";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { FormProvider, useForm } from "react-hook-form";
import { Form } from "react-compose-form";
import { FormSubmit } from "@/components/form/form-submit";
import { FormReset } from "@/components/form/form-reset";
import { EditorLayout, EditorLayoutContent } from "@/components/layout/editor";
import { UserFormSection } from "@/components/dashboard/user/user-form-section";
import { InputControl } from "@/components/form/control/input.control";
import { SelectControl } from "@/components/form/control/select.control";
import { SwitchControl } from "@/components/form/control/switch.control";
import { Button } from "@/components/ui/button";
import { MediaControl } from "@/components/form/control/media.control";
import { api } from "@/lib/trpc/client";
import { type AppRouterOutput } from "@/lib/trpc/router";
import { UserRole, UserRoleHelpers } from "@/server/modules/user/user-role.enum";
import { Routes } from "@/config/routes";
import { MediaScope } from "@/server/modules/media/types/media-scope.enum";
// import { Translator } from "@/lib/i18n/types/translator.type";

const CreateUserSchema = z.object({
    email: z.string().email("Please enter a valid email address"),
    password: z.string().min(8, "Password must be at least 8 characters"),
    name: z.string().min(1, "Name is required"),
    role: z.nativeEnum(UserRole),
    emailVerified: z.boolean(),
    avatarId: z.string().uuid().nullable()
});

const UpdateUserSchema = z.object({
    email: z.string().email("Please enter a valid email address"),
    password: z.string().optional(),
    name: z.string().min(1, "Name is required"),
    role: z.nativeEnum(UserRole),
    emailVerified: z.boolean(),
    avatarId: z.string().uuid().nullable()
});

type UserValues = z.infer<typeof CreateUserSchema> | z.infer<typeof UpdateUserSchema>;

type User = NonNullable<AppRouterOutput["user"]["get"]>;

type Props =
    | {
        mode: "create";
        id?: undefined;
        user?: never;
    }
    | {
        mode: "update";
        id: User["id"];
        user: User;
    };

export const UserEditor: React.FC<Props> = (props) => {
    const router = useRouter();
    const t = useTranslations();

    const createMutation = api.user.create.useMutation({
        onSuccess(user) {
            toast.success(`User ${user.email} created successfully`);
            router.push(Routes.DASHBOARD.USER_EDIT(user.id));
        },
        onError(error) {
            toast.error(error.message || "Error creating user");
        }
    });

    const updateMutation = api.user.update.useMutation({});

    const values = useMemo((): UserValues => {
        if(props.mode === "create") {
            return {
                email: "",
                password: "",
                name: "",
                role: UserRole.USER,
                emailVerified: false,
                avatarId: null
            } as const;
        }

        return {
            name: props.user.name,
            role: props.user.role,
            email: props.user.email,
            emailVerified: props.user.emailVerified,
            avatarId: props.user.avatarId
        } as const;
    }, [props.mode, props.user]);

    const form = useForm({
        resolver: zodResolver(props.mode === "create" ? CreateUserSchema : UpdateUserSchema),
        values
    });

    const handleSubmit = useCallback(async (data: UserValues) => {
        if(props.mode === "create") {
            await createMutation.mutateAsync({
                data: data as z.infer<typeof CreateUserSchema>
            });
        }
        else if(props.mode === "update") {
            await updateMutation.mutateAsync({
                id: props.id!,
                data: data as z.infer<typeof UpdateUserSchema>
            });
        }
    }, [createMutation, updateMutation, props.id, props.mode]);

    return (
        <FormProvider {...form}>
            <EditorLayout>
                <EditorLayoutContent>
                    <Form
                      id="user-form"
                      className="space-y-4"
                      formControl={form}
                      resolver={zodResolver(props.mode === "create" ? CreateUserSchema : UpdateUserSchema)}
                      onSubmit={handleSubmit}>
                        <UserFormSection
                          icon={<UserPlus className="h-5 w-5" />}
                          title="User Information"
                          description="Enter the details for the new user account">
                            <div className="space-y-6">
                                <div className="grid gap-4 md:grid-cols-2">
                                    <InputControl label="Name" name="name" placeholder="John Doe" />

                                    <InputControl label="Email" name="email" placeholder="john@example.com" />
                                </div>

                                {props.mode === "create" && (
                                    <InputControl
                                      type="password"
                                      label="Password"
                                      name="password"
                                      placeholder="Enter a secure password"
                                      helperText="Password must be at least 8 characters long" />
                                )}

                                <div className="grid gap-4 md:grid-cols-2">
                                    <SelectControl
                                      label="Role"
                                      className="w-full"
                                      helperText="Admin users have access to administrative functions"
                                      name="role">
                                        <SelectControl.Trigger>
                                            <SelectControl.Value className="w-full" placeholder="Select a role" />
                                        </SelectControl.Trigger>

                                        <SelectControl.Content>
                                            {UserRoleHelpers.values().map((role) => {
                                                return (
                                                    <SelectControl.Item key={role} value={role}>
                                                        {UserRoleHelpers.getLabel(role)}
                                                    </SelectControl.Item>
                                                )
                                            })}
                                        </SelectControl.Content>
                                    </SelectControl>

                                    <SwitchControl
                                      label="Email Verified"
                                      helperText="Mark email as verified on creation"
                                      name="emailVerified" />
                                </div>

                                <MediaControl
                                  autosubmit
                                  label="Avatar"
                                  scope={MediaScope.AVATAR}
                                  name="avatarId" />
                            </div>
                        </UserFormSection>

                        <UserFormSection title="Important Notes">
                            <div className="text-muted-foreground space-y-2 text-sm">
                                <p>• The new user will receive login credentials via email if email verification is enabled.</p>
                                <p>• Admin users can access all administrative functions including user management.</p>
                                <p>• Email verification can be toggled to skip the verification step for testing purposes.</p>
                                <p>• Users can change their password after first login from their profile settings.</p>
                            </div>
                        </UserFormSection>
                    </Form>

                    <div className="flex justify-end px-4 pt-5">
                        <div className="flex gap-2">
                            {props.mode === "create" && (
                                <Link href={Routes.DASHBOARD.USER_LIST}>
                                    <Button variant="outline" type="button">
                                        Cancel
                                    </Button>
                                </Link>
                            )}

                            {props.mode === "update" && (
                                <FormReset asChild>
                                    <Link href='.'>Cancel</Link>
                                </FormReset>
                            )}

                            <FormSubmit form="user-form">
                                {props.mode === "create"
                                    ? "Create User"
                                    : "Update User"}
                            </FormSubmit>
                        </div>
                    </div>
                </EditorLayoutContent>
            </EditorLayout>
        </FormProvider>
    );
};