"use client";

import {
  Badge,
  Box,
  Card,
  Group,
  Progress,
  RingProgress,
  ScrollArea,
  SimpleGrid,
  Stack,
  Text,
  VisuallyHidden,
} from "@mantine/core";

import { clientApi } from "@homarr/api/client";
import { formatDuration } from "@homarr/common";
import type { UpsStatus, UpsSummary } from "@homarr/integrations/types";
import type { ScopedTranslationFunction } from "@homarr/translation";
import { useScopedI18n } from "@homarr/translation/client";

import { WidgetEmptyState } from "../common/empty-state";
import type { WidgetComponentProps } from "../definition";
import { getUsableWidgetQueryData } from "../common/query-state";
import { NoIntegrationSelectedError } from "../errors/no-integration-selected";

const statusColors: Record<UpsStatus, string> = {
  online: "green",
  charging: "blue",
  onBattery: "yellow",
  lowBattery: "red",
  unknown: "gray",
};

type UpsLayout = "mini" | "compact" | "full";

export default function UpsWidget({
  options,
  integrationIds,
  width,
  height,
  displayMode = "compact",
}: WidgetComponentProps<"ups">) {
  if (integrationIds.length === 0) {
    throw new NoIntegrationSelectedError();
  }

  return (
    <UpsContent
      integrationIds={integrationIds}
      options={options}
      width={width}
      height={height}
      displayMode={displayMode}
    />
  );
}

interface UpsContentProps {
  integrationIds: string[];
  options: WidgetComponentProps<"ups">["options"];
  width: number;
  height: number;
  displayMode: "compact" | "advanced";
}

function UpsContent({ integrationIds, options, width, height, displayMode }: UpsContentProps) {
  const t = useScopedI18n("widget.ups");
  const data = getUsableWidgetQueryData(clientApi.widget.ups.getSummaries.useQuery({ integrationIds }));

  if (!data) return <WidgetEmptyState />;

  const devices = data
    .flatMap((instance) =>
      instance.summaries.map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })),
    )
    .toSorted((left, right) => statusPriority[left.summary.status] - statusPriority[right.summary.status]);

  if (devices.length === 0) {
    return <WidgetEmptyState />;
  }

  // Pick a layout from the available width so the widget stays useful at any size. The surrounding
  // ScrollArea keeps every device reachable at any height (e.g. a tall, narrow 1x3 widget scrolls).
  // - full: ring beside a column of stats (runtime, load, voltage)
  // - compact (~2 columns): ring beside the name and a status badge
  // - mini (~1 column): a text badge no longer fits, so status becomes a colour dot next to the name
  const layout: UpsLayout =
    displayMode === "advanced" ? "full" : width < 150 || height < 110 ? "mini" : width < 256 ? "compact" : "full";

  const cards = devices.map(({ key, summary }) => (
    <UpsDeviceCard
      key={key}
      summary={summary}
      options={options}
      layout={layout}
      advanced={displayMode === "advanced"}
      t={t}
    />
  ));

  return (
    <ScrollArea h="100%">
      {displayMode === "advanced" ? (
        <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="md" p="md">
          {cards}
        </SimpleGrid>
      ) : (
        <Stack gap="xs" p="xs">
          {cards}
        </Stack>
      )}
    </ScrollArea>
  );
}

const statusPriority: Record<UpsStatus, number> = {
  lowBattery: 0,
  onBattery: 1,
  charging: 2,
  unknown: 3,
  online: 4,
};

interface UpsDeviceCardProps {
  summary: UpsSummary;
  options: WidgetComponentProps<"ups">["options"];
  layout: UpsLayout;
  advanced: boolean;
  t: ScopedTranslationFunction<"widget.ups">;
}

