import HabitDisplay from "@/components/asset_app/HabitDisplay";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { generateHeatmapData, getUserHabits, isRestDay } from "@/lib/actionHabit";
import { currentUser } from "@clerk/nextjs/server";
import { ArrowUpRight, CalendarDays } from "lucide-react";

export default async function HabitPage() {
  const user = await currentUser();
  const userDb = await getUser(user?.id as string);
  const userHabits = await getUserHabits(userDb?.id as string);


  const filteredDaily = userHabits.filter((item) => item.type !== "WEEKLY");
  const filteredWeekly = userHabits.filter((item) => item.type !== "DAILY");

  return (
    <section className="flex flex-col gap-4">
      <Card>
        <CardHeader><CardTitle>Habit Overview</CardTitle></CardHeader>
        <CardContent className="space-y-4">
          {filteredDaily.map(async (habit) => (
            <HabitDisplay
              key={habit.id}
              initialHabit={habit}
              initialRestDay={await isRestDay(habit.id, userDb.id)}
              initialHeatmapData={await generateHeatmapData(habit.id)}
            />
          ))}
          <div className="my-5 text-lg font-medium text-foreground">WEEKLY</div>
          {filteredWeekly.map(async (habit) => (
            <HabitDisplay
              key={habit.id}
              initialHabit={habit}
              initialRestDay={await isRestDay(habit.id, userDb.id)}
              initialHeatmapData={await generateHeatmapData(habit.id)}
            />
          ))}
        </CardContent>
      </Card>
    </section>
  );
}

export default async function MissionsComponents() {
  /// remove all await 
  const { userId } = await auth();

  if (!userId) {
    return Rnull
  }
  const user = await getUser(userId);
  await checkAchievementComplete(user?.id as string);
  const achievements = await getAllUserAchievements(user?.id as string);
  const streakDataValue = await getStreakFourDaysAgo(user?.id as string);
  const checkInsOfToday = await countCompletedHabitToday(user?.id as string);
  const questOfUser = await userQuest(user?.id as string);
  if (!questOfUser) {
    await generateDailyQuest(user?.id as string);
  }
  const habitOfUser = await getUserHabits(user?.id as string);

  return (
    <Suspense fallback={<Loading />}>
      <ContextProvider initialAchievements={achievements}>
        <div className="flex flex-col gap-4 size-full">
          <div className="flex flex-row gap-4 w-full">
            <DailyQuests
              initialQuest={questOfUser}
              initialHabit={habitOfUser}
              initialCheckIns={checkInsOfToday}
              userId={user?.id as string}
            />
            <StreakComponents initialStreakData={streakDataValue} />
          </div>
          <AchievementsComponent />
        </div>
      </ContextProvider>
    </Suspense>
  );
}

import AchievementsComponent from "@/components/asset_mission/AchievementsComponent";
import DailyQuests from "@/components/asset_mission/DailyQuests";
import StreakComponents from "@/components/asset_mission/StreakComponent";
import { ContextProvider } from "@/hooks/use-achievement";
import {
  checkAchievementComplete,
  getAllUserAchievements,
} from "@/lib/actionAchievement";
import { countCompletedHabitToday, getUserHabits } from "@/lib/actionHabit";
import { generateDailyQuest, userQuest } from "@/lib/actionQuest";
import { getStreakFourDaysAgo } from "@/lib/actionStreak";
import { getUser } from "@/lib/actionUser";
import { auth } from "@clerk/nextjs/server";
import { Suspense } from "react";
import Loading from "./loading";

export default function MissionsComponents() {
  const { userId } = await auth();

  if (!userId) {
    return null;
  }

  const user = getUser(userId); 
  const achievements = getAllUserAchievements(user?.id as string);  
  const streakDataValue = getStreakFourDaysAgo(user?.id as string); 
  const checkInsOfToday = countCompletedHabitToday(user?.id as string); 
  const questOfUser = userQuest(user?.id as string);  

  
  if (!questOfUser) {
    generateDailyQuest(user?.id as string);
  }

  const habitOfUser = getUserHabits(user?.id as string); 

  return (
// these component should all be client
    <Suspense fallback={<Loading />}>
      <ContextProvider initialAchievements={achievements}>
        <div className="flex flex-col gap-4 size-full">
          <div className="flex flex-row gap-4 w-full">
            <DailyQuests
              initialQuest={questOfUser}
              initialHabit={habitOfUser} 
              initialCheckIns={checkInsOfToday} 
              userId={user?.id as string}
            />
            <StreakComponents initialStreakData={streakDataValue} /> 
          </div>
          <AchievementsComponent />  
        </div>
      </ContextProvider>
    </Suspense>
  );
}

import { getUserHabits } from "@/lib/actionHabit";
import { getUser } from "@/lib/actionUser";
import { auth } from "@clerk/nextjs/server";
import { Diamond, PlusIcon, User } from "lucide-react";
import Link from "next/link";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Button } from "../ui/button";

