import { getServerSession } from "next-auth/next";
import { authOptions } from "@/app/api/auth/options";
import { redirect } from "next/navigation";
import { Suspense } from "react";
import { QuoteCard } from "@/components/quote-card";
import { Calendar } from "@/components/calendar";
import { News } from "@/components/news";
import { Duties } from "@/components/flow";
import { Email } from "@/components/email";
import { Parole } from "@/components/parole";
import { HomeLogoutCheck } from "@/components/home-logout-check";

// Loading skeleton components
function QuoteCardSkeleton() {
  return (
    <div className="col-span-3 animate-pulse">
      <div className="h-48 bg-gray-200 rounded-lg"></div>
    </div>
  );
}

function CalendarSkeleton() {
  return (
    <div className="col-span-3 animate-pulse">
      <div className="h-48 bg-gray-200 rounded-lg"></div>
    </div>
  );
}

function NewsSkeleton() {
  return (
    <div className="col-span-3 animate-pulse">
      <div className="h-48 bg-gray-200 rounded-lg"></div>
    </div>
  );
}

function DutiesSkeleton() {
  return (
    <div className="col-span-3 animate-pulse">
      <div className="h-48 bg-gray-200 rounded-lg"></div>
    </div>
  );
}

function EmailSkeleton() {
  return (
    <div className="col-span-6 animate-pulse">
      <div className="h-96 bg-gray-200 rounded-lg"></div>
    </div>
  );
}

function ParoleSkeleton() {
    return (
    <div className="col-span-6 animate-pulse">
      <div className="h-96 bg-gray-200 rounded-lg"></div>
    </div>
    );
}

export default async function Home() {
  // Check authentication on server side
  const session = await getServerSession(authOptions);
  
  if (!session) {
    redirect("/signin");
  }

  return (
    <>
      <HomeLogoutCheck />
    <main className="h-screen overflow-auto">
      <div className="container mx-auto p-4 mt-12">
        {/* First row */}
        <div className="grid grid-cols-12 gap-4 mb-4">
            <Suspense fallback={<QuoteCardSkeleton />}>
          <div className="col-span-3">
            <QuoteCard />
          </div>
            </Suspense>
            <Suspense fallback={<CalendarSkeleton />}>
          <div className="col-span-3">
            <Calendar />
          </div>
            </Suspense>
            <Suspense fallback={<NewsSkeleton />}>
          <div className="col-span-3">
            <News />
          </div>
            </Suspense>
            <Suspense fallback={<DutiesSkeleton />}>
          <div className="col-span-3">
            <Duties />
          </div>
            </Suspense>
        </div>
        
        {/* Second row */}
        <div className="grid grid-cols-12 gap-4">
            <Suspense fallback={<EmailSkeleton />}>
          <div className="col-span-6">
            <Email />
          </div>
            </Suspense>
            <Suspense fallback={<ParoleSkeleton />}>
          <div className="col-span-6">
            <Parole />
          </div>
            </Suspense>
        </div>
      </div>
    </main>
    </>
  );
}