import React, { useState } from "react";
import { X } from "lucide-react";
import { Button } from "./ui/button";
import type { Application } from "../lib/types";

interface ApplicationDetailsModalProps {
	application: Application;
	isOpen: boolean;
	onClose: () => void;
	onSave: (applicationId: string, status: string) => Promise<void>;
}

export const ApplicationDetailsModal: React.FC<ApplicationDetailsModalProps> = ({
	application,
	isOpen,
	onClose,
	onSave,
}) => {
	const [selectedStatus, setSelectedStatus] = useState(application.status);
	const [isSaving, setIsSaving] = useState(false);

	// Determine if status is editable
	const isStatusEditable =
		application.status.toLowerCase() !== "approved" &&
		application.status.toLowerCase() !== "rejected";

	// Common status options
	const statusOptions = ["Submitted", "Background Check", "Under Review", "Approved", "Rejected"];

	const handleSave = async () => {
		if (!isStatusEditable) return;

		setIsSaving(true);
		try {
			await onSave(application.id, selectedStatus);
			onClose();
		} catch (error) {
			console.error("Error saving status:", error);
		} finally {
			setIsSaving(false);
		}
	};

	if (!isOpen) return null;

	return (
		<div className="fixed inset-0 z-50 flex items-center justify-center">
			{/* Backdrop */}
			<div className="fixed inset-0 bg-black/50" onClick={onClose} />

			{/* Modal */}
			<div className="relative bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
				{/* Header */}
				<div className="flex items-center justify-between p-6 border-b border-gray-200">
					<h2 className="text-xl font-semibold text-gray-900">Application Details</h2>
					<button onClick={onClose} className="text-gray-400 hover:text-gray-600 transition-colors">
						<X className="w-6 h-6" />
					</button>
				</div>

				{/* Content */}
				<div className="p-6 space-y-6">
					{/* Applicant Info */}
					<div>
						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
							Applicant
						</h3>
						<p className="text-lg font-medium text-gray-900">{application.applicantName}</p>
					</div>

					{/* Property Info */}
					<div>
						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
							Property
						</h3>
						<p className="text-base text-gray-900">
							{application.propertyName && (
								<span className="font-medium">{application.propertyName}</span>
							)}
						</p>
						<p className="text-sm text-gray-600">{application.propertyAddress}</p>
					</div>

					{/* Employment Info */}
					{application.employment && (
						<div>
							<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
								Employment
							</h3>
							<p className="text-sm text-gray-700 whitespace-pre-wrap">{application.employment}</p>
						</div>
					)}

					{/* References */}
					{application.references && (
						<div>
							<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
								References
							</h3>
							<p className="text-sm text-gray-700 whitespace-pre-wrap">{application.references}</p>
						</div>
					)}

					{/* Status */}
					<div>
						<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">
							Status
						</h3>
						{isStatusEditable ? (
							<select
								value={selectedStatus}
								onChange={(e) => setSelectedStatus(e.target.value)}
								className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500 focus:border-transparent"
							>
								{statusOptions.map((status) => (
									<option key={status} value={status}>
										{status}
									</option>
								))}
							</select>
						) : (
							<div className="flex items-center">
								<span className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md font-medium">
									{application.status}
								</span>
								<span className="ml-3 text-sm text-gray-500">(Cannot be modified)</span>
							</div>
						)}
					</div>
				</div>

				{/* Footer */}
				<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
					<Button variant="outline" onClick={onClose} disabled={isSaving}>
						Close
					</Button>
					{isStatusEditable && (
						<Button
							onClick={handleSave}
							disabled={isSaving || selectedStatus === application.status}
							className="bg-purple-600 hover:bg-purple-700"
						>
							{isSaving ? "Saving..." : "Save Changes"}
						</Button>
					)}
				</div>
			</div>
		</div>
	);
};
