import { useState, useEffect } from "react";
import { format } from "date-fns";

export default function AuditLogViewer() {
	const [logs, setLogs] = useState([]);
	const [stats, setStats] = useState(null);
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState(null);
	const [filters, setFilters] = useState({
		action: "",
		resourceType: "",
		userId: "",
		startDate: "",
		endDate: "",
		limit: 50,
		offset: 0,
	});

	const [actionTypes, setActionTypes] = useState([]);
	const [resourceTypes, setResourceTypes] = useState([]);

	const fetchAuditLogs = async () => {
		setLoading(true);
		setError(null);

		try {
			const queryParams = new URLSearchParams();

			Object.entries(filters).forEach(([key, value]) => {
				if (value && value !== "") {
					queryParams.append(key, value);
				}
			});

			queryParams.append("includeStats", "true");

			const response = await fetch(`/api/audit-logs?${queryParams}`);

			if (!response.ok) {
				throw new Error("Failed to fetch audit logs");
			}

			const result = await response.json();
			setLogs(result.data);
			setStats(result.stats);
		} catch (err) {
			setError(err.message);
		} finally {
			setLoading(false);
		}
	};

	useEffect(() => {
		// Set available filter options
		setActionTypes([
			"login",
			"logout",
			"login_failed",
			"project_create",
			"project_update",
			"project_delete",
			"project_view",
			"task_create",
			"task_update",
			"task_delete",
			"task_status_change",
			"project_task_create",
			"project_task_update",
			"project_task_delete",
			"contract_create",
			"contract_update",
			"contract_delete",
			"note_create",
			"note_update",
			"note_delete",
			"user_create",
			"user_update",
			"user_delete",
			"user_role_change",
		]);

		setResourceTypes([
			"project",
			"task",
			"project_task",
			"contract",
			"note",
			"user",
			"session",
			"system",
		]);

		fetchAuditLogs();
	}, []); // eslint-disable-line react-hooks/exhaustive-deps

	const handleFilterChange = (key, value) => {
		setFilters((prev) => ({
			...prev,
			[key]: value,
			offset: 0, // Reset pagination when filters change
		}));
	};

	const handleSearch = () => {
		fetchAuditLogs();
	};

	const handleClearFilters = () => {
		setFilters({
			action: "",
			resourceType: "",
			userId: "",
			startDate: "",
			endDate: "",
			limit: 50,
			offset: 0,
		});
	};

	const loadMore = () => {
		setFilters((prev) => ({
			...prev,
			offset: prev.offset + prev.limit,
		}));
	};

	useEffect(() => {
		if (filters.offset > 0) {
			fetchAuditLogs();
		}
	}, [filters.offset]); // eslint-disable-line react-hooks/exhaustive-deps

	const formatTimestamp = (timestamp) => {
		try {
			return format(new Date(timestamp), "yyyy-MM-dd HH:mm:ss");
		} catch {
			return timestamp;
		}
	};

	const getActionColor = (action) => {
		const colorMap = {
			login: "text-green-600",
			logout: "text-blue-600",
			login_failed: "text-red-600",
			create: "text-green-600",
			update: "text-yellow-600",
			delete: "text-red-600",
			view: "text-gray-600",
		};

		for (const [key, color] of Object.entries(colorMap)) {
			if (action.includes(key)) {
				return color;
			}
		}
		return "text-gray-600";
	};

	return (
		<div className="p-6 max-w-7xl mx-auto">
			<div className="mb-6">
				<h1 className="text-2xl font-bold text-gray-900 mb-2">Audit Logs</h1>
				<p className="text-gray-600">View system activity and user actions</p>
			</div>

			{/* Filters */}
			<div className="bg-white p-4 rounded-lg shadow mb-6">
				<h2 className="text-lg font-semibold mb-4">Filters</h2>
				<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-4">
					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							Action
						</label>
						<select
							value={filters.action}
							onChange={(e) => handleFilterChange("action", e.target.value)}
							className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
						>
							<option value="">All Actions</option>
							{actionTypes.map((action) => (
								<option key={action} value={action}>
									{action.replace(/_/g, " ").toUpperCase()}
								</option>
							))}
						</select>
					</div>

					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							Resource Type
						</label>
						<select
							value={filters.resourceType}
							onChange={(e) =>
								handleFilterChange("resourceType", e.target.value)
							}
							className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
						>
							<option value="">All Resources</option>
							{resourceTypes.map((type) => (
								<option key={type} value={type}>
									{type.replace(/_/g, " ").toUpperCase()}
								</option>
							))}
						</select>
					</div>

					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							User ID
						</label>
						<input
							type="text"
							value={filters.userId}
							onChange={(e) => handleFilterChange("userId", e.target.value)}
							placeholder="Enter user ID"
							className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
						/>
					</div>

					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							Start Date
						</label>
						<input
							type="datetime-local"
							value={filters.startDate}
							onChange={(e) => handleFilterChange("startDate", e.target.value)}
							className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
						/>
					</div>

					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							End Date
						</label>
						<input
							type="datetime-local"
							value={filters.endDate}
							onChange={(e) => handleFilterChange("endDate", e.target.value)}
							className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
						/>
					</div>

					<div>
						<label className="block text-sm font-medium text-gray-700 mb-1">
							Limit
						</label>
						<select
							value={filters.limit}
							onChange={(e) =>
								handleFilterChange("limit", parseInt(e.target.value))
							}
							className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"
						>
							<option value={25}>25</option>
							<option value={50}>50</option>
							<option value={100}>100</option>
							<option value={200}>200</option>
						</select>
					</div>
				</div>

				<div className="flex gap-2">
					<button
						onClick={handleSearch}
						disabled={loading}
						className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
					>
						{loading ? "Searching..." : "Search"}
					</button>
					<button
						onClick={handleClearFilters}
						className="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700"
					>
						Clear Filters
					</button>
				</div>
			</div>

			{/* Statistics */}
			{stats && stats.total > 0 && (
				<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
					<div className="bg-white p-4 rounded-lg shadow">
						<h3 className="text-lg font-semibold">Total Events</h3>
						<p className="text-2xl font-bold text-blue-600">{stats.total}</p>
					</div>
					<div className="bg-white p-4 rounded-lg shadow">
						<h3 className="text-lg font-semibold">Top Action</h3>
						<p className="text-sm font-medium">
							{stats.actionBreakdown && stats.actionBreakdown[0]?.action || "N/A"}
						</p>
						<p className="text-lg font-bold text-green-600">
							{stats.actionBreakdown && stats.actionBreakdown[0]?.count || 0}
						</p>
					</div>
					<div className="bg-white p-4 rounded-lg shadow">
						<h3 className="text-lg font-semibold">Active Users</h3>
						<p className="text-2xl font-bold text-purple-600">
							{stats.userBreakdown ? stats.userBreakdown.length : 0}
						</p>
					</div>
					<div className="bg-white p-4 rounded-lg shadow">
						<h3 className="text-lg font-semibold">Resource Types</h3>
						<p className="text-2xl font-bold text-orange-600">
							{stats.resourceBreakdown ? stats.resourceBreakdown.length : 0}
						</p>
					</div>
				</div>
			)}

			{/* Error Message */}
			{error && (
				<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-6">
					{error}
				</div>
			)}

			{/* Audit Logs Table */}
			<div className="bg-white rounded-lg shadow overflow-hidden">
				<div className="overflow-x-auto">
					<table className="min-w-full divide-y divide-gray-200">
						<thead className="bg-gray-50">
							<tr>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Timestamp
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									User
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Action
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Resource
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									IP Address
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Details
								</th>
							</tr>
						</thead>
						<tbody className="bg-white divide-y divide-gray-200">
							{logs.map((log) => (
								<tr key={log.id} className="hover:bg-gray-50">
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{formatTimestamp(log.timestamp)}
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										<div>
											<div className="font-medium">
												{log.user_name || "Anonymous"}
											</div>
											<div className="text-gray-500">{log.user_email}</div>
										</div>
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm">
										<span
											className={`font-medium ${getActionColor(log.action)}`}
										>
											{log.action.replace(/_/g, " ").toUpperCase()}
										</span>
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										<div>
											<div className="font-medium">
												{log.resource_type || "N/A"}
											</div>
											<div className="text-gray-500">
												ID: {log.resource_id || "N/A"}
											</div>
										</div>
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
										{log.ip_address || "Unknown"}
									</td>
									<td className="px-6 py-4 text-sm text-gray-500">
										{log.details && (
											<details className="cursor-pointer">
												<summary className="text-blue-600 hover:text-blue-800">
													View Details
												</summary>
												<pre className="mt-2 text-xs bg-gray-100 p-2 rounded overflow-auto max-w-md">
													{JSON.stringify(log.details, null, 2)}
												</pre>
											</details>
										)}
									</td>
								</tr>
							))}
						</tbody>
					</table>
				</div>

				{logs.length === 0 && !loading && (
					<div className="text-center py-8 text-gray-500">
						No audit logs found matching your criteria.
					</div>
				)}

				{logs.length > 0 && (
					<div className="px-6 py-3 bg-gray-50 border-t border-gray-200">
						<div className="flex justify-between items-center">
							<div className="text-sm text-gray-700">
								Showing {filters.offset + 1} to {filters.offset + logs.length}{" "}
								results
							</div>
							<button
								onClick={loadMore}
								disabled={loading || logs.length < filters.limit}
								className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
							>
								Load More
							</button>
						</div>
					</div>
				)}
			</div>
		</div>
	);
}