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


const ParentPage = async () => {
  const { userId } = auth();
  const currentUserId = userId;

  const supabase = await getSupabaseClient();
  const { data: students, error } = await supabase
    .from("Student")
    .select("*, studentClasses:StudentClass(classId)");

  if (error) {
    console.error("Error fetching parent students:", error);
  }

  const studentsList = (students || []) as { id: string; name: string; surname: string; studentClasses: { classId: number }[] }[];

  return (
    <div className="flex-1 p-4 flex gap-4 flex-col xl:flex-row">
      {/* LEFT */}
      <div className="">
        {studentsList.map((student) => {
          const classIds = student.studentClasses?.map((sc) => sc.classId) ?? [];
          return (
            <div className="w-full xl:w-2/3" key={student.id}>
              <div className="h-full bg-white p-4 rounded-md">
                <h1 className="text-xl font-semibold">
                  Schedule ({student.name} {student.surname})
                </h1>
                {classIds.length > 0 ? (
                  <BigCalendarContainer type="classId" id={classIds} />
                ) : (
                  <div className="text-gray-500 mt-4">No classes assigned.</div>
                )}
              </div>
            </div>
          );
        })}
      </div>
      {/* RIGHT */}
      <div className="w-full xl:w-1/3 flex flex-col gap-8">
        <Announcements />
      </div>
    </div>
  );
};

export default ParentPage;
