"use client"

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

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

import { customerService } from "@/constants/currentWebHrefs"
import { preliminaryReceipt } from "@/constants/routes/myStay"
import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"

import AddToCalendar from "@/components/HotelReservation/AddToCalendar"
import { generateDateTime } from "@/components/HotelReservation/BookingConfirmation/Header/Actions/helpers"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { trackMyStayPageLink } from "@/utils/tracking"

import AddToCalendarButton from "./Actions/AddToCalendarButton"
import {
  checkCancelable,
  checkCanDownloadInvoice,
  checkDateModifiable,
  checkGuaranteeable,
  isDatetimePast,
} from "./utils"

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

import type { EventAttributes } from "ics"

import type { Hotel } from "@/types/hotel"

interface ActionPanelProps {
  hotel: Hotel
}

export default function ActionPanel({ hotel }: ActionPanelProps) {
  const intl = useIntl()
  const lang = useLang()
  const {
    actions: { setActiveView },
  } = useManageStayStore()

  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
  const linkedReservationRooms = useMyStayRoomDetailsStore(
    (state) => state.linkedReservationRooms
  )

  const {
    confirmationNumber,
    checkInDate,
    checkOutDate,
    createDateTime,
    canChangeDate,
    isPrePaid,
    priceType,
  } = bookedRoom

  const datetimeIsInThePast = useMemo(
    () => isDatetimePast(checkInDate),
    [checkInDate]
  )

  const isDateModifyable = checkDateModifiable({
    canChangeDate,
    datetimeIsInThePast,
    isCancelled: bookedRoom.isCancelled,
    isPrePaid,
    isRewardNight: priceType === "points",
  })

  const isCancelable = checkCancelable({
    bookedRoom,
    linkedReservationRooms,
    datetimeIsInThePast,
  })

  const isGuaranteeable = checkGuaranteeable({
    bookedRoom,
    datetimeIsInThePast,
  })

  const canDownloadInvoice = checkCanDownloadInvoice({
    isCancelled: bookedRoom.isCancelled,
    isPrePaid,
  })

  const calendarEvent: EventAttributes = {
    busyStatus: "FREE",
    categories: ["booking", "hotel", "stay"],
    created: generateDateTime(createDateTime),
    description: hotel.hotelContent.texts.descriptions?.medium,
    end: generateDateTime(checkOutDate),
    endInputType: "utc",
    geo: {
      lat: hotel.location.latitude,
      lon: hotel.location.longitude,
    },
    location: `${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city} ${hotel.address.country}`,
    start: generateDateTime(checkInDate),
    startInputType: "utc",
    status: "CONFIRMED",
    title: hotel.name,
    url: hotel.contactInformation.websiteUrl,
  }

  const handleModifyStay = () => {
    trackMyStayPageLink("modify dates")
    setActiveView("modifyStay")
  }

  const handleCancelStay = () => {
    trackMyStayPageLink("cancel booking")
    setActiveView("cancelStay")
  }

  const handleDownloadInvoice = () => {
    trackMyStayPageLink("download invoice")
  }

  const handleGuaranteeLateArrival = () => {
    trackMyStayPageLink("guarantee late arrival")
    setActiveView("guaranteeLateArrival")
  }

  const handleCustomerSupport = () => {
    trackMyStayPageLink("customer support")
  }

  return (
    <div className={styles.actionPanel}>
      <div className={styles.menu}>
        <Button
          variant="icon"
          onClick={handleModifyStay}
          intent="text"
          className={styles.button}
          disabled={!isDateModifyable}
        >
          {intl.formatMessage({ id: "Modify dates" })}
          <MaterialIcon icon="calendar_month" color="CurrentColor" />
        </Button>

        <Button
          variant="icon"
          onClick={handleGuaranteeLateArrival}
          intent="text"
          className={styles.button}
          disabled={!isGuaranteeable}
        >
          {intl.formatMessage({ id: "Guarantee late arrival" })}
          <MaterialIcon icon="credit_card" color="CurrentColor" />
        </Button>

        <AddToCalendar
          checkInDate={checkInDate}
          event={calendarEvent}
          hotelName={hotel.name}
          renderButton={(onPress) => (
            <AddToCalendarButton
              onPress={onPress}
              disabled={datetimeIsInThePast}
            />
          )}
        />
        {canDownloadInvoice ? (
          <Link
            href={preliminaryReceipt[lang]}
            target="_blank"
            keepSearchParams
            className={styles.actionLink}
            onClick={handleDownloadInvoice}
          >
            {intl.formatMessage({ id: "Download invoice" })}
            <MaterialIcon icon="download" color="CurrentColor" />
          </Link>
        ) : (
          <div className={styles.disabledLink}>
            <Typography variant="Body/Paragraph/mdBold">
              <p>{intl.formatMessage({ id: "Download invoice" })}</p>
            </Typography>

            <MaterialIcon icon="download" color="CurrentColor" />
          </div>
        )}

        <Button
          variant="icon"
          onClick={handleCancelStay}
          intent="text"
          className={styles.button}
          disabled={!isCancelable}
        >
          {intl.formatMessage({ id: "Cancel stay" })}
          <MaterialIcon icon="cancel" color="CurrentColor" />
        </Button>
      </div>
      <div className={styles.info}>
        <div>
          <span className={styles.tag}>
            {intl.formatMessage({ id: "Reference number" })}
          </span>
          <Subtitle color="burgundy" textAlign="right">
            {confirmationNumber}
          </Subtitle>
        </div>
        <div>
          <Body color="uiTextHighContrast" textAlign="right">
            {hotel.name}
          </Body>
          <Body color="uiTextHighContrast" textAlign="right">
            {hotel.address.streetAddress}
          </Body>
          <Body color="uiTextHighContrast" textAlign="right">
            {hotel.address.city}
          </Body>
          <Body color="uiTextHighContrast" asChild>
            <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
              {hotel.contactInformation.phoneNumber}
            </Link>
          </Body>
        </div>
        <Link
          href={customerService[lang]}
          variant="icon"
          className={styles.link}
          onClick={handleCustomerSupport}
        >
          <Caption color="burgundy">
            {intl.formatMessage({ id: "Customer support" })}
          </Caption>
          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
        </Link>
      </div>
    </div>
  )
}