"use client";

import { trpc } from "@/app/_trpc/client";
import ErrorBoundary from "@/components/ErrorBoundary";
import useGroupTasks from "@/hooks/useGroupTasks";
import { useUser } from "@clerk/nextjs";

import moment from "moment";
import { lazy, Suspense } from "react";
import ChartSkeleton from "./ChartSkeleton";
import { TasksByDate } from "@/server/task/domain/models";
import UserMontlyActivitySkeleton from "./UserMonthlyActivitySkeleton";

const UserTasksTabs = lazy(() => import("./UserTasksTabs"));
const UserWeeklyActivity = lazy(() => import("./UserWeeklyActivity"));
const UserMontlyActivity = lazy(() => import("./UserMontlyActivity"));

const DashboardPage = () => {
  const { data: tasks } = trpc.tasks.getTasks.useQuery(
    { onlyUserTask: true },
    {
      refetchOnMount: false,
      refetchOnWindowFocus: false,
    }
  );

  const { user } = useUser();

  const { rearrangedTaks } = useGroupTasks(tasks as TasksByDate[]);

  return (
    <div>
      <header className="flex mb-4 justify-between items-center">
        <div>
          <p className="text-base tracking-wide font-normal text-gray-400 mb-1">
            Hola, <span>{user?.firstName}</span>!
          </p>
          <h2 className="text-2xl  md:text-4xl font-semibold flex gap-2">
            Tienes{" "}
            <span className=" animate-pulse block font-bold text-primary">
              {rearrangedTaks?.today.list.length}
            </span>{" "}
            tareas para hoy
          </h2>
        </div>
        <div>
          <h2 className="text-base md:text-2xl font-semibold">Hoy</h2>
          <p className="text-xs md:text-base">
            {moment().format("MMMM Do YYYY")}
          </p>
        </div>
      </header>
      <section className="space-y-10">
        <ErrorBoundary>
          <Suspense fallback={<UserMontlyActivitySkeleton />}>
            <UserMontlyActivity />
          </Suspense>
        </ErrorBoundary>

        <div className="flex flex-col md:grid grid-cols-2 justify-between items-end mt-20 gap-10">
          <div className="w-full md:w-auto flex-1">
            <ErrorBoundary>
              <Suspense fallback={<ChartSkeleton />}>
                <UserTasksTabs />
              </Suspense>
            </ErrorBoundary>
          </div>
          <div className="w-full">
            <ErrorBoundary>
              <Suspense fallback={<ChartSkeleton />}>
                <UserWeeklyActivity />
              </Suspense>
            </ErrorBoundary>
          </div>
        </div>
      </section>
    </div>
  );
};

export default DashboardPage;