import prisma from "@/lib/prisma";
import { getSessionUser } from "@/lib/auth";
import { PageHeader } from "@/components/layout/PageHeader";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Clock, MapPin, User } from "lucide-react";

const DAYS = [
  { id: 1, name: "Senin" },
  { id: 2, name: "Selasa" },
  { id: 3, name: "Rabu" },
  { id: 4, name: "Kamis" },
  { id: 5, name: "Jumat" },
  { id: 6, name: "Sabtu" },
];

export default async function StudentSchedulesPage() {
  const user = await getSessionUser();
  if (!user || !user.classId) return null;

  const schedules = await prisma.schedule.findMany({
    where: {
      teacherSubject: {
        classId: user.classId,
      },
    },
    include: {
      teacherSubject: {
        include: {
          subject: true,
          teacher: true,
        },
      },
    },
    orderBy: [{ dayOfWeek: "asc" }, { startTime: "asc" }],
  });

  return (
    <div className="space-y-6">
      <PageHeader
        title={`Jadwal Pelajaran Kelas ${user.className || "X.1"}`}
        description="Jadwal mata pelajaran mingguan Anda di SMAN 3 OKU."
        breadcrumbs={[
          { label: "Dashboard", href: "/student/dashboard" },
          { label: "Jadwal Pelajaran" },
        ]}
      />

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
        {DAYS.map((day) => {
          const daySlots = schedules.filter((s) => s.dayOfWeek === day.id);
          return (
            <div
              key={day.id}
              className="flex flex-col rounded-2xl border border-slate-200 bg-white p-3.5 shadow-sm space-y-3 min-h-[260px]"
            >
              <div className="flex items-center justify-between border-b border-slate-100 pb-2">
                <span className="font-bold text-xs text-slate-800 uppercase">
                  {day.name}
                </span>
                <span className="text-[10px] text-slate-400 font-bold">
                  {daySlots.length} Mapel
                </span>
              </div>

              <div className="space-y-2 flex-1">
                {daySlots.length === 0 ? (
                  <p className="text-center text-xs text-slate-400 py-10">
                    Tidak ada jadwal
                  </p>
                ) : (
                  daySlots.map((slot) => (
                    <div
                      key={slot.id}
                      className="p-3 rounded-xl border border-blue-100 bg-blue-50/50 space-y-1"
                    >
                      <div className="text-xs font-mono font-bold text-blue-700">
                        {slot.startTime} - {slot.endTime}
                      </div>

                      <h5 className="text-xs font-bold text-slate-800">
                        {slot.teacherSubject.subject.name}
                      </h5>

                      <p className="text-[10px] text-slate-500 flex items-center gap-1">
                        <User className="h-3 w-3" />
                        {slot.teacherSubject.teacher.fullName}
                      </p>

                      {slot.room && (
                        <p className="text-[10px] text-slate-400 flex items-center gap-1">
                          <MapPin className="h-3 w-3" />
                          {slot.room}
                        </p>
                      )}
                    </div>
                  ))
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}