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

import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import IconChip from "@/components/TempDesignSystem/IconChip"
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,
  bold,
}: {
  title: string
  subtitle?: string
  bold?: boolean
}) {
  const typographyVariant = bold
    ? "Body/Paragraph/mdBold"
    : "Body/Paragraph/mdRegular"
  return (
    <tr>
      <th colSpan={2} align="left">
        <Typography variant={typographyVariant}>
          <p>{title}</p>
        </Typography>
        {subtitle ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p>{subtitle}</p>
          </Typography>
        ) : null}
      </th>
    </tr>
  )
}

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

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

  const checkInDate = dt(fromDate).format("YYYY-MM-DD")
  const checkOutDate = dt(toDate).format("YYYY-MM-DD")

  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(checkOutDate).diff(checkInDate, "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>
          <MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
        </Button>
      }
    >
      <table className={styles.priceDetailsTable}>
        {rooms.map((room, idx) => {
          return room ? (
            <React.Fragment key={idx}>
              <TableSection>
                {rooms.length > 1 && (
                  <TableSectionHeader
                    title={intl.formatMessage(
                      { id: "Room {roomIndex}" },
                      { roomIndex: idx + 1 }
                    )}
                    bold
                  />
                )}
                <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={room.formattedRoomCost}
                />
              </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.childrenAges?.length ? (
                    <Row
                      label={intl.formatMessage(
                        {
                          id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
                        },
                        {
                          totalChildren: room.childrenAges.length,
                          totalBreakfasts: diff,
                        }
                      )}
                      value={formatPrice(intl, 0, currencyCode)}
                    />
                  ) : null}
                  <Row
                    bold
                    label={intl.formatMessage({
                      id: "Breakfast charge",
                    })}
                    value={formatPrice(
                      intl,
                      room.breakfast.totalPrice,
                      currencyCode
                    )}
                  />
                </TableSection>
              ) : null}
            </React.Fragment>
          ) : null
        })}
        <TableSection>
          <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
          {isVatCurrency ? (
            <>
              <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)}
              />
            </>
          ) : null}
          <tr className={styles.row}>
            <td>
              <Typography variant="Body/Paragraph/mdBold">
                <span>{intl.formatMessage({ id: "Price including VAT" })}</span>
              </Typography>
            </td>
            <td className={styles.price}>
              <Typography variant="Body/Paragraph/mdBold">
                <span>{formattedTotalCost}</span>
              </Typography>
            </td>
          </tr>
          {bookingCode && (
            <tr className={styles.row}>
              <td colSpan={2} align="left">
                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <IconChip
                    color="blue"
                    icon={<DiscountIcon color="Icon/Feedback/Information" />}
                  >
                    {intl.formatMessage(
                      { id: "<strong>Booking code</strong>: {value}" },
                      {
                        value: bookingCode,
                        strong: (text) => (
                          <Typography variant="Body/Supporting text (caption)/smBold">
                            <strong>{text}</strong>
                          </Typography>
                        ),
                      }
                    )}
                  </IconChip>
                </Typography>
              </td>
            </tr>
          )}
        </TableSection>
      </table>
    </Modal>
  )
}
