"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import ProjectForm from "@/components/ProjectForm";
import PageContainer from "@/components/ui/PageContainer";
import PageHeader from "@/components/ui/PageHeader";
import Button from "@/components/ui/Button";
import Link from "next/link";
import { LoadingState } from "@/components/ui/States";

export default function EditProjectPage() {
	const params = useParams();
	const id = params.id;
	const [project, setProject] = useState(null);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState(null);

	useEffect(() => {
		const fetchProject = async () => {
			try {
				const res = await fetch(`/api/projects/${id}`);
				if (res.ok) {
					const projectData = await res.json();
					setProject(projectData);
				} else {
					setError("Project not found");
				}
			} catch (err) {
				setError("Failed to load project");
			} finally {
				setLoading(false);
			}
		};

		if (id) {
			fetchProject();
		}
	}, [id]);

	if (loading) {
		return (
			<PageContainer>
				<LoadingState />
			</PageContainer>
		);
	}

	if (error || !project) {
		return (
			<PageContainer>
				<div className="text-center py-12">
					<p className="text-red-600 text-lg mb-4">Project not found.</p>
					<Link href="/projects">
						<Button variant="primary">Back to Projects</Button>
					</Link>
				</div>
			</PageContainer>
		);
	}

	return (
		<PageContainer>
			<PageHeader
				title="Edit Project"
				description={`Editing: ${project.project_name || "Untitled Project"}`}
				action={
					<div className="flex items-center gap-3">
						<Link href={`/projects/${id}`}>
							<Button variant="outline" size="sm">
								<svg
									className="w-4 h-4 mr-2"
									fill="none"
									stroke="currentColor"
									viewBox="0 0 24 24"
								>
									<path
										strokeLinecap="round"
										strokeLinejoin="round"
										strokeWidth={2}
										d="M6 18L18 6M6 6l12 12"
									/>
								</svg>
								Cancel
							</Button>
						</Link>
						<Link href="/projects">
							<Button variant="outline" size="sm">
								<svg
									className="w-4 h-4 mr-2"
									fill="none"
									stroke="currentColor"
									viewBox="0 0 24 24"
								>
									<path
										strokeLinecap="round"
										strokeLinejoin="round"
										strokeWidth={2}
										d="M15 19l-7-7 7-7"
									/>
								</svg>
								Back to Projects
							</Button>
						</Link>
					</div>
				}
			/>
			<div className="max-w-2xl">
				<ProjectForm initialData={project} />
			</div>
		</PageContainer>
	);
}