import { useState, useEffect, useCallback, useMemo } from 'react';
import toast from 'react-hot-toast';
import { AxiosError } from 'axios';

import {
	getAccreditationsApi,
	createAccreditationApi,
	updateAccreditationApi,
	deleteAccreditationApi,
	Accreditation,
} from '@/api/accreditation';

import AccreditationModal from '@/components/AccreditationModal/AccreditationModal';

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 { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Input } from '@/components/ui/input';

import { Loader2, RefreshCw, Plus, Pencil, Trash2, Award } from 'lucide-react';

export default function AccreditationPage() {
	const [items, setItems] = useState<Accreditation[]>([]);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState('');

	const [modalOpen, setModalOpen] = useState(false);
	const [editingItem, setEditingItem] = useState<Accreditation | null>(null);

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

	const [form, setForm] = useState<Partial<Accreditation>>({
		title: '',
		type: 'ACCREDITATION',
		logo: '',
		image: '',
		description: '',
		sortOrder: 1000,
		isActive: true,
	});

	const fetchData = useCallback(async () => {
		setLoading(true);
		setError('');

		try {
			const res = await getAccreditationsApi();

			setItems(res.data || []);
		} catch (err) {
			if (err instanceof AxiosError) {
				setError(err.response?.data?.message || 'Failed to fetch accreditation records');
			} else {
				setError('Something went wrong');
			}
		} finally {
			setLoading(false);
		}
	}, []);

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

	const filteredItems = useMemo(() => {
		return items.filter((item) => {
			const matchesSearch = item.title.toLowerCase().includes(searchText.toLowerCase());

			const matchesCategory = categoryFilter ? item.type === categoryFilter : true;

			return matchesSearch && matchesCategory;
		});
	}, [items, searchText, categoryFilter]);

	const handleToggleStatus = async (item: Accreditation) => {
		if (!item.id) return;

		try {
			await updateAccreditationApi(item.id, {
				isActive: !item.isActive,
			});

			toast.success('Status updated');

			fetchData();
		} catch (err) {
			console.error(err);

			toast.error('Failed to update status');
		}
	};

	const handleDelete = async (id: number) => {
		const confirmDelete = window.confirm('Delete this accreditation permanently?');

		if (!confirmDelete) return;

		try {
			await deleteAccreditationApi(id);

			fetchData();
		} catch (err) {
			console.error(err);
		}
	};

	const openAdd = () => {
		setEditingItem(null);

		setForm({
			title: '',
			type: 'ACCREDITATION',
			logo: '',
			image: '',
			description: '',
			sortOrder: 1000,
			isActive: true,
		});

		setModalOpen(true);
	};

	const openEdit = (item: Accreditation) => {
		setEditingItem(item);

		setForm({
			...item,
		});

		setModalOpen(true);
	};

	const saveItem = async () => {
		if (!form.title?.trim()) {
			return toast.error('Title is required');
		}

		if (!form.type) {
			return toast.error('Category is required');
		}

		try {
			if (editingItem?.id) {
				const changedFields: Record<string, any> = {};

				Object.keys(form).forEach((key) => {
					const k = key as keyof Accreditation;

					if (JSON.stringify(form[k]) !== JSON.stringify(editingItem[k])) {
						changedFields[k] = form[k];
					}
				});

				delete changedFields.id;
				delete changedFields.createdAt;
				delete changedFields.updatedAt;

				if (Object.keys(changedFields).length === 0) {
					setModalOpen(false);
					return;
				}

				await updateAccreditationApi(editingItem.id, changedFields);
			} else {
				await createAccreditationApi(form);
			}

			setModalOpen(false);

			fetchData();
		} catch (err) {
			console.error(err);

			toast.error('Failed to save accreditation');
		}
	};

	return (
		<div className="p-6 space-y-6">
			{/* Header */}
			<div className="flex flex-col md:flex-row md:justify-between gap-4">
				<div>
					<h1 className="text-3xl font-bold">Accreditations & Certifications</h1>
				</div>

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

					<select
						value={categoryFilter}
						onChange={(e) => setCategoryFilter(e.target.value)}
						className="h-10 rounded-md border px-3"
					>
						<option value="">All Categories</option>

						<option value="ACCREDITATION">Accreditations</option>

						<option value="CERTIFICATION">Certifications</option>
					</select>

					<Button variant="outline" onClick={fetchData} disabled={loading}>
						<RefreshCw className="mr-2 h-4 w-4" />
						Refresh
					</Button>

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

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

			<Card>
				<CardHeader>
					<CardTitle>Accreditation Directory</CardTitle>
				</CardHeader>

				<CardContent className="p-0 sm:p-6">
					<div className="border rounded-md overflow-auto">
						<Table>
							<TableHeader>
								<TableRow>
									<TableHead>Order</TableHead>

									<TableHead>Logo</TableHead>

									<TableHead>Details</TableHead>

									<TableHead>Category</TableHead>

									<TableHead>Status</TableHead>

									<TableHead className="text-right">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>
								) : filteredItems.length === 0 ? (
									<TableRow>
										<TableCell colSpan={6} className="text-center text-muted-foreground py-10">
											No accreditation records found.
										</TableCell>
									</TableRow>
								) : (
									filteredItems.map((item) => (
										<TableRow key={item.id} className="hover:bg-muted/50">
											<TableCell className="font-mono">{item.sortOrder}</TableCell>

											<TableCell>
												<div className="w-20 h-16 border rounded-md overflow-hidden bg-white flex items-center justify-center">
													{item.logo ? (
														<img src={item.logo} alt={item.title} className="w-full h-full object-contain" />
													) : (
														<Award className="h-6 w-6 text-muted-foreground" />
													)}
												</div>
											</TableCell>

											<TableCell>
												<div className="font-semibold">{item.title}</div>

												<div className="text-sm text-muted-foreground line-clamp-2">
													{item.description || 'No description provided'}
												</div>

												{item.image && (
													<div className="mt-2">
														<a
															href={item.image}
															target="_blank"
															rel="noopener noreferrer"
															className="text-xs text-blue-600 hover:underline"
														>
															View certificate image
														</a>
													</div>
												)}
											</TableCell>

											<TableCell>
												<Badge variant={item.type === 'ACCREDITATION' ? 'default' : 'secondary'}>{item.type}</Badge>
											</TableCell>

											<TableCell>
												<div className="flex items-center gap-2">
													<Switch checked={item.isActive} onCheckedChange={() => handleToggleStatus(item)} />

													<Badge variant={item.isActive ? 'default' : 'secondary'}>
														{item.isActive ? 'Active' : 'Hidden'}
													</Badge>
												</div>
											</TableCell>

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

													<Button
														size="icon"
														variant="ghost"
														className="text-red-500 hover:text-red-600"
														onClick={() => item.id && handleDelete(item.id)}
													>
														<Trash2 className="h-4 w-4" />
													</Button>
												</div>
											</TableCell>
										</TableRow>
									))
								)}
							</TableBody>
						</Table>
					</div>
				</CardContent>
			</Card>

			<AccreditationModal
				open={modalOpen}
				onOpenChange={setModalOpen}
				editingAccreditation={editingItem}
				accreditationForm={form}
				setAccreditationForm={setForm}
				onSave={saveItem}
			/>
		</div>
	);
}