import Announcements from "@/components/Announcements";
import BigCalendarContainer from "@/components/BigCalendarContainer";
import BigCalendar from "@/components/BigCalender";
import EventCalendar from "@/components/EventCalendar";
import { getSupabaseClient } from "@/lib/supabase";
import { auth } from "@clerk/nextjs/server";

const StudentPage = async () => {
  const { userId } = auth();

  const supabase = await getSupabaseClient();
  const { data: studentClasses, error: linkError } = await supabase
    .from("StudentClass")
    .select("classId")
    .eq("studentId", userId!);

  if (linkError) {
    console.error("Error fetching student classes:", linkError);
  }

  const classIds = (studentClasses ?? []).map((r) => r.classId);

  return (
    <div className="p-4 flex gap-4 flex-col xl:flex-row">
      {/* LEFT */}
      <div className="w-full xl:w-2/3">
        <div className="h-full bg-white p-4 rounded-md">
          <h1 className="text-xl font-semibold">Schedule</h1>
          {classIds.length > 0 ? (
            <BigCalendarContainer type="classId" id={classIds} />
          ) : (
            <div className="text-gray-500 mt-4">No classes assigned. Your schedule will appear here.</div>
          )}
        </div>
      </div>
      {/* RIGHT */}
      <div className="w-full xl:w-1/3 flex flex-col gap-8">
        <EventCalendar />
        <Announcements />
      </div>
    </div>
  );
};

export default StudentPage;
