panel/src/components/TaskStatusDropdownDebug.js

"use client";

import { useState } from "react";
import Badge from "@/components/ui/Badge";

export default function TaskStatusDropdownDebug({
	task,
	size = "sm",
	showDropdown = true,
	onStatusChange,
}) {
	const [status, setStatus] = useState(task.status);
	const [loading, setLoading] = useState(false);
	const [isOpen, setIsOpen] = useState(false);

	const statusConfig = {
		pending: {
			label: "Pending",
			variant: "warning",
		},
		in_progress: {
			label: "In Progress",
			variant: "primary",
		},
		completed: {
			label: "Completed",
			variant: "success",
		},
		cancelled: {
			label: "Cancelled",
			variant: "danger",
		},
	};

	const handleChange = async (newStatus) => {
		if (newStatus === status) {
			setIsOpen(false);
			return;
		}

		setStatus(newStatus);
		setLoading(true);
		setIsOpen(false);

		try {
			const res = await fetch(`/api/project-tasks/${task.id}`, {
				method: "PATCH",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({ status: newStatus }),
			});

			if (res.ok) {
				if (onStatusChange) {
					onStatusChange(task.id, newStatus);
				}
			} else {
				setStatus(task.status);
				alert("Failed to update task status");
			}
		} catch (error) {
			console.error("Failed to update status:", error);
			setStatus(task.status);
			alert("Error updating task status");
		} finally {
			setLoading(false);
		}
	};

	const currentConfig = statusConfig[status] || {
		label: "Unknown",
		variant: "default",
	};

	if (!showDropdown) {
		return (
			<Badge variant={currentConfig.variant} size={size}>
				{currentConfig.label}
			</Badge>
		);
	}

	return (
		<div className="relative">
			<button
				onClick={() => {
					console.log("Button clicked, current isOpen:", isOpen);
					setIsOpen(!isOpen);
				}}
				disabled={loading}
				className="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded-md"
			>
				<Badge
					variant={currentConfig.variant}
					size={size}
					className={`cursor-pointer hover:opacity-80 transition-opacity ${
						loading ? "opacity-50" : ""
					}`}
				>
					{loading ? "Updating..." : currentConfig.label}
					<svg
						className={`w-3 h-3 ml-1 transition-transform ${
							isOpen ? "rotate-180" : ""
						}`}
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={2}
							d="M19 9l-7 7-7-7"
						/>
					</svg>
				</Badge>
			</button>

			{/* Simple visible dropdown for debugging */}
			{isOpen && (
				<div className="absolute top-full left-0 mt-1 bg-white border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[120px]">
					<div className="bg-yellow-100 p-2 text-xs text-center border-b">
						DEBUG: Dropdown is visible
					</div>
					{Object.entries(statusConfig).map(([statusKey, config]) => (
						<button
							key={statusKey}
							onClick={() => {
								console.log("Option clicked:", statusKey);
								handleChange(statusKey);
							}}
							className="w-full text-left px-3 py-2 hover:bg-gray-50 transition-colors first:rounded-t-md last:rounded-b-md"
						>
							<Badge variant={config.variant} size="sm">
								{config.label}
							</Badge>
						</button>
					))}
				</div>
			)}

			{/* Backdrop */}
			{isOpen && (
				<div
					className="fixed inset-0 z-[9998] bg-black bg-opacity-10"
					onClick={() => {
						console.log("Backdrop clicked");
						setIsOpen(false);
					}}
				/>
			)}
		</div>
	);
}