// * Packages
import { route } from "ziggy-js";
import {
    ArchiveIcon,
    ArrowLeftIcon,
    CogIcon,
    HouseIcon,
    LockIcon,
    PlusIcon,
    StickyNoteIcon,
    TriangleAlertIcon,
} from "lucide-react";
import { usePage } from "@inertiajs/react";
import { Row } from "@tanstack/react-table";
// * Components shadcn
import { Badge } from "@/components/ui/badge";
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from "@/components/ui/tooltip";
// * Other
import AuthenticatedLayout from "@/back/Layouts/AuthenticatedLayout";
import DataTable from "@/back/Components/Table/DataTable";
import DataTableSearch from "@/back/Components/Table/DataTableSearch";
import DataTableFilterButton from "@/back/Components/Table/DataTableFilterButton";
import SoftdeleteWarning from "@/back/Components/SoftdeleteWarning";
import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import DynamicStatusBadge from "@/back/Components/DynamicPages/DynamicStatusBadge";
import RenderTranslationCell from "@/back/Components/Table/RenderTranslationCell";
import { GetFormatedDate, GetTranslation, Views } from "@/lib/utils";
import { AppEnv, AuthProp, Resource } from "@/back/types/global";
import { DynamicPageModel, PageConfigModel } from "@/back/types/dynamic-pages";
import str from "@/hooks/use-string";
import useTrans from "@/hooks/use-translations";

const getColumns = (
    appEnv: AppEnv,
    modelName: string,
    viewAny: boolean,
    viewAnyPageConfigs: boolean,
) => {
    return [
        {
            accessorKey: "title",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(
                        GetTranslation(`validation.attributes.${column.id}`),
                    )
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<DynamicPageModel> }) => (
                <div className="flex justify-center items-center">
                    <RenderTranslationCell value={row.getValue("title")} />
                    {row.original.isRoot && (
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <HouseIcon size={15} className="ms-1" />
                            </TooltipTrigger>
                            <TooltipContent>
                                {GetTranslation("back.page_root")}
                            </TooltipContent>
                        </Tooltip>
                    )}
                </div>
            ),
        },
        {
            accessorKey: "parent_page",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(GetTranslation(`validation.custom.${column.id}`))
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<DynamicPageModel> }) => {
                if (row.getValue("parent_page")) {
                    const dynamicPageModel = row.getValue(
                        "parent_page",
                    ) as DynamicPageModel;
                    const cellValue = dynamicPageModel.title[appEnv.locale];
                    let value = <span>{cellValue}</span>;
                    if (viewAny) {
                        value = (
                            <BtnOptionnalLinkWithTooltip
                                link={route(
                                    `back.${modelName}.show`,
                                    dynamicPageModel,
                                )}
                                content={
                                    <>
                                        <StickyNoteIcon />
                                        {value}
                                    </>
                                }
                                tooltipContent={
                                    <p>
                                        {GetTranslation("back.access_model", {
                                            params: {
                                                model: GetTranslation(
                                                    "models.classes.dynamic-page",
                                                    { choice: 1 },
                                                ),
                                            },
                                        })}
                                    </p>
                                }
                                type="button"
                                size="default"
                                variant="secondary"
                            />
                        );
                    }
                    if (dynamicPageModel.deleted_at !== null) {
                        value = (
                            <div className="flex flex-row justify-center items-center">
                                <Badge variant="outline">{value}</Badge>
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <TriangleAlertIcon
                                            size={15}
                                            className="text-destructive ms-1"
                                        />
                                    </TooltipTrigger>
                                    <TooltipContent>
                                        {GetTranslation("back.group_archived")}
                                    </TooltipContent>
                                </Tooltip>
                            </div>
                        );
                    }
                    return value;
                }
                return (
                    <p className="text-muted-foreground italic m-0">
                        {GetTranslation("back.table_not_known")}
                    </p>
                );
            },
        },
        {
            accessorKey: "config",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(GetTranslation(`validation.custom.${column.id}`))
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<DynamicPageModel> }) => {
                if (row.getValue("config")) {
                    const pageConfigModel = row.getValue(
                        "config",
                    ) as PageConfigModel;
                    const cellValue = pageConfigModel.label[appEnv.locale];
                    let value = <span>{cellValue}</span>;
                    if (viewAnyPageConfigs) {
                        value = (
                            <BtnOptionnalLinkWithTooltip
                                link={route(
                                    `back.page-configs.show`,
                                    pageConfigModel,
                                )}
                                content={
                                    <>
                                        <CogIcon />
                                        {value}
                                    </>
                                }
                                tooltipContent={
                                    <p>
                                        {GetTranslation("back.access_model", {
                                            params: {
                                                model: GetTranslation(
                                                    "models.classes.page-config",
                                                    { choice: 1 },
                                                ),
                                            },
                                        })}
                                    </p>
                                }
                                type="button"
                                size="default"
                                variant="secondary"
                            />
                        );
                    }
                    if (pageConfigModel.deleted_at !== null) {
                        value = (
                            <div className="flex flex-row justify-center items-center">
                                <Badge variant="outline">{value}</Badge>
                                <Tooltip>
                                    <TooltipTrigger asChild>
                                        <TriangleAlertIcon
                                            size={15}
                                            className="text-destructive ms-1"
                                        />
                                    </TooltipTrigger>
                                    <TooltipContent>
                                        {GetTranslation("back.config_archived")}
                                    </TooltipContent>
                                </Tooltip>
                            </div>
                        );
                    }
                    return value;
                }
                return (
                    <p className="text-muted-foreground italic m-0">
                        {GetTranslation("back.table_not_known")}
                    </p>
                );
            },
        },
        {
            accessorKey: "status",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(GetTranslation(`validation.custom.${column.id}`))
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<DynamicPageModel> }) => (
                <div className="flex justify-center items-center">
                    <DynamicStatusBadge value={row.getValue("status")} />
                    {row.original.isLocked && (
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <LockIcon size={15} className="ms-1" />
                            </TooltipTrigger>
                            <TooltipContent>
                                {GetTranslation("back.page_locked")}
                            </TooltipContent>
                        </Tooltip>
                    )}
                </div>
            ),
        },
        {
            accessorKey: "updated_at",
            header: ({ column }: { column: { id: string } }) => (
                <DataTableFilterButton
                    label={str(
                        GetTranslation(`validation.attributes.${column.id}`),
                    )
                        .ucFirst()
                        .value()}
                    field={column.id}
                />
            ),
            cell: ({ row }: { row: Row<DynamicPageModel> }) => (
                <Badge variant="secondary">
                    {GetFormatedDate(row.getValue("updated_at"))}
                </Badge>
            ),
        },
    ];
};

