import { Box, Group, Stack, Text } from "@mantine/core";
import { memo } from "react";
import { ACTION_PROPS, STATUS_CONFIG, cv } from "../constants";
import { Stepper } from "./Stepper";
import { PayNowButton } from "@/pages/bookings/payments/PayNowButton";

interface BookingRowProps {
  booking: any;
  last: boolean;
  onClick: () => void;
}

export const BookingRow = memo(function BookingRow({
  booking,
  last,
  onClick,
}: BookingRowProps) {
  const cfg = STATUS_CONFIG[booking.status] ?? STATUS_CONFIG.DRAFT;
  const Icon = cfg.icon;
  const AIcon = cfg.action.icon;
  const ap = ACTION_PROPS[cfg.action.kind];
  // Payable bookings get an inline "Pay now" that opens the payment modal
  // instead of navigating to the detail page.
  const canPay =
    booking.status === "SELECTED_FOR_BATCH" && booking.paymentStatus !== "PAID";
  const origin = booking.originYard?.label ?? booking.originYard?.code ?? "—";
  const dest =
    booking.destinationYard?.label ?? booking.destinationYard?.code ?? "—";
  const commodity =
    (typeof booking.cargoType === "string"
      ? booking.cargoType
      : booking.cargoType?.name) ??
    booking.commodity ??
    "Freight";

  return (
    <Box className={last ? undefined : "border-b border-edr-divider"}>
      <Group
        gap={16}
        align="center"
        wrap="nowrap"
        py={14}
        px={4}
        className="cursor-pointer"
        onClick={onClick}
      >
        <Box
          w={46}
          h={46}
          bg={cfg.tile}
          className="flex shrink-0 items-center justify-center rounded-xl"
        >
          <Icon size={22} color={cv(cfg.iconColor)} />
        </Box>

        <Box className="min-w-0 flex-1 lg:!flex-none lg:!w-[188px]">
          <Text fz={15} fw={700} c="edr-text" truncate>
            {booking.reference}
          </Text>
          <Text fz={12} c="edr-muted" truncate>
            {commodity} · {origin} → {dest}
          </Text>
        </Box>

        <Box className="hidden min-w-0 flex-1 pr-2 lg:block">
          <Text fz={12} fw={500} mb={8} c={cfg.iconColor} truncate>
            {cfg.hint}
          </Text>
          <Stepper stage={cfg.stage} color={cfg.step} />
        </Box>

        <Stack gap={9} align="flex-end" className="shrink-0">
          <Group
            gap={6}
            align="center"
            px={11}
            py={5}
            bg={cfg.badgeBg}
            className="rounded-full"
          >
            <Box w={6} h={6} bg={cfg.badgeDot} className="rounded-full" />
            <Text fz={11} fw={700} c={cfg.badgeText}>
              {cfg.badgeLabel}
            </Text>
          </Group>
          {canPay ? (
            <PayNowButton booking={booking} size="sm" />
          ) : (
            <Group
              gap={5}
              align="center"
              px={15}
              py={8}
              bg={ap.bg}
              bd={ap.bd}
              className="cursor-pointer rounded-[9px]"
            >
              <Text fz={13} fw={700} c={ap.c}>
                {cfg.action.label}
              </Text>
              {AIcon && (
                <AIcon
                  size={15}
                  color={ap.c === "white" ? "#fff" : cv("edr-text")}
                />
              )}
            </Group>
          )}
        </Stack>
      </Group>
    </Box>
  );
});
