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

import {useState, useEffect, useCallback} from "react";
import {AxiosError} from "axios";
import {
	getDoctorsApi,
	createDoctorApi,
	updateDoctorApi,
	deleteDoctorApi,
	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 {Loader2, RefreshCw, Plus, Pencil, Trash} 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 [form, setForm] = useState<any>({
		doctorId: "",
		name: "",
		designation: "",
		workingStatus: "",
		qualification: "",
		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;
	});

	function handleChange(e: any) {
		setForm({...form, [e.target.name]: e.target.value});
	}

	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, timing: {}}],
			});
		}
	}

	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: "",
			designation: "",
			workingStatus: "",
			qualification: "",
			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,
				designation: doc.designation,
				workingStatus: doc.workingStatus,
				qualification: doc.qualification,
				departments: timingData.map((d: any) => ({
					departmentId: d.departmentId,
					timing: d.timing || {},
				})),
			});
			setOpenModal(true);
		} catch (err) {
			console.error(err);
		}
	}

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

	async function handleDelete(id: string) {
		if (!confirm("Delete this doctor?")) return;
		try {
			await deleteDoctorApi(id);
			fetchAll();
		} catch (error) {
			console.error(error);
		}
	}

	return (
		<div className="p-6 space-y-6">
			{/* HEADER */}
			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
				<h1 className="text-2xl 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-[200px]"
					/>

					<select
						value={filterDepartment}
						onChange={(e) => setFilterDepartment(e.target.value)}
						className="flex h-10 w-[200px] rounded-md border border-input bg-background px-3 py-2 text-sm 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}>
						<RefreshCw className="mr-2 h-4 w-4" />
						Refresh
					</Button>

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

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

			<Card>
				<CardHeader>
					<CardTitle>Doctor List</CardTitle>
				</CardHeader>

				<CardContent className="p-0 sm:p-6">
					<div className="rounded-md border overflow-x-auto max-w-full">
						<Table className="w-full min-w-[800px] table-fixed">
							<TableHeader>
								<TableRow>
									<TableHead className="w-[80px]">ID</TableHead>
									<TableHead className="w-[180px]">Name</TableHead>
									<TableHead className="w-[150px]">Designation</TableHead>
									<TableHead className="w-[150px]">Qualification</TableHead>
									<TableHead className="w-[200px]">Departments</TableHead>
									<TableHead className="w-[120px]">Actions</TableHead>
								</TableRow>
							</TableHeader>

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

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

											<TableCell>
												<div className="truncate" title={doc.designation}>
													{doc.designation || "-"}
												</div>
											</TableCell>

											<TableCell>
												<div className="truncate" title={doc.qualification}>
													{doc.qualification || "-"}
												</div>
											</TableCell>

											<TableCell>
												<div className="flex flex-wrap gap-1 max-h-[40px] overflow-hidden">
													{doc.departments?.map((d: any) => (
														<Badge
															key={d.departmentId}
															variant="secondary"
															className="text-[10px] px-1"
														>
															{d.departmentName}
														</Badge>
													))}
													{doc.departments?.length === 0 && (
														<span className="text-muted-foreground">-</span>
													)}
												</div>
											</TableCell>

											<TableCell className="text-right">
												<div className="flex justify-end gap-2">
													<Button
														size="sm"
														variant="outline"
														onClick={() => openEdit(doc)}
													>
														<Pencil className="h-4 w-4" />
													</Button>
													<Button
														size="sm"
														variant="destructive"
														onClick={() => handleDelete(doc.doctorId)}
													>
														<Trash className="h-4 w-4" />
													</Button>
												</div>
											</TableCell>
										</TableRow>
									))
								)}
							</TableBody>
						</Table>
					</div>
				</CardContent>
			</Card>

			{/* MODAL */}
			<Dialog open={openModal} onOpenChange={setOpenModal}>
				<DialogContent className="w-full !max-w-5xl max-h-[90vh] overflow-y-auto">
					<DialogHeader>
						<DialogTitle>{editing ? "Edit Doctor" : "Add Doctor"}</DialogTitle>
					</DialogHeader>

					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
						<div className="space-y-4">
							<h3 className="font-semibold border-b pb-2">Basic Information</h3>
							<Input
								name="doctorId"
								placeholder="Doctor ID"
								value={form.doctorId}
								onChange={handleChange}
								disabled={!!editing}
							/>
							<Input
								name="name"
								placeholder="Name"
								value={form.name}
								onChange={handleChange}
							/>
							<Input
								name="designation"
								placeholder="Designation"
								value={form.designation}
								onChange={handleChange}
							/>
							<Input
								name="workingStatus"
								placeholder="Working Status (e.g. Active)"
								value={form.workingStatus}
								onChange={handleChange}
							/>
							<Input
								name="qualification"
								placeholder="Qualification"
								value={form.qualification}
								onChange={handleChange}
							/>

							<div className="p-4 border rounded-md bg-muted/20">
								<p className="text-sm font-medium mb-3">Assign Departments</p>
								<div className="grid grid-cols-2 gap-2">
									{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"
												onClick={() => handleDepartmentToggle(dep.departmentId)}
											>
												{dep.name}
											</Button>
										);
									})}
								</div>
							</div>
						</div>

						<div className="space-y-4">
							<h3 className="font-semibold border-b pb-2">
								Working Hours / Timing
							</h3>
							{form.departments.length === 0 ? (
								<div className="text-sm text-muted-foreground italic py-10 text-center">
									Select a department to set timings
								</div>
							) : (
								<div className="space-y-6">
									{form.departments.map((dep: any) => {
										const depName = departments.find(
											(d) => d.departmentId === dep.departmentId,
										)?.name;
										return (
											<div
												key={dep.departmentId}
												className="space-y-3 p-3 border rounded-lg bg-background shadow-sm"
											>
												<p className="font-bold text-primary underline">
													{depName}
												</p>
												<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
													{DAYS.map((day) => (
														<div key={day} className="space-y-1">
															<label className="text-[10px] uppercase font-bold text-muted-foreground">
																{day}
															</label>
															<Input
																className="h-8 text-xs"
																placeholder="e.g. 9 AM - 1 PM"
																value={dep.timing?.[day] || ""}
																onChange={(e) =>
																	handleTimingChange(
																		dep.departmentId,
																		day,
																		e.target.value,
																	)
																}
															/>
														</div>
													))}
												</div>
											</div>
										);
									})}
								</div>
							)}
						</div>
					</div>

					<DialogFooter className="mt-6">
						<Button variant="outline" onClick={() => setOpenModal(false)}>
							Cancel
						</Button>
						<Button onClick={handleSubmit}>
							{editing ? "Update Doctor" : "Create Doctor"}
						</Button>
					</DialogFooter>
				</DialogContent>
			</Dialog>
		</div>
	);
}