panel/src/components/ProjectStatusDropdownSimple.js

"use client";

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

export default function ProjectStatusDropdownSimple({
	project,
	size = "md",
	showDropdown = true,
}) {
	const [status, setStatus] = useState(project.project_status);
	const [loading, setLoading] = useState(false);
	const [isOpen, setIsOpen] = useState(false);

	const statusConfig = {
		registered: {
			label: "Registered",
			variant: "secondary",
		},
		in_progress_design: {
			label: "In Progress (Design)",
			variant: "primary",
		},
		in_progress_construction: {
			label: "In Progress (Construction)",
			variant: "primary",
		},
		fulfilled: {
			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 {
			await fetch(`/api/projects/${project.project_id}`, {
				method: "PUT",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({ ...project, project_status: newStatus }),
			});
			window.location.reload();
		} catch (error) {
			console.error("Failed to update status:", error);
			setStatus(project.project_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(
						"ProjectStatusDropdown 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 dropdown for debugging */}
			{isOpen && (
				<div className="absolute top-full left-0 mt-1 bg-white dark:bg-gray-800 border-2 border-red-500 rounded-md shadow-lg z-[9999] min-w-[140px]">
					<div className="bg-yellow-100 dark:bg-yellow-900 p-2 text-xs text-center border-b dark:border-gray-600">
						DEBUG: ProjectStatus Dropdown is visible
					</div>
					{Object.entries(statusConfig).map(([statusKey, config]) => (
						<button
							key={statusKey}
							onClick={() => {
								console.log("ProjectStatus Option clicked:", statusKey);
								handleChange(statusKey);
							}}
							className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 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("ProjectStatus Backdrop clicked");
						setIsOpen(false);
					}}
				/>
			)}
		</div>
	);
}