export default function Index({
    dynamicPageModels,
    searchFields,
    modelName,
}: {
    dynamicPageModels: Resource;
    searchFields: string;
    modelName: string;
}) {
    const { auth, appEnv } = usePage().props as unknown as {
        auth: AuthProp;
        appEnv: AppEnv;
    };
    const { viewAny, viewTrash, create } = auth.policies.dynamicPages;
    const { viewAny: viewAnyPageConfigs } = auth.policies.pageConfigs;
    const isArchiveRoute = route().current(`back.${modelName}.trash`);
    const actionModels = isArchiveRoute
        ? [Views.RESTORATION, Views.FORCEDELETION]
        : [
              Views.VISUALIZATION,
              Views.EDITION,
              Views.DUPLICATION,
              Views.ARCHIVATION,
          ];

    const columns = getColumns(appEnv, modelName, viewAny, viewAnyPageConfigs);

    const transModel = useTrans(
        `models.classes.${str(modelName).singular().value()}`,
        { choice: 2 },
    );
    const transArchiveTitle = useTrans("crud.helpers.archives_model", {
        params: { model: transModel },
    });
    const transTitle = str(isArchiveRoute ? transArchiveTitle : transModel)
        .ucFirst()
        .value();
    const transBackToList = useTrans("back.crud_back_to_list");
    const beforeNode = () => {
        return (
            isArchiveRoute &&
            viewAny && (
                <div className="flex justify-end items-center gap-x-1.5">
                    <BtnOptionnalLinkWithTooltip
                        link={route(`back.${modelName}.index`)}
                        content={<ArrowLeftIcon />}
                        tooltipContent={<p>{transBackToList}</p>}
                    />
                </div>
            )
        );
    };
    const transAccessToArchived = useTrans("back.crud_access_to", {
        params: {
            target: useTrans("back.archived_entries"),
        },
    });
    const transAddEntry = useTrans("back.crud_add_entry");
    const afterNode = () => {
        return (
            !isArchiveRoute && (
                <div className="flex justify-end items-center gap-x-1.5">
                    {viewTrash && (
                        <BtnOptionnalLinkWithTooltip
                            link={route(`back.${modelName}.trash`)}
                            content={<ArchiveIcon />}
                            tooltipContent={<p>{transAccessToArchived}</p>}
                            variant="outline"
                        />
                    )}
                    {create && (
                        <BtnOptionnalLinkWithTooltip
                            link={route(`back.${modelName}.create`)}
                            content={<PlusIcon />}
                            tooltipContent={<p>{transAddEntry}</p>}
                        />
                    )}
                </div>
            )
        );
    };

    return (
        <AuthenticatedLayout
            title={transTitle}
            beforeNode={beforeNode()}
            afterNode={afterNode()}
        >
            {isArchiveRoute && <SoftdeleteWarning />}
            <DataTableSearch
                modelRoute={modelName}
                searchFields={searchFields}
            />
            <DataTable
                columns={columns}
                modelRoute={modelName}
                modelsPaginate={dynamicPageModels}
                actions={actionModels}
            />
        </AuthenticatedLayout>
    );
}