export default async function Topbar() {
  const { userId } = await auth();

  const userDb = await getUser(userId as string);
  const allUserHabit = await getUserHabits(userDb?.id as string);

  return (
    <div className="flex w-full items-center justify-around border-b px-2 py-3">
      <div className="flex items-center gap-2">
        <h2 className="font-medium">{allUserHabit.length} HABIT</h2>
        <a href="/habitAction/add">
          <Button variant="outline" size="icon" asChild>
            <PlusIcon className="text-gray-400" strokeWidth={1.5} size={20} />
          </Button>
        </a>
      </div>
      <div className="flex flex-row items-center justify-center gap-2">
        <Avatar>
          <AvatarImage src={userDb?.image ?? ""} alt="profile picture" />
          <AvatarFallback>{userDb?.name}</AvatarFallback>
        </Avatar>
        <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full shadow-sm">
          <Diamond className="w-5 h-5 text-blue-500" />
          <span className="font-medium">{userDb?.gems as number}</span>
        </div>

        <Button
          asChild
          size="default"
          variant="ghost"
          className="flex items-center gap-2"
        >
          <Link
            href={{
              pathname: "/profile/my-profile",
              query: { userId },
            }}
          >
            <User className="h-4 w-4" />
            Profile
          </Link>
        </Button>
      </div>
    </div>
  );
}

const user = await currentUser();
const userDb = await getUser(user?.id as string);

import DailyMonitoring from "@/components/asset_stats/DailyMonitoring";
import QuickStatsComponent from "@/components/asset_stats/QuickStats";
import WeeklyMonitoringComponent from "@/components/asset_stats/WeeklyMonitoring";
import { generateDailyMonitoringData } from "@/lib/actionHabit";
import { generateChartWeeklyData, getQuickStatsData } from "@/lib/actionStats";
import { getUser } from "@/lib/actionUser";
import { currentUser } from "@clerk/nextjs/server";
import { Suspense } from "react";
import Loading from "./loading";

export default async function StatisticsPage() {
  const user = await currentUser();
  const userDb = await getUser(user?.id as string);

  const QuickStatsData = getQuickStatsData(userDb?.id as string);
  const logsData = generateDailyMonitoringData(user?.id as string);
  const chartData = generateChartWeeklyData(userDb?.id as string);

  // i tried many things, like putting all the following components in server/client etc etc but nothing made them faster
  return (
    <Suspense fallback={<Loading />}>
      <div className="grid grid-cols-1 gap-4">
        <QuickStatsComponent initialQuickStats={QuickStatsData} />
        <DailyMonitoring initialLogs={logsData} />
        <WeeklyMonitoringComponent initialChartData={chartData} />
      </div>
    </Suspense>
  );
}

import DailyMonitoring from "@/components/asset_stats/DailyMonitoring";
import QuickStatsComponent from "@/components/asset_stats/QuickStats";
import WeeklyMonitoringComponent from "@/components/asset_stats/WeeklyMonitoring";
import { generateDailyMonitoringData } from "@/lib/actionHabit";
import { generateChartWeeklyData, getQuickStatsData } from "@/lib/actionStats";
import { getUser } from "@/lib/actionUser";
import { currentUser } from "@clerk/nextjs/server";
import { Suspense } from "react";
import Loading from "./loading";

export default async function StatisticsPage() {

  return (
    <Suspense fallback={<Loading />}>
      <div className="grid grid-cols-1 gap-4">
        <QuickStatsComponent />
        <DailyMonitoring />
        <WeeklyMonitoringComponent />
      </div>
    </Suspense>
  );
}

export default async function QuickStatsComponent() {
  const { userId } = await auth()
  const user = await getUser(userId as string);
  const data = await getQuickStatsData(user?.id);
  const stats = [
    {
      name: "Active Habits",
      value: data?.activeHabits,
      icon: Activity,
    },
    { name: "Current Streak", value: data?.finalStreak, icon: Award },
    {
      name: "Completion Rate",
      value: `${data?.habitCompletionRate}%`,

      icon: TrendingUp,
    },
    {
      name: "Total Check-ins",
      value: data?.totalCheckIns,
      icon: Zap,
    },
  ];

  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle className="text-center">Quick Stats</CardTitle>
      </CardHeader>
      <CardContent className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {stats.map((stat, index) => (
          <Card key={index}>
            <CardContent className="flex flex-col items-center justify-center p-6">
              <stat.icon className="size-6" />
              <h3 className="mt-2 text-sm font-medium text-gray-900">
                {stat.name}
              </h3>
              <p className="mt-1 text-2xl font-semibold text-gray-700">
                {stat.value}
              </p>
            </CardContent>
          </Card>
        ))}
      </CardContent>
    </Card>
  );
}

  const { userId } = await auth()
  const user = await getUser(userId as string);

  const { userId } = await auth()
  const user = await getUser(userId as string);