// * Packages
import { Link, useForm } from "@inertiajs/react";
import { route } from "ziggy-js";
import { FormEvent, ReactNode, useState } from "react";
import { MoreHorizontalIcon } from "lucide-react";
import type { VisitOptions } from "@inertiajs/core";
// * Components shadcn
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
    DropdownMenuSeparator,
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
// * Other
import { useFormatedDate } from "@/hooks/use-formated-value";
import { useToast } from "@/hooks/use-toast";
import useTrans from "@/hooks/use-translations";
import str from "@/hooks/use-string";
import { DefaultModel, Views as ViewsType } from "@/back/types/global";
import { Views } from "@/lib/utils";
import { ToastActionElement, ToastProps } from "@/components/ui/toast";

interface Translations {
    successfulArchivation: string;
    successfulArchivationDetails: string;
    canceledArchivation: string;
    canceledArchivationDetails: string;
    successfulRestoration: string;
    successfulRestorationDetails: string;
    canceledRestoration: string;
    canceledRestorationDetails: string;
    successfulDeletion: string;
    successfulDeletionDetails: string;
    canceledDeletion: string;
    canceledDeletionDetails: string;
}

type ToasterToast = ToastProps & {
    id: string;
    title?: ReactNode;
    description?: ReactNode;
    action?: ToastActionElement;
};

/**
 * Button for GET action.
 * @param action ViewsType[number]
 * @param modelRoute string
 * @param model DefaultModel
 * @returns Element
 */
function GetAction({
    action,
    modelRoute,
    model,
}: {
    action: ViewsType[number];
    modelRoute: string;
    model: DefaultModel;
}) {
    return (
        <Button asChild variant="ghost" className="w-full">
            <Link
                href={route(`back.${modelRoute}.${action.value}`, model.id)}
                className="w-full"
            >
                <action.icon />
                {str(useTrans(`crud.actions.${action.label}`))
                    .ucFirst()
                    .value()}
            </Link>
        </Button>
    );
}

/**
 * Action call on model.
 * @param event FormEvent<HTMLFormElement>
 * @param action ViewsType[number]
 * @param modelRoute string
 * @param model DefaultModel
 * @param setOpen (value: boolean) => void
 * @param translations Translations
 * @param toast
 */
const actionOnModel = (
    /* eslint-disable no-unused-vars */
    event: FormEvent<HTMLFormElement>,
    action: ViewsType[number],
    modelRoute: string,
    model: DefaultModel,
    setOpen: (value: boolean) => void,
    translations: Translations,
    toast: ({ ...props }: Omit<ToasterToast, "id">) => {
        id: string;
        dismiss: () => void;
        update: (propsChild: ToasterToast) => void;
    },
    destroy: (url: string, options?: VisitOptions) => void,
    patch: (url: string, options?: VisitOptions) => void,
    /* eslint-enable no-unused-vars */
) => {
    event.preventDefault();

    const routeAction = route(`back.${modelRoute}.${action.value}`, model.id);

    // All post actions mapping.
    const actionMap: Record<
        ViewsType[number]["label"],
        {
            method: typeof destroy | typeof patch;
            success: { title: string; description: string };
            error: { title: string; description: string };
        }
    > = {
        [Views.ARCHIVATION.label]: {
            method: destroy,
            success: {
                title: translations.successfulArchivation,
                description: translations.successfulArchivationDetails,
            },
            error: {
                title: translations.canceledArchivation,
                description: translations.canceledArchivationDetails,
            },
        },
        [Views.RESTORATION.label]: {
            method: patch,
            success: {
                title: translations.successfulRestoration,
                description: translations.successfulRestorationDetails,
            },
            error: {
                title: translations.canceledRestoration,
                description: translations.canceledRestorationDetails,
            },
        },
        [Views.DELETION.label || Views.FORCEDELETION.label]: {
            method: destroy,
            success: {
                title: translations.successfulDeletion,
                description: translations.successfulDeletionDetails,
            },
            error: {
                title: translations.canceledDeletion,
                description: translations.canceledDeletionDetails,
            },
        },
    };

    // Check if route exist.
    const config = actionMap[action.label];
    if (!config) {
        throw new Error(`Unknown action: ${action.label}`);
    }

    // Close the dropdown.
    setOpen(false);

    // Execute the call.
    config.method(routeAction, {
        preserveScroll: true,
        onSuccess: () => toast(config.success),
        onError: () => toast({ variant: "destructive", ...config.error }),
    });
};

/**
 * Button for POST action.
 * @param action ViewsType[number]
 * @param modelRoute string
 * @param model DefaultModel
 * @param setOpen (value: boolean) => void
 * @returns Element
 */
