"use client"
import Image from "next/image"

import JsonToHtml from "@/components/JsonToHtml"
import Link from "@/components/TempDesignSystem/Link"

import { ArrowRightIcon, ChevronDownIcon, CompareArrowsIcon } from "../Icons"
import SectionContainer from "../Section/Container"
import Button from "../TempDesignSystem/Button"
import Body from "../TempDesignSystem/Text/Body"
import Caption from "../TempDesignSystem/Text/Caption"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import Title from "../TempDesignSystem/Text/Title"

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

import type { ReactNode } from "react"

import type { SasTierComparison } from "@/types/trpc/routers/contentstack/partner"

type TierComparisonProps = {
  title?: string
  preamble?: string
  tierComparison: NonNullable<SasTierComparison>
}

export function SasTierComparison({
  title,
  preamble,
  tierComparison,
}: TierComparisonProps) {
  return (
    <SectionContainer className={styles.comparisonSection}>
      <div className={styles.header}>
        <Title level="h2">{title}</Title>
        {preamble && <p className={styles.preamble}>{preamble}</p>}
      </div>
      <div>
        <div className={styles.columnHeaders}>
          <Image
            alt="Scandic logo"
            height={46}
            src="/_static/img/scandic-logotype.svg"
            priority
            width={215}
          />
          <Image
            alt="SAS logo"
            height={46}
            src="/_static/img/sas/sas-logotype.svg"
            priority
            width={215}
          />
          <ColumnTitle>{tierComparison.scandic_column_title}</ColumnTitle>
          <ColumnTitle>{tierComparison.sas_column_title}</ColumnTitle>
        </div>
        <div className={styles.tierMatchList}>
          {tierComparison.tier_matches.map((tierMatch, i) => (
            <TierDetails key={i} tierMatch={tierMatch}>
              <JsonToHtml
                nodes={tierMatch.content.json?.children}
                embeds={[]}
                className={styles.htmlContent}
              />
            </TierDetails>
          ))}
        </div>
      </div>
      {tierComparison.cta?.href && (
        <Button theme="primaryLight" asChild className={styles.ctaButton}>
          <Link href={tierComparison.cta.href} color="white">
            {tierComparison.cta.title}
          </Link>
        </Button>
      )}
    </SectionContainer>
  )
}

type TierMatch = NonNullable<SasTierComparison>["tier_matches"][number]

function TierDetails({
  children,
  tierMatch,
}: {
  children: React.ReactNode
  tierMatch: TierMatch
}) {
  return (
    <details className={styles.tierDetails} name="sas-scandic-tier-match">
      <summary className={styles.tierSummary}>
        <div className={styles.tierTitles}>
          <Body className={styles.tierTitle}>
            {tierMatch.scandic_friends_tier_name}
          </Body>
          <div className={styles.comparisonIcon}>
            <CompareArrowsIcon width={16} height={16} />
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              position: "relative",
            }}
          >
            <Body className={styles.tierTitle}>
              {tierMatch.sas_eb_tier_name}
            </Body>
            <div className={styles.iconWrapper}>
              <ChevronDownIcon
                className={styles.chevron}
                color="burgundy"
                width={20}
                height={20}
              />
            </div>
          </div>
        </div>
      </summary>
      <div className={styles.tierContent}>
        <div className={styles.tierInfo}>
          <div className={styles.tierTitle}>
            <Subtitle color="burgundy">{tierMatch.title}</Subtitle>
          </div>
          <div>{children}</div>
        </div>
        {tierMatch.link?.href && (
          <ReadMoreLink href={tierMatch.link.href}>
            {tierMatch.link.title}
          </ReadMoreLink>
        )}
      </div>
    </details>
  )
}

function ReadMoreLink({
  href,
  children,
}: {
  href: string
  children: ReactNode
}) {
  return (
    <Link href={href} className={styles.link} weight="bold" color="burgundy">
      {children}
      <ArrowRightIcon color="burgundy" />
    </Link>
  )
}

function ColumnTitle({ children }: { children?: ReactNode }) {
  return (
    <div className={styles.columnTitle}>
      <Caption type="bold" asChild>
        <span>{children}</span>
      </Caption>
    </div>
  )
}
