import { Button, Group, Modal, Stack, Text } from "@mantine/core";

import type { SubmitBookingResponse } from "@/services/bookings.service";

interface PriceChangeModalProps {
  data: SubmitBookingResponse | null;
  onClose: () => void;
  onConfirm: () => void;
  confirmPending: boolean;
}

/**
 * Shown when submitting a booking returns a changed price: the customer must
 * confirm the new total before the submit completes. Shared by the detail-page
 * resubmit flow and the home-page resubmit modal.
 */
export function PriceChangeModal({
  data,
  onClose,
  onConfirm,
  confirmPending,
}: PriceChangeModalProps) {
  return (
    <Modal
      opened={data !== null}
      onClose={onClose}
      title={<Text fw={700}>Price has changed</Text>}
      radius="lg"
      centered
    >
      {data && (
        <Stack gap="md">
          <Text size="sm" c="dimmed">
            {data.message ??
              "The booking price has been updated. Confirm to submit with the new total."}
          </Text>
          {data.previousTotalAmount !== undefined && (
            <Group justify="space-between">
              <Text size="sm" c="dimmed">
                Previous total
              </Text>
              <Text size="sm" td="line-through">
                {data.previousTotalAmount.toLocaleString()} {data.currency}
              </Text>
            </Group>
          )}
          <Group justify="space-between">
            <Text fw={700}>New total</Text>
            <Text fw={800} c="edr-green">
              {data.totalAmount.toLocaleString()} {data.currency}
            </Text>
          </Group>
          {data.lineItems && data.lineItems.length > 0 && (
            <Stack gap={4}>
              {data.lineItems.map((item) => (
                <Group key={item.code} justify="space-between">
                  <Text size="sm" c="dimmed">
                    {item.description}
                  </Text>
                  <Text size="sm" fw={600}>
                    {item.amount.toLocaleString()} {item.currency}
                  </Text>
                </Group>
              ))}
            </Stack>
          )}
          <Group justify="flex-end" gap="sm">
            <Button variant="default" radius="md" onClick={onClose}>
              Review later
            </Button>
            <Button
              color="edr-green"
              radius="md"
              loading={confirmPending}
              onClick={onConfirm}
            >
              Confirm &amp; submit
            </Button>
          </Group>
        </Stack>
      )}
    </Modal>
  );
}
