"use client";

import { useState } from "react";
import {
  BookOpen,
  Users,
  GraduationCap,
  TrendingUp,
  Plus,
  Edit,
  Trash2,
  Search,
  CheckCircle,
  XCircle,
  Eye,
  Layers,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { AddAdminModal } from "@/components/dashboard/add-admin-modal";
import { CreateCourseModal } from "@/components/dashboard/create-course-modal";
import { AddCohortModal } from "@/components/dashboard/add-cohort-modal";
import { Spinner } from "@/components/ui/spinner";
import { useAdminList, useAdminStats, useRemoveAdmin } from "@/lib/api/hooks/useAdmin";
import { useCourseList, useAssignAdmin, useUnassignAdmin } from "@/lib/api/hooks/useCourse";
import { mockStudents } from "@/lib/mock-data";
import type { AdminListItem, CourseListItem } from "@/types/api";
import type { MockStudent } from "@/lib/mock-data";
import type { LucideIcon } from "lucide-react";

// ── Stats card ───────────────────────────────────────────────

function StatCard({
  icon: Icon,
  gradient,
  label,
  value,
  active,
}: {
  icon: LucideIcon;
  gradient: string;
  label: string;
  value: string | number;
  active?: boolean;
}) {
  return (
    <div
      className={`p-4 sm:p-6 bg-gradient-to-br from-gray-900 to-black border rounded-xl shadow-2xl ${
        active ? "border-blue-500" : "border-gray-800"
      }`}
    >
      <div className="mb-3 sm:mb-4">
        <div className={`inline-flex p-2.5 sm:p-3 bg-gradient-to-br ${gradient} rounded-xl`}>
          <Icon className="size-5 sm:size-6 text-white" />
        </div>
      </div>
      <p className="text-xs sm:text-sm text-gray-400 mb-1">{label}</p>
      <p className="text-2xl sm:text-4xl font-bold text-white">{value}</p>
    </div>
  );
}

// ── Status badge ─────────────────────────────────────────────

function StatusBadge({ status }: { status: string }) {
  const isActive = status === "active" || status === "Passed";
  return (
    <span
      className={`px-2.5 py-1 rounded-full text-xs sm:text-sm font-semibold inline-flex items-center gap-1 ${
        isActive
          ? "bg-green-500/20 text-green-400 border border-green-500"
          : "bg-red-500/20 text-red-400 border border-red-500"
      }`}
    >
      {isActive ? <CheckCircle className="size-3" /> : <XCircle className="size-3" />}
      {status}
    </span>
  );
}

// ── Grade badge ──────────────────────────────────────────────

function GradeBadge({ grade }: { grade: string }) {
  const colors: Record<string, string> = {
    A: "bg-green-500/20 text-green-400 border-green-500",
    B: "bg-blue-500/20 text-blue-400 border-blue-500",
    C: "bg-yellow-500/20 text-yellow-400 border-yellow-500",
    D: "bg-orange-500/20 text-orange-400 border-orange-500",
  };
  const c = colors[grade] ?? "bg-red-500/20 text-red-400 border-red-500";
  return (
    <span className={`px-3 py-1 rounded-full text-sm font-bold border ${c}`}>
      {grade}
    </span>
  );
}

// ── Mobile admin card ────────────────────────────────────────

function AdminCard({
  admin,
  onEdit,
  onDelete,
}: {
  admin: AdminListItem;
  onEdit: () => void;
  onDelete: () => void;
}) {
  return (
    <div className="p-4 bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl space-y-3">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-white font-medium">{admin.name}</p>
          <p className="text-gray-400 text-sm">{admin.email}</p>
        </div>
        <span className="text-gray-500 text-xs">#{admin.id.slice(0, 6)}</span>
      </div>
      <div>
        {admin.course ? (
          <span className="px-2 py-0.5 bg-blue-500/20 text-blue-400 text-xs rounded-full border border-blue-500">
            {admin.course.name}
          </span>
        ) : (
          <span className="text-gray-500 text-xs">No course assigned</span>
        )}
      </div>
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span className="text-gray-500 text-xs">{admin.dateAdded}</span>
          <StatusBadge status={admin.status} />
        </div>
        <div className="flex gap-2">
          <Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white" onClick={onEdit}>
            <Edit className="size-4" />
          </Button>
          <Button size="sm" variant="danger" onClick={onDelete}>
            <Trash2 className="size-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}

// ── Mobile student card ──────────────────────────────────────

function StudentCard({ student }: { student: MockStudent }) {
  return (
    <div className="p-4 bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl space-y-3">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-white font-medium">{student.name}</p>
          <p className="text-gray-400 text-sm">{student.email}</p>
        </div>
        <span className="text-gray-500 text-xs">{student.studentId}</span>
      </div>
      <div className="flex items-center gap-2 flex-wrap">
        <GradeBadge grade={student.grade} />
        <StatusBadge status={student.status} />
      </div>
      <div className="flex items-center justify-between">
        <span className="text-white text-sm font-semibold">
          {student.score}/{student.totalMarks} ({student.percentage}%)
        </span>
        <Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
          <Eye className="size-4 mr-1" />
          View
        </Button>
      </div>
    </div>
  );
}

// ── Course card with cohorts ─────────────────────────────────

function CourseCard({
  course,
  onAddCohort,
  onAssign,
  onUnassign,
  assigningId,
}: {
  course: CourseListItem;
  onAddCohort: () => void;
  onAssign: (cohortId: string) => void;
  onUnassign: (cohortId: string) => void;
  assigningId: string | null;
}) {
  const totalStudents = course.cohorts.reduce((sum, c) => sum + c.totalStudents, 0);
  const totalExams = course.cohorts.reduce((sum, c) => sum + c.totalExams, 0);
  const assignedCount = course.cohorts.filter((c) => c.adminAssigned).length;

  return (
    <div className="p-5 sm:p-6 bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl shadow-2xl hover:border-gray-700 transition-all duration-200">
      <div className="flex items-start justify-between mb-4">
        <div className="p-2.5 sm:p-3 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl">
          <BookOpen className="size-5 sm:size-6 text-white" />
        </div>
        <button
          onClick={onAddCohort}
          className="text-xs text-blue-400 hover:text-blue-300 transition-colors flex items-center gap-1"
        >
          <Plus className="size-3.5" />
          Add Cohort
        </button>
      </div>
      <h3 className="text-lg sm:text-xl font-bold text-white mb-4">
        {course.name}
      </h3>
      <div className="space-y-2.5 sm:space-y-3 mb-4">
        <div className="flex items-center justify-between">
          <span className="text-gray-400 text-sm">Admin</span>
          <span className="text-white font-medium text-sm truncate ml-2 max-w-[60%] text-right">
            {course.admin.name}
          </span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-gray-400 text-sm">Students</span>
          <span className="text-white font-semibold text-sm">{totalStudents}</span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-gray-400 text-sm">Exams</span>
          <span className="text-white font-semibold text-sm">{totalExams}</span>
        </div>
        <div className="flex items-center justify-between">
          <span className="text-gray-400 text-sm">Created</span>
          <span className="text-gray-400 text-sm">{course.createdAt}</span>
        </div>
      </div>

      {/* Cohorts */}
      {course.cohorts.length > 0 && (
        <div className="border-t border-gray-800 pt-3">
          <p className="text-xs text-gray-500 mb-2 flex items-center gap-1.5">
            <Layers className="size-3.5" />
            {course.cohorts.length} {course.cohorts.length === 1 ? "Cohort" : "Cohorts"}
            {assignedCount > 0 && (
              <span className="text-green-400 ml-1">({assignedCount} assigned)</span>
            )}
          </p>
          <div className="space-y-2">
            {course.cohorts.map((cohort) => {
              const isAssigned = cohort.adminAssigned === true;
              const isToggling = assigningId === cohort.id;
              return (
                <div
                  key={cohort.id}
                  className={`flex items-center justify-between px-3 py-2.5 rounded-lg text-xs ${
                    isAssigned ? "bg-green-500/10 border border-green-500/20" : "bg-gray-800/50"
                  }`}
                >
                  <div className="min-w-0">
                    <span className="text-white font-medium">
                      {cohort.batch} <span className="text-gray-500">({cohort.month} {cohort.year})</span>
                    </span>
                    <div className="flex gap-3 text-gray-400 mt-0.5">
                      <span>{cohort.totalStudents} students</span>
                      <span>{cohort.totalExams} exams</span>
                    </div>
                  </div>
                  <button
                    onClick={() => isAssigned ? onUnassign(cohort.id) : onAssign(cohort.id)}
                    disabled={isToggling}
                    className={`px-2.5 py-1 rounded-full text-xs font-semibold shrink-0 ml-2 transition-colors ${
                      isAssigned
                        ? "bg-green-500/20 text-green-400 border border-green-500 hover:bg-red-500/20 hover:text-red-400 hover:border-red-500"
                        : "bg-gray-700 text-gray-400 border border-gray-600 hover:bg-green-500/20 hover:text-green-400 hover:border-green-500"
                    }`}
                  >
                    {isToggling ? "..." : isAssigned ? "Assigned" : "Assign"}
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

// ── Main dashboard ───────────────────────────────────────────

type ViewType = "overview" | "admins" | "students";

export default function SuperAdminDashboard() {
  const [activeView, setActiveView] = useState<ViewType>("admins");
  const [searchQuery, setSearchQuery] = useState("");
  const [showAddModal, setShowAddModal] = useState(false);
  const [showCourseModal, setShowCourseModal] = useState(false);
  const [showCohortModal, setShowCohortModal] = useState<{ courseId: string; courseName: string } | null>(null);
  const [courseFilter, setCourseFilter] = useState("all");

  // Real API data
  const { data: adminData, isLoading: adminsLoading } = useAdminList(
    searchQuery ? { search: searchQuery } : undefined
  );
  const { data: stats, isLoading: statsLoading } = useAdminStats();
  const { data: courseData, isLoading: coursesLoading } = useCourseList();
  const removeAdmin = useRemoveAdmin();
  const assignAdmin = useAssignAdmin();
  const unassignAdmin = useUnassignAdmin();
  const [assigningCohortId, setAssigningCohortId] = useState<string | null>(null);

  const admins = adminData?.admins ?? [];
  const courses = courseData?.courses ?? [];

  // Students still use mock data (no endpoint yet)
  const filteredStudents = mockStudents.filter((student) => {
    const matchesSearch =
      student.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      student.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      student.studentId.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCourse =
      courseFilter === "all" || student.courseId === courseFilter;
    return matchesSearch && matchesCourse;
  });

  function handleDeleteAdmin(admin: AdminListItem) {
    if (!confirm(`Are you sure you want to remove ${admin.name}?`)) return;
    removeAdmin.mutate(admin.id);
  }

  function handleAssign(courseId: string, cohortId: string) {
    setAssigningCohortId(cohortId);
    assignAdmin.mutate(
      { courseId, cohortId },
      { onSettled: () => setAssigningCohortId(null) }
    );
  }

  function handleUnassign(courseId: string, cohortId: string) {
    setAssigningCohortId(cohortId);
    unassignAdmin.mutate(
      { courseId, cohortId },
      { onSettled: () => setAssigningCohortId(null) }
    );
  }

  return (
    <div className="space-y-6 sm:space-y-8">
      {/* Header */}
      <div className="flex flex-col gap-4">
        <div>
          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white">
            Super Admin Control Center
          </h1>
          <p className="text-sm sm:text-base text-gray-400 mt-1">
            Manage all courses and administrators
          </p>
        </div>
        {/* Tabs */}
        <div className="flex gap-2 sm:gap-3 overflow-x-auto pb-1 -mx-1 px-1">
          {(
            [
              { key: "overview", label: "Courses", icon: BookOpen },
              { key: "admins", label: "Admins", icon: Users },
              { key: "students", label: "Students", icon: GraduationCap },
            ] as const
          ).map((tab) => (
            <Button
              key={tab.key}
              onClick={() => {
                setActiveView(tab.key);
                setSearchQuery("");
              }}
              className={`shrink-0 ${
                activeView === tab.key
                  ? "bg-green-600 hover:bg-green-700"
                  : "bg-gray-800 hover:bg-gray-700"
              } text-white`}
              size="md"
            >
              <tab.icon className="size-4 sm:size-5 mr-1.5 sm:mr-2" />
              {tab.label}
            </Button>
          ))}
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 lg:grid-cols-5 gap-3 sm:gap-6">
        <StatCard
          icon={BookOpen}
          gradient="from-blue-500 to-blue-600"
          label="Total Courses"
          value={statsLoading ? "..." : stats?.totalCourses ?? 0}
          active={activeView === "overview"}
        />
        <StatCard
          icon={Layers}
          gradient="from-cyan-500 to-cyan-600"
          label="Total Cohorts"
          value={statsLoading ? "..." : stats?.totalCohorts ?? 0}
        />
        <StatCard
          icon={Users}
          gradient="from-purple-500 to-purple-600"
          label="Total Admins"
          value={statsLoading ? "..." : stats?.totalAdmins ?? 0}
        />
        <StatCard
          icon={GraduationCap}
          gradient="from-green-500 to-green-600"
          label="Total Students"
          value={statsLoading ? "..." : stats?.totalStudents ?? 0}
        />
        <StatCard
          icon={TrendingUp}
          gradient="from-yellow-500 to-yellow-600"
          label="Avg Performance"
          value={statsLoading ? "..." : `${stats?.avgPerformance ?? 0}%`}
        />
      </div>

      {/* ── Courses View ──────────────────────────────────── */}
      {activeView === "overview" && (
        <>
          {/* Add Course button */}
          <div className="flex justify-end">
            <Button
              onClick={() => setShowCourseModal(true)}
              className="bg-green-600 hover:bg-green-700 text-white font-semibold"
            >
              <Plus className="size-5 mr-2" />
              Create Course
            </Button>
          </div>

          {coursesLoading && (
            <div className="flex justify-center py-12">
              <Spinner className="size-8 text-blue-500" />
            </div>
          )}

          {!coursesLoading && courses.length === 0 && (
            <div className="text-center py-16">
              <BookOpen className="size-12 text-gray-600 mx-auto mb-4" />
              <p className="text-gray-400 text-lg">No courses yet</p>
              <p className="text-gray-500 text-sm mt-1">Create your first course to get started.</p>
            </div>
          )}

          {!coursesLoading && courses.length > 0 && (
            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
              {courses.map((course) => (
                <CourseCard
                  key={course.id}
                  course={course}
                  onAddCohort={() =>
                    setShowCohortModal({ courseId: course.id, courseName: course.name })
                  }
                  onAssign={(cohortId) => handleAssign(course.id, cohortId)}
                  onUnassign={(cohortId) => handleUnassign(course.id, cohortId)}
                  assigningId={assigningCohortId}
                />
              ))}
            </div>
          )}
        </>
      )}

      {/* ── Admins View ───────────────────────────────────── */}
      {activeView === "admins" && (
        <>
          {/* Search & Add */}
          <div className="p-4 sm:p-6 bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl shadow-2xl">
            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-stretch sm:items-center">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-5 text-gray-400" />
                <Input
                  type="text"
                  placeholder="Search admins by name or email..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-12 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500"
                />
              </div>
              <Button
                onClick={() => setShowAddModal(true)}
                className="bg-green-600 hover:bg-green-700 text-white font-semibold shrink-0"
              >
                <Plus className="size-5 mr-2" />
                Add Admin
              </Button>
            </div>
          </div>

          {/* Loading state */}
          {adminsLoading && (
            <div className="flex justify-center py-12">
              <Spinner className="size-8 text-blue-500" />
            </div>
          )}

          {/* Mobile: card layout */}
          {!adminsLoading && (
            <div className="space-y-3 md:hidden">
              {admins.map((admin) => (
                <AdminCard
                  key={admin.id}
                  admin={admin}
                  onEdit={() => {}}
                  onDelete={() => handleDeleteAdmin(admin)}
                />
              ))}
              {admins.length === 0 && (
                <p className="text-center text-gray-500 py-12">No admins found.</p>
              )}
            </div>
          )}

          {/* Desktop: table layout */}
          {!adminsLoading && (
            <div className="hidden md:block bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl shadow-2xl overflow-hidden">
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow className="border-gray-800 hover:bg-gray-800/50">
                      <TableHead className="text-gray-300 font-bold">ID</TableHead>
                      <TableHead className="text-gray-300 font-bold">Name</TableHead>
                      <TableHead className="text-gray-300 font-bold">Email</TableHead>
                      <TableHead className="text-gray-300 font-bold">Course</TableHead>
                      <TableHead className="text-gray-300 font-bold">Date Added</TableHead>
                      <TableHead className="text-gray-300 font-bold">Status</TableHead>
                      <TableHead className="text-gray-300 font-bold text-right">Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {admins.map((admin) => (
                      <TableRow
                        key={admin.id}
                        className="border-gray-800 hover:bg-gray-800/50 transition-colors"
                      >
                        <TableCell className="text-white font-medium">
                          #{admin.id.slice(0, 6)}
                        </TableCell>
                        <TableCell className="text-white font-medium">{admin.name}</TableCell>
                        <TableCell className="text-gray-400">{admin.email}</TableCell>
                        <TableCell>
                          {admin.course ? (
                            <span className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full border border-blue-500">
                              {admin.course.name}
                            </span>
                          ) : (
                            <span className="text-gray-500 text-sm">No course</span>
                          )}
                        </TableCell>
                        <TableCell className="text-gray-400">{admin.dateAdded}</TableCell>
                        <TableCell>
                          <StatusBadge status={admin.status} />
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex gap-2 justify-end">
                            <Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
                              <Edit className="size-4" />
                            </Button>
                            <Button size="sm" variant="danger" onClick={() => handleDeleteAdmin(admin)}>
                              <Trash2 className="size-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                    {admins.length === 0 && (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center text-gray-500 py-12">
                          No admins found.
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}
        </>
      )}

      {/* ── Students View ─────────────────────────────────── */}
      {activeView === "students" && (
        <>
          {/* Search & Filter */}
          <div className="p-4 sm:p-6 bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl shadow-2xl">
            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-stretch sm:items-center">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-5 text-gray-400" />
                <Input
                  type="text"
                  placeholder="Search students by name, email, or ID..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-12 bg-gray-800 border-gray-700 text-white placeholder:text-gray-500"
                />
              </div>
              <select
                value={courseFilter}
                onChange={(e) => setCourseFilter(e.target.value)}
                className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                <option value="all">All Courses</option>
                {courses.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.name}
                  </option>
                ))}
              </select>
            </div>
            <div className="mt-3 sm:mt-4 flex items-center gap-3 text-xs sm:text-sm text-gray-400 flex-wrap">
              <span>
                Showing {filteredStudents.length} of {mockStudents.length} students
              </span>
              {courseFilter !== "all" && (
                <span className="px-2.5 py-1 bg-gray-800 border border-gray-700 rounded-full text-xs">
                  {courses.find((c) => c.id === courseFilter)?.name}
                </span>
              )}
            </div>
          </div>

          {/* Mobile: card layout */}
          <div className="space-y-3 md:hidden">
            {filteredStudents.map((student) => (
              <StudentCard key={student.studentId} student={student} />
            ))}
            {filteredStudents.length === 0 && (
              <p className="text-center text-gray-500 py-12">No students found.</p>
            )}
          </div>

          {/* Desktop: table layout */}
          <div className="hidden md:block bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl shadow-2xl overflow-hidden">
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow className="border-gray-800 hover:bg-gray-800/50">
                    <TableHead className="text-gray-300 font-bold">Student ID</TableHead>
                    <TableHead className="text-gray-300 font-bold">Name</TableHead>
                    <TableHead className="text-gray-300 font-bold">Email</TableHead>
                    <TableHead className="text-gray-300 font-bold">Course</TableHead>
                    <TableHead className="text-gray-300 font-bold">Score</TableHead>
                    <TableHead className="text-gray-300 font-bold">Grade</TableHead>
                    <TableHead className="text-gray-300 font-bold">Status</TableHead>
                    <TableHead className="text-gray-300 font-bold text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredStudents.map((student) => (
                    <TableRow
                      key={student.studentId}
                      className="border-gray-800 hover:bg-gray-800/50 transition-colors"
                    >
                      <TableCell className="text-white font-medium">{student.studentId}</TableCell>
                      <TableCell className="text-white font-medium">{student.name}</TableCell>
                      <TableCell className="text-gray-400">{student.email}</TableCell>
                      <TableCell>
                        <span className="px-2 py-1 bg-gray-800 text-gray-300 text-xs rounded-full border border-gray-700">
                          {student.courseId}
                        </span>
                      </TableCell>
                      <TableCell className="text-white font-semibold">
                        {student.score}/{student.totalMarks} ({student.percentage}%)
                      </TableCell>
                      <TableCell>
                        <GradeBadge grade={student.grade} />
                      </TableCell>
                      <TableCell>
                        <StatusBadge status={student.status} />
                      </TableCell>
                      <TableCell className="text-right">
                        <Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
                          <Eye className="size-4 mr-1" />
                          View
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                  {filteredStudents.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={8} className="text-center text-gray-500 py-12">
                        No students found.
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          </div>
        </>
      )}

      {/* Modals */}
      {showAddModal && (
        <AddAdminModal
          onClose={() => setShowAddModal(false)}
          onSuccess={() => {}}
        />
      )}
      {showCourseModal && (
        <CreateCourseModal
          onClose={() => setShowCourseModal(false)}
          onSuccess={() => {}}
        />
      )}
      {showCohortModal && (
        <AddCohortModal
          courseId={showCohortModal.courseId}
          courseName={showCohortModal.courseName}
          onClose={() => setShowCohortModal(null)}
          onSuccess={() => {}}
        />
      )}
    </div>
  );
}