"use client"
import { useRouter } from "next/navigation"
import { useIntl } from "react-intl"

import { DiamondIcon, EditIcon } from "@/components/Icons"
import MembershipLevelIcon from "@/components/Levels/Icon"
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 styles from "./room.module.css"

import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
import type { User } from "@/types/user"

interface GuestDetailsProps {
  user: User | null
  booking: BookingConfirmation["booking"]
  isMobile?: boolean
}

export default function GuestDetails({
  user,
  booking,
  isMobile = false,
}: GuestDetailsProps) {
  const intl = useIntl()
  const lang = useLang()
  const router = useRouter()
  const containerClass = isMobile
    ? styles.guestDetailsMobile
    : styles.guestDetailsDesktop

  const isMemberBooking =
    booking.guest.membershipNumber === user?.membership?.membershipNumber

  function handleModifyGuestDetails() {
    if (isMemberBooking) {
      const expirationTime = Date.now() + 10 * 60 * 1000
      localStorage.setItem(
        "myStayReturnRoute",
        JSON.stringify({
          path: window.location.pathname,
          expiry: expirationTime,
        })
      )
      router.push(`/${lang}/scandic-friends/my-pages/profile/edit`)
    } else {
      console.log("not a member booking") // TODO: Implement non-member booking
    }
  }

  return (
    <div className={containerClass}>
      {isMemberBooking && (
        <div className={styles.userDetails}>
          <div className={styles.row}>
            <div className={styles.rowTitle}>
              <Caption
                type="bold"
                color="burgundy"
                textTransform="uppercase"
                textAlign="center"
              >
                {intl.formatMessage({ id: "Your member tier" })}
              </Caption>
            </div>
            <MembershipLevelIcon
              level={user.membership!.membershipLevel}
              color="red"
              height={isMobile ? "40" : "20"}
              width={isMobile ? "80" : "40"}
            />
          </div>
          <div className={styles.totalPoints}>
            {isMobile && (
              <div className={styles.totalPointsIcon}>
                <DiamondIcon color="uiTextHighContrast" />
              </div>
            )}
            <Caption
              type="bold"
              color="uiTextHighContrast"
              textTransform="uppercase"
            >
              {intl.formatMessage({ id: "Total points" })}
            </Caption>

            <Body color="uiTextHighContrast" className={styles.totalPointsText}>
              {user.membership!.currentPoints}
            </Body>
          </div>
        </div>
      )}
      <div className={styles.guest}>
        <Body textTransform="bold" color="uiTextHighContrast">
          {booking.guest.firstName} {booking.guest.lastName}
        </Body>
        {isMemberBooking && (
          <Body color="uiTextHighContrast">
            {intl.formatMessage({ id: "Member no." })}{" "}
            {user.membership!.membershipNumber}
          </Body>
        )}
        <Caption color="uiTextHighContrast">{booking.guest.email}</Caption>
        <Caption color="uiTextHighContrast">
          {booking.guest.phoneNumber}
        </Caption>
      </div>
      <Button
        variant="icon"
        color="burgundy"
        intent={isMobile ? "secondary" : "text"}
        onClick={handleModifyGuestDetails}
      >
        <EditIcon color="burgundy" width={20} height={20} />
        <Caption color="burgundy">
          {intl.formatMessage({ id: "Modify guest details" })}
        </Caption>
      </Button>
    </div>
  )
}
