"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";

export default function ProjectListPage() {
	const [projects, setProjects] = useState([]);

	useEffect(() => {
		fetch("/api/projects")
			.then((res) => res.json())
			.then(setProjects);
	}, []);

	async function handleDelete(id) {
		const confirmed = confirm("Are you sure you want to delete this project?");
		if (!confirmed) return;

		const res = await fetch(`/api/projects/${id}`, {
			method: "DELETE",
		});

		if (res.ok) {
			setProjects((prev) => prev.filter((p) => p.project_id !== id));
		}
	}
	return (
		<div className="min-h-screen bg-gray-50">
			<div className="max-w-6xl mx-auto p-6">
				<div className="flex justify-between items-center mb-8">
					<div>
						<h1 className="text-3xl font-bold text-gray-900">Projects</h1>
						<p className="text-gray-600 mt-1">Manage and track your projects</p>
					</div>
					<Link href="/projects/new">
						<Button variant="primary" size="lg">
							<svg
								className="w-5 h-5 mr-2"
								fill="none"
								stroke="currentColor"
								viewBox="0 0 24 24"
							>
								<path
									strokeLinecap="round"
									strokeLinejoin="round"
									strokeWidth={2}
									d="M12 4v16m8-8H4"
								/>
							</svg>
							Add Project
						</Button>
					</Link>
				</div>

				{projects.length === 0 ? (
					<Card>
						<CardContent className="text-center py-12">
							<div className="text-gray-400 mb-4">
								<svg
									className="w-16 h-16 mx-auto"
									fill="currentColor"
									viewBox="0 0 20 20"
								>
									<path
										fillRule="evenodd"
										d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
										clipRule="evenodd"
									/>
								</svg>
							</div>
							<h3 className="text-lg font-medium text-gray-900 mb-2">
								No projects yet
							</h3>
							<p className="text-gray-500 mb-6">
								Get started by creating your first project
							</p>
							<Link href="/projects/new">
								<Button variant="primary">Create First Project</Button>
							</Link>
						</CardContent>
					</Card>
				) : (
					<div className="space-y-4">
						{projects.map((project) => (
							<Card
								key={project.project_id}
								className="hover:shadow-md transition-shadow"
							>
								<CardContent className="p-6">
									<div className="flex items-start justify-between">
										<div className="flex-1 min-w-0">
											<div className="flex items-center gap-3 mb-2">
												<Link
													href={`/projects/${project.project_id}`}
													className="text-xl font-semibold text-blue-600 hover:text-blue-800 transition-colors truncate"
												>
													{project.project_name}
												</Link>
												<Badge variant="primary" size="sm">
													{project.project_number}
												</Badge>
											</div>

											<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm text-gray-600 mb-4">
												<div>
													<span className="font-medium">Location:</span>{" "}
													{project.city}
												</div>
												<div>
													<span className="font-medium">Finish Date:</span>{" "}
													{project.finish_date}
												</div>
												<div>
													<span className="font-medium">Contract:</span>{" "}
													{project.contract_number}
												</div>
											</div>

											<div className="flex items-center gap-4">
												<Link href={`/projects/${project.project_id}`}>
													<Button variant="outline" size="sm">
														View Details
													</Button>
												</Link>
												<Link href={`/projects/${project.project_id}/edit`}>
													<Button variant="secondary" size="sm">
														Edit
													</Button>
												</Link>
											</div>
										</div>

										<div className="ml-4 flex-shrink-0">
											<Button
												variant="danger"
												size="sm"
												onClick={() => handleDelete(project.project_id)}
											>
												Delete
											</Button>
										</div>
									</div>
								</CardContent>
							</Card>
						))}
					</div>
				)}
			</div>
		</div>
	);
}