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";
import { Link as ReactRouterLink } from "react-router";
import ProTip from "~/components/ProTip";
import Copyright from "~/components/Copyright";


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">
      {/* Dashboard section */}
      <Box sx={{ py: 6 }}>
        <Typography
          variant="h3"
          align="center"
          gutterBottom
          sx={{ color: "success.main" }}
        >
          Aetos Hideout
        </Typography>

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