import * as React from "react";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Link from "@mui/material/Link";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";


export function meta() {
    return [
        {title: "Material UI - React Router example in TypeScript"},
        {
            name: "description",
            content:
                "Welcome to Material UI - React Router example in TypeScript!",
        },
    ];
}

const services = {
    media: [
        {
            name: "Jellyseerr",
            url: "http://jellyseerr.aetoskia.com",
            desc: "Request movies & TV shows",
        },
        // {
        //   name: "Ombi",
        //   url: "http://ombi.aetoskia.com",
        //   desc: "Request movies & TV shows",
        // },
        {
            name: "Sonarr",
            url: "http://sonarr.aetoskia.com",
            desc: "TV series management",
        },
        {
            name: "Radarr",
            url: "http://radarr.aetoskia.com",
            desc: "Movie management",
        },
        {
            name: "Prowlarr",
            url: "http://prowlarr.aetoskia.com",
            desc: "Indexer management",
        },
        {
            name: "qBittorrent",
            url: "http://qbit.aetoskia.com",
            desc: "Download client & torrent manager",
            external: true,
        },
    ],
    core: [
        {
            name: "Gitea",
            url: "http://gitea.aetoskia.com",
            desc: "Hosted on Core Server",
            external: true,
        },
    ],
};

export default function Home() {
    // @ts-ignore
    return (
        <Container maxWidth="lg">
            <Box
                sx={{
                    minHeight: "100vh",
                    backgroundImage: "url('/aetos_sigil.jpg')",
                    backgroundSize: "cover",
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "center",
                    display: "flex",
                    flexDirection: "column",
                }}
            >
                {/* Top section */}
                <Box sx={{py: 6, textAlign: "center"}}>
                    <Typography variant="h3" sx={{color: "success.main"}}>
                        Aetos Hideout
                    </Typography>
                </Box>

                {/* Spacer pushes bottom part down */}
                <Box sx={{flex: 1}}/>

                {/* Bottom dashboard */}
                <Container maxWidth="lg" sx={{mb: 4}}>
                    <Typography
                        variant="h5"
                        align="center"
                        sx={{color: "warning.main", mt: 4, mb: 2}}
                    >
                        Core Services
                    </Typography>
                    <Grid container spacing={3} justifyContent="center">
                        {services.core.map((s) => (
                            <Grid item xs={12} sm={6} md={4} key={s.name}>
                                <Paper
                                    elevation={3}
                                    sx={{
                                        p: 2,
                                        textAlign: "center",
                                        bgcolor: "#2d2d2d",
                                        borderRadius: 2,
                                    }}
                                >
                                    <Link
                                        href={s.url}
                                        target={s.external ? "_blank" : undefined}
                                        rel="noopener"
                                        underline="none"
                                        sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
                                    >
                                        {s.name}
                                    </Link>
                                    <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
                                        {s.desc}
                                    </Typography>
                                </Paper>
                            </Grid>
                        ))}
                    </Grid>

                    <Typography
                        variant="h5"
                        align="center"
                        sx={{color: "warning.main", mt: 4, mb: 2}}
                    >
                        Media Services
                    </Typography>
                    <Grid container spacing={3} justifyContent="center">
                        {services.media.map((s) => (
                            <Grid component="div" item xs={12} sm={6} md={4} key={s.name}>
                                <Paper
                                    elevation={3}
                                    sx={{
                                        p: 2,
                                        textAlign: "center",
                                        bgcolor: "#2d2d2d",
                                        borderRadius: 2,
                                    }}
                                >
                                    <Link
                                        href={s.url}
                                        target={s.external ? "_blank" : undefined}
                                        rel="noopener"
                                        underline="none"
                                        sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
                                    >
                                        {s.name}
                                    </Link>
                                    <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
                                        {s.desc}
                                    </Typography>
                                </Paper>
                            </Grid>
                        ))}
                    </Grid>
                </Container>
            </Box>
        </Container>
    );
}
