import type {
  CoreBooking,
  CoreBookingUnitDetailed,
} from "@/lib/features/bookings/types";
import { Badge, Divider, Flex, Grid, Stack, Text, Title } from "@mantine/core";
import BookingDetails from "./(widgets)/bookingDetails";
import GuestDetails from "./(widgets)/guestDetails";
import PaymentDetails from "./(widgets)/paymentDetails";
import Summary from "./(widgets)/summary";

const BookingClientPage: React.FC<{
  unit: CoreBookingUnitDetailed;
  booking: CoreBooking;
}> = ({ booking, unit }) => {
  return (
    <Stack px={28}>
      <Flex gap={24} direction={"column"} pb={40}>
        <Flex align={"center"} gap={15} pt={35} pb={11}>
          <Flex align={"center"} gap={8}>
            <Title fz={18} fw={"bold"}>
              {booking.id}
            </Title>
            <Divider orientation="vertical" h={26} my={"auto"} />
            <Text c={"blue.10"} fz={18} tt={"capitalize"}>
              {booking?.destination?.name}
            </Text>
            <Badge
              color="grey.11"
              radius={4}
              c={"dark"}
              fz={12}
              tt={"capitalize"}
              size="lg"
            >
              {unit?.status.replaceAll("_", " ").toLowerCase()}
            </Badge>
          </Flex>
        </Flex>

        <Grid
          style={{ borderBlock: "1px solid var(--mantine-color-blue-13)" }}
          overflow="hidden"
        >
          <Grid.Col
            span={8}
            px={25}
            py={30}
            style={{ borderRight: "1px solid var(--mantine-color-blue-13)" }}
          >
            {unit && <BookingDetails unit={unit} />}
          </Grid.Col>
          <Grid.Col span={4} px={25} py={30}>
            <Summary
              payment={booking?.payments?.[0]}
              charges={unit?.charges ?? []}
            />
          </Grid.Col>
        </Grid>

        {booking?.payments?.length > 0 ? (
          <>
            <PaymentDetails payment={booking?.payments[0]} />
            <Divider w={"100%"} />
          </>
        ) : null}
        <GuestDetails guests={unit?.guests ?? []} unitId={unit?.id} />
      </Flex>
    </Stack>
  );
};

export default BookingClientPage;