"use client";
import { useState, useMemo } from "react";
import { FaCalendarPlus, FaWarehouse, FaCartShopping } from "react-icons/fa6";
import { IoFilter, IoFilterCircleOutline, IoFilterOutline, IoToday } from "react-icons/io5";
import { FaTimes } from "react-icons/fa";
import { SetStateAction, Dispatch } from "react";
// import type { Artefact } from "@prisma/client";

interface Artefact {
	id: number;
	name: string;
	description: string;
	location: string;
	earthquakeId: string;
	isRequired: boolean;
	isSold: boolean;
	isCollected: boolean;
	dateAdded: string;
}

// Warehouse Artefacts Data
const warehouseArtefacts: Artefact[] = [
	{
		id: 1,
		name: "Solidified Lava Chunk",
		description: "A chunk of solidified lava from the 2023 Iceland eruption.",
		location: "Reykjanes, Iceland",
		earthquakeId: "EQ2023ICL",
		isRequired: true,
		isSold: false,
		isCollected: false,
		dateAdded: "2025-05-04",
	},
	{
		id: 2,
		name: "Tephra Sample",
		description: "Foreign debris from the 2022 Tonga volcanic eruption.",
		location: "Tonga",
		earthquakeId: "EQ2022TGA",
		isRequired: false,
		isSold: true,
		isCollected: true,
		dateAdded: "2025-05-03",
	},
	{
		id: 3,
		name: "Ash Sample",
		description: "Volcanic ash from the 2021 La Palma eruption.",
		location: "La Palma, Spain",
		earthquakeId: "EQ2021LPA",
		isRequired: false,
		isSold: false,
		isCollected: false,
		dateAdded: "2025-05-04",
	},
	{
		id: 4,
		name: "Ground Soil",
		description: "Soil sample from the 2020 Croatia earthquake site.",
		location: "Zagreb, Croatia",
		earthquakeId: "EQ2020CRO",
		isRequired: true,
		isSold: false,
		isCollected: false,
		dateAdded: "2025-05-02",
	},
	{
		id: 5,
		name: "Basalt Fragment",
		description: "Basalt rock from the 2019 New Zealand eruption.",
		location: "White Island, New Zealand",
		earthquakeId: "EQ2019NZL",
		isRequired: false,
		isSold: true,
		isCollected: false,
		dateAdded: "2025-05-04",
	},
];

// Filter Component
function FilterInput({
	value,
	onChange,
	type = "text",
	options,
}: {
	value: string;
	onChange: (value: string) => void;
	type?: string;
	options?: string[];
}) {
	const showSelectedFilter = type === "text" && !["true", "false"].includes(options?.at(-1)!);
	return (
		<div className="flex h-full pl-0.5 pr-2 items-center group">
			<div className="relative">
				<div
					className={`p-1 group-hover:bg-blue-100 rounded transition-colors duration-200 ${
						!showSelectedFilter && value && "bg-blue-100"
					}`}
				>
					<IoFilter
						className={`cursor-pointer text-neutral-500 font-bold group-hover:text-blue-600
                    ${!showSelectedFilter && value && "text-blue-600"}
                    `}
					/>
				</div>
				<div
					className={`absolute z-50 mt-2 w-48 bg-white border border-neutral-300 rounded-md shadow-lg p-2 opacity-0 group-hover:opacity-100 group-hover:visible transition-opacity duration-200 pointer-events-none group-hover:pointer-events-auto
                        ${type === "date" ? "-right-1/2" : "-left-1/2"}
                        `}
				>
					{options ? (
						<div className="max-h-32 overflow-y-auto">
							{options.map((opt) => (
								<div key={opt} className="p-1 hover:bg-blue-100 cursor-pointer text-sm" onClick={() => onChange(opt)}>
									{opt ? (opt === "true" ? "Yes" : "No") : "All"}
								</div>
							))}
						</div>
					) : (
						<input
							type={type}
							value={value}
							onChange={(e) => onChange(e.target.value)}
							className="w-full p-1 border border-neutral-300 rounded-md text-sm"
							placeholder="Filter..."
							aria-label="Filter input"
						/>
					)}
				</div>
			</div>
			{value && showSelectedFilter && (
				<div className="inline-flex items-center bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-md">
					{value === "true" ? "Yes" : value === "false" ? "No" : value}
					<FaTimes className="ml-1 cursor-pointer text-blue-600 hover:text-blue-800" onClick={() => onChange("")} />
				</div>
			)}
		</div>
	);
}

