gg-backend/frontend/src/pages/Academics.tsx

import { useState, useEffect, useCallback } from "react";

import { getAcademicsApi, deleteAcademicsApi } from "@/api/academics";
import { exportToExcel } from "@/utils/exportToExcel";

import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
	Dialog,
	DialogContent,
	DialogHeader,
	DialogTitle,
	DialogFooter,
} from "@/components/ui/dialog";

import {
	Loader2,
	Trash,
	RefreshCw,
	Download,
	ChevronLeft,
	ChevronRight,
	Eye,
	BookOpen,
} from "lucide-react";

export default function AcademicsPage() {
	const [records, setRecords] = useState<any[]>([]);
	const [loading, setLoading] = useState(true);

	const [searchText, setSearchText] = useState("");

	const [viewOpen, setViewOpen] = useState(false);
	const [viewData, setViewData] = useState<any>(null);

	const [currentPage, setCurrentPage] = useState(1);
	const itemsPerPage = 10;

	const fetchAll = useCallback(async () => {
		setLoading(true);
		try {
			const res = await getAcademicsApi();
			setRecords(res?.data || []);
		} catch (err) {
			console.error(err);
		} finally {
			setLoading(false);
		}
	}, []);

	useEffect(() => {
		fetchAll();
	}, [fetchAll]);

	const filteredRecords = records.filter((item) => {
		return (
			item.fullName?.toLowerCase().includes(searchText.toLowerCase()) ||
			item.number?.includes(searchText) ||
			item.emailId?.toLowerCase().includes(searchText.toLowerCase()) ||
			item.subject?.toLowerCase().includes(searchText.toLowerCase()) ||
			item.courseName?.toLowerCase().includes(searchText.toLowerCase())
		);
	});

	useEffect(() => {
		setCurrentPage(1);
	}, [searchText]);

	const totalPages = Math.ceil(filteredRecords.length / itemsPerPage);
	const indexOfLastItem = currentPage * itemsPerPage;
	const indexOfFirstItem = indexOfLastItem - itemsPerPage;
	const currentItems = filteredRecords.slice(indexOfFirstItem, indexOfLastItem);

	function openView(item: any) {
		setViewData(item);
		setViewOpen(true);
	}

	async function handleDelete(id: number) {
		if (!confirm("Delete record?")) return;
		await deleteAcademicsApi(id);
		fetchAll();
	}

	const handleExport = () => {
		const exportData = filteredRecords.map((item) => ({
			ID: item.id,
			Name: item.fullName,
			Phone: item.number,
			Email: item.emailId,
			Course: item.courseName,
			Subject: item.subject,
			Message: item.message,
			Date: new Date(item.createdAt).toLocaleDateString(),
		}));

		exportToExcel(exportData, "academics");
	};

	return (
		<div className="p-6 space-y-6">
			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
				<h1 className="text-3xl font-bold">Academics & Research</h1>

				<div className="flex flex-wrap gap-3">
					<Input
						placeholder="Search name / course / email..."
						value={searchText}
						onChange={(e) => setSearchText(e.target.value)}
						className="w-[280px] text-base"
					/>

					<Button
						variant="outline"
						onClick={fetchAll}
						disabled={loading}
						className="text-base"
					>
						<RefreshCw className="mr-2 h-5 w-5" />
						Refresh
					</Button>

					<Button onClick={handleExport} className="text-base">
						<Download className="mr-2 h-5 w-5" />
						Export
					</Button>
				</div>
			</div>

			<Card>
				<CardHeader>
					<CardTitle className="text-xl">Academic Records</CardTitle>
				</CardHeader>

				<CardContent className="p-0 sm:p-6 space-y-4">
					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[650px] relative">
						<Table className="w-full min-w-[1100px] table-fixed border-separate border-spacing-0">
							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
								<TableRow>
									<TableHead className="w-[60px] bg-background font-bold text-sm">
										ID
									</TableHead>
									<TableHead className="w-[220px] bg-background font-bold text-sm">
										Full Name
									</TableHead>
									<TableHead className="w-[180px] bg-background font-bold text-sm">
										Course
									</TableHead>
									<TableHead className="w-[180px] bg-background font-bold text-sm">
										Subject
									</TableHead>
									<TableHead className="w-[140px] bg-background font-bold text-sm">
										Applied Date
									</TableHead>
									<TableHead className="w-[220px] bg-background font-bold text-sm">
										Message
									</TableHead>
									<TableHead className="w-[120px] bg-background font-bold text-right text-sm">
										Actions
									</TableHead>
								</TableRow>
							</TableHeader>

							<TableBody>
								{loading ? (
									<TableRow>
										<TableCell colSpan={7} className="text-center py-10">
											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
										</TableCell>
									</TableRow>
								) : currentItems.length === 0 ? (
									<TableRow>
										<TableCell
											colSpan={7}
											className="text-center text-muted-foreground py-10 text-base"
										>
											No records found
										</TableCell>
									</TableRow>
								) : (
									currentItems.map((item) => (
										<TableRow key={item.id} className="hover:bg-muted/50">
											<TableCell className="font-mono text-xs">
												{item.id}
											</TableCell>
											<TableCell>
												<div className="font-semibold text-base truncate">
													{item.fullName}
												</div>
												<div className="text-xs text-muted-foreground truncate">
													{item.emailId}
												</div>
												<div className="text-[11px] font-medium">
													{item.number}
												</div>
											</TableCell>
											<TableCell>
												<div className="text-sm font-medium line-clamp-2">
													{item.courseName || "-"}
												</div>
											</TableCell>
											<TableCell>
												<div className="text-sm line-clamp-2">
													{item.subject || "-"}
												</div>
											</TableCell>
											<TableCell className="text-sm">
												{new Date(item.createdAt).toLocaleDateString()}
											</TableCell>
											<TableCell>
												<div className="text-sm line-clamp-2 text-muted-foreground italic">
													{item.message || "-"}
												</div>
											</TableCell>
											<TableCell className="text-right">
												<div className="flex justify-end gap-2">
													<Button
														size="icon"
														variant="ghost"
														className="h-9 w-9"
														onClick={() => openView(item)}
													>
														<Eye className="h-4 w-4" />
													</Button>
													<Button
														size="icon"
														variant="ghost"
														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
														onClick={() => handleDelete(item.id)}
													>
														<Trash className="h-4 w-4" />
													</Button>
												</div>
											</TableCell>
										</TableRow>
									))
								)}
							</TableBody>
						</Table>
					</div>

					{!loading && filteredRecords.length > 0 && (
						<div className="flex items-center justify-between px-2 py-6 border-t">
							<div className="text-base text-muted-foreground">
								Showing{" "}
								<span className="font-semibold">{indexOfFirstItem + 1}</span> to{" "}
								<span className="font-semibold">
									{Math.min(indexOfLastItem, filteredRecords.length)}
								</span>{" "}
								of{" "}
								<span className="font-semibold">{filteredRecords.length}</span>{" "}
								records
							</div>
							<div className="flex items-center gap-6">
								<div className="text-base font-semibold">
									Page {currentPage} of {totalPages}
								</div>
								<div className="flex gap-2">
									<Button
										variant="outline"
										size="icon"
										className="h-10 w-10"
										onClick={() =>
											setCurrentPage((prev) => Math.max(prev - 1, 1))
										}
										disabled={currentPage === 1}
									>
										<ChevronLeft className="h-5 w-5" />
									</Button>
									<Button
										variant="outline"
										size="icon"
										className="h-10 w-10"
										onClick={() =>
											setCurrentPage((prev) => Math.min(prev + 1, totalPages))
										}
										disabled={currentPage === totalPages || totalPages === 0}
									>
										<ChevronRight className="h-5 w-5" />
									</Button>
								</div>
							</div>
						</div>
					)}
				</CardContent>
			</Card>

			<Dialog open={viewOpen} onOpenChange={setViewOpen}>
				<DialogContent className="w-full !max-w-3xl max-h-[85vh] overflow-y-auto">
					<DialogHeader>
						<DialogTitle className="text-2xl border-b pb-2 flex items-center gap-2">
							<BookOpen className="h-6 w-6" /> Academic Detail View
						</DialogTitle>
					</DialogHeader>
					{viewData && (
						<div className="space-y-6 py-4">
							<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
								<div className="space-y-4">
									<div>
										<p className="text-xs uppercase font-bold text-muted-foreground">
											Applicant Information
										</p>
										<p className="text-lg font-bold text-primary">
											{viewData.fullName}
										</p>
										<p className="text-sm font-medium">{viewData.emailId}</p>
										<p className="text-sm">{viewData.number}</p>
									</div>
									<div>
										<p className="text-xs uppercase font-bold text-muted-foreground">
											Course & Subject
										</p>
										<p className="text-base font-semibold">
											{viewData.courseName || "N/A"}
										</p>
										<p className="text-sm text-muted-foreground">
											{viewData.subject}
										</p>
									</div>
									<div>
										<p className="text-xs uppercase font-bold text-muted-foreground">
											Submission Date
										</p>
										<p className="text-sm">
											{new Date(viewData.createdAt).toLocaleString()}
										</p>
									</div>
								</div>
								<div className="space-y-4">
									<div className="p-4 bg-muted/30 rounded-lg border">
										<p className="text-xs uppercase font-bold text-muted-foreground mb-2">
											Message / Research Inquiry
										</p>
										<p className="text-sm leading-relaxed whitespace-pre-wrap italic">
											{viewData.message || "No message content provided."}
										</p>
									</div>
								</div>
							</div>
						</div>
					)}
					<DialogFooter>
						<Button
							onClick={() => setViewOpen(false)}
							className="w-full md:w-auto"
						>
							Close
						</Button>
					</DialogFooter>
				</DialogContent>
			</Dialog>
		</div>
	);
}