import React from "react";
import type { GraphFilters } from "../types/graph";

interface DependencyFiltersProps {
	filters: GraphFilters;
	onChange: (filters: GraphFilters) => void;
	statuses: string[];
	availableLabels: string[];
}

export default function DependencyFilters({
	filters,
	onChange,
	statuses,
	availableLabels,
}: DependencyFiltersProps) {
	const handleShowCompletedChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		onChange({ ...filters, showCompleted: e.target.checked });
	};

	const handleStatusChange = (status: string) => {
		const currentStatuses = filters.status || [];
		const newStatuses = currentStatuses.includes(status)
			? currentStatuses.filter((s) => s !== status)
			: [...currentStatuses, status];
		onChange({ ...filters, status: newStatuses.length > 0 ? newStatuses : undefined });
	};

	const handlePriorityChange = (priority: "high" | "medium" | "low") => {
		const currentPriorities = filters.priority || [];
		const newPriorities = currentPriorities.includes(priority)
			? currentPriorities.filter((p) => p !== priority)
			: [...currentPriorities, priority];
		onChange({ ...filters, priority: newPriorities.length > 0 ? newPriorities : undefined });
	};

	return (
		<div className="flex flex-wrap items-center gap-4 text-sm">
			{/* Show Completed Toggle */}
			<label className="flex items-center gap-2 text-gray-600 dark:text-gray-300 cursor-pointer">
				<input
					type="checkbox"
					checked={filters.showCompleted || false}
					onChange={handleShowCompletedChange}
					className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
				/>
				Show completed
			</label>

			{/* Status Filter Dropdown */}
			<div className="relative group">
				<button
					type="button"
					className="flex items-center gap-1 px-3 py-1.5 text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600"
				>
					<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
						/>
					</svg>
					Status
					{filters.status && filters.status.length > 0 && (
						<span className="ml-1 px-1.5 py-0.5 text-xs bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full">
							{filters.status.length}
						</span>
					)}
				</button>
				<div className="absolute right-0 mt-1 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 hidden group-hover:block z-10">
					<div className="p-2 space-y-1">
						{statuses.map((status) => (
							<label
								key={status}
								className="flex items-center gap-2 px-2 py-1 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
							>
								<input
									type="checkbox"
									checked={filters.status?.includes(status) || false}
									onChange={() => handleStatusChange(status)}
									className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
								/>
								<span className="text-gray-700 dark:text-gray-300">{status}</span>
							</label>
						))}
					</div>
				</div>
			</div>

			{/* Priority Filter Dropdown */}
			<div className="relative group">
				<button
					type="button"
					className="flex items-center gap-1 px-3 py-1.5 text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600"
				>
					<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
						/>
					</svg>
					Priority
					{filters.priority && filters.priority.length > 0 && (
						<span className="ml-1 px-1.5 py-0.5 text-xs bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full">
							{filters.priority.length}
						</span>
					)}
				</button>
				<div className="absolute right-0 mt-1 w-36 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 hidden group-hover:block z-10">
					<div className="p-2 space-y-1">
						{(["high", "medium", "low"] as const).map((priority) => (
							<label
								key={priority}
								className="flex items-center gap-2 px-2 py-1 rounded cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
							>
								<input
									type="checkbox"
									checked={filters.priority?.includes(priority) || false}
									onChange={() => handlePriorityChange(priority)}
									className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
								/>
								<span
									className={`text-gray-700 dark:text-gray-300 capitalize ${
										priority === "high"
											? "text-red-600 dark:text-red-400"
											: priority === "medium"
												? "text-yellow-600 dark:text-yellow-400"
												: "text-green-600 dark:text-green-400"
									}`}
								>
									{priority}
								</span>
							</label>
						))}
					</div>
				</div>
			</div>

			{/* Clear Filters */}
			{(filters.status?.length ||
				filters.priority?.length ||
				filters.labels?.length ||
				filters.showCompleted) && (
				<button
					type="button"
					onClick={() =>
						onChange({ status: undefined, priority: undefined, labels: undefined, showCompleted: false })
					}
					className="px-2 py-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
				>
					Clear
				</button>
			)}
		</div>
	);
}
