import { cx } from "class-variance-authority"

import { Divider } from "../Divider"
import { MaterialIcon } from "../Icons/MaterialIcon"
import Image from "../Image"
import ImageContainer from "../ImageContainer"
import Table from "../Table"
import { Typography } from "../Typography"

import {
  extractAvailableListClassNames,
  hasAvailableParagraphFormat,
} from "./utils"

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

import {
  DeprecatedImageVaultAssetResponse,
  ImageVaultAssetResponse,
  mapImageVaultAssetResponseToImageVaultAsset,
  mapInsertResponseToImageVaultAsset,
} from "@scandic-hotels/common/utils/imageVault"
import { Alert } from "../Alert"
import { TextLink } from "../TextLink"
import type { EmbedByUid } from "./JsonToHtml"
import type { Attributes } from "./types/rte/attrs"
import {
  AvailableParagraphFormatEnum,
  RTEItemTypeEnum,
  RTETypeEnum,
} from "./types/rte/enums"
import {
  type RTEDefaultNode,
  type RTEImageNode,
  RTEMarkType,
  type RTENext,
  type RTENode,
  type RTERegularNode,
  type RTETextNode,
} from "./types/rte/node"
import type { RenderOptions } from "./types/rte/option"

function noNestedLinksOrReferences(node: RTENode) {
  if ("type" in node) {
    if (node.type === RTETypeEnum.reference) {
      return node.children
    } else if (node.type === RTETypeEnum.a) {
      return node.children
    }
  }
  return node
}

function extractPossibleAttributes(attrs: Attributes | undefined) {
  if (!attrs) return {}
  const props: Record<string, unknown> & {
    className?: string
    style?: React.CSSProperties | undefined
  } = {}
  if (attrs.id) {
    props.id = attrs.id
  }

  if (attrs.class && typeof attrs.class === "string") {
    props.className = attrs.class
  } else if (attrs["class-name"]) {
    props.className = attrs["class-name"]
  } else if (attrs.classname && typeof attrs.classname === "string") {
    props.className = attrs.classname
  }

  if (attrs.style?.["text-align"]) {
    props.style = {
      textAlign: attrs.style["text-align"] as React.CSSProperties["textAlign"],
    }
  }

  return props
}

