panel/src/components/ProjectStatusDropdown.js

"use client";

import { useState, useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import Badge from "@/components/ui/Badge";
import { useTranslation } from "@/lib/i18n";

export default function ProjectStatusDropdown({
	project,
	size = "md",
	showDropdown = true,
}) {
	const { t } = useTranslation();
	const [status, setStatus] = useState(project.project_status);
	const [loading, setLoading] = useState(false);
	const [isOpen, setIsOpen] = useState(false);
	const [dropdownPosition, setDropdownPosition] = useState({
		top: 0,
		left: 0,
		width: 0,
	});
	const buttonRef = useRef(null);

	const statusConfig = {
		registered: {
			label: t("projectStatus.registered"),
			variant: "secondary",
		},
		in_progress_design: {
			label: t("projectStatus.in_progress_design"),
			variant: "primary",
		},
		in_progress_construction: {
			label: t("projectStatus.in_progress_construction"),
			variant: "primary",
		},
		fulfilled: {
			label: t("projectStatus.fulfilled"),
			variant: "success",
		},
		cancelled: {
			label: t("projectStatus.cancelled"),
			variant: "danger",
		},
	};
	const handleChange = async (newStatus) => {
		if (newStatus === status) {
			setIsOpen(false);
			return;
		}

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

		try {
			const updateData = { ...project, project_status: newStatus };
			
			const response = await fetch(`/api/projects/${project.project_id}`, {
				method: "PUT",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify(updateData),
			});
			
			if (!response.ok) {
				const errorData = await response.json();
				console.error('Update failed:', errorData);
			}
			
			window.location.reload();
		} catch (error) {
			console.error("Failed to update status:", error);
			setStatus(project.project_status); // Revert on error
		} finally {
			setLoading(false);
		}
	};

	const updateDropdownPosition = () => {
		if (buttonRef.current) {
			const rect = buttonRef.current.getBoundingClientRect();
			setDropdownPosition({
				top: rect.bottom + window.scrollY + 4,
				left: rect.left + window.scrollX,
				width: rect.width,
			});
		}
	};
	const handleOpen = () => {
		setIsOpen(true);
	};

	useEffect(() => {
		if (isOpen) {
			const handleResize = () => updateDropdownPosition();
			const handleScroll = () => updateDropdownPosition();

			window.addEventListener("resize", handleResize);
			window.addEventListener("scroll", handleScroll, true);

			return () => {
				window.removeEventListener("resize", handleResize);
				window.removeEventListener("scroll", handleScroll, true);
			};
		}
	}, [isOpen]);

	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
				ref={buttonRef}
				onClick={() => {
					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>{" "}
			{/* Status Options Dropdown */}
			{isOpen && (
				<div className="absolute top-full left-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg z-[9999] min-w-[140px]">
					{Object.entries(statusConfig).map(([statusKey, config]) => (
						<button
							key={statusKey}
							onClick={() => {
								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]"
					onClick={() => {
						setIsOpen(false);
					}}
				/>
			)}
		</div>
	);
}