import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { redirect } from "next/navigation";
import AsistenciaClient from "./AsistenciaClient";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { getClaseAsistenciaDetalle } from "@/lib/mariadb-relations";

export default async function AsistenciaPage({ params }: { params: { claseId: string } }) {
  const session = await getServerSession(authOptions);
  if (!session?.user?.id) redirect("/api/auth/signin");

  if (session.user.role !== "PROFESOR" && session.user.role !== "SUPERADMIN" && session.user.role !== "ADMIN_COLEGIO") {
    redirect("/api/auth/signin");
  }

  const { claseId } = params;
  const clase = await getClaseAsistenciaDetalle(claseId);

  if (!clase) {
    return <div className="p-10 text-center">Clase no encontrada.</div>;
  }

  const alumnosData = clase.curso.inscripcion.map((ins) => {
    const asis = clase.asistencia.find((a) => a.inscripcionId === ins.id);

    return {
      inscripcionId: ins.id,
      nombre: `${ins.user.name || ""} ${ins.user.apellido || ""}`.trim() || ins.user.email,
      telefono: ins.user.telefono || "",
      status: ins.user.status,
      asistio: asis ? asis.asistio : true,
      pagoDebe: asis ? asis.pagoDebe : false,
      observacion: asis?.observacion || "",
    };
  });

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center">
      <header className="bg-[#1e2a47] text-white w-full px-8 py-6 shadow-lg flex justify-center">
        <div className="max-w-6xl w-full flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/profesor" className="bg-white/10 hover:bg-white/20 p-2 rounded-full transition-colors">
              <ArrowLeft className="w-5 h-5"/>
            </Link>
            <div>
              <h1 className="text-xl font-extrabold">Control de Asistencia</h1>
              <p className="text-gray-300 text-sm mt-1">{clase.curso.titulo} - Clase: {clase.titulo} ({clase.numero})</p>
            </div>
          </div>
        </div>
      </header>
      <main className="max-w-6xl w-full mx-auto px-8 py-10">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
          <AsistenciaClient claseId={clase.id} alumnosIniciales={alumnosData} />
        </div>
      </main>
    </div>
  );
}