"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";
import FileUploadModal from "@/components/FileUploadModal";
import FileAttachmentsList from "@/components/FileAttachmentsList";
import { useTranslation } from "@/lib/i18n";

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);
	const [showUploadModal, setShowUploadModal] = useState(false);
	const [attachments, setAttachments] = useState([]);
	const { t } = useTranslation();

	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();
					// Sort projects by project_id in descending order (newest first)
					const sortedProjects = projectsData.sort(
						(a, b) => b.project_id - a.project_id
					);
					setProjects(sortedProjects);
				}
			} catch (error) {
				console.error("Error fetching contract details:", error);
			} finally {
				setLoading(false);
			}
		}

		if (contractId) {
			fetchContractDetails();
		}
	}, [contractId]);
	const handleFileUploaded = (newFile) => {
		setAttachments(prev => [newFile, ...prev]);
	};

	const handleFilesChange = (files) => {
		setAttachments(files);
	};

	if (loading) {
		return (
			<PageContainer>
				<LoadingState message={t('contracts.loadingContractDetails')} />
			</PageContainer>
		);
	}

	if (!contract) {
		return (
			<PageContainer>
				<Card>
					<CardContent className="text-center py-12">
						<p className="text-red-600 text-lg mb-4">{t('contracts.contractNotFound')}</p>
						<Link href="/contracts">
							<Button variant="primary">{t('contracts.backToContracts')}</Button>
						</Link>
					</CardContent>
				</Card>
			</PageContainer>
		);
	}
	return (
		<PageContainer>
			<PageHeader
				title={`${t('contracts.contract')} ${contract.contract_number}`}
				description={contract.contract_name || t('contracts.contractInformation')}
				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>
								{t('contracts.backToContracts')}
							</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>
								{t('contracts.addProject')}
							</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">
								{t('contracts.contractInformation')}
							</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">
										{t('contracts.contractNumber')}
									</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">
											{t('contracts.contractName')}
										</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">
											{t('contracts.customerContractNumber')}
										</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">
											{t('contracts.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">
											{t('contracts.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">
											{t('contracts.dateSigned')}
										</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">
											{t('contracts.finishDate')}
										</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">{t('contracts.summary')}</h2>
						</CardHeader>
						<CardContent className="space-y-4">
							<div>
								<span className="text-sm font-medium text-gray-500 block mb-2">
									{t('contracts.projectsCount')}
								</span>
								<Badge variant="primary" size="lg">
									{projects.length} {t('contracts.projects')}
								</Badge>
							</div>

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

			{/* Contract Documents */}
			<Card className="mb-8">
				<CardHeader>
					<div className="flex justify-between items-center">
						<h2 className="text-xl font-semibold text-gray-900">
							{t('contracts.contractDocuments')} ({attachments.length})
						</h2>
						<Button
							variant="primary"
							size="sm"
							onClick={() => setShowUploadModal(true)}
						>
							<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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
								/>
							</svg>
							{t('contracts.uploadDocument')}
						</Button>
					</div>
				</CardHeader>
				<CardContent>
					<FileAttachmentsList
						entityType="contract"
						entityId={contractId}
						onFilesChange={handleFilesChange}
					/>
				</CardContent>
			</Card>

			{/* Associated Projects */}
			<Card>
				<CardHeader>
					<div className="flex justify-between items-center">
						<h2 className="text-xl font-semibold text-gray-900">
							{t('contracts.associatedProjects')} ({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>
								{t('contracts.addProject')}
							</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">
								{t('contracts.noProjectsYet')}
							</h3>
							<p className="text-gray-500 mb-6">
								{t('contracts.getStartedMessage')}
							</p>
							<Link href={`/projects/new?contract_id=${contractId}`}>
								<Button variant="primary">{t('contracts.createFirstProject')}</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"
															? t('projectStatus.registered')
															: project.project_status === "in_progress_design"
															? t('projectStatus.in_progress_design')
															: project.project_status ===
															  "in_progress_construction"
															? t('projectStatus.in_progress_construction')
															: project.project_status === "fulfilled"
															? t('projectStatus.fulfilled')
															: t('projectStatus.unknown')}
													</Badge>
												</div>
											</div>
										</div>
										<Link href={`/projects/${project.project_id}`}>
											<Button variant="outline" size="sm">
												{t('contracts.viewDetails')}
											</Button>
										</Link>
									</div>
								</div>
							))}
						</div>
					)}
				</CardContent>
			</Card>

			{/* File Upload Modal */}
			<FileUploadModal
				isOpen={showUploadModal}
				onClose={() => setShowUploadModal(false)}
				entityType="contract"
				entityId={contractId}
				onFileUploaded={handleFileUploaded}
			/>
		</PageContainer>
	);
}