import BookingStatus from "@/components/blocks/BookingStatus/bookingStatus";
import { BuildTable } from "@/components/blocks/Table/table";
import type { CoreBookingUnit } from "@/lib/features/bookings/types";
import { Button, Flex, Group, Stack, Text } from "@mantine/core";
import type { MRT_ColumnDef, MRT_RowData } from "mantine-react-table";
import moment from "moment";
import { useNavigate, useSearchParams } from "react-router";

const BookingsClientPage: React.FC<{
  tableProps: { data: CoreBookingUnit[]; totalRows: number };
}> = ({ tableProps: { data, totalRows } }) => {
  const [searchParams] = useSearchParams();
  const tab = searchParams.get("tab") ?? "internal";
  const navigate = useNavigate();
  const handleRowClick = (rowData: MRT_RowData) => {
    const row = rowData as CoreBookingUnit;
    navigate(`${row.booking_id}?unit=${row.id}`);
  };
  const handleCreateBooking = () => {
    navigate("create");
  };
  return (
    <Stack>
      {tab === "external" && (
        <Flex justify={"flex-end"} mb={16}>
          <Group>
            <Button onClick={handleCreateBooking}>Create Booking</Button>
          </Group>
        </Flex>
      )}
      {data.length > 0 ? (
        <BuildTable
          data={data}
          columns={columns}
          totalRows={totalRows}
          onRowClick={handleRowClick}
        />
      ) : (
        <Flex justify={"center"} align={"center"} py={50}>
          <Text fz={"h2"} fw={"bold"} ta={"center"}>
            No Bookings Available
          </Text>
        </Flex>
      )}
    </Stack>
  );
};

export default BookingsClientPage;

const columns: MRT_ColumnDef<CoreBookingUnit>[] = [
  {
    header: "Booking Id",
    accessorKey: "booking_id",
    minSize: 200,
  },
  {
    header: "Unit Id",
    accessorKey: "id",
    minSize: 200,
  },
  {
    header: "Booking Type",
    accessorFn: (row) => (
      <Text tt={"capitalize"} fz={12}>
        {row.entity_type.replaceAll("_", " ").toLowerCase()}
      </Text>
    ),
    minSize: 200,
  },
  {
    header: "Unit Name",
    accessorFn: (row) => row.unit_name ?? "NA",
    minSize: 200,
  },
  {
    header: "Check In",
    accessorFn: (row) => moment(row.check_in_date).format("YYYY-MM-DD"),
    minSize: 200,
  },
  {
    header: "Check Out",
    accessorFn: (row) => moment(row.check_out_date).format("YYYY-MM-DD"),
    minSize: 200,
  },
  {
    header: "Adult",
    accessorKey: "adults",
    minSize: 200,
  },
  {
    header: "Children",
    accessorKey: "children",
    minSize: 200,
  },
  {
    header: "Infants",
    accessorKey: "infants",
    minSize: 200,
  },
  {
    header: "Status",
    accessorFn: (row) => <BookingStatus status={row.status} />,
    minSize: 200,
  },
];