cronmaster/app/page.tsx

import { SystemInfoCard } from "@/app/_components/FeatureComponents/System/SystemInfo";
import { TabbedInterface } from "@/app/_components/FeatureComponents/Layout/TabbedInterface";
import { getCronJobs } from "@/app/_utils/cronjob-utils";
import { fetchScripts } from "@/app/_server/actions/scripts";
import { ThemeToggle } from "@/app/_components/FeatureComponents/Theme/ThemeToggle";
import { LogoutButton } from "@/app/_components/FeatureComponents/LoginForm/LogoutButton";
import { ToastContainer } from "@/app/_components/GlobalComponents/UIElements/Toast";
import { PWAInstallPrompt } from "@/app/_components/FeatureComponents/PWA/PWAInstallPrompt";
import { WrapperScriptWarning } from "@/app/_components/FeatureComponents/System/WrapperScriptWarning";
import { getTranslations } from "@/app/_server/actions/translations";
import { SSEProvider } from "@/app/_contexts/SSEContext";

export const dynamic = "force-dynamic";
export const maxDuration = 300;

export default async function Home() {
  const t = await getTranslations();
  const liveUpdatesEnabled =
    (typeof process.env.LIVE_UPDATES === "boolean" &&
      process.env.LIVE_UPDATES === true) ||
    process.env.LIVE_UPDATES !== "false";

  const [cronJobs, scripts] = await Promise.all([
    getCronJobs(),
    fetchScripts(),
  ]);

  const initialSystemInfo = {
    hostname: "Loading...",
    platform: "Loading...",
    uptime: "Loading...",
    memory: {
      total: "0 B",
      used: "0 B",
      free: "0 B",
      usage: 0,
      status: "Loading",
    },
    cpu: {
      model: "Loading...",
      cores: 0,
      usage: 0,
      status: "Loading",
    },
    gpu: {
      model: "Loading...",
      status: "Loading",
    },
    disk: {
      total: "0 B",
      used: "0 B",
      free: "0 B",
      usage: 0,
      status: "Loading",
    },
    systemStatus: {
      overall: "Loading",
      details: "Fetching system information...",
    },
  };

  return (
    <SSEProvider liveUpdatesEnabled={liveUpdatesEnabled}>
      <div className="min-h-screen relative">
        <div className="hero-gradient absolute inset-0 -z-10"></div>
        <div className="relative z-10">
          <header className="border-b border-border/50 bg-background/80 backdrop-blur-md sticky top-0 z-20 shadow-sm lg:h-[90px]">
            <div className="container mx-auto px-4 py-4">
              <div className="flex items-center justify-between lg:justify-center">
                <div className="flex items-center gap-4">
                  <div className="relative">
                    <img src="/logo.png" alt="logo" className="w-14 h-14" />
                    <div className="absolute top-0 right-0 w-3 h-3 bg-emerald-500 rounded-full animate-pulse"></div>
                  </div>
                  <div>
                    <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold brand-gradient brand-text">
                      Cr*nMaster
                    </h1>
                    <p className="text-xs text-muted-foreground font-mono tracking-wide">
                      {t("common.cronManagementMadeEasy")}
                    </p>
                  </div>
                </div>
                {process.env.AUTH_PASSWORD && (
                  <div className="lg:absolute lg:right-10">
                    <LogoutButton />
                  </div>
                )}
              </div>
            </div>
          </header>

          {process.env.DISABLE_SYSTEM_STATS !== "true" && (
            <SystemInfoCard systemInfo={initialSystemInfo} />
          )}

          <main className={`${process.env.DISABLE_SYSTEM_STATS === "true" ? "lg:ml-0" : "lg:ml-80"} transition-all duration-300 ml-0 sidebar-collapsed:lg:ml-16`}>
            <div className="container mx-auto px-4 py-8 lg:px-8">
              <WrapperScriptWarning />
              <TabbedInterface cronJobs={cronJobs} scripts={scripts} />
            </div>
          </main>
        </div>

        <ToastContainer />

        <div className="flex items-center gap-2 fixed bottom-4 left-4 lg:right-4 lg:left-auto z-10 bg-background/80 backdrop-blur-md border border-border/50 rounded-lg p-1">
          <ThemeToggle />
          <PWAInstallPrompt />
        </div>
      </div>
    </SSEProvider>
  );
}