import { useEffect, useRef, useState } from "react";
import { Document, Page } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";
import ArrowCircleLeftIcon from "@mui/icons-material/ArrowCircleLeft";
import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
import { Box, IconButton } from "@mui/material";
import { socket } from "../socket";

interface PDFViewerProps {
	pitchBookId: string;
	currentPage?: number;
}

export default function PDFViewer({
	pitchBookId,
	currentPage,
}: PDFViewerProps) {
	const [numPages, setNumPages] = useState<number | null>(null);
	const [pageNumber, setPageNumber] = useState(currentPage || 1);
	const [containerWidth, setContainerWidth] = useState<number | null>(null);
	const [pdfKey, setPdfKey] = useState(Date.now());
	const containerRef = useRef<HTMLDivElement>(null);

	const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
		setNumPages(numPages);
	};

	useEffect(() => {
		const updateWidth = () => {
			if (containerRef.current) {
				setContainerWidth(containerRef.current.offsetWidth);
			}
		};

		updateWidth();
		window.addEventListener("resize", updateWidth);
		return () => window.removeEventListener("resize", updateWidth);
	}, []);

	useEffect(() => {
		if (currentPage && currentPage !== pageNumber) {
			setPageNumber(currentPage);
		}
	}, [currentPage, pageNumber]);

	useEffect(() => {
		const handleProgress = (data: { id: number; progress: number }) => {
			if (data.id.toString() === pitchBookId && data.progress === 50) {
				setPdfKey(Date.now());
			}
		};

		socket.on("progress", handleProgress);

		return () => {
			socket.off("progress", handleProgress);
		};
	}, [pitchBookId]);

	return (
		<Box
			display="flex"
			flexDirection="column"
			justifyContent="center"
			alignItems="center"
			width="100%"
			height="100%"
			p={2}
		>
			<Box
				ref={containerRef}
				sx={{
					width: "100%",
					maxHeight: "90vh",
					overflow: "auto",
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
				}}
			>
				<Document
					key={pdfKey}
					file={`http://localhost:5050/api/pitch_book/${pitchBookId}/download`}
					onLoadSuccess={onDocumentLoadSuccess}
					onLoadError={(error) =>
						console.error("Es gab ein Fehler beim Laden des PDFs:", error)
					}
					onSourceError={(error) => console.error("Ungültige PDF:", error)}
				>
					{containerWidth && (
						<Page pageNumber={pageNumber} width={containerWidth * 0.8} />
					)}
				</Document>
			</Box>
			<Box
				mt={2}
				display="flex"
				alignItems="center"
				justifyContent="center"
				gap={1}
			>
				<IconButton
					disabled={pageNumber <= 1}
					onClick={() => setPageNumber((p) => p - 1)}
				>
					<ArrowCircleLeftIcon fontSize="large" />
				</IconButton>
				<span>
					{pageNumber} / {numPages}
				</span>
				<IconButton
					disabled={pageNumber >= (numPages || 1)}
					onClick={() => setPageNumber((p) => p + 1)}
				>
					<ArrowCircleRightIcon fontSize="large" />
				</IconButton>
			</Box>
		</Box>
	);
}