import ContentPasteIcon from "@mui/icons-material/ContentPaste";
import { Box, Button, Paper, Typography } from "@mui/material";
import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import KennzahlenTable from "../components/KennzahlenTable";
import PDFViewer from "../components/pdfViewer";
import { kpiQueryOptions } from "../util/query";

export const Route = createFileRoute("/extractedResult/$pitchBook")({
	component: ExtractedResultsPage,
	loader: ({ context: { queryClient }, params: { pitchBook } }) =>
		queryClient.ensureQueryData(kpiQueryOptions(pitchBook)),
});

function ExtractedResultsPage() {
	const { pitchBook } = Route.useParams();
	const navigate = useNavigate();
	const status: "green" | "yellow" | "red" = "red";
	const [currentPage, setCurrentPage] = useState(1);

	const statusColor = {
		red: "#f43131",
		yellow: "#f6ed48",
		green: "#3fd942",
	}[status];

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

	return (
		<Box p={4}>
			<Box display="flex" alignItems="center" gap={3}>
				<Box
					sx={{
						width: 45,
						height: 45,
						borderRadius: "50%",
						backgroundColor: statusColor,
						top: 32,
						left: 32,
					}}
				/>
				<Typography variant="h5" gutterBottom>
					Kennzahlen extrahiert aus: <br />
					<strong>FONDSNAME: TODO</strong>
				</Typography>
			</Box>
			<Box
				display="flex"
				gap={4}
				sx={{
					width: "100vw",
					maxWidth: "100%",
					height: "80vh",
					mt: 4,
				}}
			>
				<Paper
					elevation={2}
					sx={{
						width: "45%",
						height: "100%",
						borderRadius: 2,
						backgroundColor: "#eeeeee",
						padding: 2,
						overflow: "auto",
					}}
				>
					<KennzahlenTable
						onPageClick={setCurrentPage}
						data={kpi}
						pdfId={pitchBook}
					/>
				</Paper>
				<Box
					display="flex"
					flexDirection="column"
					justifyContent="space-between"
					gap={5}
					sx={{ width: "55%", height: "95%" }}
				>
					<Paper
						elevation={2}
						sx={{
							height: "100%",
							borderRadius: 2,
							backgroundColor: "#eeeeee",
							display: "flex",
							alignItems: "center",
							justifyContent: "center",
						}}
					>
						<PDFViewer pitchBookId={pitchBook} currentPage={currentPage} />
					</Paper>
					<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
						<Button variant="contained" sx={{ backgroundColor: "#383838" }}>
							<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
							Kennzahlenzeile kopieren
						</Button>
						<Button
							variant="contained"
							sx={{ backgroundColor: "#383838" }}
							onClick={() => navigate({ to: "/" })}
						>
							Neu hochladen
						</Button>
					</Box>
				</Box>
			</Box>
		</Box>
	);
}