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

import { env } from "@/env/server"
import { getProfile } from "@/lib/trpc/memoizedRequests"

import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigger"
import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCard/Alert"
import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header/Deprecated"
import SectionLink from "@/components/Section/Link"
import { getIntl } from "@/i18n"

import Hero from "./Friend/Hero"
import MembershipNumber from "./Friend/MembershipNumber"
import Friend from "./Friend"
import MembershipOverviewCard from "./MembershipOverviewCard"
import Stats from "./Stats"
import UserBaseInfo from "./UserBaseInfo"

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

import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"

export default async function Overview({
  link,
  subtitle,
  title,
}: AccountPageComponentProps) {
  const intl = await getIntl()
  const user = await getProfile()
  if (!user || "error" in user) {
    return null
  }

  return (
    <Section>
      {env.ENABLE_DTMC ? <DigitalTeamMemberCardAlert /> : null}
      <SectionHeader
        link={link}
        preamble={subtitle}
        title={title}
        headingAs="h3"
        headingLevel="h1"
      />
      <DigitalTeamMemberCard user={user}>
        <TeamMemberCardTrigger
          className={styles.teamMemberCardButton}
          variant="Tertiary"
          color="Primary"
          typography="Body/Paragraph/mdBold"
        >
          <>
            <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
            {intl.formatMessage({
              id: "dtmc.showTeamMemberCard",
              defaultMessage: "Show Team Member Card",
            })}
          </>
        </TeamMemberCardTrigger>
      </DigitalTeamMemberCard>
      {env.ENABLE_NEW_OVERVIEW_SECTION ? (
        <>
          <UserBaseInfo user={user} />
          <div className={styles.membershipCardsContainer}>
            <MembershipOverviewCard user={user} />
            <LevelProgressCard user={user} />
          </div>
        </>
      ) : (
        <Hero color="red">
          <Friend membership={user.membership} name={user.name}>
            <MembershipNumber color="burgundy" membership={user.membership} />
          </Friend>
          <Divider className={styles.divider} color="peach" />
          <Stats user={user} />
        </Hero>
      )}

      <SectionLink link={link} variant="mobile" />
    </Section>
  )
}