import type React from "react";
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid, Typography, Box } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { skipToken, useQuery } from "@tanstack/react-query";
import StatusPieChart from "components/charts/StatusPieChart";
import PackageCountBarChart from "components/charts/PackageCountBarChart";
import { Client } from "api/client/AhrimanClient";
import { QueryKeys } from "api/QueryKeys";
import { useRepository } from "hooks/useRepository";
import { StatusHeaderStyles } from "theme/status/StatusColors";
import { formatTimestamp } from "components/common/formatTimestamp";
import type { InternalStatus } from "api/types/InternalStatus";

interface DashboardDialogProps {
    open: boolean;
    onClose: () => void;
}

export default function DashboardDialog({ open, onClose }: DashboardDialogProps): React.JSX.Element {
    const { current } = useRepository();

    const { data: status } = useQuery<InternalStatus>({
        queryKey: current ? QueryKeys.status(current) : ["status"],
        queryFn: current ? () => Client.fetchStatus(current) : skipToken,
        enabled: !!current && open,
    });

    const headerStyle = status ? StatusHeaderStyles[status.status.status] : {};

    return (
        <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
            <DialogTitle sx={headerStyle}>System health</DialogTitle>
            <DialogContent>
                {status && (
                    <>
                        <Grid container spacing={2} sx={{ mt: 1 }}>
                            <Grid size={{ xs: 6, md: 3 }}>
                                <Typography variant="body2" color="text.secondary" align="right">Repository name</Typography>
                            </Grid>
                            <Grid size={{ xs: 6, md: 3 }}>
                                <Typography variant="body2">{status.repository}</Typography>
                            </Grid>
                            <Grid size={{ xs: 6, md: 3 }}>
                                <Typography variant="body2" color="text.secondary" align="right">Repository architecture</Typography>
                            </Grid>
                            <Grid size={{ xs: 6, md: 3 }}>
                                <Typography variant="body2">{status.architecture}</Typography>
                            </Grid>
                        </Grid>

                        <Grid container spacing={2} sx={{ mt: 1 }}>
                            <Grid size={{ xs: 6, md: 3 }}>
                                <Typography variant="body2" color="text.secondary" align="right">Current status</Typography>
                            </Grid>
                            <Grid size={{ xs: 6, md: 3 }}>
                                <Typography variant="body2">{status.status.status}</Typography>
                            </Grid>
                            <Grid size={{ xs: 6, md: 3 }}>
                                <Typography variant="body2" color="text.secondary" align="right">Updated at</Typography>
                            </Grid>
                            <Grid size={{ xs: 6, md: 3 }}>
                                <Typography variant="body2">{formatTimestamp(status.status.timestamp)}</Typography>
                            </Grid>
                        </Grid>

                        {status.packages.total > 0 && (
                            <Grid container spacing={2} sx={{ mt: 2 }}>
                                <Grid size={{ xs: 12, md: 6 }}>
                                    <Box sx={{ maxHeight: 300 }}>
                                        <PackageCountBarChart stats={status.stats} />
                                    </Box>
                                </Grid>
                                <Grid size={{ xs: 12, md: 6 }}>
                                    <Box sx={{ maxHeight: 300 }}>
                                        <StatusPieChart counters={status.packages} />
                                    </Box>
                                </Grid>
                            </Grid>
                        )}
                    </>
                )}
            </DialogContent>
            <DialogActions>
                <Button onClick={onClose} variant="contained" startIcon={<CloseIcon />}>close</Button>
            </DialogActions>
        </Dialog>
    );
}