import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import { FEATURE_SLUGS } from "@/lib/role-helpers";
import { listBlockedEmails } from "@/lib/features/notifications/action";
import { Button, Flex, Group, Stack, Tabs, Title } from "@mantine/core";
import { IconArrowLeft, IconBan, IconMail } from "@tabler/icons-react";
import { useNavigate, useLoaderData, useRevalidator, useSearchParams } from "react-router";
import BlockListTab from "./blockListTab";
import DefaultEmailTab from "./defaultEmailTab";

export const handle = {
    breadcrumb: () => (
        <BreadCrumbLink
            links={[
                { label: "Notifications" },
                { label: "Settings" },
            ]}
        />
    ),
};

export const loader = createRoleProtectedLoader(
    FEATURE_SLUGS.notifications,
    "read",
    async ({ request }) => {
        try {
            const url = new URL(request.url);
            const page = parseInt(url.searchParams.get("page") ?? "1", 10);
            const pageSize = parseInt(url.searchParams.get("pageSize") ?? "10", 10);
            const search = url.searchParams.get("search") ?? undefined;
            const start = (page - 1) * pageSize;

            const res = await listBlockedEmails(start, pageSize, search);
            return {
                blockedEmails: res.success ? res.data : { items: [], total: 0 },
            };
        } catch (e) {
            console.error("Loader error in SettingsPage:", e);
            return {
                blockedEmails: { items: [], total: 0 },
            };
        }
    },
);

const NotificationSettingsPage = () => {
    const navigate = useNavigate();
    const loaderData = useLoaderData() as any;
    const revalidator = useRevalidator();
    const [searchParams, setSearchParams] = useSearchParams();
    const activeTab = searchParams.get("tab") || "block-list";

    const handleTabChange = (val: string | null) => {
        if (!val) return;
        const newParams = new URLSearchParams(searchParams);
        newParams.set("tab", val);
        setSearchParams(newParams);
    };

    return (
        <Stack px={28} py={20} gap="lg">
            <Flex justify="space-between" align="center">
                <Group>
                    <Button
                        variant="subtle"
                        leftSection={<IconArrowLeft size={16} />}
                        onClick={() => navigate("/admin/notifications")}
                    >
                        Back
                    </Button>
                    <Title order={3}>Notification Settings</Title>
                </Group>
            </Flex>

            <Tabs value={activeTab} onChange={handleTabChange}>
                <Tabs.List>
                    <Tabs.Tab value="block-list" leftSection={<IconBan size={16} />}>
                        Block List
                    </Tabs.Tab>
                    <Tabs.Tab value="default-email" leftSection={<IconMail size={16} />}>
                        Default Email
                    </Tabs.Tab>
                </Tabs.List>

                <Tabs.Panel value="block-list" pt="md">
                    {activeTab === "block-list" && (
                        <BlockListTab
                            initialData={loaderData?.blockedEmails}
                            revalidate={() => revalidator.revalidate()}
                        />
                    )}
                </Tabs.Panel>

                <Tabs.Panel value="default-email" pt="md">
                    {activeTab === "default-email" && (
                        <DefaultEmailTab />
                    )}
                </Tabs.Panel>
            </Tabs>
        </Stack>
    );
};

export default NotificationSettingsPage;