import { Alert, Stack, Title } from "@mantine/core";
import { IconAlertCircle } from "@tabler/icons-react";
import AdminTab from "../components/AdminTab";
import ApprovalsTab from "../components/ApprovalsTab";
import AccessQueue from "../components/AccessQueue";
import { useAuth } from "../auth";

export default function AdminPage() {
  const { me } = useAuth();
  if (!me) {
    return (
      <div>
        <Title order={2} mb="md">
          Verwaltung
        </Title>
        <Alert color="blue">
          Bitte melden Sie sich an, um die Verwaltung zu nutzen.
        </Alert>
      </div>
    );
  }
  if (me.role !== "admin") {
    return (
      <div>
        <Title order={2} mb="md">
          Verwaltung
        </Title>
        <Alert color="red" icon={<IconAlertCircle size={18} />}>
          Nur für Administratoren. Ihr Konto hat die Rolle „{me.role}“.
        </Alert>
      </div>
    );
  }
  return (
    <div>
      <Title order={2} mb="md">
        Verwaltung
      </Title>
      <Stack gap="xl">
        <AccessQueue />
        <ApprovalsTab />
        <AdminTab />
      </Stack>
    </div>
  );
}