"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import Webcam from "react-webcam";
import jsQR from "jsqr";
import { Icon } from "@iconify/react";

import QrFinder from "./qr-finder";
import { useSelect } from "downshift";

interface Props {
	isOpen: boolean;
	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
	setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
}

export default function QrScanner({ isOpen, setIsOpen, setQrBytesRaw }: Props) {
	const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null);

	const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
	const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);

	const webcamRef = useRef<Webcam>(null);
	const requestRef = useRef<number>(null);
	const canvasRef = useRef<HTMLCanvasElement>(null);

	const cameraItems = devices.map((device) => ({
		value: device.deviceId,
		label: device.label || `Camera ${device.deviceId.slice(-5)}`,
	}));

	const {
		isOpen: isDropdownOpen,
		getToggleButtonProps,
		getMenuProps,
		getItemProps,
		highlightedIndex,
		selectedItem,
	} = useSelect({
		items: cameraItems,
		selectedItem: cameraItems.find((item) => item.value === selectedDeviceId) ?? null,
		onSelectedItemChange: ({ selectedItem }) => {
			setSelectedDeviceId(selectedItem?.value ?? null);
		},
	});

	const scanQRCode = useCallback(() => {
		if (!isOpen) return;

		// Continue scanning in a loop
		requestRef.current = requestAnimationFrame(scanQRCode);

		const webcam = webcamRef.current;
		const canvas = canvasRef.current;
		if (!webcam || !canvas) return;

		const video = webcam.video;
		if (!video || video.videoWidth === 0 || video.videoHeight === 0) return;

		const ctx = canvas.getContext("2d");
		if (!ctx) return;

		canvas.width = video.videoWidth;
		canvas.height = video.videoHeight;
		ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

		const imageData = ctx.getImageData(0, 0, video.videoWidth, video.videoHeight);
		const code = jsQR(imageData.data, imageData.width, imageData.height);
		if (!code) return;

		console.log(code);

		// Cancel animation frame to stop scanning
		if (requestRef.current) {
			cancelAnimationFrame(requestRef.current);
		}

		setQrBytesRaw(code.binaryData!);
		setIsOpen(false);
	}, [isOpen, setIsOpen, setQrBytesRaw]);

	const requestPermission = async () => {
		navigator.mediaDevices
			.getUserMedia({ video: true })
			.then(() => setPermissionGranted(true))
			.catch(() => setPermissionGranted(false));
	};

	useEffect(() => {
		if (!isOpen) return;
		requestPermission();

		navigator.mediaDevices.enumerateDevices().then((devices) => {
			const videoDevices = devices.filter((d) => d.kind === "videoinput");
			setDevices(videoDevices);
			if (!selectedDeviceId && videoDevices.length > 0) {
				setSelectedDeviceId(videoDevices[0].deviceId);
			}
		});
	}, [isOpen]);

	useEffect(() => {
		if (!isOpen && !permissionGranted) return;
		requestRef.current = requestAnimationFrame(scanQRCode);
	}, [permissionGranted]);

	if (isOpen)
		return (
			<div className="fixed inset-0 flex items-center justify-center z-40 backdrop-brightness-75 backdrop-blur-xs">
				<div className="bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md">
					<div className="flex justify-between items-center mb-2">
						<h2 className="text-xl font-bold">Scan QR Code</h2>
						<button onClick={() => setIsOpen(false)} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
							<Icon icon="material-symbols:close-rounded" />
						</button>
					</div>

					{devices.length > 0 && (
						<div className="mb-4 flex flex-col gap-1">
							<label className="text-sm font-semibold">Camera:</label>
							<div className="relative w-full">
								{/* Toggle button to open the dropdown */}
								<button type="button" {...getToggleButtonProps()} className="pill input w-full !px-2 !py-0.5 !justify-between text-sm">
									{selectedItem?.label || "Select a camera"}

									<Icon icon="tabler:chevron-down" className="ml-2 size-5" />
								</button>

								{/* Dropdown menu */}
								<ul
									{...getMenuProps()}
									className={`absolute z-50 w-full bg-orange-200 border-2 border-orange-400 rounded-lg mt-1 shadow-lg max-h-60 overflow-y-auto ${
										isDropdownOpen ? "block" : "hidden"
									}`}
								>
									{isDropdownOpen &&
										cameraItems.map((item, index) => (
											<li
												key={item.value}
												{...getItemProps({ item, index })}
												className={`px-4 py-1 cursor-pointer text-sm ${highlightedIndex === index ? "bg-black/15" : ""}`}
											>
												{item.label}
											</li>
										))}
								</ul>
							</div>
						</div>
					)}

					<div className="relative w-full aspect-square">
						{!permissionGranted ? (
							<div className="absolute inset-0 flex flex-col items-center justify-center rounded-2xl border-2 border-amber-500 text-center p-8">
								<p className="text-red-400 font-bold text-lg mb-2">Camera access denied</p>
								<p className="text-gray-600">Please allow camera access in your browser settings to scan QR codes</p>
								<button type="button" onClick={requestPermission} className="pill button text-xs mt-2 !py-0.5 !px-2">
									Request Permission
								</button>
							</div>
						) : (
							<>
								<Webcam
									ref={webcamRef}
									audio={false}
									videoConstraints={{
										deviceId: selectedDeviceId ? { exact: selectedDeviceId } : undefined,
									}}
									className="size-full object-cover rounded-2xl border-2 border-amber-500"
								/>
								<QrFinder />
								<canvas ref={canvasRef} className="hidden" />
							</>
						)}
					</div>

					<div className="mt-4 flex justify-center">
						<button type="button" onClick={() => setIsOpen(false)} className="pill button">
							Cancel
						</button>
					</div>
				</div>
			</div>
		);
	else return null;
}