import type { CoreBookingUnitDetailed } from "@/lib/features/bookings/types";
import { Flex, Grid, Text, TextInput } from "@mantine/core";
import { IconFileDescription } from "@tabler/icons-react";
import moment from "moment";
import AdditionalData from "./additionalData";

const v = (val: unknown) => (val === null || val === undefined ? "" : String(val));

const BookingDetails: React.FC<{ unit: CoreBookingUnitDetailed }> = ({
  unit,
}) => {
  return (
    <Flex direction={"column"} gap={28}>
      <Flex gap={4} align={"center"}>
        <IconFileDescription size={18} />
        <Text fz={14} fw={600}>
          Booking Details
        </Text>
      </Flex>
      <form>
        <Grid gutter={"lg"}>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Unit ID"
              radius={4}
              disabled
              value={v(unit?.id)}
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Unit Name"
              radius={4}
              disabled
              value={v(unit?.unit_name)}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Check In Date"
              radius={4}
              disabled
              value={moment(unit?.check_in_date).format("YYYY-MM-DD")}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Check Out Date"
              radius={4}
              disabled
              value={moment(unit.check_out_date).format("YYYY-MM-DD")}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Duration"
              radius={4}
              disabled
              value={calculateTotalNights({
                checkIn: new Date(unit.check_in_date),
                checkOut: new Date(unit.check_out_date),
              })}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Adult"
              radius={4}
              disabled
              value={unit.adults}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Children"
              radius={4}
              disabled
              value={unit.children}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Infant"
              radius={4}
              disabled
              value={unit.infants}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Hold Start Date and Time"
              radius={4}
              disabled
              value={unit.hold_start}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Hold Source"
              radius={4}
              disabled
              value={unit?.hold_source}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Hold End Date and Time"
              radius={4}
              disabled
              value={unit?.hold_end ?? ""}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Hold Complete Date and Time"
              radius={4}
              disabled
              value={unit?.completed_at ?? ""}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Hold Complete Source"
              radius={4}
              disabled
              value={unit?.complete_source ?? ""}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Hold Expires At"
              radius={4}
              disabled
              value={unit?.hold_expiration}
            />
          </Grid.Col>
          <Grid.Col span={12}>
            <AdditionalData additionData={unit.additional_data} />
          </Grid.Col>
        </Grid>
      </form>
    </Flex>
  );
};

export default BookingDetails;

const calculateTotalNights = ({
  checkIn,
  checkOut,
}: {
  checkIn: Date;
  checkOut: Date;
}) => {
  if (!checkIn || !checkOut) return 0;

  const diffMs = checkOut.getTime() - checkIn.getTime();
  const nights = diffMs / (1000 * 60 * 60 * 24);

  return Math.max(0, Math.floor(nights));
};