function UpsDeviceCard({ summary, options, layout, advanced, t }: UpsDeviceCardProps) {
  const showRing = options.showBattery && summary.batteryCharge !== null;
  const statusBadge = (
    <Badge
      color={statusColors[summary.status]}
      variant="light"
      size={layout === "full" ? "sm" : "xs"}
      style={{ flexShrink: 0 }}
    >
      {t(`status.${summary.status}`)}
    </Badge>
  );

  if (layout === "mini") {
    return (
      <Card p={6} radius="md">
        <Group gap={4} wrap="nowrap" justify="center" mb={showRing ? 4 : 0}>
          <Box
            w={8}
            h={8}
            aria-hidden="true"
            style={{
              borderRadius: "50%",
              backgroundColor: `var(--mantine-color-${statusColors[summary.status]}-6)`,
              flexShrink: 0,
            }}
          />
          <VisuallyHidden>{t(`status.${summary.status}`)}</VisuallyHidden>
          <Text fw={600} size="xs" truncate>
            {summary.name}
          </Text>
        </Group>
        {showRing && summary.batteryCharge !== null && (
          <Group justify="center">
            <RingProgress
              size={44}
              thickness={4}
              roundCaps
              sections={[{ value: clampPercent(summary.batteryCharge), color: getChargeColor(summary.batteryCharge) }]}
              label={
                <Text ta="center" size="10px" fw={700}>
                  {Math.round(summary.batteryCharge)}%
                </Text>
              }
            />
          </Group>
        )}
      </Card>
    );
  }

  if (layout === "compact") {
    return (
      <Card p={6} radius="md">
        <Group gap={8} wrap="nowrap" align="center">
          {showRing && summary.batteryCharge !== null && (
            <RingProgress
              size={40}
              thickness={4}
              roundCaps
              sections={[{ value: clampPercent(summary.batteryCharge), color: getChargeColor(summary.batteryCharge) }]}
              label={
                <Text ta="center" size="9px" fw={700}>
                  {Math.round(summary.batteryCharge)}%
                </Text>
              }
            />
          )}
          <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
            <Text fw={600} size="xs" truncate>
              {summary.name}
            </Text>
            {statusBadge}
          </Stack>
        </Group>
      </Card>
    );
  }

  return (
    <Card p="xs" radius="md">
      <Group justify="space-between" wrap="nowrap" mb={4}>
        <Text fw={600} size="sm" truncate>
          {summary.name}
        </Text>
        {statusBadge}
      </Group>

      <Group align="center" wrap="nowrap" gap="md">
        {showRing && summary.batteryCharge !== null && (
          <RingProgress
            size={68}
            thickness={6}
            roundCaps
            sections={[{ value: clampPercent(summary.batteryCharge), color: getChargeColor(summary.batteryCharge) }]}
            label={
              <Text ta="center" size="xs" fw={700}>
                {Math.round(summary.batteryCharge)}%
              </Text>
            }
          />
        )}

        <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
          {options.showBattery && summary.batteryRuntime !== null && (
            <StatRow label={t("field.runtime")} value={formatDuration(summary.batteryRuntime * 1000)} />
          )}

          {options.showLoad && summary.load !== null && (
            <Box>
              <Group justify="space-between" gap="xs" mb={2}>
                <Text size="xs" c="dimmed">
                  {t("field.load")}
                </Text>
                <Text size="xs">{Math.round(summary.load)}%</Text>
              </Group>
              <Progress value={clampPercent(summary.load)} size="sm" color={getLoadColor(summary.load)} />
            </Box>
          )}

          {options.showVoltage && (summary.inputVoltage !== null || summary.outputVoltage !== null) && (
            <Group gap="md">
              {summary.inputVoltage !== null && (
                <StatRow label={t("field.input")} value={`${Math.round(summary.inputVoltage)} V`} />
              )}
              {summary.outputVoltage !== null && (
                <StatRow label={t("field.output")} value={`${Math.round(summary.outputVoltage)} V`} />
              )}
            </Group>
          )}
        </Stack>
      </Group>
      {advanced && (
        <SimpleGrid cols={2} spacing={4} mt="sm">
          {summary.batteryVoltage !== null && (
            <StatRow label={t("field.batteryVoltage")} value={`${summary.batteryVoltage} V`} />
          )}
          {summary.power !== null && <StatRow label={t("field.power")} value={`${summary.power} W`} />}
          {summary.temperature !== null && (
            <StatRow label={t("field.temperature")} value={`${summary.temperature} °C`} />
          )}
          {summary.manufacturer && <StatRow label={t("field.manufacturer")} value={summary.manufacturer} />}
          {summary.model && <StatRow label={t("field.model")} value={summary.model} />}
          {summary.serial && <StatRow label={t("field.serial")} value={summary.serial} />}
        </SimpleGrid>
      )}
    </Card>
  );
}

function StatRow({ label, value }: { label: string; value: string }) {
  return (
    <Group justify="space-between" gap="xs" wrap="nowrap">
      <Text size="xs" c="dimmed">
        {label}
      </Text>
      <Text size="xs" fw={500}>
        {value}
      </Text>
    </Group>
  );
}

function clampPercent(value: number): number {
  return Math.min(100, Math.max(0, value));
}

function getChargeColor(charge: number): string {
  if (charge > 50) return "green";
  if (charge > 20) return "yellow";
  return "red";
}

function getLoadColor(load: number): string {
  if (load > 90) return "red";
  if (load > 70) return "yellow";
  return "blue";
}