edr-platform/apps/edr-freight-web/backoffice/src/pages/trains/TrainDetailPage.tsx

import { useParams, Link } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import { Badge, Button, Card, Group, Loader, SimpleGrid, Stack, Text } from "@mantine/core";

import { useQuery } from "@tanstack/react-query";

import { AssignWagonDialog } from "@/components/wagons/AssignWagonDialog";
import { WagonsTable } from "@/components/wagons/WagonsTable";
import { api } from "@/services/api";

export default function TrainDetailPage() {
  const { id } = useParams<{ id: string }>();
  const { data: train, isLoading } = useQuery(
    api.trains.getById.queryOptions({ input: { id: id ?? "" }, enabled: !!id }),
  );

  if (isLoading) {
    return (
      <Group justify="center" py="xl">
        <Loader size="sm" />
      </Group>
    );
  }

  if (!train) {
    return (
      <Text c="dimmed" py="xl">
        Train not found
      </Text>
    );
  }

  const title = train.trainNumber || train.code;
  const subtitle = train.trainName || "Unnamed train";

  return (
    <Stack gap="md">
      <Button
        component={Link}
        to="/dashboard/trains"
        variant="subtle"
        color="gray"
        size="compact-sm"
        leftSection={<ArrowLeft size={16} />}
        w="fit-content"
      >
        Back to trains
      </Button>

      <Card radius="lg" padding="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
        <Stack gap="md">
          <Group justify="space-between" align="flex-start">
            <Stack gap={4}>
              <Text fw={700} size="lg">
                {title}
              </Text>
              <Text size="sm" c="dimmed">
                {subtitle}
              </Text>
            </Stack>
            <Badge variant="light" color="gray" size="lg">
              {train.status}
            </Badge>
          </Group>

          <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="md">
            <Stack gap={2}>
              <Text size="xs" c="dimmed">
                Code
              </Text>
              <Text size="sm" fw={500}>
                {train.code}
              </Text>
            </Stack>
            <Stack gap={2}>
              <Text size="xs" c="dimmed">
                Capacity
              </Text>
              <Text size="sm" fw={500}>
                {train.capacityTons} tons
              </Text>
            </Stack>
            <Stack gap={2}>
              <Text size="xs" c="dimmed">
                Locomotive
              </Text>
              <Text size="sm" fw={500}>
                {train.locomotiveNumber || "—"}
              </Text>
            </Stack>
            <Stack gap={2}>
              <Text size="xs" c="dimmed">
                Origin station
              </Text>
              <Text size="sm" fw={500}>
                {train.originStationId || "—"}
              </Text>
            </Stack>
          </SimpleGrid>
        </Stack>
      </Card>

      <Card radius="lg" padding="lg" withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
        <Stack gap="md">
          <Group justify="space-between" align="center">
            <Text fw={600}>Assigned wagons</Text>
            <AssignWagonDialog trainId={train.id} />
          </Group>
          <WagonsTable trainId={train.id} />
        </Stack>
      </Card>
    </Stack>
  );
}