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 { Button } from "@/components/ui/button";
import Link from "next/link";
import { redirect } from "next/navigation";
import {
  Layers,
  Users,
  BookOpen,
  ClipboardList,
  Clock,
  ChevronRight,
  Award,
  Calendar,
} from "lucide-react";

export default async function TeacherClassesPage() {
  const user = await getSessionUser();
  if (!user || user.role !== "TEACHER") redirect("/login");

  let teacherSubjects: any[] = [];
  if (user.teacherId) {
    teacherSubjects = await prisma.teacherSubject.findMany({
      where: { teacherId: user.teacherId },
      include: {
        class: {
          include: {
            academicYear: true,
            _count: { select: { members: true } },
          },
        },
        subject: true,
        schedules: true,
        _count: {
          select: {
            materials: true,
            assignments: true,
            quizzes: true,
          },
        },
      },
      orderBy: { class: { name: "asc" } },
    });
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title="Kelas Yang Diajar"
        description="Daftar rombongan belajar dan mata pelajaran yang Anda ampu pada semester berjalan."
        breadcrumbs={[
          { label: "Guru", href: "/teacher/dashboard" },
          { label: "Kelas Diajar" },
        ]}
      />

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {teacherSubjects.length === 0 ? (
          <div className="col-span-full p-12 text-center text-slate-500 bg-white rounded-xl border border-slate-200">
            Belum ada penugasan kelas untuk Anda pada semester ini.
          </div>
        ) : (
          teacherSubjects.map((ts) => (
            <Card key={ts.id} className="overflow-hidden hover:shadow-md transition-shadow">
              <div className="bg-gradient-to-r from-blue-700 to-indigo-800 p-4 text-white">
                <div className="flex items-center justify-between">
                  <Badge variant="secondary" className="bg-white/20 text-white border-none font-bold">
                    Tingkat {ts.class.gradeLevel}
                  </Badge>
                  <span className="text-xs text-blue-100 font-mono">
                    {ts.subject.code}
                  </span>
                </div>
                <h3 className="text-xl font-bold mt-2">{ts.class.name}</h3>
                <p className="text-xs text-blue-100 font-medium">{ts.subject.name}</p>
              </div>

              <CardContent className="p-4 space-y-4">
                {/* Schedule info */}
                <div className="flex items-center gap-2 text-xs text-slate-600">
                  <Clock className="h-4 w-4 text-slate-400 shrink-0" />
                  {ts.schedules.length > 0 ? (
                    <span>
                      {ts.schedules[0].dayOfWeek}, {ts.schedules[0].startTime} - {ts.schedules[0].endTime}
                    </span>
                  ) : (
                    <span className="text-slate-400">Jadwal belum diatur</span>
                  )}
                </div>

                {/* Counts */}
                <div className="grid grid-cols-3 gap-2 py-2 border-y border-slate-100 text-center">
                  <div>
                    <span className="text-[10px] text-slate-500">Siswa</span>
                    <p className="text-sm font-bold text-slate-800">
                      {ts.class._count.members}
                    </p>
                  </div>
                  <div>
                    <span className="text-[10px] text-slate-500">Materi</span>
                    <p className="text-sm font-bold text-blue-600">
                      {ts._count.materials}
                    </p>
                  </div>
                  <div>
                    <span className="text-[10px] text-slate-500">Tugas</span>
                    <p className="text-sm font-bold text-purple-600">
                      {ts._count.assignments}
                    </p>
                  </div>
                </div>

                {/* Quick actions */}
                <div className="grid grid-cols-2 gap-2 pt-1">
                  <Link href={`/teacher/attendance?classId=${ts.classId}`}>
                    <Button variant="outline" size="sm" className="w-full text-xs">
                      <Users className="h-3.5 w-3.5 mr-1" />
                      Presensi
                    </Button>
                  </Link>
                  <Link href={`/teacher/materials?classId=${ts.classId}`}>
                    <Button variant="outline" size="sm" className="w-full text-xs">
                      <BookOpen className="h-3.5 w-3.5 mr-1" />
                      Materi
                    </Button>
                  </Link>
                  <Link href={`/teacher/assignments?classId=${ts.classId}`}>
                    <Button variant="outline" size="sm" className="w-full text-xs">
                      <ClipboardList className="h-3.5 w-3.5 mr-1" />
                      Tugas
                    </Button>
                  </Link>
                  <Link href={`/teacher/gradebook?teacherSubjectId=${ts.id}`}>
                    <Button variant="outline" size="sm" className="w-full text-xs">
                      <Award className="h-3.5 w-3.5 mr-1" />
                      Nilai
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>
    </div>
  );
}