import { Camera, Play } from "lucide-react";
import { FC, useState } from "react";
import { useTranslation } from "react-i18next";

import { useGetCameraList } from "@/contracts/cameras";
import { Button, ConfirmDialog } from "@/shared";

import { useAlarmDialogContext } from "../../lib/useAlarmDialogContext";

export const CameraViewStep: FC = () => {
	const { t } = useTranslation("translation");
	const { asset, next } = useAlarmDialogContext();
	const [selectedCamera, setSelectedCamera] = useState<string | null>(null);
	const [showConfirmDialog, setShowConfirmDialog] = useState(false);

	const { data: cameras, isLoading } = useGetCameraList({
		AssetId: asset?.id,
	});

	const handleConfirmNext = (confirmed: boolean) => {
		setShowConfirmDialog(false);
		if (confirmed) {
			next();
		}
	};

	const handleNextClick = () => {
		setShowConfirmDialog(true);
	};

	const hasCameras = cameras && cameras.items && cameras.items.length > 0;

	if (isLoading) {
		return (
			<div className="flex min-h-[400px] items-center justify-center p-8">
				<div className="text-center">
					<div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
					<p className="text-gray-600">{t("loadingCameras")}</p>
				</div>
			</div>
		);
	}

	if (!hasCameras) {
		return (
			<div className="flex min-h-[400px] flex-col items-center justify-center space-y-6 p-8">
				<div className="space-y-3 text-center">
					<div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-gray-100">
						<Camera className="h-10 w-10 text-gray-400" />
					</div>

					<h2 className="text-2xl font-bold text-gray-800">
						{t("camerasUnavailable")}
					</h2>
					<p className="text-gray-600">{t("noCamerasAvailable")}</p>

					<Button
						size="lg"
						onClick={handleNextClick}
						className="mt-4 px-8 py-3"
					>
						{t("continueWithoutCamera")}
					</Button>
				</div>
				<ConfirmDialog
					open={showConfirmDialog}
					onOpenChange={setShowConfirmDialog}
					onConfirm={() => handleConfirmNext(true)}
				/>
			</div>
		);
	}

	return (
		<div className="flex min-h-[400px] w-full max-w-3xl flex-col space-y-6 p-6">
			<div className="space-y-2 text-center">
				<h2 className="text-2xl font-bold text-gray-800">
					{t("cameraViewing")}
				</h2>
				<p className="text-gray-600">{t("selectCameraOrSkip")}</p>
			</div>

			<div className="grid grid-cols-2 gap-4">
				{cameras.items.map((camera) => (
					<div
						key={camera.id}
						onClick={() => setSelectedCamera(camera.id)}
						className={`
							relative border-2 rounded-lg p-4 cursor-pointer transition-all
							${
								selectedCamera === camera.id
									? "border-blue-600 bg-blue-50"
									: "border-gray-300 hover:border-blue-400"
							}
						`}
					>
						<div className="mb-3 flex aspect-video items-center justify-center rounded bg-gray-900">
							<Play className="h-12 w-12 text-white opacity-60" />
						</div>
						<div className="space-y-1">
							<p className="font-medium text-gray-900">
								{camera.name}
							</p>
							<p className="text-sm text-gray-500">
								{t("camera")} {camera.id}
							</p>
						</div>
					</div>
				))}
			</div>

			<div className="flex justify-center gap-4 pt-4">
				<Button
					variant="outline"
					size="lg"
					onClick={handleNextClick}
					className="px-8"
				>
					{t("skip")}
				</Button>
				<Button
					size="lg"
					onClick={handleNextClick}
					disabled={!selectedCamera}
					className="px-8"
				>
					{t("continue")}
				</Button>
			</div>

			{selectedCamera && (
				<div className="rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800">
					{t("cameraViewingResultWillBeRecorded")}
				</div>
			)}
			<ConfirmDialog
				open={showConfirmDialog}
				onOpenChange={setShowConfirmDialog}
				onConfirm={() => handleConfirmNext(true)}
			/>
		</div>
	);
};
