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

export const Route = createFileRoute("/extractedResult/$pitchBook")({
	component: ExtractedResultsPage,
});

function ExtractedResultsPage() {
	const { pitchBook } = Route.useParams();
	const navigate = useNavigate();
	const status: "green" | "yellow" | "red" = "red";

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

	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 />
				</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} />
					</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>
	);
}