"use client"

import { useIntl } from "react-intl"

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

import { trackMyStayPageLink } from "@/utils/tracking"

import SummaryCard from "./SummaryCard"

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

import type { Hotel } from "@scandic-hotels/trpc/types/hotel"

interface BookingSummaryProps {
  hotel: Hotel
  hotelUrl: string | null
}

export default function BookingSummary({
  hotel,
  hotelUrl,
}: BookingSummaryProps) {
  const intl = useIntl()

  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
    `${hotel.name}, ${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`
  )}`

  const directionsLinkObject = {
    href: directionsUrl,
    text: intl.formatMessage({
      id: "common.directions",
      defaultMessage: "Directions",
    }),
    icon: (
      <MaterialIcon
        icon="directions"
        size={20}
        color="Icon/Interactive/Default"
      />
    ),
    onClick: () => trackMyStayPageLink("see on map"),
  }

  const emailLinkObject = {
    href: `mailto:${hotel.contactInformation.email}`,
    text: intl.formatMessage({
      id: "common.email",
      defaultMessage: "Email",
    }),
    icon: (
      <MaterialIcon icon="mail" size={20} color="Icon/Interactive/Default" />
    ),
    onClick: () => trackMyStayPageLink("email us"),
  }

  const hotelLinkObject = {
    href: hotelUrl || "",
    text: intl.formatMessage({
      id: "myStay.bookingSummary.homepage",
      defaultMessage: "Homepage",
    }),
    icon: (
      <MaterialIcon icon="link" size={20} color="Icon/Interactive/Default" />
    ),
    onClick: () => trackMyStayPageLink("hotel homepage"),
  }

  const links = [
    directionsLinkObject,
    emailLinkObject,
    ...(hotelUrl ? [hotelLinkObject] : []), // Only include hotel link if URL is provided
  ]
  return (
    <div className={styles.bookingSummary}>
      <Typography variant="Title/sm">
        <h2 className={styles.title}>
          {intl.formatMessage({
            id: "common.practicalInformation",
            defaultMessage: "Practical information",
          })}
        </h2>
      </Typography>
      <div className={styles.bookingSummaryContent}>
        <SummaryCard
          title={
            <Typography variant="Body/Paragraph/mdBold">
              <p>{hotel.name}</p>
            </Typography>
          }
          image={{
            src: "/_static/img/scandic-service.svg",
            alt: "Scandic service",
          }}
          texts={[
            hotel.address.streetAddress,
            `${hotel.address.zipCode} ${hotel.address.city}`,
          ]}
          supportingText={intl.formatMessage(
            {
              id: "myStay.bookingSummary.coordinates",
              defaultMessage: "Long {long} ∙ Lat {lat}",
            },
            {
              lat: hotel.location.latitude,
              long: hotel.location.longitude,
            }
          )}
          links={links}
        />
      </div>
      {hotel.specialAlerts.map((alert) => (
        <Alert
          key={alert.id}
          type={alert.type}
          heading={alert.heading}
          text={alert.text}
        />
      ))}
    </div>
  )
}