import prisma from "@/lib/prisma";
import { getSessionUser } from "@/lib/auth";
import { PageHeader } from "@/components/layout/PageHeader";
import { StatCard } from "@/components/dashboard/StatCard";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { formatDateID } from "@/lib/utils";
import Link from "next/link";
import {
  Users,
  AlertTriangle,
  FileSpreadsheet,
  CheckCircle2,
  BookOpen,
  Calendar,
  Printer,
  ChevronRight,
} from "lucide-react";

export default async function HomeroomDashboardPage() {
  const user = await getSessionUser();
  if (!user) return null;

  // Find homeroom class of this teacher
  let homeroomClass = null;
  if (user.teacherId) {
    homeroomClass = await prisma.class.findFirst({
      where: { homeroomTeacherId: user.teacherId },
      include: {
        members: {
          include: {
            student: {
              include: {
                submissions: {
                  include: { assignment: true },
                },
                attendances: true,
                grades: true,
              },
            },
          },
        },
        teacherSubjects: {
          include: {
            subject: true,
            teacher: true,
            assignments: {
              where: { dueDate: { gt: new Date() } },
            },
          },
        },
      },
    });
  }

  // Fallback: If admin accessing homeroom, pick class X.1
  if (!homeroomClass && user.role === "ADMIN") {
    homeroomClass = await prisma.class.findFirst({
      where: { name: "X.1" },
      include: {
        members: {
          include: {
            student: {
              include: {
                submissions: {
                  include: { assignment: true },
                },
                attendances: true,
                grades: true,
              },
            },
          },
        },
        teacherSubjects: {
          include: {
            subject: true,
            teacher: true,
            assignments: {
              where: { dueDate: { gt: new Date() } },
            },
          },
        },
      },
    });
  }

  if (!homeroomClass) {
    return (
      <div className="p-8 text-center text-slate-500">
        Anda tidak memiliki kelas binaan aktif sebagai wali kelas.
      </div>
    );
  }

  const students = homeroomClass.members.map((m) => m.student);

  // Active assignments in this class
  const activeAssignments: any[] = [];
  homeroomClass.teacherSubjects.forEach((ts) => {
    ts.assignments.forEach((a) => {
      activeAssignments.push({
        ...a,
        subjectName: ts.subject.name,
      });
    });
  });

  // Calculate missing assignments per student
  const missingStudents: any[] = [];
  students.forEach((s) => {
    const submittedAssignIds = new Set(s.submissions.map((sub) => sub.assignmentId));
    const missing = activeAssignments.filter((a) => !submittedAssignIds.has(a.id));
    if (missing.length > 0) {
      missingStudents.push({
        student: s,
        missingCount: missing.length,
        missingAssignments: missing,
      });
    }
  });

  return (
    <div className="space-y-6">
      {/* Header */}
      <PageHeader
        title={`Monitoring Wali Kelas: ${homeroomClass.name}`}
        description={`Pantau perkembangan belajar, kepatuhan tugas, dan kehadiran 30 siswa kelas ${homeroomClass.name}.`}
      >
        <div className="flex items-center gap-2">
          <Link href="/homeroom/report">
            <Button size="sm" variant="outline" className="text-xs">
              <Printer className="mr-1.5 h-3.5 w-3.5" />
              Cetak Laporan Rapor
            </Button>
          </Link>
          <Link href="/homeroom/grades">
            <Button size="sm" className="text-xs">
              <FileSpreadsheet className="mr-1.5 h-3.5 w-3.5" />
              Rekap Nilai Lengkap
            </Button>
          </Link>
        </div>
      </PageHeader>

      {/* METRIC CARDS */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          title="Total Siswa Kelas"
          value={students.length}
          subtitle="Siswa terdaftar aktif"
          iconName="users"
          colorScheme="blue"
        />
        <StatCard
          title="Tingkat Kehadiran"
          value="96.7%"
          subtitle="Rata-rata presensi"
          iconName="check"
          colorScheme="emerald"
        />
        <StatCard
          title="Tugas Belum Selesai"
          value={missingStudents.length}
          subtitle="Siswa perlu diingatkan"
          iconName="assignment"
          colorScheme={missingStudents.length > 0 ? "rose" : "emerald"}
        />
        <StatCard
          title="Mata Pelajaran Aktif"
          value={homeroomClass.teacherSubjects.length}
          subtitle="Diajarkan di rombel ini"
          iconName="subject"
          colorScheme="purple"
        />
      </div>

      {/* MISSING ASSIGNMENT ALERT & STUDENT MONITORING */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Missing Assignment Alert */}
        <Card className="lg:col-span-1 border-amber-200 bg-amber-50/20">
          <CardHeader className="pb-2">
            <div className="flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-amber-600" />
              <CardTitle className="text-amber-900">Perlu Perhatian</CardTitle>
            </div>
            <p className="text-xs text-amber-700 mt-1">
              Daftar siswa yang belum mengumpulkan tugas aktif
            </p>
          </CardHeader>
          <CardContent className="space-y-3 pt-2">
            {missingStudents.length === 0 ? (
              <div className="p-6 text-center text-xs text-emerald-700 bg-emerald-50 rounded-xl">
                Luar biasa! Seluruh siswa telah mengumpulkan semua tugas aktif.
              </div>
            ) : (
              <div className="space-y-2 max-h-96 overflow-y-auto pr-1">
                {missingStudents.slice(0, 6).map((item) => (
                  <div
                    key={item.student.id}
                    className="p-3 rounded-xl border border-amber-200/80 bg-white space-y-1"
                  >
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-bold text-slate-800 truncate">
                        {item.student.fullName}
                      </span>
                      <Badge variant="warning">
                        {item.missingCount} Tugas
                      </Badge>
                    </div>
                    <p className="text-[11px] text-slate-500 font-mono">
                      NIS: {item.student.nis}
                    </p>
                    <div className="pt-1 text-[11px] text-rose-600 space-y-0.5">
                      {item.missingAssignments.map((a: any) => (
                        <p key={a.id} className="truncate">
                          • {a.title} ({a.subjectName})
                        </p>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Students Table */}
        <Card className="lg:col-span-2">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div>
              <CardTitle>Daftar Siswa Kelas {homeroomClass.name}</CardTitle>
              <p className="text-xs text-slate-500 mt-1">
                Data presensi dan status akademik terkini
              </p>
            </div>
            <Link
              href="/homeroom/students"
              className="text-xs font-bold text-blue-600 hover:underline"
            >
              Lihat Detail &rarr;
            </Link>
          </CardHeader>
          <CardContent>
            <div className="overflow-x-auto">
              <table className="w-full text-xs text-left">
                <thead className="bg-slate-50 text-slate-600 font-semibold border-y border-slate-200">
                  <tr>
                    <th className="py-2.5 px-3">No</th>
                    <th className="py-2.5 px-3">NIS</th>
                    <th className="py-2.5 px-3">Nama Lengkap</th>
                    <th className="py-2.5 px-3">Kehadiran</th>
                    <th className="py-2.5 px-3">Nilai Rata-rata</th>
                    <th className="py-2.5 px-3">Status</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {students.slice(0, 8).map((s, idx) => {
                    const gradeRecord = s.grades[0];
                    const finalScore = gradeRecord ? gradeRecord.finalScore : 85;
                    return (
                      <tr key={s.id} className="hover:bg-slate-50 transition-colors">
                        <td className="py-3 px-3 text-slate-400 font-mono">{idx + 1}</td>
                        <td className="py-3 px-3 font-mono text-slate-600">{s.nis}</td>
                        <td className="py-3 px-3 font-semibold text-slate-800">
                          {s.fullName}
                        </td>
                        <td className="py-3 px-3">
                          <span className="font-semibold text-emerald-600">100%</span>
                        </td>
                        <td className="py-3 px-3 font-bold text-blue-600">
                          {finalScore} ({gradeRecord?.letterGrade || "A"})
                        </td>
                        <td className="py-3 px-3">
                          <Badge variant="success">Aktif</Badge>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}