edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingDetailHeader.tsx

import { Building2, Calendar, CheckCircle, Boxes, Truck } from "lucide-react";
import { Paper, Group, Stack, Title, Text, Divider, SimpleGrid } from "@mantine/core";

import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";

import { detailStyles, formatDate, type BookingDetailView } from "./booking-detail.styles";

export interface BookingDetailHeaderProps {
  booking: BookingDetailView;
  approvedCount: number;
  totalSteps: number;
}

export function BookingDetailHeader({
  booking,
  approvedCount,
  totalSteps,
}: BookingDetailHeaderProps) {
  const kpis = [
    { icon: Truck, label: "Trade Direction", value: booking.tradeDirection },
    { icon: Calendar, label: "Scheduled", value: formatDate(booking.scheduledDate) },
    { icon: Boxes, label: "Freight Type", value: booking.freightType },
    {
      icon: CheckCircle,
      label: "Approvals",
      value: `${approvedCount} / ${totalSteps} complete`,
    },
  ];

  return (
    <Paper radius="md" withBorder mt="sm" mb="lg" p="xl" style={detailStyles.card}>
      <Group justify="space-between" align="flex-start" wrap="wrap">
        <Stack gap={6}>
          <Group gap="sm" align="center">
            <Title order={2} fw={700} style={{ letterSpacing: "-0.4px" }}>
              {booking.reference}
            </Title>
            <BookingStatusBadge
              status={booking.status}
              consolidated={Boolean(booking.consolidationPartnerId)}
              partnerReference={booking.consolidationPartner?.reference}
            />
          </Group>
          <Group gap="xs">
            <Building2 size={14} color="var(--mantine-color-gray-5)" />
            <Text size="sm" c="dimmed">
              {booking.company?.companyName}
            </Text>
            <Text size="sm" c="dimmed">
              •
            </Text>
            <Text size="sm" c="dimmed">
              Created {formatDate(booking.createdAt)}
            </Text>
          </Group>
        </Stack>
        <BookingPriorityBadge score={booking.priorityScore} />
      </Group>

      <Divider my="lg" color="var(--mantine-color-gray-2)" />

      <SimpleGrid cols={{ base: 2, md: 4 }} spacing="xl">
        {kpis.map((kpi) => (
          <Group key={kpi.label} gap="sm" wrap="nowrap" align="center">
            <kpi.icon size={18} color="var(--mantine-color-gray-5)" />
            <Stack gap={2}>
              <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
                {kpi.label}
              </Text>
              <Text size="sm" fw={600}>
                {kpi.value}
              </Text>
            </Stack>
          </Group>
        ))}
      </SimpleGrid>
    </Paper>
  );
}