import { notFound } from "next/navigation"
import { Suspense } from "react"

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

import Breadcrumbs from "@/components/Breadcrumbs"
import Image from "@/components/Image"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

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

interface ReviewsSubpageProps {
  hotel: Hotel
}

export default async function ReviewsSubpage({ hotel }: ReviewsSubpageProps) {
  const intl = await getIntl()
  const lang = await getLang()
  const tripAdvisorData = hotel.ratings?.tripAdvisor

  if (!tripAdvisorData?.reviews.widgetScriptEmbedUrlIframe) {
    notFound()
  }

  const awardsLogos = tripAdvisorData.awards
    .map((award) => ({
      imageUrl: award.images.small,
      altText: award.displayName,
    }))
    .filter((award) => !!award.imageUrl)
  const showNordicEcoLabel = !!hotel.hotelFacts?.ecoLabels.nordicEcoLabel

  return (
    <>
      <section className={styles.reviewsSubpage}>
        <Suspense
          fallback={
            <BreadcrumbsSkeleton
              size="contentWidth"
              color="Surface/Secondary/Default"
            />
          }
        >
          <Breadcrumbs
            subpageTitle={intl.formatMessage({
              defaultMessage: "Reviews",
            })}
            size="contentWidth"
            color="Surface/Secondary/Default"
          />
        </Suspense>
        <header className={styles.header}>
          <Typography variant="Title/md">
            <h1 className={styles.heading}>{hotel.name}</h1>
          </Typography>
          <Typography variant="Title/Subtitle/md">
            <p className={styles.subheading}>
              {intl.formatMessage({
                defaultMessage: "Ratings and reviews",
              })}
            </p>
          </Typography>
        </header>

        <div className={styles.contentContainer}>
          <aside className={styles.sidebar}>
            <Typography variant="Title/xs">
              <h2 className={styles.sidebarHeading}>
                {intl.formatMessage({
                  defaultMessage: "Awards and certifications",
                })}
              </h2>
            </Typography>
            <div className={styles.sidebarContent}>
              {showNordicEcoLabel ? (
                <Image
                  src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
                  alt={intl.formatMessage({
                    defaultMessage: "Nordic Swan Ecolabel",
                  })}
                  className={styles.logo}
                  height={100}
                  width={100}
                />
              ) : null}
              {awardsLogos?.map((award) => (
                <Image
                  src={award.imageUrl}
                  alt={award.altText}
                  className={styles.logo}
                  width={100}
                  height={100}
                  key={award.imageUrl}
                />
              ))}
            </div>
          </aside>
          <main className={styles.mainContent}>
            <iframe
              className={styles.iframe}
              src={tripAdvisorData.reviews.widgetScriptEmbedUrlIframe}
              loading="lazy"
              title={intl.formatMessage(
                {
                  defaultMessage: "Ratings and reviews for {hotelName}",
                },
                {
                  hotelName: hotel.name,
                }
              )}
            />
          </main>
        </div>
      </section>
    </>
  )
}
