"use client";

import { useMemo } from "react";
import { Box, Center, List, Text, useMantineTheme } from "@mantine/core";
import { IconCircleCheckFilled, IconCircleXFilled } from "@tabler/icons-react";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import objectSupport from "dayjs/plugin/objectSupport";
import relativeTime from "dayjs/plugin/relativeTime";

import { clientApi } from "@homarr/api/client";
import { useI18n } from "@homarr/translation/client";

import type { WidgetComponentProps } from "../../definition";

dayjs.extend(objectSupport);
dayjs.extend(relativeTime);
dayjs.extend(duration);

export default function NetworkControllerSummaryWidget({
  integrationIds,
}: WidgetComponentProps<"networkControllerSummary">) {
  const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
    integrationIds,
  });

  const t = useI18n();

  const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);

  return (
    <Box h="100%" p="sm">
      <Center h={"100%"}>
        <List spacing={"xs"} center>
          <List.Item icon={<StatusIcon status={data[0]?.wanStatus} />}>WAN</List.Item>
          <List.Item icon={<StatusIcon status={data[0]?.www.status} />}>
            <Text>
              WWW
              <Text c={"dimmed"} size={"md"} ms={"xs"} span>
                {data[0]?.www.latency}ms
              </Text>
            </Text>
          </List.Item>
          <List.Item icon={<StatusIcon status={data[0]?.wifi.status} />}>Wi-Fi</List.Item>
          <List.Item icon={<StatusIcon status={data[0]?.vpn.status} />}>
            <Text>
              VPN
              <Text c={"dimmed"} size={"md"} ms={"xs"} span>
                {t("widget.networkControllerSummary.card.vpn.countConnected", { count: `${data[0]?.vpn.users}` })}
              </Text>
            </Text>
          </List.Item>
        </List>
      </Center>
    </Box>
  );
}

const StatusIcon = ({ status }: { status?: "enabled" | "disabled" }) => {
  const mantineTheme = useMantineTheme();
  if (status === "enabled") {
    return <IconCircleCheckFilled size={20} color={mantineTheme.colors.green[6]} />;
  }
  return <IconCircleXFilled size={20} color={mantineTheme.colors.red[6]} />;
};