panel/src/components/TaskTemplateForm.js

"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Button from "./ui/Button";
import { Input } from "./ui/Input";

export default function TaskTemplateForm({
	templateId = null,
	initialData = null,
}) {
	const [name, setName] = useState("");
	const [max_wait_days, setRequiredWaitDays] = useState("");
	const [description, setDescription] = useState("");
	const [loading, setLoading] = useState(false);
	const [isEditing, setIsEditing] = useState(false);
	const router = useRouter();

	// Load initial data for editing
	useEffect(() => {
		if (templateId) {
			setIsEditing(true);
			if (initialData) {
				setName(initialData.name || "");
				setRequiredWaitDays(initialData.max_wait_days?.toString() || "");
				setDescription(initialData.description || "");
			}
		}
	}, [templateId, initialData]);

	async function handleSubmit(e) {
		e.preventDefault();
		setLoading(true);

		try {
			const url = isEditing ? `/api/tasks/${templateId}` : "/api/tasks";
			const method = isEditing ? "PUT" : "POST";

			const res = await fetch(url, {
				method,
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({
					name,
					max_wait_days: parseInt(max_wait_days, 10) || 0,
					description: description || null,
				}),
			});

			if (res.ok) {
				router.push("/tasks/templates");
			} else {
				const error = await res.json();
				alert(
					error.error ||
						`Failed to ${isEditing ? "update" : "create"} task template.`
				);
			}
		} catch (error) {
			alert(`Error ${isEditing ? "updating" : "creating"} task template.`);
		} finally {
			setLoading(false);
		}
	}
	return (
		<form onSubmit={handleSubmit} className="space-y-6">
			<div>
				<label className="block text-sm font-medium text-gray-700 mb-2">
					Template Name *
				</label>
				<Input
					type="text"
					value={name}
					onChange={(e) => setName(e.target.value)}
					placeholder="Enter template name"
					required
				/>
			</div>

			<div>
				<label className="block text-sm font-medium text-gray-700 mb-2">
					Max Wait Days
				</label>
				<Input
					type="number"
					value={max_wait_days}
					onChange={(e) => setRequiredWaitDays(e.target.value)}
					placeholder="Enter maximum wait days"
					min="0"
				/>
				<p className="text-sm text-gray-500 mt-1">
					Maximum number of days this task can wait before it needs attention
				</p>
			</div>

			<div>
				<label className="block text-sm font-medium text-gray-700 mb-2">
					Description
				</label>
				<textarea
					value={description}
					onChange={(e) => setDescription(e.target.value)}
					placeholder="Enter template description (optional)"
					rows={3}
					className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
				/>
			</div>

			<div className="flex gap-3">
				<Button type="submit" variant="primary" disabled={loading}>
					{loading ? (
						<>
							<div className="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
							{isEditing ? "Updating..." : "Creating..."}
						</>
					) : isEditing ? (
						"Update Template"
					) : (
						"Create Template"
					)}
				</Button>
				<Button
					type="button"
					variant="outline"
					onClick={() => router.push("/tasks/templates")}
					disabled={loading}
				>
					Cancel
				</Button>
			</div>
		</form>
	);
}