import { Box, Container as ContainerIcon, Train, Truck } from "lucide-react";
import { Grid, Stack } from "@mantine/core";

import type { IOverviewOperationsTab } from "@/types/overview";
import { OverviewDonutChart } from "../OverviewDonutChart";
import { OverviewKpiStrip } from "../OverviewKpiStrip";

interface OverviewOperationsTabPanelProps {
  data: IOverviewOperationsTab;
}

function formatStatusLabel(status: string) {
  return status
    .replace(/_/g, " ")
    .toLowerCase()
    .replace(/\b\w/g, (char) => char.toUpperCase());
}

export function OverviewOperationsTabPanel({ data }: OverviewOperationsTabPanelProps) {
  return (
    <Stack gap="lg">
      <OverviewKpiStrip
        items={[
          {
            label: "Active trains",
            value: data.kpis.trainsActive,
            icon: Train,
            accent: "emerald",
          },
          {
            label: "Wagons available",
            value: data.kpis.wagonsAvailable,
            icon: Truck,
          },
          {
            label: "Containers in transit",
            value: data.kpis.containersInTransit,
            icon: ContainerIcon,
          },
          {
            label: "Cargoes loaded",
            value: data.kpis.cargoesLoaded,
            icon: Box,
          },
        ]}
      />

      <Grid gap="md">
        <Grid.Col span={{ base: 12, md: 6 }}>
          <OverviewDonutChart
            title="Train status"
            data={data.trainStatusBreakdown.map((item) => ({
              name: formatStatusLabel(item.status),
              value: item.count,
            }))}
          />
        </Grid.Col>
        <Grid.Col span={{ base: 12, md: 6 }}>
          <OverviewDonutChart
            title="Wagon status"
            data={data.wagonStatusBreakdown.map((item) => ({
              name: formatStatusLabel(item.status),
              value: item.count,
            }))}
          />
        </Grid.Col>
        <Grid.Col span={{ base: 12, md: 6 }}>
          <OverviewDonutChart
            title="Container status"
            data={data.containerStatusBreakdown.map((item) => ({
              name: formatStatusLabel(item.status),
              value: item.count,
            }))}
          />
        </Grid.Col>
        <Grid.Col span={{ base: 12, md: 6 }}>
          <OverviewDonutChart
            title="Cargo status"
            data={data.cargoStatusBreakdown.map((item) => ({
              name: formatStatusLabel(item.status),
              value: item.count,
            }))}
          />
        </Grid.Col>
      </Grid>
    </Stack>
  );
}
