import {
	getProjectWithContract,
	getNotesForProject,
} from "@/lib/queries/projects";
import NoteForm from "@/components/NoteForm";
import ProjectTasksSection from "@/components/ProjectTasksSection";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import Link from "next/link";
import { differenceInCalendarDays, parseISO } from "date-fns";
import { formatDate } from "@/lib/utils";
import PageContainer from "@/components/ui/PageContainer";
import PageHeader from "@/components/ui/PageHeader";
import ProjectStatusDropdown from "@/components/ProjectStatusDropdown";
import ProjectMap from "@/components/ui/ProjectMap";

export default async function ProjectViewPage({ params }) {
	const { id } = await params;
	const project = getProjectWithContract(id);
	const notes = getNotesForProject(id);

	if (!project) {
		return (
			<PageContainer>
				<Card>
					<CardContent className="text-center py-8">
						<p className="text-red-600 text-lg">Project not found.</p>
						<Link href="/projects" className="mt-4 inline-block">
							<Button variant="primary">Back to Projects</Button>
						</Link>
					</CardContent>
				</Card>
			</PageContainer>
		);
	}

	const daysRemaining = project.finish_date
		? differenceInCalendarDays(parseISO(project.finish_date), new Date())
		: null;

	const getDeadlineVariant = (days) => {
		if (days < 0) return "danger";
		if (days <= 7) return "warning";
		return "success";
	};
	return (
		<PageContainer>
			<PageHeader
				title={project.project_name}
				description={`${project.city} • ${project.address}`}
				action={
					<div className="flex items-center gap-3">
						<ProjectStatusDropdown project={project} size="sm" />
						{daysRemaining !== null && (
							<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
								{daysRemaining === 0
									? "Due Today"
									: daysRemaining > 0
									? `${daysRemaining} days left`
									: `${Math.abs(daysRemaining)} days overdue`}
							</Badge>
						)}
						<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>
						<Link href={`/projects/${id}/edit`}>
							<Button variant="primary">
								<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
									/>
								</svg>
								Edit Project
							</Button>
						</Link>
					</div>
				}
			/>{" "}
			<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
				{/* Main Project Information */}
				<div className="lg:col-span-2 space-y-6">
					<Card>
						<CardHeader>
							{" "}
							<div className="flex items-center justify-between">
								<h2 className="text-xl font-semibold text-gray-900">
									Project Information
								</h2>
								<Badge
									variant={
										project.project_type === "design"
											? "secondary"
											: project.project_type === "construction"
											? "primary"
											: project.project_type === "design+construction"
											? "success"
											: "default"
									}
									size="sm"
								>
									{project.project_type === "design"
										? "Design (P)"
										: project.project_type === "construction"
										? "Construction (R)"
										: project.project_type === "design+construction"
										? "Design + Construction (P+R)"
										: "Unknown"}
								</Badge>
							</div>
						</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">
										Location
									</span>
									<p className="text-gray-900 font-medium">
										{project.city || "N/A"}
									</p>
								</div>
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Address
									</span>
									<p className="text-gray-900 font-medium">
										{project.address || "N/A"}
									</p>
								</div>
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Plot
									</span>
									<p className="text-gray-900 font-medium">
										{project.plot || "N/A"}
									</p>
								</div>
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										District
									</span>
									<p className="text-gray-900 font-medium">
										{project.district || "N/A"}
									</p>
								</div>
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Unit
									</span>
									<p className="text-gray-900 font-medium">
										{project.unit || "N/A"}
									</p>
								</div>{" "}
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Deadline
									</span>
									<p className="text-gray-900 font-medium">
										{project.finish_date
											? formatDate(project.finish_date)
											: "N/A"}
									</p>
								</div>
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										WP
									</span>
									<p className="text-gray-900 font-medium">
										{project.wp || "N/A"}
									</p>
								</div>
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Investment Number
									</span>
									<p className="text-gray-900 font-medium">
										{project.investment_number || "N/A"}
									</p>
								</div>
							</div>

							{project.contact && (
								<div className="border-t pt-4">
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Contact
									</span>
									<p className="text-gray-900 font-medium">{project.contact}</p>
								</div>
							)}

							{project.coordinates && (
								<div className="border-t pt-4">
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Coordinates
									</span>
									<p className="text-gray-900 font-medium font-mono text-sm">
										{project.coordinates}
									</p>
								</div>
							)}

							{project.notes && (
								<div className="border-t pt-4">
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Notes
									</span>
									<p className="text-gray-900">{project.notes}</p>
								</div>
							)}
						</CardContent>
					</Card>

					{/* Contract Details */}
					<Card>
						<CardHeader>
							<h2 className="text-xl font-semibold text-gray-900">
								Contract Details
							</h2>
						</CardHeader>
						<CardContent className="space-y-4">
							<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">
										{project.contract_number || "N/A"}
									</p>
								</div>
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Contract Name
									</span>
									<p className="text-gray-900 font-medium">
										{project.contract_name || "N/A"}
									</p>
								</div>
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Customer
									</span>
									<p className="text-gray-900 font-medium">
										{project.customer || "N/A"}
									</p>
								</div>
								<div>
									<span className="text-sm font-medium text-gray-500 block mb-1">
										Investor
									</span>
									<p className="text-gray-900 font-medium">
										{project.investor || "N/A"}
									</p>
								</div>
							</div>
						</CardContent>
					</Card>
				</div>

				{/* Status Sidebar */}
				<div className="space-y-6">
					<Card>
						<CardHeader>
							<h2 className="text-lg font-semibold text-gray-900">
								Project Status
							</h2>
						</CardHeader>
						<CardContent className="space-y-4">
							{" "}
							<div>
								<span className="text-sm font-medium text-gray-500 block mb-2">
									Current Status
								</span>
								<ProjectStatusDropdown project={project} size="md" />
							</div>
							{daysRemaining !== null && (
								<div className="border-t pt-4">
									<span className="text-sm font-medium text-gray-500 block mb-2">
										Timeline
									</span>
									<div className="text-center">
										<Badge
											variant={getDeadlineVariant(daysRemaining)}
											size="lg"
										>
											{daysRemaining === 0
												? "Due Today"
												: daysRemaining > 0
												? `${daysRemaining} days remaining`
												: `${Math.abs(daysRemaining)} days overdue`}
										</Badge>
									</div>
								</div>
							)}
						</CardContent>
					</Card>

					{/* Quick Actions */}
					<Card>
						<CardHeader>
							<h2 className="text-lg font-semibold text-gray-900">
								Quick Actions
							</h2>
						</CardHeader>
						<CardContent className="space-y-3">
							<Link href={`/projects/${id}/edit`} className="block">
								<Button
									variant="outline"
									size="sm"
									className="w-full justify-start"
								>
									<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
										/>
									</svg>
									Edit Project
								</Button>
							</Link>{" "}
							<Link href="/projects" className="block">
								<Button
									variant="outline"
									size="sm"
									className="w-full justify-start"
								>
									<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>
							<Link href="/projects/map" className="block">
								<Button
									variant="outline"
									size="sm"
									className="w-full justify-start"
								>
									<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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 4m0 13V4m0 0L9 7"
										/>
									</svg>
									View All on Map
								</Button>
							</Link>
						</CardContent>
					</Card>
				</div>
			</div>{" "}
			{/* Project Location Map */}
			{project.coordinates && (
				<div className="mb-8">
					{" "}
					<Card>
						<CardHeader>
							<div className="flex items-center justify-between">
								<h2 className="text-xl font-semibold text-gray-900">
									Project Location
								</h2>
								<Link href="/projects/map">
									<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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 4m0 13V4m0 0L9 7"
											/>
										</svg>
										View on Full Map
									</Button>
								</Link>
							</div>
						</CardHeader>
						<CardContent>
							<ProjectMap
								coordinates={project.coordinates}
								projectName={project.project_name}
								projectStatus={project.project_status}
								showLayerControl={true}
								mapHeight="h-80"
								defaultLayer="Polish Geoportal Orthophoto"
							/>
						</CardContent>
					</Card>
				</div>
			)}
			{/* Project Tasks Section */}
			<div className="mb-8">
				<ProjectTasksSection projectId={id} />
			</div>
			{/* Notes Section */}
			<Card>
				<CardHeader>
					<h2 className="text-xl font-semibold text-gray-900">Notes</h2>
				</CardHeader>
				<CardContent>
					<div className="mb-6">
						<NoteForm projectId={id} />
					</div>
					{notes.length === 0 ? (
						<div className="text-center py-12">
							<div className="text-gray-400 mb-4">
								<svg
									className="w-12 h-12 mx-auto"
									fill="currentColor"
									viewBox="0 0 20 20"
								>
									<path
										fillRule="evenodd"
										d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-1H8v1a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v4a1 1 0 001 1h1a1 1 0 100-2v-1a2 2 0 00-2-2H7a1 1 0 000 2z"
									/>
								</svg>
							</div>
							<h3 className="text-lg font-medium text-gray-900 mb-2">
								No notes yet
							</h3>
							<p className="text-gray-500">
								Add your first note using the form above.
							</p>
						</div>
					) : (
						<div className="space-y-4">
							{notes.map((n) => (
								<div
									key={n.note_id}
									className="border border-gray-200 p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
								>
									<div className="flex items-center justify-between mb-2">
										<span className="text-sm font-medium text-gray-500">
											{n.note_date}
										</span>
									</div>
									<p className="text-gray-900 leading-relaxed">{n.note}</p>
								</div>
							))}
						</div>
					)}
				</CardContent>
			</Card>
		</PageContainer>
	);
}