"use client"

import React from "react"
import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"

import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"

import styles from "./priceDetailsTable.module.css"

import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
import type { RoomPrice } from "@/types/components/hotelReservation/enterDetails/details"
import type { Price } from "@/types/components/hotelReservation/price"
import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"

function Row({
  label,
  value,
  bold,
}: {
  label: string
  value: string
  bold?: boolean
}) {
  return (
    <tr className={styles.row}>
      <td>
        <Caption type={bold ? "bold" : undefined}>{label}</Caption>
      </td>
      <td className={styles.price}>
        <Caption type={bold ? "bold" : undefined}>{value}</Caption>
      </td>
    </tr>
  )
}

function TableSection({ children }: React.PropsWithChildren) {
  return <tbody className={styles.tableSection}>{children}</tbody>
}

function TableSectionHeader({
  title,
  subtitle,
}: {
  title: string
  subtitle?: string
}) {
  return (
    <tr>
      <th colSpan={2}>
        <Body>{title}</Body>
        {subtitle ? <Body>{subtitle}</Body> : null}
      </th>
    </tr>
  )
}

interface PriceDetailsTableProps {
  fromDate: string
  toDate: string
  rooms: {
    adults: number
    childrenInRoom: Child[] | undefined
    roomType: string
    roomPrice: RoomPrice
    bedType?: BedTypeSchema
    breakfast?: BreakfastPackage | false
  }[]
  totalPrice: Price
  vat: number
}

export default function PriceDetailsTable({
  fromDate,
  toDate,
  rooms,
  totalPrice,
  vat,
}: PriceDetailsTableProps) {
  const intl = useIntl()
  const lang = useLang()

  const diff = dt(toDate).diff(fromDate, "days")
  const nights = intl.formatMessage(
    { id: "{totalNights, plural, one {# night} other {# nights}}" },
    { totalNights: diff }
  )
  const vatPercentage = vat / 100
  const vatAmount = totalPrice.local.price * vatPercentage

  const priceExclVat = totalPrice.local.price - vatAmount

  const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
          -
          ${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`
  return (
    <table className={styles.priceDetailsTable}>
      {rooms.map((room, idx) => (
        <React.Fragment key={idx}>
          <TableSection>
            {rooms.length > 1 && (
              <Body textTransform="bold">
                {intl.formatMessage({ id: "Room" })} {idx + 1}
              </Body>
            )}
            <TableSectionHeader title={room.roomType} subtitle={duration} />
            <Row
              label={intl.formatMessage({ id: "Average price per night" })}
              value={formatPrice(
                intl,
                room.roomPrice.perNight.local.price,
                room.roomPrice.perNight.local.currency
              )}
            />
            {room.bedType ? (
              <Row
                label={room.bedType.description}
                value={formatPrice(
                  intl,
                  0,
                  room.roomPrice.perStay.local.currency
                )}
              />
            ) : null}
            <Row
              bold
              label={intl.formatMessage({ id: "Room charge" })}
              value={formatPrice(
                intl,
                room.roomPrice.perStay.local.price,
                room.roomPrice.perStay.local.currency
              )}
            />
          </TableSection>

          {room.breakfast ? (
            <TableSection>
              <Row
                label={intl.formatMessage(
                  {
                    id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
                  },
                  { totalAdults: room.adults, totalBreakfasts: diff }
                )}
                value={formatPrice(
                  intl,
                  parseInt(room.breakfast.localPrice.price),
                  room.breakfast.localPrice.currency
                )}
              />
              {room.childrenInRoom?.length ? (
                <Row
                  label={intl.formatMessage(
                    {
                      id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
                    },
                    {
                      totalChildren: room.childrenInRoom.length,
                      totalBreakfasts: diff,
                    }
                  )}
                  value={formatPrice(
                    intl,
                    0,
                    room.breakfast.localPrice.currency
                  )}
                />
              ) : null}
              <Row
                bold
                label={intl.formatMessage({
                  id: "Breakfast charge",
                })}
                value={formatPrice(
                  intl,
                  parseInt(room.breakfast.localPrice.totalPrice),
                  room.breakfast.localPrice.currency
                )}
              />
            </TableSection>
          ) : null}
        </React.Fragment>
      ))}
      <TableSection>
        <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
        <Row
          label={intl.formatMessage({ id: "Price excluding VAT" })}
          value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
        />
        <Row
          label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
          value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
        />
        <tr className={styles.row}>
          <td>
            <Body textTransform="bold">
              {intl.formatMessage({ id: "Price including VAT" })}
            </Body>
          </td>
          <td className={styles.price}>
            <Body textTransform="bold">
              {formatPrice(
                intl,
                totalPrice.local.price,
                totalPrice.local.currency
              )}
            </Body>
          </td>
        </tr>
      </TableSection>
    </table>
  )
}