// Table Component
function ArtefactTable({
	artefacts,
	filters,
	setFilters,
	setEditArtefact,
	clearSort,
}: {
	artefacts: Artefact[];
	filters: Record<string, string>;
	setFilters: Dispatch<
		SetStateAction<{
			id: string;
			name: string;
			earthquakeId: string;
			location: string;
			description: string;
			isRequired: string;
			isSold: string;
			isCollected: string;
			dateAdded: string;
		}>
	>;
	setEditArtefact: (artefact: Artefact) => void;
	clearSort: () => void;
}) {
	const [sortConfig, setSortConfig] = useState<{
		key: keyof Artefact;
		direction: "asc" | "desc";
	} | null>(null);

	const handleSort = (key: keyof Artefact) => {
		setSortConfig((prev) => {
			if (!prev || prev.key !== key) {
				return { key, direction: "asc" };
			} else if (prev.direction === "asc") {
				return { key, direction: "desc" };
			}
			return null;
		});
	};

	const clearSortConfig = () => {
		setSortConfig(null);
		clearSort();
	};

	const sortedArtefacts = useMemo(() => {
		if (!sortConfig) return artefacts;
		const sorted = [...artefacts].sort((a, b) => {
			const aValue = a[sortConfig.key];
			const bValue = b[sortConfig.key];
			if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1;
			if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1;
			return 0;
		});
		return sorted;
	}, [artefacts, sortConfig]);

	const columns: { label: string; key: keyof Artefact; width: string }[] = [
		{ label: "ID", key: "id", width: "5%" },
		{ label: "Name", key: "name", width: "12%" },
		{ label: "Earthquake ID", key: "earthquakeId", width: "10%" },
		{ label: "Location", key: "location", width: "12%" },
		{ label: "Description", key: "description", width: "25%" },
		{ label: "Required", key: "isRequired", width: "6%" },
		{ label: "Sold", key: "isSold", width: "5%" },
		{ label: "Collected", key: "isCollected", width: "7%" },
		{ label: "Date Added", key: "dateAdded", width: "8%" },
	];

	return (
		<table className="w-full table-fixed text-left">
			<thead className="sticky top-0 bg-neutral-100 border-b border-neutral-200 z-10">
				<tr>
					{columns.map(({ label, key, width }) => (
						<th key={key} className="text-sm px-5 font-semibold text-neutral-800 cursor-pointer" style={{ width }}>
							<div className="flex h-11 items-center">
								<div className="flex h-full items-center" onClick={() => handleSort(key as keyof Artefact)}>
									<div className="select-none">{label}</div>
								</div>
								<div className="h-full relative">
									<FilterInput
										value={filters[key]}
										onChange={(value) => {
											setFilters({ ...filters, [key]: value } as {
												id: string;
												name: string;
												earthquakeId: string;
												location: string;
												description: string;
												isRequired: string;
												isSold: string;
												isCollected: string;
												dateAdded: string;
											});
											if (value === "") clearSortConfig();
										}}
										type={key === "dateAdded" ? "date" : "text"}
										options={["isRequired", "isSold", "isCollected"].includes(key) ? ["", "true", "false"] : undefined}
									/>
									{sortConfig?.key === key && (
										<div className="absolute -right-2 top-3">{sortConfig.direction === "asc" ? "↑" : "↓"}</div>
									)}
								</div>
							</div>
						</th>
					))}
				</tr>
			</thead>
			<tbody>
				{sortedArtefacts.map((artefact) => (
					<tr
						key={artefact.id}
						className="border-b border-neutral-200 hover:bg-neutral-100 cursor-pointer"
						onClick={() => setEditArtefact(artefact)}
					>
						{columns.map(({ key, width }) => (
							<td
								key={key}
								className={`py-3 px-5 text-sm text-neutral-600 truncate ${key === "name" && "font-medium text-neutral-800"}`}
								style={{ width }}
							>
								{key === "isRequired"
									? artefact.isRequired
										? "Yes"
										: "No"
									: key === "isSold"
									? artefact.isSold
										? "Yes"
										: "No"
									: key === "isCollected"
									? artefact.isCollected
										? "Yes"
										: "No"
									: artefact[key]}
							</td>
						))}
					</tr>
				))}
			</tbody>
		</table>
	);
}

