import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import {
	Box,
	Button,
	Dialog,
	DialogActions,
	DialogContent,
	DialogContentText,
	DialogTitle,
	IconButton,
	Link,
	Paper,
	Radio,
	Table,
	TableBody,
	TableCell,
	TableContainer,
	TableHead,
	TableRow,
	TextField,
	Typography,
} from "@mui/material";
import {
	useMutation,
	useQueryClient,
	useSuspenseQuery,
} from "@tanstack/react-query";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import PDFViewer from "../components/pdfViewer";
import { fetchPutKPI } from "../util/api";
import { kpiQueryOptions } from "../util/query";
import { redirect } from "@tanstack/react-router";

export const Route = createFileRoute("/extractedResult_/$pitchBook/$kpi")({
	component: ExtractedResultsPage,
	validateSearch: (search: Record<string, unknown>) => {
		return {
			from: typeof search.from === "string" ? search.from : undefined,
		};
	},
	loader: async ({ context: { queryClient }, params: { pitchBook } }) => {
		try {
			return await queryClient.ensureQueryData(kpiQueryOptions(pitchBook));
		} catch (err) {
			throw redirect({
				to: "/"
			});
		}
	},
});

function ExtractedResultsPage() {
	const params = Route.useParams() as { pitchBook: string; kpi: string };
	const { pitchBook, kpi } = params;
	const navigate = useNavigate();
	const queryClient = useQueryClient();
	const { from } = Route.useSearch();

	const { data: kpiData } = useSuspenseQuery(kpiQueryOptions(pitchBook));

	const kpiValues = kpiData[kpi.toUpperCase()] || [];
	const [selectedIndex, setSelectedIndex] = useState(0);
	const [currentPage, setCurrentPage] = useState(kpiValues[0]?.page || 1);
	const [showConfirmDialog, setShowConfirmDialog] = useState(false);
	const [hasChanges, setHasChanges] = useState(false);
	const [customValue, setCustomValue] = useState("");
	const originalValue = kpiValues[0]?.entity || "";
	const selectedValue =
		selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || "";

	useEffect(() => {
		setHasChanges(selectedValue !== originalValue);
	}, [selectedValue, originalValue]);

	const { mutate: updateKPI } = useMutation({
		mutationFn: () => {
			const updatedData = { ...kpiData };
			let baseObject;
			if (selectedIndex >= 0) {
				baseObject = kpiValues[selectedIndex];
			} else {
				baseObject = {
					label: kpi.toUpperCase(),
					entity: selectedValue,
					page: 0,
					status: "single-source",
					source: "manual",
				};
			}
			updatedData[kpi.toUpperCase()] = [
				{
					...baseObject,
					entity: selectedValue,
				},
			];
			return fetchPutKPI(Number(pitchBook), updatedData);
		},
		onSuccess: () => {
			queryClient.invalidateQueries({
				queryKey: ["pitchBookKPI", pitchBook],
			});
			navigate({
				to: "/extractedResult/$pitchBook",
				params: { pitchBook },
				search: from ? { from } : undefined
			});
		},
		onError: (error) => {
			console.error("Error updating KPI:", error);
		},
	});

	const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
		const value = event.target.value;
		if (value === "custom") {
			setSelectedIndex(-1);
		} else {
			const index = Number.parseInt(value);
			setSelectedIndex(index);
			setCurrentPage(kpiValues[index].page);
			setCustomValue("");
		}
	};

	const handleCustomValueChange = (
		event: React.ChangeEvent<HTMLInputElement>,
	) => {
		const value = event.target.value;
		setCustomValue(value);
		setSelectedIndex(-1);
	};

	const handleRowClick = (index: number) => {
		setCurrentPage(kpiValues[index].page);
		setSelectedIndex(index);
		setCustomValue("");
	};

	const handleBackClick = () => {
		if (hasChanges) {
			setShowConfirmDialog(true);
		} else {
			navigate({
				to: "/extractedResult/$pitchBook",
				params: { pitchBook },
				search: from ? { from } : undefined
			});
		}
	};

	const handleConfirmDiscard = () => {
		setShowConfirmDialog(false);
		navigate({
			to: "/extractedResult/$pitchBook",
			params: { pitchBook },
			search: from ? { from } : undefined
		});
	};

	const handleCancelDiscard = () => {
		setShowConfirmDialog(false);
	};

	const handleAcceptReview = () => {
		updateKPI();
	};

	return (
		<Box p={4}>
			<Box sx={{ display: "flex", alignItems: "center", mb: 3 }}>
				<IconButton onClick={handleBackClick} sx={{ mr: 2 }}>
					<ArrowBackIcon fontSize="large" sx={{ color: "#383838" }} />
				</IconButton>
				<Typography variant="h5" fontWeight="bold">
					Überprüfung der Kennzahl: {kpi}
				</Typography>
			</Box>

			<Box
				display="flex"
				gap={4}
				sx={{
					width: "100vw",
					maxWidth: "100%",
					height: "85vh",
					mt: 4,
				}}
			>
				<Paper
					elevation={2}
					sx={{
						width: "45%",
						maxHeight: "100%",
						height: "fit-content",
						borderRadius: 2,
						backgroundColor: "#eeeeee",
						padding: 2,
						overflow: "auto",
					}}
				>
					<TableContainer component={Paper}>
						<Table>
							<TableHead>
								<TableRow>
									<TableCell>
										<strong>Gefundene Werte</strong>
									</TableCell>
									<TableCell align="center">
										<strong>Seite</strong>
									</TableCell>
								</TableRow>
							</TableHead>
							<TableBody>
								{kpiValues.map((item, index) => (
									<TableRow
										key={`${item.entity}_${item.page}_${index}`}
										sx={{
											"&:hover": { backgroundColor: "#f9f9f9" },
											cursor: "pointer",
										}}
										onClick={() => handleRowClick(index)}
									>
										<TableCell>
											<Box
												sx={{
													borderRadius: 1,
													padding: "4px 8px",
													display: "flex",
													alignItems: "center",
													width: "100%",
													cursor: "pointer",
													"&:hover": {
														borderColor: "#ccc",
													},
												}}
											>
												<Radio
													value={index.toString()}
													checked={selectedIndex === index}
													onChange={handleRadioChange}
													sx={{
														color: "#383838",
														"&.Mui-checked": { color: "#383838" },
														padding: "4px",
														marginRight: 1,
														"&:focus": {
															outline: "none",
														},
													}}
												/>
												<span>{item.entity}</span>
											</Box>
										</TableCell>
										<TableCell align="center">
											<Link
												component="button"
												onClick={(e: React.MouseEvent) => {
													e.stopPropagation();
													setCurrentPage(item.page);
												}}
												sx={{ cursor: "pointer" }}
											>
												{item.page}
											</Link>
										</TableCell>
									</TableRow>
								))}

								<TableRow>
									<TableCell>
										<Box
											sx={{
												padding: "4px 8px",
												display: "flex",
												alignItems: "center",
												width: "100%",
												cursor: "pointer",
												"&:hover": {
													borderColor: "#ccc",
												},
											}}
											onClick={() => {
												setSelectedIndex(-1);
											}}
										>
											<Radio
												value="custom"
												checked={selectedIndex === -1 && customValue !== ""}
												onChange={handleRadioChange}
												sx={{
													color: "#383838",
													"&.Mui-checked": { color: "#383838" },
													padding: "4px",
													marginRight: 1,
													"&:focus": {
														outline: "none",
													},
												}}
											/>
											<TextField
												placeholder="Einen abweichenden Wert eingeben..."
												value={customValue}
												onChange={handleCustomValueChange}
												variant="standard"
												fullWidth
												InputProps={{
													disableUnderline: true,
												}}
												sx={{
													"& .MuiInput-input": {
														padding: 0,
													},
												}}
												onClick={(e: React.MouseEvent) => {
													e.stopPropagation();
												}}
											/>
										</Box>
									</TableCell>
								</TableRow>
							</TableBody>
						</Table>
					</TableContainer>
				</Paper>
				<Box
					display="flex"
					flexDirection="column"
					justifyContent="space-between"
					gap={3}
					sx={{ width: "55%", height: "95%" }}
				>
					<Paper
						elevation={2}
						sx={{
							width: "100%",
							height: "fit-content",
							maxHeight: "100%",
							borderRadius: 2,
							backgroundColor: "#eeeeee",
							display: "flex",
							flexDirection: "column",
							overflow: "auto",
							padding: 2,
						}}
					>
						<PDFViewer
							pitchBookId={pitchBook}
							currentPage={currentPage}
							onPageChange={setCurrentPage}
							highlight={Object.values(kpiValues)
								.flat()
								.map((k) => ({ page: k.page, text: k.entity }))}
							focusHighlight={{
								page: kpiValues.at(selectedIndex)?.page || -1,
								text: kpiValues.at(selectedIndex)?.entity || "",
							}}
						/>
					</Paper>
					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
						<Button
							variant="contained"
							onClick={handleAcceptReview}
							disabled={!selectedValue}
							sx={{
								backgroundColor: "#383838",
								"&:hover": { backgroundColor: "#2e2e2e" },
								"&.Mui-disabled": { backgroundColor: "#ccc" },
							}}
						>
							Überprüfung Annehmen
						</Button>
					</Box>
				</Box>
			</Box>

			<Dialog
				open={showConfirmDialog}
				onClose={handleCancelDiscard}
				maxWidth="sm"
				fullWidth
			>
				<DialogTitle sx={{ fontSize: "1.25rem", fontWeight: "bold" }}>
					Achtung
				</DialogTitle>
				<DialogContent>
					<DialogContentText sx={{ fontSize: "1rem" }}>
						Alle vorgenommenen Änderungen werden verworfen.
					</DialogContentText>
				</DialogContent>
				<DialogActions sx={{ p: 3, gap: 2 }}>
					<Button
						onClick={handleCancelDiscard}
						variant="outlined"
						sx={{
							color: "#666",
							borderColor: "#ddd",
							"&:hover": { backgroundColor: "#f5f5f5" },
						}}
					>
						Abbrechen
					</Button>
					<Button
						onClick={handleConfirmDiscard}
						variant="contained"
						sx={{
							backgroundColor: "#383838",
							"&:hover": { backgroundColor: "#2e2e2e" },
						}}
					>
						Bestätigen
					</Button>
				</DialogActions>
			</Dialog>
		</Box>
	);
}