function PostAction({
    action,
    modelRoute,
    model,
    setOpen,
}: {
    action: ViewsType[number];
    modelRoute: string;
    model: DefaultModel;
    // eslint-disable-next-line no-unused-vars
    setOpen: (value: boolean) => void;
}) {
    const { delete: destroy, patch } = useForm();

    const isRestoreAction = action.label === Views.RESTORATION.label;
    const isArchiveAction = action.label === Views.ARCHIVATION.label;
    const btnVariantType = isRestoreAction ? "ghost" : "destructive";
    let translationKeyBtnConfirm: string;
    const { toast } = useToast();
    if (isRestoreAction) {
        translationKeyBtnConfirm = "back.yes_restore";
    } else if (isArchiveAction) {
        translationKeyBtnConfirm = "back.yes_archive";
    } else {
        translationKeyBtnConfirm = "back.yes_delete";
    }

    const btnConfirm = useTrans(translationKeyBtnConfirm);

    let translationKeyBtnDesc = "back.lost_data";

    if (isRestoreAction) {
        translationKeyBtnDesc = "back.restore_data";
    } else if (isArchiveAction) {
        translationKeyBtnDesc = "back.trash_data";
    }

    const btnDesc = useTrans(translationKeyBtnDesc);

    // Translations for actionOnModel.
    const translations: Translations = {
        successfulArchivation: useTrans("crud.messages.successful_archivation"),
        successfulArchivationDetails: useTrans(
            "crud.messages.successful_archivation_details",
        ),
        canceledArchivation: useTrans("crud.messages.canceled_archivation"),
        canceledArchivationDetails: useTrans(
            "crud.messages.canceled_archivation_details",
        ),
        successfulRestoration: useTrans("crud.messages.successful_restoration"),
        successfulRestorationDetails: useTrans(
            "crud.messages.successful_restoration_details",
        ),
        canceledRestoration: useTrans("crud.messages.canceled_restoration"),
        canceledRestorationDetails: useTrans(
            "crud.messages.canceled_restoration_details",
        ),
        successfulDeletion: useTrans("crud.messages.successful_deletion"),
        successfulDeletionDetails: useTrans(
            "crud.messages.successful_deletion_details",
        ),
        canceledDeletion: useTrans("crud.messages.canceled_deletion"),
        canceledDeletionDetails: useTrans(
            "crud.messages.canceled_deletion_details",
        ),
    };

    return (
        <Dialog>
            <DialogTrigger asChild>
                <Button variant={btnVariantType} className="w-full">
                    <action.icon />
                    {str(useTrans(`crud.actions.${action.label}`))
                        .ucFirst()
                        .value()}
                </Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>{useTrans("back.are_you_sure")}</DialogTitle>
                    <DialogDescription>{btnDesc}</DialogDescription>
                </DialogHeader>
                <DialogFooter className="items-center sm:justify-start">
                    <DialogClose asChild>
                        <Button variant="secondary">
                            {useTrans("back.no_cancel")}
                        </Button>
                    </DialogClose>
                    <form
                        onSubmit={(event) =>
                            actionOnModel(
                                event,
                                action,
                                modelRoute,
                                model,
                                setOpen,
                                translations,
                                toast,
                                destroy,
                                patch,
                            )
                        }
                        className="w-fit mb-2 sm:mb-0"
                    >
                        <Button type="submit" variant={btnVariantType}>
                            {btnConfirm}
                        </Button>
                    </form>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}

interface ModelActionsProps {
    actions?: ViewsType;
    modelRoute: string;
    model: DefaultModel;
    modelUpdatedAt?: string;
    inDialog?: boolean;
    message?: string;
}

export default function ModelActions({
    actions = [],
    modelRoute,
    model,
    modelUpdatedAt = "",
    inDialog = false,
    message = "back.model_action_updated_at",
}: ModelActionsProps) {
    const [open, setOpen] = useState(false);
    const messageTrans = useTrans(message);
    const formattedDate = useFormatedDate(modelUpdatedAt);
    const allowedActions = actions.filter(
        (action) =>
            model.policies[action.policy as keyof typeof model.policies],
    );

    /**
     * Get all action buttons.
     * @returns Element[]
     */
    const AllBtnActions = () => {
        const postActionValues = new Set([
            Views.ARCHIVATION.value,
            Views.RESTORATION.value,
            Views.DELETION.value,
            Views.FORCEDELETION.value,
        ]);

        return allowedActions.map((action) => {
            const isPostAction = postActionValues.has(action.value);
            const showSeparator =
                inDialog &&
                isPostAction &&
                action.value !== allowedActions[0].value;

            const content = isPostAction ? (
                <>
                    {showSeparator && <DropdownMenuSeparator />}
                    <PostAction
                        action={action}
                        model={model}
                        modelRoute={modelRoute}
                        setOpen={setOpen}
                    />
                </>
            ) : (
                <GetAction
                    action={action}
                    model={model}
                    modelRoute={modelRoute}
                />
            );

            return (
                <div key={`${action.value}-${action.label}`} className="w-full">
                    {content}
                </div>
            );
        });
    };

    return (
        <div
            className={`flex justify-between items-center ${
                !inDialog ? "flex-col xl:flex-row mb-4" : "flex-col"
            }`}
        >
            {!inDialog && modelUpdatedAt.length > 0 && (
                <div className="flex justify-start items-center">
                    <p className="text-center xl:text-left">{messageTrans}</p>
                    <Badge variant="secondary" className="ms-1 mt-1">
                        {formattedDate}
                    </Badge>
                </div>
            )}
            {Boolean(allowedActions.length) && (
                <div
                    className={`flex justify-between items-center ${
                        !inDialog
                            ? "flex-col sm:flex-row mt-4 xl:mt-0 gap-1.5"
                            : "flex-col w-full"
                    }`}
                >
                    {inDialog ? (
                        <DropdownMenu open={open} onOpenChange={setOpen}>
                            <DropdownMenuTrigger asChild>
                                <Button variant="secondary" size="icon">
                                    <MoreHorizontalIcon />
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent side="right" align="start">
                                <AllBtnActions />
                            </DropdownMenuContent>
                        </DropdownMenu>
                    ) : (
                        <AllBtnActions />
                    )}
                </div>
            )}
        </div>
    );
}