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

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

import { getCareersApi, updateCareerApi, createCareerApi } from '@/api/career';

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, Plus, Pencil, RefreshCw, ChevronLeft, ChevronRight } from 'lucide-react';

export default function CareerPage() {
	const [careers, setCareers] = useState<any[]>([]);
	const [loading, setLoading] = useState(true);

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

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

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

	const [form, setForm] = useState({
		post: '',
		designation: '',
		qualification: '',
		experienceNeed: '',
		email: '',
		number: '',
		status: 'new',
		isActive: true,
		sortOrder: 0,
	});

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

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

	const filteredCareers = careers.filter(
		(item) =>
			item.post?.toLowerCase().includes(searchText.toLowerCase()) ||
			item.designation?.toLowerCase().includes(searchText.toLowerCase())
	);

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

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

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

	const handleToggleStatus = async (item: any) => {
		try {
			await updateCareerApi(item.id, {
				...item,
				isActive: !item.isActive,
			} as any);
			fetchAll();
		} catch (error) {
			console.error('Failed to toggle status', error);
		}
	};

	function openAdd() {
		setEditing(null);
		setForm({
			post: '',
			designation: '',
			qualification: '',
			experienceNeed: '',
			email: '',
			number: '',
			status: 'new',
			isActive: true,
			sortOrder: 0,
		});
		setOpenModal(true);
	}

	function openEdit(item: any) {
		setEditing(item);
		setForm({
			post: item.post || '',
			designation: item.designation || '',
			qualification: item.qualification || '',
			experienceNeed: item.experienceNeed || '',
			email: item.email || '',
			number: item.number || '',
			status: item.status || 'new',
			isActive: item.isActive ?? true,
			sortOrder: item.sortOrder ?? 0,
		});
		setOpenModal(true);
	}

	async function handleSubmit() {
		try {
			if (editing) {
				await updateCareerApi(editing.id, form);
			} else {
				await createCareerApi(form);
			}

			setOpenModal(false);
			fetchAll();
		} catch (err) {
			console.error(err);
		}
	}

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

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

					<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 Career
					</Button>
				</div>
			</div>

			<Card>
				<CardHeader>
					<CardTitle className="text-xl">Career Opportunities</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-[800px] 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 font-bold text-sm">Priority</TableHead>
									<TableHead className="w-[250px] bg-background font-bold text-sm">Post & Designation</TableHead>
									<TableHead className="w-[200px] bg-background font-bold text-sm">Qualification</TableHead>
									<TableHead className="w-[120px] bg-background font-bold text-sm">Experience</TableHead>
									<TableHead className="w-[80px] bg-background font-bold text-sm">Status (Active)</TableHead>
									<TableHead className="w-[80px] bg-background font-bold text-right text-sm">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 careers found
										</TableCell>
									</TableRow>
								) : (
									currentItems.map((item) => (
										<TableRow key={item.id} className="hover:bg-muted/50">
											<TableCell className="font-mono text-xs">{item.sortOrder}</TableCell>
											<TableCell>
												<div className="font-semibold text-base truncate">{item.post}</div>
												<div className="text-xs text-muted-foreground truncate">{item.designation}</div>
											</TableCell>
											<TableCell>
												<div className="text-sm line-clamp-2">{item.qualification}</div>
											</TableCell>
											<TableCell className="text-sm">{item.experienceNeed}</TableCell>
											<TableCell>
												<div className="flex items-center gap-2">
													<Switch checked={item.isActive} onCheckedChange={() => handleToggleStatus(item)} />
													<Badge variant={item.isActive ? 'default' : 'secondary'} className="capitalize">
														{item.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(item)}>
														<Pencil className="h-4 w-4" />
													</Button>
												</div>
											</TableCell>
										</TableRow>
									))
								)}
							</TableBody>
						</Table>
					</div>

					{!loading && filteredCareers.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, filteredCareers.length)}</span> of{' '}
								<span className="font-semibold">{filteredCareers.length}</span> careers
							</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-lg">
					<DialogHeader>
						<DialogTitle className="text-2xl">{editing ? 'Edit Career' : 'Add New Career'}</DialogTitle>
					</DialogHeader>

					<div className="space-y-4 py-4">
						<div className="grid grid-cols-1 gap-4">
							<Input
								name="post"
								placeholder="Post (e.g. Staff Nurse)"
								value={form.post}
								onChange={handleChange}
								className="text-base"
							/>
							<Input
								name="designation"
								placeholder="Designation"
								value={form.designation}
								onChange={handleChange}
								className="text-base"
							/>
							<Input
								name="qualification"
								placeholder="Qualification"
								value={form.qualification}
								onChange={handleChange}
								className="text-base"
							/>
							<Input
								name="experienceNeed"
								placeholder="Experience Needed"
								value={form.experienceNeed}
								onChange={handleChange}
								className="text-base"
							/>
							<Input
								name="email"
								type="email"
								placeholder="HR Email Address"
								value={form.email}
								onChange={handleChange}
								className="text-base"
							/>
							<Input
								name="number"
								placeholder="Contact Number"
								value={form.number}
								onChange={handleChange}
								className="text-base"
							/>
							<Input
								name="status"
								placeholder="Status (e.g. active / closed)"
								value={form.status}
								onChange={handleChange}
								className="text-base"
							/>
							<div className="flex items-center justify-between p-2 border rounded-md">
								<Label htmlFor="isActive" className="text-base">
									Active
								</Label>
								<Switch
									id="isActive"
									checked={form.isActive}
									onCheckedChange={(val) => setForm({ ...form, isActive: val })}
								/>
							</div>
							<div className="space-y-1">
								<Label htmlFor="sortOrder" className="text-sm">
									Sort Priority (Lower numbers show first)
								</Label>
								<Input
									id="sortOrder"
									name="sortOrder"
									type="number"
									placeholder="Sort Order"
									value={form.sortOrder}
									onChange={handleChange}
									className="text-base"
								/>
							</div>
						</div>
					</div>

					<DialogFooter className="pt-4 border-t">
						<Button variant="ghost" onClick={() => setOpenModal(false)} className="text-base">
							Cancel
						</Button>
						<Button onClick={handleSubmit} className="px-8 text-base">
							{editing ? 'Save Changes' : 'Create Career'}
						</Button>
					</DialogFooter>
				</DialogContent>
			</Dialog>
		</div>
	);
}