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

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

function ExtractedResultsPage() {
    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',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}
                >
                    <Typography color="textSecondary">To-do: Table hierhin</Typography>
                </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/>
                    </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>
    );
}