web/apps/scandic-web/components/MyPages/LevelProgressCard/ProgressLevelCard/index.tsx

"use client"

import { useIntl } from "react-intl"

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

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

import type { ProgressLevelCardProps } from "../types"

export default function ProgressLevelCard({
  pointsEarned,
  pointsToNextLevel,
  pointsNeededToKeepLevel,
}: ProgressLevelCardProps) {
  const intl = useIntl()

  // TODO: Awaiting proper UX/UI specs on missing point data scenarios.
  if (
    typeof pointsEarned !== "number" ||
    typeof pointsToNextLevel !== "number"
  ) {
    return null
  }

  const totalPointsForCurrentLevel = pointsEarned + pointsToNextLevel
  const progressPercentage = (pointsEarned / totalPointsForCurrentLevel) * 100

  // Calculate marker position (minimum threshold to keep current level)
  const markerPosition = pointsNeededToKeepLevel
    ? ((pointsEarned + pointsNeededToKeepLevel) / totalPointsForCurrentLevel) *
      100
    : null

  return (
    <div className={styles.card}>
      <div className={styles.statsContainer}>
        <div className={styles.statItem}>
          <Typography variant="Title/Overline/sm">
            <span className={styles.label}>
              {intl.formatMessage({
                defaultMessage: "Points Earned",
              })}
            </span>
          </Typography>

          <Typography variant="Title/md">
            <span
              className={styles.value}
              aria-describedby="points-earned-desc"
            >
              {intl.formatNumber(pointsEarned)}
            </span>
          </Typography>
        </div>

        <div className={styles.statItem}>
          <Typography variant="Title/Overline/sm">
            <span className={styles.label}>
              {intl.formatMessage({
                defaultMessage: "Left to level up",
              })}
            </span>
          </Typography>

          <Typography variant="Title/md">
            <span
              className={styles.value}
              aria-describedby="points-remaining-desc"
            >
              {intl.formatNumber(pointsToNextLevel)}
            </span>
          </Typography>
        </div>
      </div>

      <div
        className={`${styles.progressSection} ${markerPosition !== null ? styles.hasMarker : ""}`}
      >
        <div className={styles.progressContainer}>
          <Progress
            value={progressPercentage}
            aria-label={intl.formatMessage(
              {
                defaultMessage:
                  "Level progress: {earned} of {total} points earned",
              },
              {
                earned: intl.formatNumber(pointsEarned),
                total: intl.formatNumber(totalPointsForCurrentLevel),
              }
            )}
          />

          {markerPosition !== null && pointsNeededToKeepLevel && (
            <div
              className={styles.levelMarker}
              style={{ left: `${markerPosition}%` }}
            >
              <div className={styles.markerPin} />
              <div className={styles.markerLine} />
            </div>
          )}
        </div>

        {markerPosition !== null && pointsNeededToKeepLevel && (
          <div className={styles.markerLabelContainer}>
            <span
              className={styles.markerLabel}
              style={
                { "--marker-pos": `${markerPosition}%` } as React.CSSProperties
              }
            >
              {intl.formatMessage(
                {
                  defaultMessage:
                    "{pointsAmount} <points>POINTS</points> <support>left to keep level</support>",
                },
                {
                  pointsAmount: (
                    <Typography variant="Title/Overline/sm">
                      <span>{intl.formatNumber(pointsNeededToKeepLevel)}</span>
                    </Typography>
                  ),
                  points: (str) => (
                    <Typography variant="Title/Overline/sm">
                      <span>{str}</span>
                    </Typography>
                  ),
                  support: (str) => (
                    <Typography variant="Body/Supporting text (caption)/smRegular">
                      <span>{str}</span>
                    </Typography>
                  ),
                }
              )}
            </span>
          </div>
        )}
      </div>
    </div>
  )
}