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: "qBit",
            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: "120vh",
                    backgroundImage: "url('/extended_sigil.png')",
                    backgroundSize: "cover",
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "center",
                    display: "flex",
                    flexDirection: "column",
                }}
            >
                {/* Spacer pushes bottom part down */}
                <Box sx={{flex: 1}}/>

                {/* Bottom dashboard: only 50% height of viewport */}
                <Box
                    sx={{
                        height: "60vh", // 50% of viewport height
                        overflowY: "auto", // scroll if content overflows
                        p: 2,
                    }}
                >
                    <Container
                        maxWidth="lg"
                        sx={{
                            bgcolor: "#1a1a1a", // dark background
                            borderRadius: 3,
                            p: 3,
                            boxShadow: 6,
                        }}
                    >
                        <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) => (
                                <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>

                        <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) => (
                                <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>
                    </Container>
                </Box>
            </Box>
        </Container>

    );
}