"use client";

import { isAdmin } from "@/lib/util";
import { Avatar, Button, Card, Flex, IconButton, Popover, ScrollArea, Text, Tooltip } from "@radix-ui/themes";
import { BookUserIcon, HomeIcon, KeyRoundIcon, ScrollTextIcon, Users2Icon } from "lucide-react";
import { signOut, useSession } from "next-auth/react";
import Link from "next/link";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";

dayjs.extend(relativeTime);

export default function NavigationPanel({ mobileUi }: { mobileUi?: boolean }) {
  const session = useSession();
  const tooltipSide = mobileUi ? "bottom" : "right";

  return (
    <Card className={mobileUi ? "w-full" : "w-fit"}>
      <ScrollArea>
        <Flex direction={mobileUi ? 'row' : 'column'} justify={mobileUi ? "center" : "start"} gap='2'>
          {session.data?.user
            && (
              <Popover.Root>
                <Popover.Trigger>
                  <IconButton variant="outline" size='4' color="gray">
                    <Avatar
                      size="2"
                      src={session.data.user.image ?? "/favicon.ico"}
                      fallback={session.data.user.name?.slice(0, 1) || "@"}
                    />
                  </IconButton>
                </Popover.Trigger>

                <Popover.Content>
                  <Flex gap='3' direction='column'>
                    <Card>
                      <Flex gap='2' align='center'>
                        <Avatar
                          size="3"
                          src={session.data.user.image ?? "/favicon.ico"}
                          radius="full"
                          fallback={session.data.user.name?.slice(0, 1) || "@"}
                        />
                        <Flex direction="column">
                          <Text size='4'>{session.data.user.email}</Text>
                          <Text weight="light" size="2">Session valid for {dayjs(session.data.expires).fromNow(true)}</Text>
                        </Flex>
                      </Flex>
                    </Card>

                    <Flex gap='2' direction='row' justify='end'>
                      <Link href="/self-service">
                        <Button variant="soft">Account</Button>
                      </Link>
                      <Button variant="surface" onClick={() => signOut()}>Log out</Button>
                    </Flex>
                  </Flex>
                </Popover.Content>
              </Popover.Root>
            )}

          <Tooltip content="Home" side={tooltipSide}>
            <Link href="/">
              <IconButton variant="outline" size='4'>
                <HomeIcon />
              </IconButton>
            </Link>
          </Tooltip>

          <Tooltip content="API Keys" side={tooltipSide}>
            <Link href="/api-keys">
              <IconButton variant="outline" size='4'>
                <KeyRoundIcon />
              </IconButton>
            </Link>
          </Tooltip>

          {isAdmin(session.data) && (
            <>
              <Tooltip content="Users" side={tooltipSide}>
                <Link href="/admin/users">
                  <IconButton variant="outline" size='4'>
                    <BookUserIcon />
                  </IconButton>
                </Link>
              </Tooltip>
              <Tooltip content="Aliases" side={tooltipSide}>
                <Link href="/admin/aliases">
                  <IconButton variant="outline" size='4'>
                    <Users2Icon />
                  </IconButton>
                </Link>
              </Tooltip>
              <Tooltip content="Audit Log" side={tooltipSide}>
                <Link href="/admin/audit">
                  <IconButton variant="outline" size='4'>
                    <ScrollTextIcon />
                  </IconButton>
                </Link>
              </Tooltip>
            </>
          )}
        </Flex>
      </ScrollArea>
    </Card>
  );
}