"use client"

import * as React from "react"
import { defaultUrlTransform, type UrlTransform } from "react-markdown"

import { useSignedUrl } from "@/hooks/use-signed-url"
import { normalizeS4ObjectUrl } from "@/lib/s4-url"
import { cn } from "@/lib/utils"
import { protectedImageProps } from "@/components/ui/protected-media"

type SignedMarkdownImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
  node?: unknown
}

export const storageMarkdownUrlTransform: UrlTransform = (url, key) => {
  // 保留所有 s4key: 媒体（图片/视频/音频）的 src，交由各自组件实时签名；
  // 否则 react-markdown 会把未知 scheme 的 s4key: 视为不安全而清空。
  if (key === "src" && normalizeS4ObjectUrl(url)) {
    return url
  }
  return defaultUrlTransform(url)
}

export const SignedMarkdownImage: React.FC<SignedMarkdownImageProps> = ({
  node,
  src,
  alt,
  className,
  loading,
  ...props
}) => {
  void node
  const rawSrc = typeof src === "string" ? src : undefined
  const normalizedStorageUrl = React.useMemo(() => normalizeS4ObjectUrl(rawSrc), [rawSrc])
  const effectiveSrc = normalizedStorageUrl ?? rawSrc
  const signedSrc = useSignedUrl(effectiveSrc)
  const isStorageImage = normalizedStorageUrl != null

  if (!effectiveSrc) return null

  if (isStorageImage && !signedSrc) {
    return (
      <span
        className={cn(
          "my-3 inline-flex min-h-28 w-full items-center justify-center rounded-lg border border-dashed border-border/70 bg-muted/40 px-4 py-6 text-sm text-muted-foreground",
          className,
        )}
        role="status"
      >
        图片加载中...
      </span>
    )
  }

  return (
    <img
      {...props}
      {...protectedImageProps}
      src={signedSrc ?? effectiveSrc}
      alt={alt ?? ""}
      loading={loading ?? "lazy"}
      className={cn(
        "my-3 max-w-full rounded-lg border border-border/60 shadow-sm",
        className,
      )}
    />
  )
}
