"use client";

import { useState } from "react";
import {
  Search,
  Plus,
  Users,
  Calendar,
  CheckCircle,
  XCircle,
  ChevronDown,
  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 { Spinner } from "@/components/ui/spinner";
import { AddStudentModal } from "@/components/dashboard/add-student-modal";
import { useStudentResults } from "@/lib/api/hooks/useStudent";
import { useAdminCourse } from "@/lib/api/hooks/useAdmin";
import type { StudentWithResults } from "@/types/api";

// ── Badges ───────────────────────────────────────────────────

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-2.5 py-1 rounded-full text-xs font-bold border ${c}`}>
      {grade}
    </span>
  );
}

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

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

function StudentCard({ student }: { student: StudentWithResults }) {
  const r = student.results;
  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 className="min-w-0">
          <p className="text-white font-medium truncate">{student.fullName}</p>
          <p className="text-gray-400 text-sm truncate">{student.email}</p>
        </div>
        {r && <GradeBadge grade={r.grade} />}
      </div>
      {student.cohort && (
        <span className="inline-block px-2 py-0.5 rounded-full text-xs bg-cyan-500/20 text-cyan-400 border border-cyan-500">
          {student.cohort.batch} ({student.cohort.month} {student.cohort.year})
        </span>
      )}
      <div className="flex items-center justify-between flex-wrap gap-2">
        <div className="flex items-center gap-2 text-gray-400 text-xs">
          <Calendar className="size-3.5" />
          <span>{student.dateAdded}</span>
        </div>
        {r ? (
          <div className="flex items-center gap-3">
            <span className="text-white text-sm font-semibold">
              {r.totalScore}/{r.totalMarks} ({r.percentage}%)
            </span>
            <StatusBadge status={r.status} />
          </div>
        ) : (
          <span className="text-gray-600 text-xs">No exams taken</span>
        )}
      </div>
    </div>
  );
}

// ── Main ─────────────────────────────────────────────────────

export default function StudentsPage() {
  const [searchQuery, setSearchQuery] = useState("");
  const [cohortFilter, setCohortFilter] = useState("");
  const [showAddModal, setShowAddModal] = useState(false);

  const { data: resultsData, isLoading } = useStudentResults(cohortFilter || undefined);
  const { data: courseData } = useAdminCourse();
  const students = resultsData?.students ?? [];
  const courseName = resultsData?.course ?? "";

  // Get cohorts from admin's course endpoint
  const cohorts = courseData?.course?.cohorts ?? [];

  const selectedCohort = cohorts.find((c) => c.id === cohortFilter) ?? cohorts[0];
  const cohortLabel = selectedCohort
    ? `${selectedCohort.batch} (${selectedCohort.month} ${selectedCohort.year})`
    : "";

  const filtered = students.filter((s) => {
    const q = searchQuery.toLowerCase();
    return (
      s.fullName.toLowerCase().includes(q) ||
      s.email.toLowerCase().includes(q)
    );
  });

  // Check if any student has results
  const hasAnyResults = students.some((s) => s.results !== null);

  return (
    <div className="space-y-6 sm:space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white">
          Students
        </h1>
        <p className="text-sm sm:text-base text-gray-400 mt-1">
          {courseName
            ? <>Manage students enrolled in <span className="text-white font-medium">{courseName}</span></>
            : "Manage your students"}
        </p>
      </div>

      {/* Search, Filter & Add */}
      <div className="p-4 sm:p-6 bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl">
        <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 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>
          {cohorts.length > 1 && (
            <div className="relative shrink-0">
              <select
                value={cohortFilter}
                onChange={(e) => setCohortFilter(e.target.value)}
                className="appearance-none pl-4 pr-10 py-2.5 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 Cohorts</option>
                {cohorts.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.batch} ({c.month} {c.year})
                  </option>
                ))}
              </select>
              <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-gray-400 pointer-events-none" />
            </div>
          )}
          {cohorts.length > 0 && (
            <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 Student
            </Button>
          )}
        </div>
        <div className="mt-3 flex items-center gap-3 text-xs sm:text-sm text-gray-400 flex-wrap">
          <span>
            Showing {filtered.length} of {students.length} students
          </span>
          {cohortFilter && selectedCohort && (
            <span className="px-2.5 py-1 bg-gray-800 border border-gray-700 rounded-full text-xs flex items-center gap-1">
              <Layers className="size-3" />
              {selectedCohort.batch}
            </span>
          )}
        </div>
      </div>

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

      {/* Empty */}
      {!isLoading && students.length === 0 && (
        <div className="text-center py-16">
          <Users className="size-12 text-gray-600 mx-auto mb-4" />
          <p className="text-gray-400 text-lg">No students yet</p>
          <p className="text-gray-500 text-sm mt-1">Add your first student to get started.</p>
        </div>
      )}

      {/* Mobile: card layout */}
      {!isLoading && filtered.length > 0 && (
        <div className="space-y-3 md:hidden">
          {filtered.map((student) => (
            <StudentCard key={student.id} student={student} />
          ))}
        </div>
      )}

      {/* Desktop: table layout */}
      {!isLoading && filtered.length > 0 && (
        <div className="hidden md:block bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl 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">Name</TableHead>
                  <TableHead className="text-gray-300 font-bold">Email</TableHead>
                  <TableHead className="text-gray-300 font-bold">Cohort</TableHead>
                  <TableHead className="text-gray-300 font-bold">Date Added</TableHead>
                  {hasAnyResults && (
                    <>
                      <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>
                    </>
                  )}
                </TableRow>
              </TableHeader>
              <TableBody>
                {filtered.map((student) => (
                  <TableRow
                    key={student.id}
                    className="border-gray-800 hover:bg-gray-800/50 transition-colors"
                  >
                    <TableCell className="text-white font-medium">{student.fullName}</TableCell>
                    <TableCell className="text-gray-400">{student.email}</TableCell>
                    <TableCell>
                      {student.cohort ? (
                        <span className="px-2 py-0.5 rounded-full text-xs bg-cyan-500/20 text-cyan-400 border border-cyan-500">
                          {student.cohort.batch}
                        </span>
                      ) : (
                        <span className="text-gray-500 text-xs">—</span>
                      )}
                    </TableCell>
                    <TableCell className="text-gray-400">{student.dateAdded}</TableCell>
                    {hasAnyResults && (
                      <>
                        <TableCell>
                          {student.results ? (
                            <span className="text-white font-semibold">
                              {student.results.totalScore}/{student.results.totalMarks} ({student.results.percentage}%)
                            </span>
                          ) : (
                            <span className="text-gray-600 text-xs">—</span>
                          )}
                        </TableCell>
                        <TableCell>
                          {student.results ? (
                            <GradeBadge grade={student.results.grade} />
                          ) : (
                            <span className="text-gray-600 text-xs">—</span>
                          )}
                        </TableCell>
                        <TableCell>
                          {student.results ? (
                            <StatusBadge status={student.results.status} />
                          ) : (
                            <span className="text-gray-600 text-xs">—</span>
                          )}
                        </TableCell>
                      </>
                    )}
                  </TableRow>
                ))}
                {filtered.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={hasAnyResults ? 7 : 4} className="text-center text-gray-500 py-12">
                      No students found.
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
        </div>
      )}

      {/* No search results */}
      {!isLoading && students.length > 0 && filtered.length === 0 && (
        <p className="text-center text-gray-500 py-12">No students match your search.</p>
      )}

      {/* Add Student Modal */}
      {showAddModal && selectedCohort && (
        <AddStudentModal
          cohortId={cohortFilter || selectedCohort.id}
          cohortLabel={cohortLabel}
          onClose={() => setShowAddModal(false)}
          onSuccess={() => {}}
        />
      )}
    </div>
  );
}