import { Box, Group, Paper, RingProgress, SimpleGrid, Stack, Text, ThemeIcon } from "@mantine/core";
import { Ruler, Train, Weight } from "lucide-react";
import { freightBrand } from "@/theme/freight-brand";

interface TrainStatsBarProps {
  weightUsed: number;
  weightMax: number | null;
  lengthUsed: number;
  lengthMax: number | null;
  wagonCount: number;
  wagonMax: number;
}

function pctColor(pct: number) {
  if (pct >= 100) return "#fa5252";
  if (pct >= 85) return "#FB8C2E";
  return freightBrand.primary;
}

function StatTile({
  icon,
  label,
  pct,
  current,
  max,
  unit,
}: {
  icon: React.ReactNode;
  label: string;
  pct: number | null;
  current: string;
  max: string;
  unit: string;
}) {
  const color = pct != null ? pctColor(pct) : freightBrand.primary;
  const clamped = pct != null ? Math.min(100, Math.max(0, pct)) : 0;
  return (
    <Group gap="sm" wrap="nowrap" align="center">
      <RingProgress
        size={62}
        thickness={6}
        roundCaps
        sections={[{ value: clamped, color }]}
        rootColor="var(--mantine-color-gray-1)"
        label={
          <Group justify="center">
            <ThemeIcon size={26} radius="xl" variant="transparent" style={{ color }}>
              {icon}
            </ThemeIcon>
          </Group>
        }
      />
      <Stack gap={0} style={{ minWidth: 0 }}>
        <Text size="10px" fw={700} tt="uppercase" c="dimmed" style={{ letterSpacing: 0.6 }}>
          {label}
        </Text>
        <Group gap={5} align="baseline" wrap="nowrap">
          <Text size="lg" fw={800} lh={1.1} c="dark.5" style={{ whiteSpace: "nowrap" }}>
            {current}
          </Text>
          <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap" }}>
            / {max} {unit}
          </Text>
        </Group>
        {pct != null ? (
          <Text size="10px" fw={700} style={{ color }}>
            {Math.round(pct)}% utilized
          </Text>
        ) : (
          <Text size="10px" c="dimmed">
            no limit set
          </Text>
        )}
      </Stack>
    </Group>
  );
}

export const TrainStatsBar = ({
  weightUsed,
  weightMax,
  lengthUsed,
  lengthMax,
  wagonCount,
  wagonMax,
}: TrainStatsBarProps) => {
  const weightPct = weightMax ? (weightUsed / weightMax) * 100 : null;
  const lengthPct = lengthMax ? (lengthUsed / lengthMax) * 100 : null;
  const wagonPct = wagonMax ? (wagonCount / wagonMax) * 100 : null;

  return (
    <Paper
      p="md"
      radius="lg"
      withBorder
      style={{ borderColor: "var(--mantine-color-gray-2)", background: "white" }}
    >
      <SimpleGrid cols={{ base: 1, xs: 3 }} spacing="lg">
        <StatTile
          icon={<Weight size={15} />}
          label="Weight"
          pct={weightPct}
          current={weightUsed.toFixed(1)}
          max={weightMax?.toFixed(1) ?? "∞"}
          unit="T"
        />
        <Box
          px={{ base: 0, xs: "lg" }}
          style={{
            borderLeft: "1px solid var(--mantine-color-gray-2)",
            borderRight: "1px solid var(--mantine-color-gray-2)",
          }}
        >
          <StatTile
            icon={<Ruler size={15} />}
            label="Length"
            pct={lengthPct}
            current={lengthUsed.toFixed(1)}
            max={lengthMax?.toFixed(1) ?? "∞"}
            unit="m"
          />
        </Box>
        <StatTile
          icon={<Train size={15} />}
          label="Wagons"
          pct={wagonPct}
          current={String(wagonCount)}
          max={String(wagonMax)}
          unit=""
        />
      </SimpleGrid>
    </Paper>
  );
};