export const renderOptions: RenderOptions = {
  [RTETypeEnum.a]: (
    node: RTERegularNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    if (!node.attrs.url) {
      return
    }

    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <TextLink
        key={node.uid}
        className={className}
        {...props}
        href={typeof node.attrs.url === "string" ? node.attrs.url : ""}
        target={
          typeof node.attrs.target === "string" ? node.attrs.target : "_blank"
        }
        isInline
      >
        {next(
          // Sometimes editors happen to nest a reference inside a link and vice versa.
          // In that case use the outermost link, i.e. ignore nested links.
          node.children.flatMap(noNestedLinksOrReferences),
          embeds,
          fullRenderOptions
        )}
      </TextLink>
    )
  },

  [RTETypeEnum.blockquote]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/Decorative/lg">
        <blockquote className={cx(styles.blockquote, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </blockquote>
      </Typography>
    )
  },

  [RTETypeEnum.code]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <code key={node.uid} className={cx(styles.code, className)} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </code>
    )
  },

  [RTETypeEnum.embed]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    if (node.attrs.src) {
      props.src = node.attrs.src
    }
    if (node.attrs.url) {
      props.src = node.attrs.url
    }
    if (!props.src) {
      return null
    }
    return (
      <iframe
        key={node.uid}
        className={cx(styles.iframe, className)}
        {...props}
      >
        {next(node.children, embeds, fullRenderOptions)}
      </iframe>
    )
  },

  [RTETypeEnum.h1]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/lg">
        <h1 className={cx(styles.heading, styles.h1, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h1>
      </Typography>
    )
  },

  [RTETypeEnum.h2]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/md">
        <h2 className={cx(styles.heading, styles.h2, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h2>
      </Typography>
    )
  },

  [RTETypeEnum.h3]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/sm">
        <h3 className={cx(styles.heading, styles.h3, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h3>
      </Typography>
    )
  },

  [RTETypeEnum.h4]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/xs">
        <h4 className={cx(styles.heading, styles.h4, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h4>
      </Typography>
    )
  },

  [RTETypeEnum.h5]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <Typography key={node.uid} variant="Title/xs">
        <h5 className={cx(styles.heading, styles.h5, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </h5>
      </Typography>
    )
  },

  [RTETypeEnum.hr]: () => {
    return <Divider className={styles.divider} color="burgundy" />
  },

  [RTETypeEnum.li]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    const compatibleClassNames = extractAvailableListClassNames(className)
    return (
      <li
        key={node.uid}
        {...props}
        className={cx(styles.li, compatibleClassNames)}
      >
        <div>{next(node.children, embeds, fullRenderOptions)}</div>
      </li>
    )
  },

  [RTETypeEnum.ol]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    const compatibleClassNames = extractAvailableListClassNames(className)

    return (
      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
        <ol className={cx(styles.ol, compatibleClassNames)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </ol>
      </Typography>
    )
  },

  [RTETypeEnum.p]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)

    const hasFormat = node.children.some((item) =>
      hasAvailableParagraphFormat((item as RTETextNode)?.classname)
    )

    // If a child node has an available format as className, we wrap it in a
    // span and render the children with the correct component
    if (hasFormat) {
      return next(node.children, embeds, fullRenderOptions)
    }

    // Determine whether to use a div or p based on children.
    // Some children use div or sections as wrappers and these are
    // not allowed inside p tags.
    const Elem = node.children.some((child) => "children" in child)
      ? "div"
      : "p"

    return (
      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
        <Elem className={cx(styles.p, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </Elem>
      </Typography>
    )
  },

  [RTETypeEnum.span]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    let propsClassName = className

    if (className) {
      const availableClassNames = extractAvailableListClassNames(className)
      if (availableClassNames.length) {
        propsClassName = cx(availableClassNames)
      }
    }

    return (
      <span className={propsClassName} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </span>
    )
  },
  [RTETypeEnum.div]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    let propsClassName = className

    if (className) {
      const availableClassNames = extractAvailableListClassNames(className)
      if (availableClassNames.length) {
        propsClassName = cx(availableClassNames)
      }
    }

    return (
      <div className={cx(styles.div, propsClassName)} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </div>
    )
  },

  [RTETypeEnum.reference]: (
    node: RTENode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    if (!("attrs" in node)) {
      return null
    }

    const type = node.attrs.type
    if (type === RTEItemTypeEnum.asset) {
      const imageTypeRegex = /^image\//
      const isImage = imageTypeRegex.test(node.attrs["asset-type"] as string)
      if (isImage) {
        const image = embeds?.[node?.attrs?.["asset-uid"] as string]
        if (image?.node.__typename === "SysAsset") {
          if (image.node.url) {
            const alt = image?.node?.title ?? node.attrs.alt
            const { className, ...props } = extractPossibleAttributes(
              node.attrs
            )
            return (
              <div key={node.uid} className={styles.imageWrapper}>
                <Image
                  className={cx(styles.image, className)}
                  src={image.node.url}
                  alt={alt as string}
                  fill
                  sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
                  {...props}
                />
              </div>
            )
          }
        }
      } else if (node.attrs["display-type"] === "link") {
        const asset = embeds?.[node?.attrs?.["asset-uid"] as string]

        // Decision note 2026-01-07:
        // Content team sometimes updates assets without updating the RTE reference.
        // The `permanent_url` should be used on the asset in Contentstack.
        // If this is not provided, we should not render the link.
        const rawUrl =
          asset?.node && "permanent_url" in asset.node
            ? asset.node.permanent_url
            : null
        if (!rawUrl) {
          return null
        }

        const { className, ...props } = extractPossibleAttributes(node.attrs)

        const cleanUrl = rawUrl.split("?")[0]
        return (
          <TextLink
            key={node.uid}
            className={className}
            href={cleanUrl}
            target="_blank"
            isInline
            {...props}
          >
            {next(
              // Sometimes editors happen to nest a reference inside a link and vice versa.
              // In that case use the outermost link, i.e. ignore nested links.
              node.children.flatMap(noNestedLinksOrReferences),
              embeds,
              fullRenderOptions
            )}
            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
          </TextLink>
        )
      }
    }

    if (type === RTEItemTypeEnum.entry) {
      const entry = embeds?.[node?.attrs?.["entry-uid"] as string]

      if (entry?.node.__typename === "ImageContainer") {
        if (entry.node.image_left && entry.node.image_right) {
          return (
            <ImageContainer
              key={node.uid}
              leftImage={entry.node.image_left}
              rightImage={entry.node.image_right}
            />
          )
        }
        return null
      } else if (entry?.node.__typename === "Alert") {
        return <Alert key={node.uid} {...entry.node} />
      } else if (
        entry?.node.__typename === "AccountPage" ||
        entry?.node.__typename === "CampaignOverviewPage" ||
        entry?.node.__typename === "CampaignPage" ||
        entry?.node.__typename === "CollectionPage" ||
        entry?.node.__typename === "ContentPage" ||
        entry?.node.__typename === "DestinationCityPage" ||
        entry?.node.__typename === "DestinationCountryPage" ||
        entry?.node.__typename === "DestinationOverviewPage" ||
        entry?.node.__typename === "HotelPage" ||
        entry?.node.__typename === "LoyaltyPage" ||
        entry?.node.__typename === "StartPage"
      ) {
        // If entry is not an ImageContainer, it is a page and we return it as a link
        const { className, ...props } = extractPossibleAttributes(node.attrs)
        const entryHref = entry.node.url

        const nodeHref = node.attrs?.locale
          ? `/${node.attrs.locale}${node.attrs.href ?? node.attrs.url}`
          : ((node.attrs.href ?? node.attrs.url) as string)

        if (!entryHref && !nodeHref) {
          return null
        }

        return (
          <TextLink
            key={node.uid}
            className={className}
            {...props}
            href={entryHref ?? nodeHref}
            isInline
          >
            {next(
              // Sometimes editors happen to nest a reference inside a link and vice versa.
              // In that case use the outermost link, i.e. ignore nested links.
              node.children.flatMap(noNestedLinksOrReferences),
              embeds,
              fullRenderOptions
            )}
          </TextLink>
        )
      }
    }
  },

  [RTETypeEnum.ImageVault]: (node: RTEImageNode) => {
    const type = node.type
    if (!("attrs" in node) || type !== RTETypeEnum.ImageVault) {
      return null
    }

    let image = undefined
    if ("imageVaultId" in node.attrs && "fileName" in node.attrs) {
      image = mapImageVaultAssetResponseToImageVaultAsset(
        node.attrs as unknown as ImageVaultAssetResponse
      )
    }

    if ("Name" in node.attrs && "Id" in node.attrs) {
      image = mapInsertResponseToImageVaultAsset(
        node.attrs as unknown as DeprecatedImageVaultAssetResponse
      )
    }

    if (!image) {
      return null
    }

    const alt = image.meta.alt ?? image.title
    const caption = image.meta.caption
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <div key={node.uid} className={styles.imageWithCaption}>
        <div className={styles.imageWrapper}>
          <Image
            alt={alt}
            className={cx(styles.image, className)}
            src={image.url}
            fill
            sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
            focalPoint={image.focalPoint}
            dimensions={image.dimensions}
            {...props}
          />
        </div>
        {caption ? (
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p>{image.meta.caption}</p>
          </Typography>
        ) : null}
      </div>
    )
  },

  [RTETypeEnum.table]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    return (
      <div key={node.uid} className={styles.tableContainer}>
        <Table className={cx(styles.table, className)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </Table>
      </div>
    )
  },

  [RTETypeEnum.thead]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    // Override the styling of p tags inside the thead tag
    const theadChildPRenderOptions = {
      ...fullRenderOptions,
      [RTETypeEnum.p]: (
        node: RTEDefaultNode,
        embeds: EmbedByUid,
        next: RTENext,
        fullRenderOptions: RenderOptions
      ) => (
        <Typography variant="Body/Paragraph/mdBold">
          <span className={styles.theadContent}>
            {next(node.children, embeds, fullRenderOptions)}
          </span>
        </Typography>
      ),
    }
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.THead key={node.uid} {...props}>
        {next(node.children, embeds, theadChildPRenderOptions)}
      </Table.THead>
    )
  },

  [RTETypeEnum.tbody]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.TBody key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </Table.TBody>
    )
  },

  [RTETypeEnum.tfoot]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <tfoot key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </tfoot>
    )
  },

  [RTETypeEnum.fragment]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    return <>{next(node.children, embeds, fullRenderOptions)}</>
  },

  [RTETypeEnum.tr]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.TR key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </Table.TR>
    )
  },

  [RTETypeEnum.th]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.TH key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </Table.TH>
    )
  },

  [RTETypeEnum.td]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const props = extractPossibleAttributes(node.attrs)
    return (
      <Table.TD key={node.uid} {...props}>
        {next(node.children, embeds, fullRenderOptions)}
      </Table.TD>
    )
  },

  [RTETypeEnum.ul]: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    const { className, ...props } = extractPossibleAttributes(node.attrs)
    const compatibleClassNames = extractAvailableListClassNames(className)

    return (
      <Typography key={node.uid} variant="Body/Paragraph/mdRegular">
        <ul className={cx(styles.ul, compatibleClassNames)} {...props}>
          {next(node.children, embeds, fullRenderOptions)}
        </ul>
      </Typography>
    )
  },

  /** TextNode wrappers */
  [RTEMarkType.bold]: (children: React.ReactNode) => {
    return (
      <Typography variant="Body/Paragraph/mdBold">
        <strong>{children}</strong>
      </Typography>
    )
  },

  [RTEMarkType.italic]: (children: React.ReactNode) => {
    return <em>{children}</em>
  },

  [RTEMarkType.underline]: (children: React.ReactNode) => {
    return (
      <Typography variant="Body/Underline/md">
        <u>{children}</u>
      </Typography>
    )
  },

  [RTEMarkType.strikethrough]: (children: React.ReactNode) => {
    return <s>{children}</s>
  },

  [RTEMarkType.inlineCode]: (children: React.ReactNode) => {
    return <span>{children}</span>
  },

  [RTEMarkType.subscript]: (children: React.ReactNode) => {
    return <sub>{children}</sub>
  },

  [RTEMarkType.superscript]: (children: React.ReactNode) => {
    return <sup>{children}</sup>
  },

  [RTEMarkType.break]: (children: React.ReactNode) => {
    return (
      <>
        <br />
        {children}
      </>
    )
  },

  [RTEMarkType.classnameOrId]: (
    children: React.ReactNode,
    className?: string,
    id?: string
  ) => {
    const props = { id }
    let propsClassName = className

    if (!id) {
      delete props.id
    }

    if (className) {
      const availableClassNames = extractAvailableListClassNames(className)
      if (availableClassNames.length) {
        propsClassName = cx(availableClassNames)
      }
    }

    if (className === AvailableParagraphFormatEnum.footnote) {
      return (
        <Typography key={id} variant="Label/xsRegular">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum.caption) {
      return (
        <Typography key={id} variant="Body/Supporting text (caption)/smRegular">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum["script-1"]) {
      return (
        <Typography key={id} variant="Title/Decorative/lg">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum["script-2"]) {
      return (
        <Typography key={id} variant="Title/Decorative/md">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }

    if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
      return (
        <Typography key={id} variant="Title/Subtitle/lg">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }
    if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
      return (
        <Typography key={id} variant="Title/Subtitle/md">
          <p className={cx(styles.p, propsClassName)} {...props}>
            {children}
          </p>
        </Typography>
      )
    }
    return (
      <span className={propsClassName} {...props}>
        {children}
      </span>
    )
  },

  /**
   * Contentstack can return something called `default` as seen here in their
   * own SDK (https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/options/default-node-options.ts#L89)
   */
  default: (
    node: RTEDefaultNode,
    embeds: EmbedByUid,
    next: RTENext,
    fullRenderOptions: RenderOptions
  ) => {
    return next(node.children, embeds, fullRenderOptions)
  },
}