"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import PageContainer from "@/components/ui/PageContainer";
import PageHeader from "@/components/ui/PageHeader";
import { LoadingState } from "@/components/ui/States";
import { formatDate } from "@/lib/utils";

export default function ContractDetailsPage() {
	const params = useParams();
	const contractId = params.id;
	const [contract, setContract] = useState(null);
	const [projects, setProjects] = useState([]);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		async function fetchContractDetails() {
			setLoading(true);
			try {
				// Fetch contract details
				const contractRes = await fetch(`/api/contracts/${contractId}`);
				if (contractRes.ok) {
					const contractData = await contractRes.json();
					setContract(contractData);
				}

				// Fetch projects for this contract
				const projectsRes = await fetch(
					`/api/projects?contract_id=${contractId}`
				);
				if (projectsRes.ok) {
					const projectsData = await projectsRes.json();
					setProjects(projectsData);
				}
			} catch (error) {
				console.error("Error fetching contract details:", error);
			} finally {
				setLoading(false);
			}
		}

		if (contractId) {
			fetchContractDetails();
		}
	}, [contractId]);
	if (loading) {
		return (
			<PageContainer>
				<LoadingState message="Loading contract details..." />
			</PageContainer>
		);
	}

	if (!contract) {
		return (
			<PageContainer>
				<Card>
					<CardContent className="text-center py-12">
						<p className="text-red-600 text-lg mb-4">Contract not found.</p>
						<Link href="/contracts">
							<Button variant="primary">Back to Contracts</Button>
						</Link>
					</CardContent>
				</Card>
			</PageContainer>
		);
	}
	return (
		<PageContainer>
			<PageHeader
				title={`Contract ${contract.contract_number}`}
				description={contract.contract_name || "Contract Details"}
				action={
					<div className="flex items-center gap-3">
						<Link href="/contracts">
							<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 Contracts
							</Button>
						</Link>
						<Link href={`/projects/new?contract_id=${contractId}`}>
							<Button variant="primary" 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="M12 4v16m8-8H4"
									/>
								</svg>
								Add Project
							</Button>
						</Link>
					</div>
				}
			/>

			{/* Contract Details */}
			<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
				<div className="lg:col-span-2">
					<Card>
						<CardHeader>
							<h2 className="text-xl font-semibold text-gray-900">
								Contract Information
							</h2>
						</CardHeader>
						<CardContent className="space-y-6">
							<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Contract Number
									</span>
									<p className="text-gray-900 font-medium">
										{contract.contract_number}
									</p>
								</div>
								{contract.contract_name && (
									<div>
										<span className="text-sm font-medium text-gray-500 block mb-1">
											Contract Name
										</span>
										<p className="text-gray-900 font-medium">
											{contract.contract_name}
										</p>
									</div>
								)}
								{contract.customer_contract_number && (
									<div>
										<span className="text-sm font-medium text-gray-500 block mb-1">
											Customer Contract Number
										</span>
										<p className="text-gray-900 font-medium">
											{contract.customer_contract_number}
										</p>
									</div>
								)}
								{contract.customer && (
									<div>
										<span className="text-sm font-medium text-gray-500 block mb-1">
											Customer
										</span>
										<p className="text-gray-900 font-medium">
											{contract.customer}
										</p>
									</div>
								)}
								{contract.investor && (
									<div>
										<span className="text-sm font-medium text-gray-500 block mb-1">
											Investor
										</span>
										<p className="text-gray-900 font-medium">
											{contract.investor}
										</p>
									</div>
								)}{" "}
								{contract.date_signed && (
									<div>
										<span className="text-sm font-medium text-gray-500 block mb-1">
											Date Signed
										</span>
										<p className="text-gray-900 font-medium">
											{formatDate(contract.date_signed)}
										</p>
									</div>
								)}
								{contract.finish_date && (
									<div>
										<span className="text-sm font-medium text-gray-500 block mb-1">
											Finish Date
										</span>
										<p className="text-gray-900 font-medium">
											{formatDate(contract.finish_date)}
										</p>
									</div>
								)}
							</div>
						</CardContent>
					</Card>
				</div>

				{/* Contract Summary Sidebar */}
				<div>
					<Card>
						<CardHeader>
							<h2 className="text-lg font-semibold text-gray-900">Summary</h2>
						</CardHeader>
						<CardContent className="space-y-4">
							<div>
								<span className="text-sm font-medium text-gray-500 block mb-2">
									Projects Count
								</span>
								<Badge variant="primary" size="lg">
									{projects.length} Projects
								</Badge>
							</div>

							{contract.finish_date && (
								<div className="border-t pt-4">
									<span className="text-sm font-medium text-gray-500 block mb-2">
										Contract Status
									</span>
									<Badge
										variant={
											new Date(contract.finish_date) > new Date()
												? "success"
												: "warning"
										}
										size="md"
									>
										{new Date(contract.finish_date) > new Date()
											? "Active"
											: "Expired"}
									</Badge>
								</div>
							)}
						</CardContent>
					</Card>
				</div>
			</div>

			{/* Associated Projects */}
			<Card>
				<CardHeader>
					<div className="flex justify-between items-center">
						<h2 className="text-xl font-semibold text-gray-900">
							Associated Projects ({projects.length})
						</h2>
						<Link href={`/projects/new?contract_id=${contractId}`}>
							<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="M12 4v16m8-8H4"
									/>
								</svg>
								Add Project
							</Button>
						</Link>
					</div>
				</CardHeader>
				<CardContent>
					{projects.length === 0 ? (
						<div 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 for this contract
							</p>
							<Link href={`/projects/new?contract_id=${contractId}`}>
								<Button variant="primary">Create First Project</Button>
							</Link>
						</div>
					) : (
						<div className="grid grid-cols-1 gap-4">
							{projects.map((project) => (
								<div
									key={project.project_id}
									className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors"
								>
									<div className="flex justify-between items-start">
										<div className="flex-1">
											<div className="flex items-center gap-3 mb-2">
												<h3 className="font-medium text-gray-900">
													{project.project_name}
												</h3>
												<Badge variant="secondary" size="sm">
													{project.project_number}
												</Badge>
											</div>

											<div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-sm text-gray-600">
												{project.address && (
													<div className="flex items-center">
														<svg
															className="w-4 h-4 mr-1"
															fill="currentColor"
															viewBox="0 0 20 20"
														>
															<path
																fillRule="evenodd"
																d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
																clipRule="evenodd"
															/>
														</svg>
														{project.address}
													</div>
												)}
												{project.finish_date && (
													<div className="flex items-center">
														<svg
															className="w-4 h-4 mr-1"
															fill="currentColor"
															viewBox="0 0 20 20"
														>
															<path
																fillRule="evenodd"
																d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
																clipRule="evenodd"
															/>
														</svg>{" "}
														{formatDate(project.finish_date)}
													</div>
												)}
												<div className="flex items-center">
													<Badge
														variant={
															project.project_status === "fulfilled"
																? "success"
																: project.project_status === "registered"
																? "secondary"
																: "primary"
														}
														size="sm"
													>
														{project.project_status === "registered"
															? "Registered"
															: project.project_status === "in_progress_design"
															? "In Progress (Design)"
															: project.project_status ===
															  "in_progress_construction"
															? "In Progress (Construction)"
															: project.project_status === "fulfilled"
															? "Completed"
															: "Unknown"}
													</Badge>
												</div>
											</div>
										</div>
										<Link href={`/projects/${project.project_id}`}>
											<Button variant="outline" size="sm">
												View Details
											</Button>
										</Link>
									</div>
								</div>
							))}
						</div>
					)}
				</CardContent>
			</Card>
		</PageContainer>
	);
}