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: "Aetoskia Hideout" },
    {
      name: "description",
      content: "Welcome to Aetoskia's Hideout!",
    },
  ];
}

const services = {
  media: [
    { name: "Jellyseerr", url: "http://jellyseerr.aetoskia.com", desc: "Summon films and series from the digital void.", external: true },
    { name: "Sonarr", url: "http://sonarr.aetoskia.com", desc: "Keep the endless chronicles of TV under iron control.", external: true },
    { name: "Radarr", url: "http://radarr.aetoskia.com", desc: "Command the legions of cinema, enforce cinematic order.", external: true },
    { name: "qBit", url: "http://qbit.aetoskia.com", desc: "Torrent war engine, fetching data across the nether realms.", external: true },
  ],
  codebase: [
    { name: "Gitea", url: "http://gitea.aetoskia.com", desc: "Forge and safeguard code like a sacred relic.", external: true },
    { name: "Registry", url: "http://registry.aetoskia.com", desc: "Monitor core constructs of the digital empire.", external: true },
    { name: "Drone", url: "http://drone.aetoskia.com", desc: "Automaton architect, building pipelines of perfection.", external: true },
  ],
  monitoring: [
    { name: "Portainer", url: "http://portainer.aetoskia.com", desc: "Oversee the fleet of containers with unyielding vigilance.", external: true },
  ],
};

export default function Home() {
  return (
    <Container maxWidth="lg">
      <Box
        sx={{
          minHeight: "120vh",
          backgroundImage: "url('/extended_sigil.png')",
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Box sx={{ flex: 1 }} />

        <Box sx={{ height: "60vh", overflowY: "auto", p: 2 }}>
          <Container
            maxWidth="lg"
            sx={{ bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6 }}
          >
            {Object.entries(services).map(([sectionName, serviceList]) => (
              <React.Fragment key={sectionName}>
                <Typography
                  variant="h5"
                  align="center"
                  sx={{ color: "warning.main", mt: 4, mb: 2 }}
                >
                  {sectionName.charAt(0).toUpperCase() + sectionName.slice(1)} Services
                </Typography>
                <Grid container spacing={3} justifyContent="center">
                  {serviceList.map((s) => (
                    <Paper
                      key={s.name}
                      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>
              </React.Fragment>
            ))}
          </Container>
        </Box>
      </Box>
    </Container>
  );
}