import { Badge, Box, Card, Group, Stack, Text, ThemeIcon } from "@mantine/core";
import { Building2, CreditCard, Landmark, Weight, XCircle } from "lucide-react";
import type { BatchBoardBookingDetail } from "@/types/trainScheduling";
import type { BookingDetailData } from "./BookingDetailModal";

interface BatchBookingListProps {
  bookings: BatchBoardBookingDetail[];
  variant: "payment" | "expired";
  selectedBookingId?: string | null;
  onSelect: (booking: BookingDetailData) => void;
  emptyTitle: string;
  emptyHint: string;
}

const fmtDateTime = (iso: string | null) =>
  iso
    ? new Intl.DateTimeFormat("en-GB", {
        day: "2-digit",
        month: "short",
        hour: "2-digit",
        minute: "2-digit",
        hour12: false,
        timeZone: "Africa/Addis_Ababa",
      }).format(new Date(iso))
    : null;

export const BatchBookingList = ({
  bookings,
  variant,
  selectedBookingId,
  onSelect,
  emptyTitle,
  emptyHint,
}: BatchBookingListProps) => {
  const accent = variant === "payment" ? "orange" : "red";
  const Icon = variant === "payment" ? CreditCard : XCircle;

  if (bookings.length === 0) {
    return (
      <Stack align="center" gap="xs" py="xl">
        <ThemeIcon size={44} radius="xl" variant="light" color="gray">
          <Icon size={20} />
        </ThemeIcon>
        <Text size="sm" fw={600} c="gray.7">
          {emptyTitle}
        </Text>
        <Text size="xs" c="dimmed" ta="center" maw={220}>
          {emptyHint}
        </Text>
      </Stack>
    );
  }

  return (
    <Stack gap="xs">
      {bookings.map((booking) => {
        const isActive = selectedBookingId === booking.id;
        const deadline = fmtDateTime(booking.paymentDeadline);
        return (
          <Card
            key={booking.id}
            padding="xs"
            radius="md"
            withBorder
            onClick={() =>
              onSelect({
                bookingId: booking.id,
                reference: booking.reference,
                company: booking.company,
                freightType: null,
                weightTons: booking.weightTons ?? null,
                status: variant === "payment" ? "Awaiting payment" : "Expired",
              })
            }
            style={{
              cursor: "pointer",
              borderColor: isActive ? `var(--mantine-color-${accent}-5)` : undefined,
            }}
          >
            <Group gap={8} wrap="nowrap" align="flex-start">
              <ThemeIcon size={30} radius="md" variant="light" color={accent}>
                <Icon size={16} />
              </ThemeIcon>
              <Box style={{ flex: 1, minWidth: 0 }}>
                <Group justify="space-between" wrap="nowrap" gap={4}>
                  <Text size="sm" fw={700} truncate>
                    {booking.reference}
                  </Text>
                  {booking.isGovernment ? (
                    <Badge
                      size="xs"
                      variant="light"
                      color="grape"
                      leftSection={<Landmark size={9} />}
                    >
                      Gov
                    </Badge>
                  ) : null}
                </Group>
                {booking.company ? (
                  <Group gap={4} wrap="nowrap">
                    <Building2 size={11} color="var(--mantine-color-gray-6)" />
                    <Text size="11px" c="dimmed" truncate>
                      {booking.company}
                    </Text>
                  </Group>
                ) : null}
                <Group justify="space-between" wrap="nowrap" mt={2} gap={6}>
                  <Group gap={4} wrap="nowrap">
                    <Weight size={11} color="var(--mantine-color-gray-6)" />
                    <Text size="11px" c="dimmed">
                      {(booking.weightTons ?? 0).toFixed(1)} T · {booking.wagons}w
                    </Text>
                  </Group>
                  {variant === "payment" && deadline ? (
                    <Text size="10px" fw={700} c="orange.7" style={{ whiteSpace: "nowrap" }}>
                      Pay by {deadline}
                    </Text>
                  ) : variant === "expired" ? (
                    <Badge size="xs" variant="light" color="red">
                      Expired
                    </Badge>
                  ) : null}
                </Group>
              </Box>
            </Group>
          </Card>
        );
      })}
    </Stack>
  );
};