// Modal Component for Logging Artefact
function LogModal({ onClose }: { onClose: () => void }) {
	const [name, setName] = useState("");
	const [description, setDescription] = useState("");
	const [location, setLocation] = useState("");
	const [earthquakeId, setEarthquakeId] = useState("");
	const [storageLocation, setStorageLocation] = useState("");
	const [isRequired, setIsRequired] = useState(true);
	const [error, setError] = useState("");
	const [isSubmitting, setIsSubmitting] = useState(false);

	const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
		if (e.target === e.currentTarget) {
			onClose();
		}
	};

	const handleLog = async () => {
		if (!name || !description || !location || !earthquakeId || !storageLocation) {
			setError("All fields are required.");
			return;
		}
		setIsSubmitting(true);
		try {
			await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
			alert(`Logged ${name} to storage: ${storageLocation}`);
			onClose();
		} catch {
			setError("Failed to log artefact. Please try again.");
		} finally {
			setIsSubmitting(false);
		}
	};

	return (
		<div
			className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
			onClick={handleOverlayClick}
		>
			<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-300">
				<h3 className="text-lg font-semibold mb-4 text-neutral-800">Log New Artefact</h3>
				{error && <p className="text-red-600 text-sm mb-2">{error}</p>}
				<div className="space-y-2">
					<input
						type="text"
						placeholder="Name"
						value={name}
						onChange={(e) => setName(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
						aria-label="Artefact Name"
						disabled={isSubmitting}
					/>
					<textarea
						placeholder="Description"
						value={description}
						onChange={(e) => setDescription(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-16"
						aria-label="Artefact Description"
						disabled={isSubmitting}
					/>
					<input
						type="text"
						placeholder="Location"
						value={location}
						onChange={(e) => setLocation(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
						aria-label="Artefact Location"
						disabled={isSubmitting}
					/>
					<input
						type="text"
						placeholder="Earthquake ID"
						value={earthquakeId}
						onChange={(e) => setEarthquakeId(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
						aria-label="Earthquake ID"
						disabled={isSubmitting}
					/>
					<input
						type="text"
						placeholder="Storage Location (e.g., A-12)"
						value={storageLocation}
						onChange={(e) => setStorageLocation(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
						aria-label="Storage Location"
						disabled={isSubmitting}
					/>
					<div className="flex items-center gap-2">
						<input
							type="checkbox"
							checked={isRequired}
							onChange={(e) => setIsRequired(e.target.checked)}
							className="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
							aria-label="Required Artefact"
							disabled={isSubmitting}
						/>
						<label className="text-sm text-neutral-600">Required (Not for Sale)</label>
					</div>
				</div>
				<div className="flex justify-end gap-3 mt-4">
					<button
						onClick={onClose}
						className="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-md hover:bg-neutral-300 font-medium"
						disabled={isSubmitting}
					>
						Cancel
					</button>
					<button
						onClick={handleLog}
						className={`px-4 py-2 bg-blue-600 text-white rounded-md font-medium flex items-center gap-2 ${
							isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
						}`}
						disabled={isSubmitting}
					>
						{isSubmitting ? (
							<>
								<svg
									className="animate-spin h-5 w-5 text-white"
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 24 24"
								>
									<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
									<path
										className="opacity-75"
										fill="currentColor"
										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
									></path>
								</svg>
								Logging...
							</>
						) : (
							"Log Artefact"
						)}
					</button>
				</div>
			</div>
		</div>
	);
}

// Modal Component for Bulk Logging
function BulkLogModal({ onClose }: { onClose: () => void }) {
	const [palletNote, setPalletNote] = useState("");
	const [storageLocation, setStorageLocation] = useState("");
	const [error, setError] = useState("");
	const [isSubmitting, setIsSubmitting] = useState(false);

	const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
		if (e.target === e.currentTarget) {
			onClose();
		}
	};

	const handleLog = async () => {
		if (!palletNote || !storageLocation) {
			setError("All fields are required.");
			return;
		}
		setIsSubmitting(true);
		try {
			await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
			alert(`Logged bulk pallet to storage: ${storageLocation}`);
			onClose();
		} catch {
			setError("Failed to log pallet. Please try again.");
		} finally {
			setIsSubmitting(false);
		}
	};

	return (
		<div
			className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
			onClick={handleOverlayClick}
		>
			<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-300">
				<h3 className="text-lg font-semibold mb-4 text-neutral-800">Log Bulk Pallet</h3>
				{error && <p className="text-red-600 text-sm mb-2">{error}</p>}
				<div className="space-y-2">
					<textarea
						placeholder="Pallet Delivery Note (e.g., 10 lava chunks, 5 ash samples)"
						value={palletNote}
						onChange={(e) => setPalletNote(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-24"
						aria-label="Pallet Delivery Note"
						disabled={isSubmitting}
					/>
					<input
						type="text"
						placeholder="Storage Location (e.g., B-05)"
						value={storageLocation}
						onChange={(e) => setStorageLocation(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
						aria-label="Storage Location"
						disabled={isSubmitting}
					/>
				</div>
				<div className="flex justify-end gap-3 mt-4">
					<button
						onClick={onClose}
						className="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-md hover:bg-neutral-300 font-medium"
						disabled={isSubmitting}
					>
						Cancel
					</button>
					<button
						onClick={handleLog}
						className={`px-4 py-2 bg-blue-600 text-white rounded-md font-medium flex items-center gap-2 ${
							isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
						}`}
						disabled={isSubmitting}
					>
						{isSubmitting ? (
							<>
								<svg
									className="animate-spin h-5 w-5 text-white"
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 24 24"
								>
									<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
									<path
										className="opacity-75"
										fill="currentColor"
										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
									></path>
								</svg>
								Logging...
							</>
						) : (
							"Log Pallet"
						)}
					</button>
				</div>
			</div>
		</div>
	);
}

// Modal Component for Editing Artefact
function EditModal({ artefact, onClose }: { artefact: Artefact; onClose: () => void }) {
	const [name, setName] = useState(artefact.name);
	const [description, setDescription] = useState(artefact.description);
	const [location, setLocation] = useState(artefact.location);
	const [earthquakeId, setEarthquakeId] = useState(artefact.earthquakeId);
	const [isRequired, setIsRequired] = useState(artefact.isRequired);
	const [isSold, setIsSold] = useState(artefact.isSold);
	const [isCollected, setIsCollected] = useState(artefact.isCollected);
	const [dateAdded, setDateAdded] = useState(artefact.dateAdded);
	const [error, setError] = useState("");
	const [isSubmitting, setIsSubmitting] = useState(false);

	const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
		if (e.target === e.currentTarget) {
			onClose();
		}
	};

	const handleSave = async () => {
		if (!name || !description || !location || !earthquakeId || !dateAdded) {
			setError("All fields are required.");
			return;
		}
		setIsSubmitting(true);
		try {
			await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
			alert(`Updated artefact ${name}`);
			onClose();
		} catch {
			setError("Failed to update artefact. Please try again.");
		} finally {
			setIsSubmitting(false);
		}
	};

	return (
		<div
			className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
			onClick={handleOverlayClick}
		>
			<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-300">
				<h3 className="text-lg font-semibold mb-4 text-neutral-800">Edit Artefact</h3>
				{error && <p className="text-red-600 text-sm mb-2">{error}</p>}
				<div className="space-y-2">
					<input
						type="text"
						value={name}
						onChange={(e) => setName(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
						aria-label="Artefact Name"
						disabled={isSubmitting}
					/>
					<textarea
						value={description}
						onChange={(e) => setDescription(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-16"
						aria-label="Artefact Description"
						disabled={isSubmitting}
					/>
					<input
						type="text"
						value={location}
						onChange={(e) => setLocation(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
						aria-label="Artefact Location"
						disabled={isSubmitting}
					/>
					<input
						type="text"
						value={earthquakeId}
						onChange={(e) => setEarthquakeId(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
						aria-label="Earthquake ID"
						disabled={isSubmitting}
					/>
					<div className="flex items-center gap-2">
						<input
							type="checkbox"
							checked={isRequired}
							onChange={(e) => setIsRequired(e.target.checked)}
							className="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
							aria-label="Required Artefact"
							disabled={isSubmitting}
						/>
						<label className="text-sm text-neutral-600">Required (Not for Sale)</label>
					</div>
					<div className="flex items-center gap-2">
						<input
							type="checkbox"
							checked={isSold}
							onChange={(e) => setIsSold(e.target.checked)}
							className="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
							aria-label="Sold Artefact"
							disabled={isSubmitting}
						/>
						<label className="text-sm text-neutral-600">Sold</label>
					</div>
					<div className="flex items-center gap-2">
						<input
							type="checkbox"
							checked={isCollected}
							onChange={(e) => setIsCollected(e.target.checked)}
							className="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
							aria-label="Collected Artefact"
							disabled={isSubmitting}
						/>
						<label className="text-sm text-neutral-600">Collected</label>
					</div>
					<input
						type="date"
						value={dateAdded}
						onChange={(e) => setDateAdded(e.target.value)}
						className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500"
						aria-label="Date Added"
						disabled={isSubmitting}
					/>
				</div>
				<div className="flex justify-end gap-3 mt-4">
					<button
						onClick={onClose}
						className="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-md hover:bg-neutral-300 font-medium"
						disabled={isSubmitting}
					>
						Cancel
					</button>
					<button
						onClick={handleSave}
						className={`px-4 py-2 bg-blue-600 text-white rounded-md font-medium flex items-center gap-2 ${
							isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
						}`}
						disabled={isSubmitting}
					>
						{isSubmitting ? (
							<>
								<svg
									className="animate-spin h-5 w-5 text-white"
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 24 24"
								>
									<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
									<path
										className="opacity-75"
										fill="currentColor"
										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
									></path>
								</svg>
								Saving...
							</>
						) : (
							"Save"
						)}
					</button>
				</div>
			</div>
		</div>
	);
}

// Filter Logic
const applyFilters = (artefacts: Artefact[], filters: Record<string, string>): Artefact[] => {
	return artefacts.filter((artefact) => {
		return (
			(filters.id === "" || artefact.id.toString().includes(filters.id)) &&
			(filters.name === "" || artefact.name.toLowerCase().includes(filters.name.toLowerCase())) &&
			(filters.earthquakeId === "" || artefact.earthquakeId.toLowerCase().includes(filters.earthquakeId.toLowerCase())) &&
			(filters.location === "" || artefact.location.toLowerCase().includes(filters.location.toLowerCase())) &&
			(filters.description === "" || artefact.description.toLowerCase().includes(filters.description.toLowerCase())) &&
			(filters.isRequired === "" || (filters.isRequired === "true" ? artefact.isRequired : !artefact.isRequired)) &&
			(filters.isSold === "" || (filters.isSold === "true" ? artefact.isSold : !artefact.isSold)) &&
			(filters.isCollected === "" || (filters.isCollected === "true" ? artefact.isCollected : !artefact.isCollected)) &&
			(filters.dateAdded === "" || artefact.dateAdded === filters.dateAdded)
		);
	});
};

// Warehouse Component
export default function Warehouse() {
	const [currentPage, setCurrentPage] = useState(1);
	const [showLogModal, setShowLogModal] = useState(false);
	const [showBulkLogModal, setShowBulkLogModal] = useState(false);
	const [editArtefact, setEditArtefact] = useState<Artefact | null>(null);
	const [filters, setFilters] = useState({
		id: "",
		name: "",
		earthquakeId: "",
		location: "",
		description: "",
		isRequired: "",
		isSold: "",
		isCollected: "",
		dateAdded: "",
	});
	const [isFiltering, setIsFiltering] = useState(false);
	const [sortConfig, setSortConfig] = useState<{
		key: keyof Artefact;
		direction: "asc" | "desc";
	} | null>(null);

	const artefactsPerPage = 10;
	const indexOfLastArtefact = currentPage * artefactsPerPage;
	const indexOfFirstArtefact = indexOfLastArtefact - artefactsPerPage;

	// Apply filters with loading state
	const filteredArtefacts = useMemo(() => {
		setIsFiltering(true);
		const result = applyFilters(warehouseArtefacts, filters);
		setIsFiltering(false);
		return result;
	}, [filters]);

	const currentArtefacts = filteredArtefacts.slice(indexOfFirstArtefact, indexOfLastArtefact);

	// Overview stats
	const totalArtefacts = warehouseArtefacts.length;
	const today = "2025-05-04";
	const artefactsAddedToday = warehouseArtefacts.filter((a) => a.dateAdded === today).length;
	const artefactsSoldToday = warehouseArtefacts.filter((a) => a.isSold && a.dateAdded === today).length;

	const clearFilters = () => {
		setFilters({
			id: "",
			name: "",
			earthquakeId: "",
			location: "",
			description: "",
			isRequired: "",
			isSold: "",
			isCollected: "",
			dateAdded: "",
		});
		setSortConfig(null); // Clear sorting
	};

	return (
		<div className="flex flex-col h-full bg-neutral-50">
			{/* Main Content */}
			<div className="flex flex-1 p-5">
				<div className="flex-grow flex flex-col">
					{/* Overview Stats */}
					<div className="flex gap-8 ml-5 mt-1">
						<div className="flex items-center text-md text-neutral-600">
							<FaWarehouse className="mr-2 h-8 w-8 text-blue-600 opacity-90" />
							Total Artefacts: <span className="font-semibold ml-1">{totalArtefacts}</span>
						</div>
						<div className="flex items-center text-md text-neutral-600">
							<IoToday className="mr-2 h-8 w-8 text-blue-600 opacity-90" />
							Added Today: <span className="font-semibold ml-1">{artefactsAddedToday}</span>
						</div>
						<div className="flex items-center text-md text-neutral-600">
							<FaCartShopping className="mr-2 h-8 w-8 text-blue-600 opacity-90" />
							Sold Today: <span className="font-semibold ml-1">{artefactsSoldToday}</span>
						</div>
					</div>

					{/* Logging Buttons */}
					<div className="flex justify-end gap-3 mb-4">
						<button
							onClick={clearFilters}
							className="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-md hover:bg-neutral-300 font-medium"
						>
							Clear All Filters
						</button>
						<button
							onClick={() => setShowLogModal(true)}
							className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
						>
							Log Single Artefact
						</button>
						<button
							onClick={() => setShowBulkLogModal(true)}
							className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
						>
							Log Bulk Pallet
						</button>
					</div>

					{/* Table Card */}
					<div className="flex-grow bg-white rounded-lg shadow-md border border-neutral-200 overflow-hidden relative">
						{isFiltering && (
							<div className="absolute inset-0 bg-white bg-opacity-50 flex items-center justify-center z-20">
								<svg
									className="animate-spin h-8 w-8 text-blue-600"
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 24 24"
								>
									<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
									<path
										className="opacity-75"
										fill="currentColor"
										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
									></path>
								</svg>
							</div>
						)}
						<div className="h-full overflow-y-none">
							<ArtefactTable
								artefacts={currentArtefacts}
								filters={filters}
								setFilters={setFilters}
								setEditArtefact={setEditArtefact}
								clearSort={() => setSortConfig(null)}
							/>
						</div>
					</div>
				</div>
			</div>

			{/* Modals */}
			{showLogModal && <LogModal onClose={() => setShowLogModal(false)} />}
			{showBulkLogModal && <BulkLogModal onClose={() => setShowBulkLogModal(false)} />}
			{editArtefact && <EditModal artefact={editArtefact} onClose={() => setEditArtefact(null)} />}
		</div>
	);
}