import { redirect, createFileRoute, Outlet } from "@tanstack/react-router";
import Layout from "@/features/core/components/layout";
import { useServerEvents } from "@/hooks/use-server-events";
import { Group, Skeleton, Stack } from "@mantine/core";

export const Route = createFileRoute("/_authed")({
  beforeLoad: ({ context }) => {
    if (!context.auth?.user) {
      throw redirect({ to: "/login" });
    }

    return {
      auth: {
        ...context.auth,
        user: context.auth.user,
      },
    };
  },
  component: () => {
    useServerEvents();
    return (
      <Layout>
        <Outlet />
      </Layout>
    );
  },
  pendingComponent: () => (
    <Layout>
      <Stack gap="md" p="md" w="100%">
        <Group gap="sm">
          <Skeleton height={40} width={40} radius="sm" />
          <Skeleton height={24} width="45%" radius="sm" />
        </Group>
        {Array.from({ length: 4 }).map((_, index) => (
          <Skeleton
            key={`authed-pending-${index}`}
            height={96}
            w="100%"
            radius="md"
            style={{ opacity: Math.max(1 - index * 0.18, 0.3) }}
          />
        ))}
      </Stack>
    </Layout>
  ),
});
