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

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

import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";

import {
	getDoctorsApi,
	createDoctorApi,
	updateDoctorApi,
	getDoctorTimingApi,
} from "@/api/doctor";
import { getDepartmentsApi } from "@/api/department";

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 {
	Dialog,
	DialogContent,
	DialogHeader,
	DialogTitle,
	DialogFooter,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";

import {
	Loader2,
	RefreshCw,
	Plus,
	Pencil,
	ChevronLeft,
	ChevronRight,
} from "lucide-react";

interface Department {
	departmentId: string;
	name: string;
}

const DAYS = [
	"monday",
	"tuesday",
	"wednesday",
	"thursday",
	"friday",
	"saturday",
	"sunday",
	"additional",
];

export default function DoctorPage() {
	const [doctors, setDoctors] = useState<any[]>([]);
	const [departments, setDepartments] = useState<Department[]>([]);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState("");

	const [openModal, setOpenModal] = useState(false);
	const [editing, setEditing] = useState<any>(null);

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

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

	const [form, setForm] = useState<any>({
		doctorId: "",
		name: "",
		image: "",
		designation: "",
		workingStatus: "",
		qualification: "",
		isActive: true,
		globalSortOrder: 0,
		departments: [],
	});

	const fetchAll = useCallback(async () => {
		setLoading(true);
		setError("");
		try {
			const [docRes, depRes] = await Promise.all([
				getDoctorsApi(),
				getDepartmentsApi(),
			]);
			setDoctors(docRes?.data || []);
			setDepartments(depRes?.data || []);
		} catch (err) {
			if (err instanceof AxiosError) {
				setError(err.response?.data?.message || "Failed to load data");
			} else {
				setError("Something went wrong");
			}
		} finally {
			setLoading(false);
		}
	}, []);

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

	const filteredDoctors = doctors
		.filter((doc) => {
			const matchesSearch =
				doc.name.toLowerCase().includes(searchText.toLowerCase()) ||
				doc.doctorId.toLowerCase().includes(searchText.toLowerCase());

			const matchesDepartment = filterDepartment
				? doc.departments?.some((d: any) => d.departmentId === filterDepartment)
				: true;

			return matchesSearch && matchesDepartment;
		})
		.sort((a, b) => {
			if (!filterDepartment) {
				return a.globalSortOrder - b.globalSortOrder;
			}

			const aDept = a.departments.find(
				(d: any) => d.departmentId === filterDepartment,
			);

			const bDept = b.departments.find(
				(d: any) => d.departmentId === filterDepartment,
			);

			return (
				(aDept?.deptSortOrder ?? Number.MAX_SAFE_INTEGER) -
				(bDept?.deptSortOrder ?? Number.MAX_SAFE_INTEGER)
			);
		});

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

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

	function handleChange(e: any) {
		const value =
			e.target.type === "number" ? Number(e.target.value) : e.target.value;
		setForm({ ...form, [e.target.name]: value });
	}

	const handleToggleStatus = async (doc: any) => {
		try {
			const updatedDoc = { ...doc, isActive: !doc.isActive };
			await updateDoctorApi(doc.doctorId, updatedDoc);
			fetchAll();
		} catch (err) {
			console.error("Failed to update status", err);
		}
	};

	function handleDepartmentToggle(depId: string) {
		const exists = form.departments.find((d: any) => d.departmentId === depId);
		if (exists) {
			setForm({
				...form,
				departments: form.departments.filter(
					(d: any) => d.departmentId !== depId,
				),
			});
		} else {
			setForm({
				...form,
				departments: [
					...form.departments,
					{ departmentId: depId, sortOrder: 0, timing: {} },
				],
			});
		}
	}

	function handleDeptSortChange(depId: string, value: string) {
		setForm({
			...form,
			departments: form.departments.map((d: any) =>
				d.departmentId === depId ? { ...d, sortOrder: Number(value) } : d,
			),
		});
	}

	function handleTimingChange(depId: string, day: string, value: string) {
		setForm({
			...form,
			departments: form.departments.map((d: any) =>
				d.departmentId === depId
					? { ...d, timing: { ...d.timing, [day]: value } }
					: d,
			),
		});
	}

	function openAdd() {
		setEditing(null);
		setForm({
			doctorId: "",
			name: "",
			image: "",
			designation: "",
			workingStatus: "",
			qualification: "",
			isActive: true,
			globalSortOrder: 0,
			departments: [],
		});
		setOpenModal(true);
	}

	async function openEdit(doc: any) {
		setEditing(doc);
		try {
			const timingRes = await getDoctorTimingApi(doc.doctorId);
			const timingData = timingRes?.data?.departments || [];

			setForm({
				doctorId: doc.doctorId,
				name: doc.name,
				image: doc.image || "",
				designation: doc.designation,
				workingStatus: doc.workingStatus,
				qualification: doc.qualification,
				isActive: doc.isActive ?? true,
				globalSortOrder: doc.globalSortOrder ?? 0,
				departments: timingData.map((d: any) => ({
					departmentId: d.departmentId,
					sortOrder: d.deptSortOrder ?? 0,
					timing: d.timing || {},
				})),
			});
			setOpenModal(true);
		} catch (err) {
			console.error("Error fetching doctor details:", err);
		}
	}

	async function handleSubmit() {
		try {
			if (editing) {
				await updateDoctorApi(editing.doctorId, form);
			} else {
				await createDoctorApi(form);
			}
			setOpenModal(false);
			fetchAll();
		} catch (error) {
			console.error(error);
		}
	}

	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">Doctors</h1>

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

					<select
						value={filterDepartment}
						onChange={(e) => setFilterDepartment(e.target.value)}
						className="flex h-10 w-[220px] rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
					>
						<option value="">All Departments</option>
						{departments.map((dep) => (
							<option key={dep.departmentId} value={dep.departmentId}>
								{dep.name}
							</option>
						))}
					</select>

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

					<Button onClick={openAdd} className="text-base">
						<Plus className="mr-2 h-5 w-5" />
						Add Doctor
					</Button>
				</div>
			</div>

			{error && (
				<div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">
					{error}
				</div>
			)}

			<Card>
				<CardHeader>
					<CardTitle className="text-xl">Doctor List</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-[80px] bg-background text-sm font-bold">
										Priority{" "}
									</TableHead>
									<TableHead className="w-[180px] bg-background text-sm font-bold">
										Doctor Info
									</TableHead>
									<TableHead className="w-[150px] bg-background text-sm font-bold">
										Designation
									</TableHead>
									<TableHead className="w-[220px] bg-background text-sm font-bold">
										Departments (Hierarchy)
									</TableHead>
									<TableHead className="w-[80px] bg-background text-sm font-bold">
										Status (Active)
									</TableHead>
									<TableHead className="w-[80px] bg-background text-right text-sm font-bold">
										Actions
									</TableHead>
								</TableRow>
							</TableHeader>

							<TableBody>
								{loading ? (
									<TableRow>
										<TableCell colSpan={6} className="text-center py-10">
											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
										</TableCell>
									</TableRow>
								) : currentItems.length === 0 ? (
									<TableRow>
										<TableCell
											colSpan={6}
											className="text-center text-muted-foreground py-10 text-base"
										>
											No doctors found
										</TableCell>
									</TableRow>
								) : (
									currentItems.map((doc) => (
										<TableRow key={doc.doctorId} className="hover:bg-muted/50">
											<TableCell className="font-mono text-sm">
												{doc.globalSortOrder}
											</TableCell>

											<TableCell>
												<div
													className="font-semibold text-base truncate"
													title={doc.name}
												>
													{doc.name}
												</div>
												<div className="text-xs text-muted-foreground truncate font-mono">
													{doc.doctorId}
												</div>
											</TableCell>

											<TableCell>
												<div
													className="truncate text-sm font-medium"
													title={doc.designation}
												>
													{doc.designation || "-"}
												</div>
												<div className="text-xs italic text-muted-foreground truncate">
													{doc.workingStatus}
												</div>
											</TableCell>

											<TableCell>
												<div className="flex flex-wrap gap-1">
													{doc.departments?.map((d: any) => (
														<Badge
															key={d.departmentId}
															variant="secondary"
															className="text-xs px-2 h-6 leading-none flex items-center gap-1"
														>
															{d.departmentName}
															<span className="bg-primary text-primary-foreground px-1 rounded-full text-[10px]">
																{d.deptSortOrder}
															</span>
														</Badge>
													))}
												</div>
											</TableCell>

											<TableCell>
												<div className="flex items-center gap-2">
													<Switch
														checked={doc.isActive}
														onCheckedChange={() => handleToggleStatus(doc)}
													/>
													<Badge
														variant={doc.isActive ? "default" : "secondary"}
													>
														{doc.isActive ? "Active" : "Hidden"}
													</Badge>
												</div>
											</TableCell>

											<TableCell className="text-right">
												<div className="flex justify-end gap-2">
													<Button
														size="icon"
														variant="ghost"
														className="h-9 w-9"
														onClick={() => openEdit(doc)}
													>
														<Pencil className="h-4 w-4" />
													</Button>
												</div>
											</TableCell>
										</TableRow>
									))
								)}
							</TableBody>
						</Table>
					</div>

					{!loading && filteredDoctors.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, filteredDoctors.length)}
								</span>{" "}
								of{" "}
								<span className="font-semibold">{filteredDoctors.length}</span>{" "}
								doctors
							</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={openModal} onOpenChange={setOpenModal}>
				<DialogContent className="w-full !max-w-5xl h-[90vh] flex flex-col p-0 overflow-hidden">
					<DialogHeader className="p-6 border-b bg-background z-10">
						<DialogTitle className="text-2xl">
							{editing ? "Edit Doctor" : "Add Doctor"}
						</DialogTitle>
					</DialogHeader>

					<div className="flex-1 overflow-y-auto p-6">
						<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
							<div className="space-y-6">
								<h3 className="font-bold text-base border-b pb-2">
									Profile & Visibility
								</h3>
								<div className="space-y-4">
									<div className="space-y-2">
										<label className="text-sm font-semibold">
											Doctor Photo
										</label>
										<BytescaleUploader
											value={form.image}
											folderPath="/doctors"
											onChange={(url) => setForm({ ...form, image: url })}
										/>
									</div>

									<div className="flex items-center justify-between p-3 border rounded-md bg-muted/30">
										<Label
											htmlFor="isActive"
											className="text-base font-semibold cursor-pointer"
										>
											Active
										</Label>
										<Switch
											id="isActive"
											checked={form.isActive}
											onCheckedChange={(val) =>
												setForm({ ...form, isActive: val })
											}
										/>
									</div>

									<div className="space-y-1">
										<Label
											htmlFor="globalSortOrder"
											className="text-sm font-semibold"
										>
											Sort Priority (Lower numbers show first)
										</Label>
										<Input
											id="globalSortOrder"
											name="globalSortOrder"
											type="number"
											value={form.globalSortOrder}
											onChange={handleChange}
											className="text-base"
										/>
									</div>

									<div className="space-y-1">
										<label className="text-sm font-semibold">Doctor ID</label>
										<Input
											name="doctorId"
											placeholder="GG-DOC-001"
											value={form.doctorId}
											onChange={handleChange}
											disabled={!!editing}
											className="text-base"
										/>
									</div>
									<div className="space-y-1">
										<label className="text-sm font-semibold">Full Name</label>
										<Input
											name="name"
											placeholder="Dr. John Doe"
											value={form.name}
											onChange={handleChange}
											className="text-base"
										/>
									</div>
									<div className="space-y-1">
										<label className="text-sm font-semibold">Designation</label>
										<Input
											name="designation"
											placeholder="Senior Consultant"
											value={form.designation}
											onChange={handleChange}
											className="text-base"
										/>
									</div>
									<div className="space-y-1">
										<label className="text-sm font-semibold">
											Working Status
										</label>
										<Input
											name="workingStatus"
											placeholder="Active / On Call"
											value={form.workingStatus}
											onChange={handleChange}
											className="text-base"
										/>
									</div>
									<div className="space-y-1">
										<label className="text-sm font-semibold">
											Qualification
										</label>
										<Input
											name="qualification"
											placeholder="MBBS, MD"
											value={form.qualification}
											onChange={handleChange}
											className="text-base"
										/>
									</div>
								</div>

								<div className="p-5 border rounded-md bg-muted/20">
									<p className="text-base font-bold mb-4">Assign Departments</p>
									<div className="grid grid-cols-2 gap-3">
										{departments.map((dep) => {
											const isSelected = form.departments.some(
												(d: any) => d.departmentId === dep.departmentId,
											);
											return (
												<Button
													key={dep.departmentId}
													type="button"
													variant={isSelected ? "default" : "outline"}
													size="sm"
													className="justify-start text-sm min-h-11 whitespace-normal break-words text-left py-2"
													onClick={() =>
														handleDepartmentToggle(dep.departmentId)
													}
												>
													{dep.name}
												</Button>
											);
										})}
									</div>
								</div>
							</div>

							<div className="space-y-6">
								<h3 className="font-bold text-base border-b pb-2">
									Department Hierarchy & Timing
								</h3>
								{form.departments.length === 0 ? (
									<div className="text-base text-muted-foreground italic py-24 text-center border-2 border-dashed rounded-lg">
										Select a department to configure hierarchy and timing
									</div>
								) : (
									<div className="space-y-8">
										{form.departments.map((dep: any) => {
											const depName = departments.find(
												(d) => d.departmentId === dep.departmentId,
											)?.name;
											return (
												<div
													key={dep.departmentId}
													className="space-y-4 p-5 border rounded-lg bg-background shadow-sm border-primary/20"
												>
													<div className="flex items-center justify-between border-b pb-2">
														<p className="font-bold text-base text-primary">
															{depName}
														</p>
														<div className="flex items-center gap-2">
															<Label className="text-xs font-bold">
																Hierarchy Order:
															</Label>
															<Input
																type="number"
																className="w-20 h-8 text-sm"
																value={dep.sortOrder}
																onChange={(e) =>
																	handleDeptSortChange(
																		dep.departmentId,
																		e.target.value,
																	)
																}
															/>
														</div>
													</div>
													<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3">
														{DAYS.map((day) => (
															<div key={day} className="space-y-1">
																<label className="text-xs uppercase font-bold text-muted-foreground">
																	{day}
																</label>
																<Input
																	className="h-9 text-sm"
																	placeholder="e.g. 09:00 AM - 01:00 PM"
																	value={dep.timing?.[day] || ""}
																	onChange={(e) =>
																		handleTimingChange(
																			dep.departmentId,
																			day,
																			e.target.value,
																		)
																	}
																/>
															</div>
														))}
													</div>
												</div>
											);
										})}
									</div>
								)}
							</div>
						</div>
					</div>

					<DialogFooter className="p-6 border-t bg-background z-10 mt-0">
						<Button
							variant="ghost"
							onClick={() => setOpenModal(false)}
							className="text-base"
						>
							Cancel
						</Button>
						<Button onClick={handleSubmit} className="px-10 text-base">
							{editing ? "Save Changes" : "Create Doctor Profile"}
						</Button>
					</DialogFooter>
				</DialogContent>
			</Dialog>
		</div>
	);
}