import { Banknote, Receipt } from "lucide-react";
import { Paper, Stack, Group, Text, Divider } from "@mantine/core";

import type { BookingDetail } from "@/types/booking";

import { SectionCard } from "./detail/SectionCard";
import { detailStyles } from "./detail/booking-detail.styles";

export function BookingPricingSummary({ booking }: { booking: BookingDetail }) {
  const amount = Number(booking.totalAmount);
  const modifiers = booking.cargoModifiers ?? [];

  return (
    <SectionCard icon={Banknote} title="Pricing & payment">
      <Stack gap="md">
        <Paper radius="md" withBorder p="md" style={detailStyles.highlightCard}>
          <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
            Total amount
          </Text>
          <Text
            size="xl"
            fw={700}
            c="green.9"
            mt={4}
            style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.5px" }}
          >
            {booking.paymentCurrency}{" "}
            {amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
          </Text>
        </Paper>

        <Row label="Payment status" value={booking.paymentStatus} />
        {booking.pnrCode && <Row label="PNR code" value={booking.pnrCode} mono />}

        {modifiers.length > 0 && (
          <>
            <Divider color="var(--mantine-color-gray-2)" />
            <Group gap={6}>
              <Receipt size={13} color="var(--mantine-color-gray-5)" />
              <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
                Surcharges applied
              </Text>
            </Group>
            <Stack gap="xs">
              {modifiers.map((m) => (
                <Group
                  key={m.id}
                  justify="space-between"
                  px="sm"
                  py={6}
                  style={{
                    borderRadius: 8,
                    border: "1px solid var(--mantine-color-gray-2)",
                    background: "var(--mantine-color-gray-0)",
                  }}
                >
                  <Text size="sm" c="dimmed">
                    Modifier
                  </Text>
                  <Text size="sm" fw={600} style={{ fontVariantNumeric: "tabular-nums" }}>
                    {Number(m.calculatedAmount).toLocaleString()}
                  </Text>
                </Group>
              ))}
            </Stack>
          </>
        )}
      </Stack>
    </SectionCard>
  );
}

function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <Group
      justify="space-between"
      px="sm"
      py="xs"
      style={{
        borderRadius: 8,
        border: "1px solid var(--mantine-color-gray-2)",
        background: "var(--mantine-color-gray-0)",
      }}
    >
      <Text size="sm" c="dimmed">
        {label}
      </Text>
      <Text size="sm" fw={600} ff={mono ? "monospace" : undefined}>
        {value}
      </Text>
    </Group>
  );
}
