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

import { dt } from "@/lib/dt"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

import { PriceTagIcon } from "@/components/Icons"
import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
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 "./priceDetailsModal.module.css"

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>
  )
}

export default function PriceDetailsModal() {
  const intl = useIntl()
  const lang = useLang()
  const { rooms, currencyCode, vat, fromDate, toDate, bookingCode } =
    useBookingConfirmationStore((state) => ({
      rooms: state.rooms,
      currencyCode: state.currencyCode,
      vat: state.vat,
      fromDate: state.fromDate,
      toDate: state.toDate,
      bookingCode: state.bookingCode,
    }))

  if (!rooms[0]) {
    return null
  }

  const bookingTotal = rooms.reduce(
    (acc, room) => {
      if (room) {
        return {
          price: acc.price + room.totalPrice,
          priceExVat: acc.priceExVat + room.totalPriceExVat,
          vatAmount: acc.vatAmount + room.vatAmount,
        }
      }
      return acc
    },
    { price: 0, priceExVat: 0, vatAmount: 0 }
  )

  const diff = dt(toDate).diff(fromDate, "days")
  const nights = intl.formatMessage(
    { id: "{totalNights, plural, one {# night} other {# nights}}" },
    { totalNights: diff }
  )

  const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
          -
          ${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`
  return (
    <Modal
      title={intl.formatMessage({ id: "Price details" })}
      trigger={
        <Button intent="text">
          <Caption color="burgundy">
            {intl.formatMessage({ id: "Price details" })}
          </Caption>
          <ChevronRightSmallIcon color="burgundy" height="20px" width="20px" />
        </Button>
      }
    >
      <table className={styles.priceDetailsTable}>
        {rooms.map((room, idx) => {
          return room ? (
            <React.Fragment key={idx}>
              <TableSection>
                {rooms.length > 1 && (
                  <Body textTransform="bold">
                    {intl.formatMessage(
                      { id: "Room {roomIndex}" },
                      { roomIndex: idx + 1 }
                    )}
                  </Body>
                )}
                <TableSectionHeader title={room.name} subtitle={duration} />
                {room.roomFeatures
                  ? room.roomFeatures.map((feature) => (
                      <Row
                        key={feature.code}
                        label={feature.description}
                        value={formatPrice(
                          intl,
                          feature.totalPrice,
                          currencyCode
                        )}
                      />
                    ))
                  : null}
                {room.bedDescription ? (
                  <Row
                    label={room.bedDescription}
                    value={formatPrice(intl, 0, currencyCode)}
                  />
                ) : null}
                <Row
                  bold
                  label={intl.formatMessage({ id: "Room charge" })}
                  value={formatPrice(intl, room.roomPrice, currencyCode)}
                />
              </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,
                      room.breakfast.unitPrice * room.adults,
                      currencyCode
                    )}
                  />
                  {room.children ? (
                    <Row
                      label={intl.formatMessage(
                        {
                          id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
                        },
                        {
                          totalChildren: room.children,
                          totalBreakfasts: diff,
                        }
                      )}
                      value={formatPrice(intl, 0, currencyCode)}
                    />
                  ) : null}
                  <Row
                    bold
                    label={intl.formatMessage({
                      id: "Breakfast charge",
                    })}
                    value={formatPrice(
                      intl,
                      room.breakfast.totalPrice * room.adults,
                      currencyCode
                    )}
                  />
                </TableSection>
              ) : null}
            </React.Fragment>
          ) : null
        })}
        <TableSection>
          <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
          <Row
            label={intl.formatMessage({ id: "Price excluding VAT" })}
            value={formatPrice(intl, bookingTotal.priceExVat, currencyCode)}
          />
          <Row
            label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
            value={formatPrice(intl, bookingTotal.vatAmount, currencyCode)}
          />
          <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, bookingTotal.price, currencyCode)}
              </Body>
            </td>
          </tr>
          {bookingCode && (
            <tr className={styles.row}>
              <td>
                <PriceTagIcon />
                {bookingCode}
              </td>
              <td></td>
            </tr>
          )}
        </TableSection>
      </table>
    </Modal>
  )
}
